/* =========================================================
   Nowspeed Post FAQs — structure + skin

   Skin values arrive as custom properties, declared per level
   on .post-faqs__items--parent / --child by level_css_vars()
   in PHP. Because the nested wrapper sits inside the parent
   item, it re-declares the same variable names and its subtree
   inherits the child values — so ONE set of rules skins both
   levels. Never add a --parent/--child suffix here.

   Variable names are derived mechanically from the option keys
   in style_schema(): item_spacing -> --ns-item-spacing,
   q_bg_hover -> --ns-q-bg-hover. Add a field to the schema and
   its variable exists automatically; just consume it below.

   SPECIFICITY: skin rules are prefixed .post-faqs.post-faqs
   (the class is deliberately doubled) so they land at (0,3,0)
   and survive theme button/typography rules. Structural rules
   themes don't fight over stay unprefixed. If you override any
   of this from ns-post-faqs-override.css, match the doubled
   prefix or you will lose the cascade.
   ========================================================= */

.post-faqs {
  margin: 1rem 0 3.5rem;
  padding-top: 1.5rem;
}

/* --ns-anim is set inline on the root by the shortcode. */
.post-faqs.post-faqs .post-faqs__heading {
  margin-bottom: 1.5rem;
}

/* ---------- Item flow ----------
   gap rather than margin-bottom on each item: no trailing space
   below the last item, and no margin-collapse surprises. */
.post-faqs.post-faqs .post-faqs__items {
  display: flex;
  flex-direction: column;
  gap: var(--ns-item-spacing, 16px);
  padding-left: var(--ns-indent, 0px);
  margin: 0;
  list-style: none;
}

.post-faqs.post-faqs .post-faqs__items--child {
  margin-top: 0.9rem;
}

/* ---------- Question button ----------
   Reset first: buttons do not inherit font-family, and themes
   routinely add text-transform / letter-spacing / box-shadow
   that would otherwise leak in. */
.post-faqs.post-faqs .post-faqs__question {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  margin: 0;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;

  font-family: inherit;
  font-size: var(--ns-q-font-size, 16px);
  font-weight: var(--ns-q-font-weight, 600);
  line-height: var(--ns-q-line-height, 1.2);
  color: var(--ns-q-text-color, #222222);
  background-color: var(--ns-q-bg-color, #f4f4f4);
  border: var(--ns-q-border-width, 1px) solid var(--ns-q-border-color, #cccccc);
  border-radius: var(--ns-q-border-radius, 4px);
  padding: var(--ns-q-padding-y, 10px) var(--ns-q-padding-x, 14px);

  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* :focus-visible rather than :focus — with plain :focus a mouse click leaves
   the button focused, so the hover colours stayed stuck on after the pointer
   moved away. */
.post-faqs.post-faqs .post-faqs__question:hover,
.post-faqs.post-faqs .post-faqs__question:focus-visible {
  background-color: var(--ns-q-bg-hover, #e9e9e9);
  color: var(--ns-q-text-hover-color, #222222);
  border-color: var(--ns-q-border-hover-color, #cccccc);
}

/* Owning the focus ring explicitly means sites stop having to hunt down and
   override the UA/theme default outline. */
.post-faqs.post-faqs .post-faqs__question:focus-visible {
  outline: var(--ns-q-focus-width, 2px)
           var(--ns-q-focus-style, solid)
           var(--ns-q-focus-color, #2271b1);
  outline-offset: var(--ns-q-focus-offset, 2px);
}

.post-faqs.post-faqs .post-faqs__question-text {
  flex: 1 1 auto;
  min-width: 0;
}

.post-faqs.post-faqs .post-faqs__icon {
  flex: 0 0 auto;
  display: inline-block;
  line-height: 1;
  font-weight: 300;
  color: var(--ns-icon-color, #222222);
  font-size: var(--ns-icon-size, 28px);
  transition: transform var(--ns-anim, 300ms) ease;
}

.post-faqs.post-faqs .post-faqs__question[aria-expanded="true"] .post-faqs__icon {
  transform: rotate(45deg);
}

/* ---------- Collapse mechanism ----------
   grid-template-rows 0fr -> 1fr animates height WITHOUT a measured pixel cap,
   so a nested accordion can grow inside an open parent without being clipped. */
.post-faqs__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ns-anim, 300ms) ease;
}

.post-faqs__answer--open {
  grid-template-rows: 1fr;
}

/* The single grid child must be able to collapse to zero. It carries NO
   padding/background itself — padding on the collapsing element would leak
   through as a sliver when closed. */
.post-faqs__answer > .post-faqs__answer-inner {
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

/* ---------- Answer body + always-visible description ----------
   The description is used when an item has nested FAQs; it shares the
   answer's skin. */
.post-faqs.post-faqs .post-faqs__answer-content,
.post-faqs.post-faqs .post-faqs__description {
  box-sizing: border-box;
  background-color: var(--ns-a-bg-color, #ffffff);
  color: var(--ns-a-text-color, #333333);
  font-size: var(--ns-a-font-size, 16px);
  line-height: var(--ns-a-line-height, 1.5);
  padding: var(--ns-a-padding, 16px);
}

.post-faqs.post-faqs .post-faqs__description {
  margin-top: 0.5rem;
}

/* WYSIWYG content will not inherit the box's typography if the theme styles
   these elements directly — a matching rule always beats an inherited value,
   however weak the rule. Force inheritance explicitly.
   :is() takes the specificity of its most specific argument (an element,
   0-0-1), so this lands at (0,3,1) and clears .entry-content p and friends.
   Headings are excluded on purpose — flattening them to the body size would
   be wrong. So are links: they keep the theme's link colour. */
.post-faqs.post-faqs .post-faqs__answer-content :is(p, li, dd, dt, td, th, blockquote, figcaption),
.post-faqs.post-faqs .post-faqs__description :is(p, li, dd, dt, td, th, blockquote, figcaption) {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.post-faqs.post-faqs .post-faqs__answer-content > *:first-child,
.post-faqs.post-faqs .post-faqs__description > *:first-child {
  margin-top: 0;
}

.post-faqs.post-faqs .post-faqs__answer-content > *:last-child,
.post-faqs.post-faqs .post-faqs__description > *:last-child {
  margin-bottom: 0;
}

/* Reduced-motion: skip the animation entirely. */
@media (prefers-reduced-motion: reduce) {
  .post-faqs__answer,
  .post-faqs__icon {
    transition: none;
  }
}