/* Atlantic Road Seaside Housing — FAQ page
   Loads after css/main.css (tokens, base, header, footer). */
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* Header + overlay (shared) */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:1.1rem clamp(20px,4vw,56px);color:var(--fjord);background:var(--mist);box-shadow:0 1px 0 rgba(19,43,58,.08)}
/* This page's header is solid light from the start — cancel every hero rule in
   main.css. Those are guarded by :not(.scrolled), which contributes the class's
   specificity, so plain .site-header selectors here lose the cascade and these
   overrides silently did nothing (brass-soft on mist = 2.06:1). Match it. */
.site-header::before{content:none}
.site-header:not(.scrolled) .brand,
.site-header:not(.scrolled) .menu-toggle,
.site-header:not(.scrolled) .header-book{text-shadow:none}
.site-header:not(.scrolled) .brand small{color:var(--brass-ink)}

/* FAQ hero */
.faq-hero{padding:11rem 0 4.5rem;background:var(--fjord);color:var(--linen)}
.faq-hero .eyebrow{color:var(--brass)} /* dark bg — brass over brass-ink */
.faq-hero h1{font-size:clamp(2.4rem,5vw,4rem);max-width:20ch}
.faq-hero p{max-width:60ch;margin-top:1.4rem;color:rgba(237,231,220,.75)}
.crumb{font-family:var(--accent);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(237,231,220,.6);margin-bottom:2rem;display:block}

/* FAQ body */
.faq-section{padding:clamp(4rem,8vw,7rem) 0}
.faq-group{margin-bottom:4rem}
.faq-group h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:1.8rem;padding-bottom:.8rem;border-bottom:1px solid var(--brass)}
.faq-item{border-bottom:1px solid rgba(19,43,58,.14)}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:baseline;gap:2rem;
  padding:1.4rem 0;
  font-family:var(--display);font-size:1.18rem;color:var(--fjord);
  transition:color .3s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.5rem;color:var(--brass-ink);flex-shrink:0;transition:transform .3s var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--petrol)}
.faq-item .answer{padding:0 0 1.6rem;max-width:70ch;color:var(--slate);font-size:.98rem}
.faq-item .answer p{margin-bottom:.8rem}
.faq-item .answer p:last-child{margin-bottom:0}
.faq-item .answer a{text-decoration:underline;text-underline-offset:3px}
.faq-item .answer a:hover{color:var(--brass-ink)}
.faq-layout{display:grid;grid-template-columns:220px 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.faq-toc{position:sticky;top:110px;list-style:none}
.faq-toc li{margin-bottom:.6rem}
.faq-toc a{font-family:var(--accent);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--slate);transition:color .3s}
.faq-toc a:hover{color:var(--brass-ink)}
@media (max-width:820px){.faq-layout{grid-template-columns:1fr}.faq-toc{position:static;display:flex;flex-wrap:wrap;gap:1rem}}

/* Contact the host — closes the answer column */
.faq-contact{
  background:var(--linen);
  border:1px solid rgba(19,43,58,.14);
  padding:clamp(2rem,4vw,3rem);
  max-width:70ch;
}
.faq-contact h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:1rem}
.faq-contact p{color:var(--slate);font-size:.98rem;max-width:52ch}
.faq-contact-links{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin:1.6rem 0 2rem}
.faq-contact-links a{
  color:var(--brass-ink);
  text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;
  transition:color .3s var(--ease);
}
.faq-contact-links a:hover{color:var(--petrol)}
.faq-contact .btn{color:var(--fjord)}