/**
 * Section: FAQ (grouped, with jump links)
 *
 * Ported in Phase 2 from _mockups/faq.html `.fq-layout` / `.fq-nav` /
 * `.fq-group` / `.fq-more`, with the two-column layout, the sticky jump-nav
 * column and the group-heading treatment harvested from the parked starter
 * `faqp`, which this replaces.
 *
 * THIS FILE DECLARES NO ACCORDION RULE, AND THIS IS THE CASE THE WHOLE RULE WAS
 * WRITTEN FOR.
 *
 * faq.html is page-head + faq-groups + cta-dark. There is no `faq` section on
 * that page, so inc/enqueue.php never enqueues assets/css/sections/faq.css
 * there. Keeping the shared accordion in faq.css and depending on it from here
 * would ship the site's own FAQ page with every <details> unstyled: no card, no
 * summary plus-to-cross rotation, no open-state gold border. Neither agent
 * could catch it alone, because each one's own page renders perfectly. So the
 * <details> card, the summary row, the marker and the open state are
 * `.pasia-accordion` in assets/css/components.css, which is enqueued
 * everywhere, and there is no `.pasia-accordion` selector below.
 * docs/pasia-section-inventory.md §0 and §F8.
 *
 * What is left is genuinely this section's: the two-column layout, the sticky
 * jump nav, the group headings and the cross-link row.
 *
 * CONTRAST, measured on the PASIA palette rather than assumed. The band is the
 * default mist page ground:
 *
 *   jump link          --ink-soft  #45524d  on --mist #f7f4ee    7.45:1
 *   jump link :hover   --forest    #0e4038  on --forest-tint-05
 *                                           over --mist          9.71:1
 *   "On this page"     --ink-faint #5f6b66  on --mist #f7f4ee    5.06:1
 *   group numeral      --gold-deep #7e622e  on --mist #f7f4ee    5.21:1
 *   group heading      --ink       #14231f  on --mist #f7f4ee   14.83:1
 *   cross-link label   --ink-faint #5f6b66  on --mist #f7f4ee    5.06:1
 *   .chip              --ink-soft  #45524d  on --paper #ffffff   8.18:1
 *   .chip:hover        --forest    #0e4038  on --paper #ffffff  11.61:1
 *
 * All clear WCAG AA for normal text. The group numeral is decoration and is
 * aria-hidden, so its heading carries the meaning either way; it still clears
 * AA because it is set at reading size beside the heading. --line on the jump
 * link's resting rule and --gold on its hover rule are edges, not text, and
 * hover is never the only signal: the colour and the ground change with it.
 *
 * Focus is the global ring in tokens.css, `:focus-visible` at --gold-deep with
 * a --gold-tint-20 halo. Nothing here sets `overflow` on the sticky column or
 * on the layout, so the ring is never clipped. AGENTS.md §7.
 *
 * No hardcoded font size anywhere, per inventory §A.3. Sticky and scroll offsets
 * use var(--header-h) and never the mock-up's 92px and 96px, per AGENTS.md §6.
 *
 * EVERY BARE PIXEL VALUE IN THIS FILE, enumerated rather than summarised,
 * because in this repo these headers are the audit trail and a header that
 * under-counts is why the next reader does not re-check:
 *
 *   216px          the nav column width
 *   gap: 2px       the space between jump links
 *   border-left    2px, the rule beside a jump link
 *   border         1.5px, the pill outline on the narrow layout
 *   border-top     1px, the hairline above the cross-link row
 *   860px          the layout breakpoint
 *
 * Six, not two. None is a colour, a font size or a spacing step, so none is a
 * rule 1 breach: they are component dimensions and hairlines with no token
 * behind them, which is the practice components.css already follows for
 * `.hcard`'s 60px avatar and `.pasia-accordion`'s 30px marker. If a border-width
 * or a breakpoint scale ever lands in tokens.css, this list is the work item.
 *
 * Tokens only otherwise, no literals, no colour that is not a token.
 */

/* ---------------------------------------------------------------------------
 * The two-column layout.
 *
 * `data-nav` is written by the renderer, not by a field. A jump list with one
 * destination is not navigation, so a single-group section drops the column and
 * goes to one column. Layout that follows the amount of content is derived in
 * the renderer: inventory §0, AGENTS.md §1.2.
 * ------------------------------------------------------------------------ */
.faq-groups-layout {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: clamp(var(--s-5), 4vw, var(--s-7));
  align-items: start;
}

.faq-groups-layout[data-nav="0"] {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------------------------------------------------------------------------
 * The sticky jump nav.
 *
 * `top` is var(--header-h) plus a gutter so the first link clears the sticky
 * header, never the mock-up's flat 92px. AGENTS.md §6.
 * ------------------------------------------------------------------------ */
.faq-groups-nav {
  position: sticky;
  top: calc(var(--header-h) + var(--s-4));
  display: grid;
  gap: 2px;
}

.faq-groups-nav .t {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s-2);
}

.faq-groups-nav a {
  display: block;
  padding: .45em .9em;
  border-left: 2px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: color var(--dur-fast) ease,
              border-color var(--dur-fast) ease,
              background-color var(--dur-fast) ease;
}

/* Hover and keyboard focus get the same treatment, so a link reached with the
   tab key reads the way a link reached with a pointer does. The global focus
   ring sits on top of it and is what actually announces focus. */
.faq-groups-nav a:hover,
.faq-groups-nav a:focus-visible {
  color: var(--forest);
  border-left-color: var(--gold);
  background: var(--forest-tint-05);
}

/* ---------------------------------------------------------------------------
 * The groups.
 *
 * Spacing is a `gap` on the column rather than the mock-up's
 * `.fq-group:last-of-type { margin-bottom: 0 }`. That selector does not do what
 * it looks like it does once the cross-link row is a sibling <div>: the last
 * <div> of its type is the cross-link row, so the rule matches nothing and the
 * last group keeps a margin the design meant to remove. A gap has no such
 * failure mode and produces the spacing the mock-up intended.
 * ------------------------------------------------------------------------ */
.faq-groups-main {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  min-width: 0;
}

.faq-group {
  scroll-margin-top: calc(var(--header-h) + var(--s-4));
}

.faq-group-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.faq-group-head .n {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-lg);
  color: var(--gold-deep);
}

.faq-group-head h2 {
  font-size: var(--text-xl);
}

/* ---------------------------------------------------------------------------
 * The cross-link row at the foot. `.chip` is the shared component in
 * components.css.
 * ------------------------------------------------------------------------ */
.faq-groups-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55em;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.faq-groups-more .t {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-faint);
  margin-right: .4em;
}

/* ---------------------------------------------------------------------------
 * Narrow: the nav stops being a column and becomes a row of pills above the
 * questions. It is still anchors, it still routes with JavaScript off, and it
 * is not a scroll container, so nothing clips a focus ring.
 * ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  .faq-groups-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq-groups-nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
  }

  .faq-groups-nav .t {
    width: 100%;
    margin-bottom: 0;
  }

  .faq-groups-nav a {
    border: 1.5px solid var(--line);
    border-radius: var(--r-pill);
    padding: .45em 1em;
  }

  .faq-groups-nav a:hover,
  .faq-groups-nav a:focus-visible {
    border-color: var(--pine);
  }
}