/**
 * FAQ groups.
 *
 * Ported from the `p-*` block in `_mockups/faqs.html`, with every class renamed
 * into the `faq-groups` namespace per AGENTS.md §2 – the mock-up's `.p-group`,
 * `.p-index` and `.p-count` would otherwise collide with the next page-scoped
 * block that reaches for the same words.
 *
 * The accordions themselves are `.acc` from pages.css §9 and the two chips are
 * `.tag--gold` and `.tag--red` from §11, so none of that is repeated here.
 *
 * A note on the literals below: 264px, 40px, 26px, 44px and 14px are the
 * mock-up's own values and no token carries them. They are structural sizes
 * rather than palette or scale values – a column that fits the longest group
 * name, two badge diameters, the WCAG tap-target floor and an icon – and they
 * are kept verbatim so the signed-off design does not drift. Everything with a
 * token behind it uses the token.
 */

/* ----------------------------------------------------------------
   Layout – the index rail beside the groups
   ---------------------------------------------------------------- */
.faq-groups__layout {
  max-width: var(--container-width);
  margin-inline: auto;
  display: grid;
  /* 264px fits "Requirements and documents" on one line beside its letter
     badge and its count. */
  grid-template-columns: 264px minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

/* Without this the grid track refuses to shrink below the width of the widest
   answer and the whole layout overflows. */
.faq-groups__groups {
  min-width: 0;
}

/* ----------------------------------------------------------------
   Sticky index. Plain anchors – it navigates with JavaScript off, and
   assets/js/sections/faq-groups.js only adds the .is-active highlight.
   ---------------------------------------------------------------- */
.faq-groups__index {
  position: sticky;
  inset-block-start: var(--sticky-offset);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.faq-groups__kicker {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-block-end: var(--s-1);
}

.faq-groups__audience {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-block: var(--s-2) 0.3rem;
}
/* Gold-derived, AA-safe on a light ground. `--gold` itself would not be. */
.faq-groups__audience--employer {
  color: var(--gold-deep);
  margin-block-start: var(--s-3);
}

.faq-groups__index a {
  display: flex;
  align-items: center;
  gap: 0.7em;
  min-height: 44px; /* WCAG tap-target floor, not a design value. */
  padding: 0.4em 0.8em;
  border-radius: var(--r-m);
  border: 1px solid transparent;
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--ink-soft);
  transition:
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    border-color var(--dur-fast) ease;
}
.faq-groups__index a:hover {
  background: var(--blue-tint-05);
  color: var(--blue);
}
/* Added by the scrollspy. Purely additive – the link works without it. */
.faq-groups__index a.is-active {
  background: var(--blue-tint-05);
  border-color: var(--blue-tint-20);
  color: var(--blue);
}

/* The letter badge. <i> rather than a class, exactly as the mock-up has it. */
.faq-groups__index i {
  font-style: normal;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.72rem;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blue-tint-10);
  color: var(--blue);
  flex: none;
}
.faq-groups__index a.is-active i {
  background: var(--blue);
  color: var(--white);
}

/* The per-group count. */
.faq-groups__index b {
  margin-inline-start: auto;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-faint);
  background: var(--cloud);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.05em 0.6em;
}

@media (max-width: 960px) {
  /* Breakpoint is a literal px because var() is invalid in a media query. */
  .faq-groups__layout {
    grid-template-columns: 1fr;
  }
  /* The hero's lettered jump chips carry in-page navigation at this width, and
     every group is still in document order below. */
  .faq-groups__index {
    display: none;
  }
}

/* ----------------------------------------------------------------
   Groups
   ---------------------------------------------------------------- */
.faq-groups__note-row {
  margin-block-end: var(--s-5);
}

.faq-groups__group {
  /* Clears the sticky header when a jump chip lands on a group. */
  scroll-margin-block-start: var(--sticky-offset);
  padding-block: var(--s-5) var(--s-6);
  border-block-start: 1px solid var(--line);
}
.faq-groups__group:last-of-type {
  padding-block-end: 0;
}

.faq-groups__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-block-end: var(--s-4);
}
.faq-groups__head h2 {
  font-size: var(--text-xl);
}

.faq-groups__letter {
  width: 40px;
  height: 40px;
  border-radius: var(--r-m);
  flex: none;
  background: var(--blue-tint-10);
  color: var(--blue);
  font-family: var(--display);
  font-weight: 800;
  display: grid;
  place-items: center;
}

.faq-groups__count {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-faint);
  background: var(--cloud);
  border: 1px solid var(--line);
  padding: 0.25em 0.8em;
  border-radius: var(--r-pill);
}

/* The standing note under a group heading, from the term description. */
.faq-groups__note {
  font-size: var(--text-s);
  color: var(--ink-soft);
  max-width: 62ch;
  margin-block: calc(var(--s-2) * -1) var(--s-4);
}

/* `.tag` sets no svg size, and the mock-up sized this one inline. */
.faq-groups__flag svg {
  width: 14px;
  height: 14px;
}

.faq-groups__group summary:hover {
  color: var(--blue);
}

/* Answers are a WYSIWYG field and several of them link out. The global reset
   strips link colour and underline, so an in-answer link needs the same
   treatment a `.prose` link gets. */
.faq-groups__group .body a {
  color: var(--blue);
  font-weight: 600;
  border-block-end: 1.5px solid var(--blue-tint-20);
  transition: border-color var(--dur-fast) ease;
}
.faq-groups__group .body a:hover {
  border-block-end-color: var(--blue);
}

/* ----------------------------------------------------------------
   The first group, drawn as a lead panel
   ---------------------------------------------------------------- */
.faq-groups__group--lead {
  margin-block-end: var(--s-5);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: linear-gradient(165deg, var(--blue-tint-05), var(--paper) 72%);
  border: 1px solid var(--blue-tint-20);
  border-inline-start: 4px solid var(--blue);
  border-radius: var(--r-card);
}
.faq-groups__group--lead > .tag {
  margin-block-end: var(--s-3);
}
.faq-groups__group--lead .faq-groups__letter {
  background: var(--blue);
  color: var(--white);
}

/* ----------------------------------------------------------------
   The audience switch, and the employer side beyond it
   ---------------------------------------------------------------- */
.faq-groups__switch {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-block-start: var(--s-6);
}
/* A dashed rule either side of the chip, drawn with a repeating gradient so it
   inherits the route-line language rather than a border style. */
.faq-groups__switch::before,
.faq-groups__switch::after {
  content: "";
  flex: 1;
  height: 2px;
  background-image: linear-gradient(90deg, var(--line) 55%, transparent 45%);
  background-size: 10px 2px;
}

/* The divider already separates the two sides, so the group it introduces does
   not also need a rule above it. Scoped to the adjacent sibling rather than to
   `--employer`, so a second employer group keeps its own separator. */
.faq-groups__switch + .faq-groups__group {
  border-block-start: none;
}
.faq-groups__group--employer .faq-groups__letter {
  background: var(--gold-tint-15);
  color: var(--gold-deep);
}