/* Boats & Me: FAQ page (built by tools/faq.py). New components layered on the live style.css + cta.css. */

/* Hero (same pattern as the Guides page header, plus the home hero glow) */
.faq-hero{position:relative;background:linear-gradient(175deg,var(--navy-900) 0%,var(--navy-800) 55%,var(--navy-700) 100%);color:var(--white);padding:4.25rem 0 3.25rem;text-align:center;overflow:hidden}
.faq-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 82% 18%,rgba(224,122,95,.16) 0%,transparent 50%),radial-gradient(circle at 15% 85%,rgba(20,107,138,.28) 0%,transparent 60%);pointer-events:none}
.faq-hero .container-narrow{position:relative;z-index:2}
.faq-hero h1{font-family:var(--font-serif);font-size:clamp(2.3rem,4.8vw,3.4rem);line-height:1.15;margin:0 0 1rem;color:var(--white);letter-spacing:-.015em}
.faq-hero h1 span{color:var(--terra-500)}
.faq-hero p.lead{font-size:1.15rem;color:rgba(252,250,247,.88);line-height:1.6;font-weight:300;max-width:660px;margin:0 auto 1.6rem}
.faq-hero-meta{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;font-size:.85rem;color:rgba(255,255,255,.75);padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.15);max-width:640px;margin:0 auto}

/* Sticky topic chips */
.topic-bar{position:sticky;top:4.5rem;z-index:900;background:rgba(252,250,247,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.topic-bar .container{display:flex;gap:.6rem;overflow-x:auto;padding-top:.85rem;padding-bottom:.85rem;scrollbar-width:thin}
.topic-chip{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;font-size:.875rem;font-weight:600;color:var(--navy-800);background:var(--white);border:1px solid var(--border);border-radius:100px;padding:.45rem .95rem;transition:all var(--transition-fast)}
.topic-chip:hover{border-color:var(--terra-500);color:var(--terra-700);background:var(--terra-100)}
.topic-chip .count{font-size:.72rem;font-weight:700;background:var(--navy-100);color:var(--navy-700);border-radius:100px;padding:.05rem .45rem}
.topic-chip.is-flagged .count{background:var(--amber-100);color:var(--amber-700)}

/* Intro / disclaimer */
.faq-intro{max-width:820px;margin:0 auto 3rem;display:grid;gap:1rem}
.faq-disclaimer{border:1px solid var(--border);background:var(--white);border-radius:12px;padding:1.1rem 1.35rem;font-size:.95rem;color:var(--ink-700);line-height:1.6;display:flex;gap:.85rem;align-items:flex-start}
.faq-disclaimer .icon{font-size:1.3rem;line-height:1.2}

/* Topic sections */
.faq-topic{max-width:820px;margin:0 auto 3.5rem;scroll-margin-top:9rem}
.faq-topic-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;border-bottom:2px solid var(--sand-200);padding-bottom:.75rem;margin-bottom:1.25rem}
.faq-topic-head h2{font-family:var(--font-serif);font-size:clamp(1.6rem,3vw,2.1rem);color:var(--navy-900);line-height:1.2;margin:0}
.faq-topic-head .section-eyebrow{margin-bottom:.3rem}
.faq-topic-head .topic-icon{font-size:1.6rem;line-height:1}

/* Accordion Q&A cards (re-using .qa-card / .qa-row / .qa-badge / .qa-question) */
details.qa-card.faq-item{margin:0 0 1rem;padding:0;overflow:hidden;box-shadow:var(--shadow-sm);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);scroll-margin-top:9rem}
details.qa-card.faq-item:hover{border-color:var(--navy-200)}
details.qa-card.faq-item[open]{border-color:var(--navy-200);box-shadow:var(--shadow-md)}
details.faq-item>summary{list-style:none;cursor:pointer;padding:1.25rem 1.5rem}
details.faq-item>summary::-webkit-details-marker{display:none}
details.faq-item>summary .qa-row{margin:0;align-items:flex-start}
details.faq-item>summary .qa-question{flex:1;margin:0;font-size:1.06rem}
details.faq-item>summary .chev{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--sand-100);color:var(--navy-700);display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:transform var(--transition-normal),background var(--transition-fast)}
details.faq-item[open]>summary .chev{transform:rotate(180deg);background:var(--terra-100);color:var(--terra-700)}
details.faq-item>summary:focus-visible{outline:3px solid var(--navy-900);outline-offset:-3px}
.faq-body{padding:0 1.5rem 1.4rem 4.1rem}
.faq-body .qa-answer p{margin-bottom:.85rem}
.faq-body .qa-answer a{text-decoration:underline}
.qa-badge.is-updated{background:var(--terra-600)}

/* Soft "Updated note" callout */
.update-note{border-left:4px solid var(--terra-500);background:var(--terra-100);border-radius:0 10px 10px 0;padding:.9rem 1.1rem;margin:.25rem 0 1rem;font-size:.93rem;line-height:1.6;color:var(--ink-800)}
.update-note-header{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--terra-700);margin-bottom:.3rem}
.update-note a{text-decoration:underline}

/* Source + issue link chips */
.faq-links{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.35rem}
.issue-chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:.32rem .75rem;border-radius:100px;background:var(--navy-100);color:var(--navy-700);border:1px solid transparent;transition:all var(--transition-fast)}
.issue-chip:hover{background:var(--white);border-color:var(--navy-700);color:var(--navy-800)}
.issue-chip.is-terra{background:var(--terra-100);color:var(--terra-700)}
.issue-chip.is-terra:hover{border-color:var(--terra-700);background:var(--white)}
.issue-chip.is-plain{background:var(--white);border-color:var(--border);color:var(--ink-700)}

/* Ask a question card */
.ask-card{max-width:820px;margin:0 auto 1rem;background:var(--sand-100);border:1px solid var(--border);border-radius:14px;padding:1.75rem;text-align:center}
.ask-card h3{font-family:var(--font-serif);font-size:1.45rem;color:var(--navy-900);margin-bottom:.5rem}
.ask-card p{color:var(--ink-700);margin:0 auto 1.1rem;max-width:560px}

@media (max-width:768px){
  .faq-body{padding:0 1.15rem 1.2rem 1.15rem}
  details.faq-item>summary{padding:1.05rem 1.15rem}
  .topic-bar{top:4.5rem}
}

/* Desktop: chips wrap and centre instead of scrolling */
@media (min-width:1024px){
  .topic-bar .container{flex-wrap:wrap;justify-content:center;overflow-x:visible}
}

/* Home teaser linking to /faq */
.home-faq .faq-more{text-align:center;margin-top:1.5rem}