/* Miracle v3 — faq page styles. OWNER: MCL-V3-001-T15. Do not edit css/base.css.
   Disclosure is native <details>/<summary>: keyboard-accessible, printable and
   findable, and it needs no JS — which matters because the CSP is
   `script-src 'self'` and forbids inline script entirely (README §2).
   Every size here is a step from the base.css type scale (README §5). */

/* ---------- intro ---------------------------------------------------------- */
.faq-intro .lead { max-width:60ch; }

/* jump links to the six question groups */
.faq-toc { display:flex; flex-wrap:wrap; gap:var(--s2); }
.faq-toc a {
  display:inline-flex; align-items:center;
  border:1px solid var(--line); background:var(--surface);
  border-radius:var(--r-pill); padding:8px 15px;
  font-family:var(--heading); font-size:.8125rem; font-weight:700; color:var(--ink-2);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.faq-toc a:hover { border-color:var(--teal); color:var(--deep); background:var(--surface-2); }

/* ---------- groups --------------------------------------------------------- */
.faq-group { margin-bottom:clamp(22px,2.8vw,36px); scroll-margin-top:calc(var(--header-h) + 24px); }

/* ---------- one question --------------------------------------------------- */
.faq-list { display:flex; flex-direction:column; gap:var(--s3); }

.faq-item {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); min-width:0;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq-item:hover { border-color:#BCE4CE; }
.faq-item[open] { border-color:#BCE4CE; box-shadow:var(--shadow-1); }

.faq-q {
  list-style:none; cursor:pointer; min-width:0;
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s4);
  padding:clamp(16px,2.2vw,22px) clamp(16px,2.2vw,26px);
}
.faq-q::-webkit-details-marker { display:none; }
.faq-q > h3 { min-width:0; color:var(--ink); transition:color var(--dur) var(--ease); }
.faq-item[open] .faq-q > h3 { color:var(--deep); }

/* the open/closed affordance: a plus that loses its upright bar when open, so
   the state is legible from shape alone and not from colour alone. */
.faq-q::after {
  content:""; flex:none; width:26px; height:26px; margin-top:3px;
  border-radius:var(--r-pill); color:var(--deep);
  background:
    linear-gradient(currentColor,currentColor) center / 12px 2px no-repeat,
    linear-gradient(currentColor,currentColor) center / 2px 12px no-repeat;
  background-color:var(--surface-3);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform var(--dur) var(--ease), color var(--dur) var(--ease),
             background-color var(--dur) var(--ease), background-size var(--dur) var(--ease);
}
.faq-item[open] .faq-q::after {
  color:var(--cream); background-color:var(--deep);
  background-size:12px 2px, 2px 0;
  box-shadow:inset 0 0 0 1px var(--deep);
  transform:rotate(180deg);
}

/* ---------- one answer ----------------------------------------------------- */
.faq-a {
  min-width:0;
  display:flex; flex-direction:column; gap:var(--s4);
  border-top:1px solid var(--line);
  padding:var(--s5) clamp(16px,2.2vw,26px) clamp(20px,2.4vw,28px);
}
.faq-a > p { font-size:.9375rem; line-height:1.85; color:var(--ink-2); max-width:62ch; }
.faq-a > p.lead { color:var(--ink); font-family:var(--heading); font-weight:700; }
.faq-a > p.note { font-size:.875rem; max-width:none; }
.faq-a a { color:var(--deep); text-decoration:underline; text-underline-offset:3px; }
.faq-a a.text-link { text-decoration:none; }
.faq-a .list-check > li { color:var(--ink-2); }

.faq-quote {
  margin:0; border-left:3px solid var(--teal); background:var(--surface-2);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:var(--s4) var(--s5); min-width:0;
}
.faq-quote p { font-family:var(--heading); font-size:1.0625rem; line-height:1.45; font-weight:700; color:var(--ink); }
.faq-quote cite { display:block; margin-top:var(--s2); font-style:normal; font-size:.75rem; line-height:1.6; color:var(--muted); }

/* ---------- closing band --------------------------------------------------- */
.faq-end .body-copy a { color:var(--deep); text-decoration:underline; text-underline-offset:3px; }
.faq-end .fine-print { margin-top:var(--s2); }

/* ---------- 851px and up --------------------------------------------------- */
@media (min-width:851px) {
  .faq-q { padding:24px 28px; }
  .faq-a { padding:var(--s5) 28px 30px; }
}

/* ---------- print ---------------------------------------------------------- */
@media print {
  .faq-toc { display:none; }
  .faq-item { break-inside:avoid; border-color:#000; }
  .faq-a { display:block !important; }
  .faq-q::after { display:none; }
}