/*
  Frequently asked questions — the homepage section and /faq.

  One stylesheet for both, because the accordion is the same object in both places
  and the only differences are what surrounds it. index.html loads this after
  home.css; faq/index.html loads it alone.

  ── The list is a list ──────────────────────────────────────────────────────

  Rows separated by hairlines, full measure, no cards. Every other block of this
  site that could have been a card is not one — the benefits, the control
  principles, the network mechanisms — because the page separates with rules
  rather than with elevation, and eight bordered boxes in a column is the single
  most generic thing an FAQ can look like. What makes this read as premium is
  space and type, not containers.

  ── Desktop-first ───────────────────────────────────────────────────────────

  Like every other stylesheet here: the wide layout is the base and the narrow
  ones are overrides at the bottom.
*/

/* ═══ THE ACCORDION ══════════════════════════════════════════════════════ */

/*
  A hairline above every row and one below the last, so the list reads as a set of
  rows in a document rather than as eight separate objects. Borders on the item
  rather than on the summary: the rule has to stay put while the row underneath it
  grows, and a border on the summary would slide up the page as the answer opens.
*/
.faq-item {
  border-top: 1px solid var(--line);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--line);
}

/*
  The question. `list-style: none` plus the WebKit pseudo-element is what removes
  the native disclosure triangle — Safari needs both — and the marker is replaced
  by the one drawn on .faq-q-mark, which sits at the end of the row where it can
  be found in the same place on every row.

  Deliberately generous vertical padding. This is the control, so the whole row
  has to be a comfortable target, and 26px of it either side of a single line puts
  the row well past the 44px minimum without needing a min-height.
*/
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(22px, 2.2vw, 28px) 0;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) var(--ease);
}

.faq-q::-webkit-details-marker {
  display: none;
}

/*
  The site's own focus ring, moved onto the row. `:focus-visible` in base.css
  outlines the element it lands on, which for a <summary> is the whole row
  including its padding — that is the right thing here and it only needs the
  radius softened so a 900px-wide outline does not come to four sharp points.
*/
.faq-q:focus-visible {
  outline-offset: 4px;
  border-radius: var(--r-sm);
}

/*
  Display sans at reading-lead size, not at --t-h3. These are questions in a
  reader's own words and there are eight of them in a column: at heading size the
  column reads as eight headings, which is a table of contents. At lead size with
  a heavier weight it reads as a conversation, and the answers underneath stay
  clearly subordinate to it.
*/
.faq-q-text {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.35vw, 20px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.011em;
  color: var(--fg);
  /*
    Wide enough that every question here is one line, capped so that a longer one
    added later breaks on its own measure rather than running to the mark at the
    far end of a 1240px row. At 26em — the width it had while the list sat in a
    0.58 column — three of the eight wrapped for no reason once the rows took the
    whole shell.
  */
  max-width: 38em;
}

.faq-q:hover .faq-q-text {
  color: var(--fg-sub);
}

/*
  Plus becoming minus, drawn as two rules rather than swapped as a glyph.

  The estimator's advanced toggle does it with `content: '+'` → `'−'`, which is
  fine for a control nobody watches. Here the mark is the only moving part in the
  section and it is directly under the cursor when it moves, so it is two 1px
  bars: the vertical one rotates a quarter turn and fades as the row opens, which
  is one continuous movement instead of a substitution. Same 1px hairline
  vocabulary as the rules it sits between.

  `flex-shrink: 0` because the row is a flex container and a 26px box has no
  business being squeezed by a long question.
*/
.faq-q-mark {
  position: relative;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  transition: border-color var(--dur-fast) var(--ease);
}

.faq-q-mark::before,
.faq-q-mark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1px;
  margin: -0.5px 0 0 -5.5px;
  background: var(--fg);
  transition:
    transform var(--dur) var(--ease),
    opacity var(--dur-fast) var(--ease);
}

.faq-q-mark::after {
  transform: rotate(90deg);
}

.faq-item[open] .faq-q-mark::after {
  transform: rotate(0deg);
  opacity: 0;
}

.faq-q:hover .faq-q-mark,
.faq-item[open] .faq-q-mark {
  border-color: var(--fg);
}

/* ── The answer ───────────────────────────────────────────────────────── */

/*
  Indented to nothing and set at body measure. It is prose, and the one thing it
  must not do is line up with the question in the same weight — the question is
  the reader's, the answer is ours, and the tonal step between --fg and --fg-sub
  is what says so.

  No inset on the right. It used to carry one, to hold the copy clear of the column
  the mark occupies above it — worth having while the list sat in a 0.58 column and
  the two right edges were within 50px of each other. Now the rows run the whole
  shell and the measure stops the answer some 700px short of the mark, so the same
  padding only narrowed the prose to 495px for nothing.
*/
.faq-a {
  padding: 0 0 clamp(26px, 2.6vw, 34px);
  max-width: var(--measure);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--fg-sub);
}

.faq-a > * + * {
  margin-top: 14px;
}

/*
  The direct answer — Yes, No, You do — in ink and in the display face, one step
  up from the prose under it.

  It is the half of the answer a reader came for, and the reason the copy is
  written this way: somebody asking "is this really free" wants the word before
  the paragraph. Setting it in the body grey with the rest would bury the only
  part of the answer that resolves the doubt.
*/
.faq-verdict {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.011em;
  color: var(--fg);
}

/*
  The criteria lists, in as many columns as the width takes.

  Most of these are one or two words — cost, quality, speed, reliability, risk —
  and five of those stacked in a column is a very tall way to say very little.
  Packed into a grid they read as a set, which is what they are: the axes a
  supply chain is judged on, not five sequential points.
*/
.faq-points {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: 7px clamp(20px, 2.4vw, 34px);
  list-style: none;
}

.faq-points li {
  position: relative;
  padding-left: 16px;
  line-height: 1.5;
}

/* A dash rather than a dot. The page's mark for an item in a set is a rule. */
.faq-points li::before {
  content: '';
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 7px;
  height: 1px;
  background: var(--fg-faint);
}

/*
  A short fade-and-rise as the answer arrives.

  Not a height transition. A <details> cannot animate its own height without
  either JavaScript measuring it or CSS that only landed in browsers this year, and
  neither is worth having for a disclosure that is already instant — so the row
  opens at once and the copy inside it settles. It is the same move as the page's
  scroll reveal, at the same duration, which is why it does not read as a
  different kind of motion.
*/
@keyframes faq-answer {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
}

.faq-item[open] .faq-a {
  animation: faq-answer var(--dur) var(--ease) both;
}

/* ═══ THE HOMEPAGE SECTION ═══════════════════════════════════════════════ */

/*
  A head band: title and standfirst on the left, the way out on the right, the
  questions at full shell width below.

  `flex-end` rather than `start`, so the button sits on the last line of the
  standfirst instead of level with the top of a 54px headline. That is the only
  horizontal it can share with anything — the two blocks have different heights
  and no other edge in common — and without it the button floats in the white
  beside the H2 with nothing to align to.

  The rules underneath then start at the same y on both sides of the page, which
  is what makes the band read as one row rather than as two stacked objects.
*/
.faq-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 72px);
  margin-bottom: clamp(34px, 4vw, 56px);
}

/*
  Both take a measure in `em` of their own type, not a share of the row. The
  headline is three words a line at 13em and the sentence under it is one line
  short of the button — hold the pair to the left half of the band and the gap
  between them and the button stays white rather than becoming a 400px hyphen.
*/
.faq-intro h2 {
  max-width: 13em;
  margin-bottom: 20px;
}

.faq-intro .lead {
  max-width: 24em;
  margin-bottom: 0;
}

/*
  `flex-shrink: 0` because the label is one line and must stay one line: the row
  is a flex container, the button has `white-space: nowrap`, and a shrinking
  flex item with nowrap content overflows its own box rather than wrapping.

  The 2px lifts it off the standfirst's baseline onto its optical centre — a
  48px box and a 17px line share a bottom edge, not a middle.
*/
.faq-head-action {
  flex-shrink: 0;
  margin-bottom: 2px;
}

/*
  The arrow the label asks for, drawn here rather than stored in the copy — same
  reason as the hero's annotation: `content` never reaches the accessible name, so
  the link is announced as "View all FAQs" instead of "View all FAQs right arrow".
  Borrowed wholesale from `.link::after` in base.css, including the nudge on
  hover, so the two actions behave identically.
*/
.faq-more::after {
  content: '→';
  margin-left: 11px;
  /* Off, or the tracking pushes the glyph off its own baseline. */
  letter-spacing: 0;
  transition: transform var(--dur-fast) var(--ease);
}

.faq-more:hover::after,
.faq-more:focus-visible::after {
  transform: translateX(3px);
}

/* ═══ /faq ═══════════════════════════════════════════════════════════════ */

/*
  The same dark title band /suppliers opens on, down to the padding: the bar is
  fixed, so the top of the band has to clear it before anything is set in it.
*/
.faq-hero {
  padding: calc(var(--topbar-h) + clamp(56px, 8vh, 104px)) var(--gutter)
    clamp(56px, 7vh, 92px);
  background: var(--bg);
  color: var(--fg);
}

.faq-hero .eyebrow {
  margin-bottom: clamp(20px, 2.6vw, 30px);
}

.faq-hero h1 {
  font-size: var(--t-display);
  max-width: 18em;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}

/*
  Wider than the standard standfirst measure, for the same reason /suppliers' is:
  it is one long sentence under a three-word headline, and at --measure-lead it
  broke into five short rows beside an empty half of the page.
*/
.faq-hero .lead {
  max-width: 46em;
}

/* ── The categories ──────────────────────────────────────────────────── */

/*
  Numbered label left, questions right — the same split as the homepage section,
  repeated seven times, so a reader who has already met the pattern one page back
  recognises it immediately.

  A rule above every category but the first. Seven of these run down a single
  white screen and the hairline is what separates one subject from the next
  without giving each of them a heading band.
*/
.faq-cat {
  display: grid;
  grid-template-columns: minmax(0, 0.66fr) minmax(0, 1.34fr);
  gap: clamp(32px, 4vw, 84px);
  align-items: start;
}

.faq-cat + .faq-cat {
  margin-top: clamp(56px, 6vw, 96px);
  padding-top: clamp(56px, 6vw, 96px);
  border-top: 1px solid var(--line);
}

/* Sticky for the same reason the homepage's headline is. */
.faq-cat-head {
  position: sticky;
  top: calc(var(--topbar-h) + clamp(20px, 3vh, 48px));
}

/*
  The section number, in the mono voice every index on this site uses — process
  stages, benefits, analysis steps. It is what stops seven headings in a column
  from reading as seven unrelated pages.
*/
.faq-cat-index {
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--fg-faint);
}

/*
  h3 size, not h2. These are the page's structure rather than its argument, and at
  --t-h2 seven of them would each carry more weight than the <h1> they sit under.
*/
.faq-cat-head h2 {
  font-size: var(--t-h3);
  line-height: 1.25;
  max-width: 14em;
}

/* ── The closing CTA ─────────────────────────────────────────────────────── */

/*
  The shared block, with its measure taken off.

  `.cta-inner` is 24em in base.css, which is the right column for the homepage's
  closing line — two short sentences that want to break between them, and two short
  button labels that fit side by side inside it. This page's headline is a single
  clause with no punctuation to break on, so 24em set it as five lines of 76px type
  down the left edge, and its two longer labels came to 426px in a 396px column and
  stacked. Neither is a bug in the shared rule; both are this copy meeting a width
  chosen for other copy.

  The heading then takes its own measure in `em` — which here is em of --t-display,
  so the break point travels with the type as it scales down instead of holding a
  pixel width that means something different at every viewport.
*/
.faq-cta .cta-inner {
  max-width: none;
}

.faq-cta h2 {
  max-width: 9.4em;
}

/* ═══ NARROW ═════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /*
    /faq's categories stack, headline first — and the sticky comes off with them:
    stuck to the top of a single column it would sit over the questions it labels.
  */
  .faq-cat {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(26px, 4vw, 40px);
  }

  .faq-cat-head {
    position: static;
  }

  .faq-cat-head h2 {
    max-width: 20em;
  }

  /*
    The homepage's head band stacks too, and the button goes to the left edge
    with everything else rather than staying flush right under a headline it is
    no longer beside.
  */
  .faq-head {
    display: block;
  }

  .faq-intro h2 {
    max-width: 20em;
  }

  .faq-intro .lead {
    max-width: 34em;
  }

  .faq-head-action {
    margin: 26px 0 0;
  }
}

@media (max-width: 560px) {
  /*
    The mark moves to the top of the row rather than its centre. Two lines of
    question is normal at this width and three is not unusual, and a box centred
    against three lines floats in the middle of the row with nothing beside it.
  */
  .faq-q {
    align-items: flex-start;
    gap: 16px;
  }

  .faq-q-mark {
    align-self: flex-start;
    /* Back onto the first line's optical centre, from its own top edge. */
    margin-top: -1px;
  }

  /* One column of short bullets is still better than two of wrapped ones. */
  .faq-points {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ═══ REDUCED MOTION ═════════════════════════════════════════════════════ */

/*
  The rotation and the answer's entrance both go. What stays is every state
  change that carries meaning — the mark still becomes a minus, the row still
  opens — because turning those off would cost information rather than movement.
*/
@media (prefers-reduced-motion: reduce) {
  .faq-q-mark::before,
  .faq-q-mark::after {
    transition-duration: 1ms;
  }

  .faq-item[open] .faq-a {
    animation-duration: 1ms;
  }

  .faq-more::after,
  .faq-more:hover::after {
    transition: none;
    transform: none;
  }
}

/* ═══ PRINT ══════════════════════════════════════════════════════════════ */

/*
  Everything open. A printed FAQ with seven closed accordions is seven questions
  and no answers, so the copy is forced onto the paper rather than left to
  whichever rows the reader happened to press.

  Two declarations for one job, because browsers moved. A closed <details> used to
  simply not render its children, and `display: block` on them was enough; now the
  content sits in a `::details-content` slot that is `content-visibility: hidden`,
  which no rule on the child can reach. Both are here and each is inert where the
  other applies.
*/
@media print {
  .faq-item::details-content {
    content-visibility: visible;
    block-size: auto;
  }

  .faq-item .faq-a {
    display: block !important;
    animation: none;
  }

  .faq-q-mark,
  .faq-head-action {
    display: none;
  }

  .faq-head,
  .faq-cat {
    display: block;
  }

  .faq-cat-head {
    position: static;
  }
}