/* ==========================================================================
   FAQ
   The contents list, the fifteen group headings and the closing block around
   the shared accordion.
   ========================================================================== */

/* ==========================================================================
   FAQ — page-specific CSS
   The accordion itself is the shared component (.faq__item, .faq__q, .faq__a
   in components.css); this file is the frame around ninety-five of them: the
   contents list, the group headings and the closing "ask Marcy" block.
     [CSS] this block -> assets/css/faq.css
   ========================================================================== */
/* --- Contents -------------------------------------------------------------
   Ninety-five questions is a page nobody reads top to bottom, so the contents
   list is not decoration — it is how the page is used. Each row carries its
   count, because "Beaches 5" tells you whether it is worth the jump and
   "Beaches" does not. */
.faq-toc{
  background:var(--sand);
  padding:var(--section-y) var(--gutter);
  scroll-margin-top:var(--header-h);
  border-top:1px solid var(--line);
}
.faq-toc__inner{max-width:76rem}
.faq-toc__title{
  margin:0 0 var(--space-md);
  font-size:var(--fs-eyebrow);
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-muted);
}
.faq-toc__list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));
  gap:0 clamp(1.5rem,3vw,3.5rem);
  margin:0;padding:0;list-style:none;
}
.faq-toc__list li{
  border-top:1px solid var(--line);
}
.faq-toc__list a{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-sm);
  padding:clamp(.6rem,1.1vw,.85rem) 0;
  font-size:clamp(.9375rem,1.05vw,1.0625rem);
  line-height:1.4;
  color:var(--ink);text-decoration:none;
  transition:color .25s var(--ease);
}
.faq-toc__list a:hover,.faq-toc__list a:focus-visible{color:var(--brand)}
/* The count is information, not a label, so it sits quiet and tabular — the
   numbers line up down the column instead of wobbling. */
.faq-toc__n{
  flex:0 0 auto;
  font-size:clamp(.75rem,.88vw,.875rem);
  font-variant-numeric:tabular-nums;
  color:var(--text-dim);
}
/* --- The groups ---------------------------------------------------------- */
/* The accordion's own colours are declared on .faq, which this page does not
   use — it has fifteen groups rather than one band. Redeclared here so the
   shared component renders identically. */
.faqp{
  --fq-ink:#0A2B47;
  --fq-muted:#46586B;
  --fq-line:rgba(10,43,71,.16);

  background:var(--sand-lite);
  color:var(--fq-ink);
  padding:var(--section-y) var(--gutter) var(--section-y-lg);
}
.faqp__inner{max-width:76rem}
.faqp__group{scroll-margin-top:calc(var(--header-h) + 1rem)}
.faqp__group + .faqp__group{
  margin-top:clamp(2.5rem,4.6vw,4.5rem);
  padding-top:clamp(2.5rem,4.6vw,4.5rem);
  border-top:1px solid var(--fq-line);
}
.faqp__h{
  margin:0;
  font-family:var(--font-serif);
  font-weight:400;
  font-size:clamp(1.5rem,2.5vw,2.375rem);
  line-height:1.15;letter-spacing:-.012em;
  color:var(--fq-ink);
}
/* The link to the page that owns the group sits under the heading rather than
   beside it: these questions are the short answers, and the guide is where the
   long one lives. Putting it first means a reader who wants the subject rather
   than the question never has to scroll past fifteen accordions to find it. */
.faqp__owner{
  margin:clamp(.6rem,1.1vw,.9rem) 0 0;
  font-size:clamp(.875rem,1.02vw,1rem);
}
.faqp__group .faq__list{margin-top:clamp(1rem,2vw,1.75rem)}
.faqp__group .faq__item:first-child{border-top:1px solid var(--fq-line)}
/* --- Ask Marcy ----------------------------------------------------------- */
.ask{
  background:var(--sand);
  padding:var(--section-y) var(--gutter);
  border-top:1px solid var(--line);
}
.ask__inner{max-width:48rem}
.ask__eyebrow{
  margin:0 0 var(--space-xs);
  font-size:var(--fs-eyebrow);
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-muted);
}
.ask__title{
  margin:0;
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(1.75rem,3.2vw,3rem);
  line-height:1.1;letter-spacing:-.016em;
  color:var(--ink-strong);
}
.ask__body{
  margin:clamp(.9rem,1.6vw,1.35rem) 0 0;
  max-width:60ch;
  font-size:clamp(.9375rem,1.08vw,1.0625rem);
  line-height:1.68;
  color:var(--text-body);
}
.ask__body a{
  color:var(--brand);text-decoration:none;
  border-bottom:1px solid var(--link-line);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.ask__body a:hover,.ask__body a:focus-visible{color:var(--brand-deep);border-bottom-color:var(--brand-deep)}
.ask__more{margin:clamp(1.1rem,2vw,1.75rem) 0 0}
@media (max-width:640px){
.faq-toc__list{grid-template-columns:1fr}
}