/* =============================================================================
   faq.css — FAQ accordion component
   Mobile-first. Follows the 4px base spacing scale in tokens.css.

   Component ownership:
     .faq                — section wrapper
     .faq__group         — optional wrapper around a set of .faq__item's that
                           share one category (e.g. "About the Artworks") —
                           purely structural/spacing, no visual box of its own
     .faq__category       — category heading above a .faq__group's items —
                           16px Semibold White, same family as
                           .commission__heading (commission.css) for a
                           consistent heading vocabulary across the site
     .faq__item          — single accordion row (question + collapsible answer)
     .faq__trigger       — <button> row: question text left, chevron right
     .faq__question      — question label — 16px regular white — no hover effect
     .faq__icon          — chevron-down icon — rotates 180° smoothly when open
     .faq__answer        — collapsible answer panel — 14px regular gray-100
                           animates via max-height + opacity (no [hidden] in JS)
     .faq__divider       — 1px separator below each item, gray-300

   State:
     .faq__trigger[aria-expanded="true"] .faq__icon  — chevron rotated 180°
     .faq__answer.is-open                            — answer visible (JS toggles)

   Grouping (.faq__group / .faq__category) is purely a content-structure
   addition — js/faq.js queries `.faq__trigger` globally regardless of any
   wrapping group element, so accordion behavior (single item open at a
   time across the whole page, animation, aria-expanded sync) is completely
   unchanged whether items are grouped or not. A page with no .faq__group
   wrappers (none currently) renders exactly as before this was added.
   ============================================================================= */


/* ── Section wrapper ─────────────────────────────────────────────────────── */

.faq {
  width: 100%;
  margin-top: 0;                        /* no top gap by default — see the
                                            .page-main > .faq:first-child
                                            override directly below for the
                                            one context (pages/faqs.html)
                                            where .faq IS the page's first
                                            content element and needs its
                                            own top gap from the title. */
}

/* ── Title → first body text = 32px (excluding Collection and individual
 * Artwork pages) ─────────────────────────────────────────────────────────
 * Scoped to `.faq` only when it is the *first* child of `.page-main` —
 * true on pages/faqs.html, where the accordion is the page's only content
 * and sits directly below the title. NOT true on pages/commission.html,
 * where `.faq` is a later, mid-page section preceded by several
 * `.commission__section` blocks — that occurrence keeps relying on
 * `.commission__section`'s own `margin-bottom` for its position, entirely
 * unaffected by this rule. `.page-header--content` sets margin-bottom: 0
 * on the title's wrapper for this page, so this 32px is the entire,
 * explicit gap — not a collapsed sum with anything else.
 * ─────────────────────────────────────────────────────────────────────── */

.page-main > .faq:first-child {
  margin-top: var(--space-8);           /* 32px below the page title
                                            (desktop — .page-title has no
                                            reserved zone below it, so this
                                            margin IS the full visible gap) */
}

/* Mobile only: below 1024px the title sits inside .section-title-bar's
   fixed 72px zone (unchanged — matches Collection, kept exactly as-is),
   which centers the title and leaves ~21.6px of empty space below the
   title's own text before the zone's box ends. That reserved space is
   invisible but still counts toward the rendered title→heading distance,
   so the margin here is reduced to keep the visible gap at or under 32px.
   Only affects `.faq` when it's .page-main's first child (faqs.html) —
   commission.html's later, non-first `.faq` is untouched. */
@media (max-width: 1023px) {
  .page-main > .faq:first-child {
    margin-top: var(--space-2);         /* 8px — visible gap lands at ~29.6px */
  }
}


/* ── Category group (optional) ──────────────────────────────────────────────
 * Wraps one category's heading + its .faq__item's. Purely structural — no
 * background, border, or padding of its own. Only adds spacing BETWEEN
 * groups (not before the first one, so a page's first category sits
 * exactly where an ungrouped .faq__item would have).
 * ─────────────────────────────────────────────────────────────────────────── */

.faq__group {
  width: 100%;
}

.faq__group + .faq__group {
  margin-top: var(--space-12);          /* 48px between categories — clearly more than the 16px gap within a category */
}


/* ── Category heading ─────────────────────────────────────────────────────────
 * 16px Semibold White — same size as .faq__question (16px) but Semibold
 * instead of Regular, so it reads as a heading above the Regular-weight
 * questions beneath it without introducing a new type size. Matches
 * .commission__heading's own 16px Semibold White treatment (commission.css)
 * for a consistent heading vocabulary across the site.
 * ─────────────────────────────────────────────────────────────────────────── */

.faq__category {
  font-family: var(--font-family-base);
  font-size: 1rem;                      /* 16px */
  font-weight: 600;                     /* Semibold */
  color: var(--color-white);
  line-height: 1.5;
  text-align: left;
  margin: 0;
  margin-bottom: var(--space-2);        /* 8px — the first question's own 16px top padding (.faq__trigger) adds up to a comfortable 24px total gap */
}


/* ── Item ────────────────────────────────────────────────────────────────── */

.faq__item {
  width: 100%;
}


/* ── Trigger button ──────────────────────────────────────────────────────── */
/*
 * Full-width button. No hover color feedback — question text stays white
 * at all times. Only the cursor signals interactivity.
 */

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);                  /* 16px between text and icon */
  width: 100%;
  padding: var(--space-4) 0;            /* 16px top + bottom */
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

/* No hover rule — question text stays white, no opacity change */


/* ── Question text ───────────────────────────────────────────────────────── */

.faq__question {
  font-family: var(--font-family-base);
  font-size: 1rem;                      /* 16px */
  font-weight: 400;                     /* Regular */
  color: var(--color-white);
  line-height: 1.5;
  flex: 1;
}


/* ── Chevron icon ────────────────────────────────────────────────────────── */
/*
 * Starts pointing down (closed).
 * Rotates smoothly 180° (pointing up) when open.
 * transition duration matches the answer animation.
 */

.faq__icon {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform 300ms ease;
}

.faq__trigger[aria-expanded="true"] .faq__icon {
  transform: rotate(180deg);
}


/* ── Answer panel ────────────────────────────────────────────────────────── */
/*
 * Animates open/close via max-height + opacity.
 * JS adds/removes .is-open — no [hidden] attribute used.
 *
 * max-height is set high enough for any realistic answer length (≈ 5 lines).
 * The actual visible height is determined by the content.
 */

.faq__answer {
  font-family: var(--font-family-base);
  font-size: 0.875rem;                  /* 14px */
  font-weight: 400;                     /* Regular */
  color: var(--color-gray-100);         /* #B8B8B8 */
  line-height: 1.6;

  /* Collapsed state */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-bottom: 0;
  transition:
    max-height 300ms ease,
    opacity    250ms ease,
    padding-bottom 300ms ease;
}

.faq__answer.is-open {
  max-height: 240px;                    /* generous ceiling — content drives actual height */
  opacity: 1;
  padding-bottom: var(--space-4);       /* 16px below answer text, above divider */
}


/* ── Divider ─────────────────────────────────────────────────────────────── */

.faq__divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-gray-300); /* #858585 */
  border: none;
  margin: 0;
}