/*
  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.

  Both halves are filled again. `FAQ_HOME.action` was absent for half a day on
  2026-09-11 — /faq was still the fork's copy at that point, so a "View all FAQs"
  button next to eight answers about buying together was handing a reader off to
  forty about sourcing a factory in Asia — and came back once that page had been
  rewritten into thirty-four answers about buying together. `faqSection()` in
  build.mjs still guards on the field, so a flex row with one child is a state this
  band can be in; it lays the intro out at the left edge, which is where it belongs
  either way.

  `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 — hold the
  pair to the left half of the band and the gap beside them stays white rather than
  becoming a 400px hyphen. The headline is three words a line at 13em.

  The standfirst was 24em, which was one line short of where the button used to be
  and is now simply too narrow: it broke *inside the brand name*, leaving "& Co." on
  a line of its own. 34em is one line in both locales — measured at 18.72px, the
  Dutch sentence wants 26.6em and the English one 33.1em — and 34em is also what the
  narrow override below already used, so there is one number instead of two.

  It stops being one line somewhere under a 700px shell, where the English sentence
  no longer fits whatever the measure says. What it may not do there is break the
  brand name again, and no rule in this file can promise that — CSS cannot bind a word
  group. The guard is no longer in the copy either, where two `\u00A0` escapes carried it
  for half a day: `esc()` in build.mjs binds the name in every string it renders, so this
  standfirst is covered wherever it wraps and neither this file nor content/ has to
  remember. The argument is written out there. Measured at 390px it breaks after
  "inkopen" anyway, and the name stays whole either way.
*/
.faq-intro h2 {
  max-width: 13em;
  margin-bottom: 20px;
}

.faq-intro .lead {
  max-width: 34em;
  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.
  Borrowed wholesale from `.link::after` in base.css, including the nudge on
  hover, so the two actions behave identically.

  Not for the reason this comment used to give. It claimed `content` never reaches
  the accessible name; Chromium folds generated content into the name, which was
  measured on the mission link — `link "Read the manifesto →"` — and there is no
  reason to think this one behaves differently. The split earns its keep anyway: the
  label is a string and the arrow is a treatment, and an arrow written into the copy
  would need translating, escaping and a decision about which side it goes on in
  every locale.
*/
.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 ─────────────────────────────────────────────────────── */

/*
  Nothing here, and there were two rules until 2026-09-11.

  They took the measure off `.cta-inner` and gave the heading its own in `em` of
  --t-display, because 24em — the shared width at the time — set this page's
  single unpunctuated clause as five lines of 76px type down the left edge and
  stacked its two buttons in a 396px column. The note explained at some length
  that this was not a bug in the shared rule but this copy meeting a width chosen
  for other copy.

  It was both. The homepage's own closing headline broke into five lines in the
  same column the day it stopped being the fork's, and the fix — 44em on the
  block, 9.4em on the heading, the second number lifted from here — is now in
  base.css and applies to every page that closes with the section. Overriding it
  again from this file would say the two differ, and they no longer do.
*/

/* ═══ 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 — when there is one — goes
    to the left edge with everything else rather than staying flush right under a
    headline it is no longer beside.

    The headline's measure widens because the column did; the standfirst's does not
    appear here any more, because 34em is now its measure at every width.
  */
  .faq-head {
    display: block;
  }

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

  .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;
  }
}