/* faq.css — page-specific layout for faq.html: the narrow hero and the Q&A
   accordion. The list is native <details>/<summary>, so it opens, keyboards and
   reads correctly with CSS and JS both absent; this file gives it the brand's look,
   js/pages/faq.js gives it the slide. Chrome + the gold eyebrow come from site.css.
   Cascade: tokens -> base -> site -> animations -> faq.css. */

/* Narrow reading measure; 28px inset kept literal (off the spacing scale). */
.container{max-width:820px}

/* The row's own inset. The question and the answer are pulled back out by the same
   amount, so the hover surface has air around the text while the text itself stays
   on the container's edge, in line with the hero above it. */
:root{--qa-inset:14px}

/* ---------- hero ---------- */
header{padding:150px 0 50px;text-align:center}
h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,5.5vw,3.4rem);line-height:1.04;letter-spacing:-.015em;margin-bottom:18px}
h1 .em{font-style:italic;color:var(--gold-soft)}
header p{color:var(--ink-soft);max-width:54ch;margin:0 auto;font-size:1rem}

/* ---------- Q&A accordion ---------- */
section{padding:0 0 80px}
/* The rule above the first question closes the list as one object; without it the
   first item reads as a stray heading with a line under it. */
.qa-list{border-top:1px solid var(--line-soft)}
.qa{border-bottom:1px solid var(--line-soft)}

.qa summary{
  display:flex;align-items:flex-start;gap:22px;cursor:pointer;
  padding:22px var(--qa-inset);margin:0 calc(var(--qa-inset)*-1);
  border-radius:4px;transition:background-color var(--dur) var(--ease-standard);
  -webkit-tap-highlight-color:transparent;
}
/* The default disclosure triangle, in both spellings - the chevron below is ours. */
.qa summary{list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.qa h2{
  flex:1 1 auto;margin:0;font-family:var(--serif);font-weight:300;font-size:1.22rem;
  line-height:1.3;color:var(--ink);transition:color var(--dur) var(--ease-standard);
}
.qa h2 .num{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:.95rem}

/* Same chevron the coverage list's toggle wears (index.css .area-toggle) - one
   language for "there is more under this". It points down when the answer is
   folded away and up once it is out. */
.qa summary::after{
  content:'';flex:0 0 auto;width:8px;height:8px;margin-top:9px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:translateY(-2px) rotate(45deg);opacity:.65;
  transition:transform .42s var(--ease-settle),opacity var(--dur) var(--ease-standard);
}
.qa[open] summary::after{transform:translateY(1px) rotate(-135deg);opacity:1}
.qa[open] h2{color:var(--gold-soft)}

@media(hover:hover) and (pointer:fine){
  .qa summary:hover{background:rgba(201,165,88,.04)}
  .qa summary:hover h2{color:var(--gold-soft)}
  .qa summary:hover::after{opacity:1}
}

/* js/pages/faq.js animates this box's height; it must clip while it does. */
.qa-body{overflow:hidden}
.qa-body p{
  margin:0;padding:0 var(--qa-inset) 26px calc(var(--num-col) + var(--num-gap));
  color:var(--ink-soft);font-size:.96rem;line-height:1.65;max-width:66ch;
}
.qa-body a{color:var(--gold-soft);text-decoration:none;border-bottom:1px solid rgba(201,165,88,.35)}
@media(hover:hover) and (pointer:fine){.qa-body a:hover{border-bottom-color:var(--gold)}}

@media(max-width:600px){
  .qa summary{padding:19px var(--qa-inset)}
  .qa h2{font-size:1.08rem}
  /* A phone has no width to give away: the answer goes back to the row's own edge. */
  .qa-body p{padding-left:0}
}

@media(prefers-reduced-motion:reduce){
  .qa summary,.qa h2,.qa summary::after{transition:none}
}