/* ============================================================
   FAQ accordion — the single FAQ component of the site.

   Rendered by templates/components/_faq.html on the homepage, the
   office hours page and both programme pages, so one question reads
   and behaves the same everywhere. A page stylesheet may restyle the
   section *around* the list (see .assurance-faq-layout in
   programme.css); it never restyles the item, which is why the
   markup and the CSS can no longer disagree the way they did when
   .assurance-faq-section expected a three-column summary that the
   production-assurance template never rendered.

   Anatomy follows the numbered-checklist pattern of the internal
   design system (design/design-system/atomic-design →
   t4-template/pdf/pdf-readiness-guide/pg03-12-point-checklist and
   t5-page/web/landing-brand-framework): a two-digit index in the
   accent, the label, a hairline rule, and no card — ten questions
   stack as one editorial column instead of ten floating boxes.
   Every colour is a token, so light and dark follow without a
   second palette.
   ============================================================ */
.faq-list{
  --faq-rule:color-mix(in srgb,var(--paper) 16%,transparent);
  display:grid;max-width:880px;margin:0 auto;
  border-top:1px solid var(--faq-rule);
}
.faq-item{border-bottom:1px solid var(--faq-rule)}

/* Summary is the row: index · question · toggle. The three columns are
   why the question must be wrapped in .faq-question — a bare text node
   would land in the 38px index column and wrap one character per line. */
.faq-item summary{
  display:grid;grid-template-columns:38px minmax(0,1fr) 32px;gap:16px;align-items:center;
  min-height:86px;padding:22px 0;list-style:none;cursor:pointer;
  color:var(--paper);font-size:1.05rem;font-weight:720;line-height:1.4;text-wrap:balance;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";display:grid;place-items:center;width:32px;height:32px;
  border:1px solid var(--line-strong);border-radius:50%;
  color:var(--cyan);font-size:1rem;font-weight:560;line-height:1;
  transition:transform .25s ease,border-color .25s ease,background-color .25s ease;
}
.faq-item summary:hover .faq-question{color:var(--cyan)}
.faq-item summary:hover::after{border-color:color-mix(in srgb,var(--cyan) 48%,transparent);background:color-mix(in srgb,var(--cyan) 7%,transparent)}
.faq-item summary:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}
.faq-item[open] summary{padding-bottom:16px}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item[open] .faq-question{color:color-mix(in srgb,var(--paper) 90%,var(--cyan))}
.faq-index{align-self:start;padding-top:.16em;color:var(--cyan);font-size:.72rem;font-weight:820;letter-spacing:.08em}
.faq-question{transition:color .2s ease}

/* Answer — indented under the question, never under the index, so the
   numbered column stays a readable spine down the whole list. */
.faq-answer{display:grid;gap:14px;padding:0 48px 32px 54px}
.faq-answer p{margin:0;padding:0;color:color-mix(in srgb,var(--paper) 78%,var(--silver));font-size:.96rem;line-height:1.72;text-wrap:pretty}
.faq-answer-list{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;margin-top:4px;padding-top:18px;border-top:1px solid var(--faq-rule)}
.faq-answer-label{color:var(--cyan);font-size:.7rem;font-weight:820;letter-spacing:.07em;text-transform:uppercase}
.faq-answer-list ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 24px;margin:0;padding:0;list-style:none}
.faq-answer-list li{position:relative;padding-left:16px;color:color-mix(in srgb,var(--paper) 76%,var(--silver));font-size:.88rem;line-height:1.5;text-wrap:pretty}
.faq-answer-list li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--cyan) 72%,var(--paper))}
/* A boundary block is the honest "no" of an answer: it is called out
   rather than buried in the last sentence of a paragraph. */
.faq-answer .faq-boundary{margin-top:4px;padding:15px 17px;border:1px solid color-mix(in srgb,var(--cyan) 30%,transparent);background:color-mix(in srgb,var(--cyan) 5%,transparent);color:color-mix(in srgb,var(--paper) 90%,var(--silver));font-weight:650}

@media(max-width:760px){
  .faq-item summary{grid-template-columns:30px minmax(0,1fr) 32px;gap:12px;min-height:76px;padding:18px 0;font-size:1rem}
  .faq-answer{padding:0 0 28px 42px}
  .faq-answer-list{grid-template-columns:1fr;gap:12px}
  .faq-answer-list ul{grid-template-columns:1fr}
}
@media print{
  .faq-item .faq-answer{display:grid!important}
  .faq-item summary::after{display:none}
}