/* =================================================================
   FAQ - /faq/ Velvet Cinema destination
   Page-scoped sheet, auto-loaded by _main.php (css/faq.css).
   All colors via design-tokens.css custom properties - no hardcoded hex.
   Themed via tokens (light + dark). Mobile-first min-width breakpoints only.
   ================================================================= */

/* Phosphor icons - base .ph-icon has NO intrinsic size; scope all
   icon sizes explicitly here so they never collapse to 0x0. */
.faq-search__icon.ph-icon,
.faq-item__icon.ph-icon,
.faq-toc__toggle-icon.ph-icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

/* -----------------------------------------------------------------
   FAQ HERO
   Two-layer structure: __bg holds the photo (background-image inline
   style is the ONE permitted dynamic inline), __tint is a gradient
   overlay for legibility, __inner sits above both.

   DUAL-THEME RULE:
   - Light theme: solid warm-cream hero (NO photo). __bg + __tint are
     hidden. Text uses dark-on-cream token palette for legibility.
   - Dark theme: photo-behind-text hero. __bg + __tint are shown, text
     is light cream/white over the tinted photo.
   ----------------------------------------------------------------- */

/* Solid cream base - light theme default */
.faq-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--color-bg) 0%, var(--color-bg-alt) 100%);
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

/* Photo layer: fills the hero absolutely; bg-image wired via inline style.
   Hidden in light theme - only surfaces in dark theme below. */
.faq-hero__bg {
  display: none;
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}

/* Tint overlay: also hidden in light theme */
.faq-hero__tint {
  display: none;
  position: absolute;
  inset: 0;
  z-index: -1;
}

.faq-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 54rem;
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Light theme text: dark-on-cream token palette - no text-shadow needed */
.faq-hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-eyebrow);
  margin: 0 0 var(--space-md);
  /* global p { max-width:70ch } caps the box; these re-center it */
  width: fit-content;
  margin-inline: auto;
}

.faq-hero__title {
  /* Velvet Cinema editorial serif hero (matches .svcs-hero__title). */
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: clamp(2.4rem, 1.5rem + 4vw, 4.25rem);
  font-weight: 350;
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--color-heading);
  text-wrap: balance;
  margin: 0 0 clamp(1rem, 2.5vw, 1.75rem);
}
.faq-hero__title em {
  font-style: italic;
  font-weight: 480;
  color: var(--color-rose-deep);
}

.faq-hero__sub {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  line-height: 1.6;
  color: var(--color-body);
  max-width: 42rem;
  margin: 0 auto;
  text-wrap: pretty;
}

/* -----------------------------------------------------------------
   DARK THEME HERO: photo-behind-text treatment
   ----------------------------------------------------------------- */

/* Dark theme base: deep teal slab (token cascade handles background) */
[data-theme="dark"] .faq-hero {
  background: linear-gradient(to bottom, var(--color-bg) 0%, var(--color-bg-alt) 100%);
}

/* Show the photo layer in dark theme when an image is present */
[data-theme="dark"] .faq-hero__bg {
  display: block;
}

/* Ken Burns drift on the photo - dark theme only */
@media (prefers-reduced-motion: no-preference) {
  [data-theme="dark"] .faq-hero__bg[style] {
    animation: faq-hero-drift 18s ease-in-out infinite alternate;
  }

  @keyframes faq-hero-drift {
    from { background-position: center 38%; transform: scale(1); }
    to   { background-position: center 44%; transform: scale(1.04); }
  }
}

/* Show the tint overlay in dark theme */
[data-theme="dark"] .faq-hero__tint {
  display: block;
  background: linear-gradient(
    160deg,
    rgba(3, 20, 28, 0.65) 0%,
    rgba(5, 32, 40, 0.78) 40%,
    rgba(2, 16, 22, 0.88) 100%
  );
}

/* Dark theme with no photo: transparent tint (no image = no darkening) */
[data-theme="dark"] .faq-hero__bg:not([style]) ~ .faq-hero__tint {
  background: transparent;
}

/* Dark theme text: light cream/white over the tinted photo.
   Text-shadow adds legibility punch over any bright-spot bleed-through. */
[data-theme="dark"] .faq-hero__eyebrow {
  color: rgba(245, 219, 210, 0.95); /* warm cream, near-opaque */
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .faq-hero__title {
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .faq-hero__sub {
  color: rgba(245, 235, 229, 0.92); /* warm near-white */
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

/* -----------------------------------------------------------------
   FAQ BODY LAYOUT
   Mobile: single column stack. Desktop (64rem+): 2-col grid with
   sticky TOC rail on the left.
   ----------------------------------------------------------------- */

.faq-body {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--container-padding) clamp(3rem, 6vw, 5rem);
}

@media (min-width: 64rem) {
  .faq-body {
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) 1fr;
    gap: 0 clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
}

/* -----------------------------------------------------------------
   FAQ TOC - category navigation
   Mobile: collapsible toggle (JS controls aria-expanded).
   Desktop: always-visible sticky rail.
   ----------------------------------------------------------------- */

.faq-toc {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 64rem) {
  .faq-toc {
    position: sticky;
    /* Was 5rem, reasoned from a ~64px header - two header generations out of
       date. At >=1280 the header is 157px, so the TOC sat 77px behind its
       edge. max-height follows the same token so the list still fits the
       viewport and scrolls internally rather than running off the bottom. */
    top: var(--sticky-top);
    margin-bottom: 0;
    max-height: calc(100svh - var(--sticky-top) - 1rem);
    /* Vertical only - see the note on .post-toc__sticky in inspiration.css. This TOC
       is the same component pattern and carried the same latent horizontal bar. */
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    /* WebKit thin scrollbar for TOC overflow */
    padding-right: var(--space-xs);
  }

  .faq-toc::-webkit-scrollbar {
    width: 5px;
  }

  .faq-toc::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: var(--radius-full);
  }

  .faq-toc::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-full);
  }

  .faq-toc::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
  }
}

/* Mobile toggle button - full-width pill, hidden on desktop */
.faq-toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 0.65em var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow-sm);
}

@media (prefers-reduced-motion: no-preference) {
  .faq-toc__toggle {
    transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-fast);
  }
}

@media (hover: hover) {
  .faq-toc__toggle:hover {
    background: var(--color-bg-alt);
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-md);
  }
}

.faq-toc__toggle:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Caret rotates when open */
.faq-toc__toggle-icon {
  color: var(--color-muted);
}

@media (prefers-reduced-motion: no-preference) {
  .faq-toc__toggle-icon {
    transition: transform var(--transition-base);
  }
}

.faq-toc__toggle[aria-expanded="true"] .faq-toc__toggle-icon {
  transform: rotate(180deg);
}

/* Hide the toggle entirely on desktop - TOC is always visible */
@media (min-width: 64rem) {
  .faq-toc__toggle {
    display: none;
  }
}

/* TOC list - hidden on mobile until toggle opens it */
.faq-toc__list {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: none; /* JS sets display:flex or uses the aria-expanded approach */
}

/* When JS opens the toggle on mobile */
.faq-toc__list.is-open {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-sm);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* Always visible on desktop */
@media (min-width: 64rem) {
  .faq-toc__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
  }
}

/* TOC link */
.faq-toc__link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 44px;
  gap: var(--space-sm);
  padding: 0.45em var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-body);
  text-decoration: none;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  line-height: 1.35;
}

@media (prefers-reduced-motion: no-preference) {
  .faq-toc__link {
    transition: color var(--transition-fast), background var(--transition-base), border-color var(--transition-base);
  }
}

@media (hover: hover) {
  .faq-toc__link:hover {
    color: var(--color-heading);
    background: color-mix(in srgb, var(--color-accent) 7%, transparent);
    border-left-color: var(--color-accent);
  }
}

.faq-toc__link:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Active/scroll-spy state set by faq.js */
.faq-toc__link.is-active {
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border-left-color: var(--color-accent);
}

/* Question count badge */
.faq-toc__count {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
  background: color-mix(in srgb, var(--color-heading) 6%, transparent);
  padding: 0.15em 0.55em;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  line-height: 1.6;
}

.faq-toc__link.is-active .faq-toc__count {
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  color: var(--color-body);
}

/* -----------------------------------------------------------------
   FAQ TOC ASIDE - fills the long sticky-rail void on desktop with a
   bespoke oversized answer-count stat + a persistent "ask us" prompt.
   Desktop-only (mobile TOC is a collapsible pill; the void doesn't exist).
   ----------------------------------------------------------------- */
.faq-toc__aside {
  display: none;
}

@media (min-width: 64rem) {
  .faq-toc__aside {
    display: block;
    margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
    padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
    border-top: 1px solid var(--color-border);
  }
}

/* Oversized serif answer-count stat - the page's bespoke number moment */
.faq-toc__stat {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  margin: 0;
}

.faq-toc__stat-num {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: clamp(2.75rem, 2rem + 2.5vw, 3.75rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 0.9;
  color: var(--color-heading);
  font-variant-numeric: lining-nums;
}

.faq-toc__stat-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-eyebrow);
}

.faq-toc__aside-text {
  margin: var(--space-sm) 0 var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-light);
  line-height: 1.5;
  color: var(--color-body);
  max-width: 22ch;
}

.faq-toc__aside-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  text-decoration: none;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: left 100%;
  padding-bottom: 2px;
}

.faq-toc__aside-link .ph-icon {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  color: var(--color-accent);
  font-size: 1em;
}

@media (prefers-reduced-motion: no-preference) {
  .faq-toc__aside-link {
    transition: background-size var(--transition-base);
  }
  .faq-toc__aside-link .ph-icon {
    transition: transform var(--transition-base);
  }
}

@media (hover: hover) {
  .faq-toc__aside-link:hover {
    background-size: 100% 1.5px;
  }
  .faq-toc__aside-link:hover .ph-icon {
    transform: translateX(3px);
  }
}

.faq-toc__aside-link:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* -----------------------------------------------------------------
   FAQ MAIN - search + groups column
   ----------------------------------------------------------------- */

.faq-main {
  min-width: 0; /* prevent grid blowout on long words */
}

/* -----------------------------------------------------------------
   SEARCH
   ----------------------------------------------------------------- */

.faq-search {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* Visually hidden label - still accessible to screen readers */
.faq-search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.faq-search__field {
  position: relative;
  display: flex;
  align-items: center;
}

.faq-search__icon {
  position: absolute;
  left: var(--space-lg);
  color: var(--color-muted);
  pointer-events: none;
  font-size: 1.15rem;
}

.faq-search__input {
  width: 100%;
  min-height: 52px;
  padding: 0.75em var(--space-lg) 0.75em calc(var(--space-lg) + 1.1em + var(--space-md));
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--color-heading);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-sm);
  appearance: none;
  -webkit-appearance: none;
}

/* Remove the browser's native clear button in search inputs - we provide our own UX */
.faq-search__input::-webkit-search-cancel-button {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .faq-search__input {
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
  }
}

.faq-search__input::placeholder {
  color: var(--color-muted);
  font-weight: var(--weight-light);
}

.faq-search__input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 20%, transparent);
  outline: none; /* visible replacement above */
}

/* Inline clear (x) button - positioned at the right inside .faq-search__field */
.faq-search__clear {
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  cursor: pointer;
  /* Prevent the button from overlapping the input text */
  flex-shrink: 0;
}

/* The explicit display:flex above would override the hidden attribute's
   display:none, so the clear button must be re-hidden when empty. */
.faq-search__clear[hidden] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .faq-search__clear {
    transition: color var(--transition-fast), background var(--transition-fast);
  }
}

@media (hover: hover) {
  .faq-search__clear:hover {
    color: var(--color-heading);
    background: color-mix(in srgb, var(--color-heading) 7%, transparent);
  }
}

.faq-search__clear:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Explicit size so the icon never collapses to 0x0 (base .ph-icon has no size) */
.faq-search__clear-icon.ph-icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  font-size: 1rem;
}

/* Pad input's right side so text doesn't run under the clear button */
.faq-search__input:not(:placeholder-shown),
.faq-search__input:focus {
  padding-right: calc(var(--space-md) + 44px + var(--space-xs));
}

/* Status line - screen-reader live region; visible when search filters */
.faq-search__status {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-muted);
  min-height: 1.4em; /* prevent layout jump when text appears */
}

/* -----------------------------------------------------------------
   FAQ PILLAR - top-level thematic section (replaces .faq-group)
   6 pillars: General, Booking & Policies, Hair, Hair Loss, Beauty, Weddings.
   Currently 4 non-empty pillars render; the others activate after a
   content review tags Booking/Weddings questions to those service pages.
   ----------------------------------------------------------------- */

.faq-pillar {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  scroll-margin-top: 5.5rem; /* clear the sticky header on anchor jump */
}

/* DOMINANT MOMENT: serif chapter-title per pillar - Velvet Cinema two-voice */
.faq-pillar__title {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: clamp(1.9rem, 1.25rem + 2.6vw, 3.1rem);
  font-weight: 350;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--color-heading);
  text-wrap: balance;
  margin: 0 0 var(--space-lg);
  padding-bottom: var(--space-md);
  /* Gradient accent rule under each pillar heading */
  border-bottom: 0;
  background-image: var(--gradient-accent);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom left;
}

/* Hidden pillars (filtered out by search JS) */
.faq-pillar[hidden] {
  display: none;
}

/* -----------------------------------------------------------------
   FAQ SUBGROUP - service sub-heading inside a pillar
   Secondary typographic label: smaller/lighter than the pillar h2,
   clearly distinct from a question heading. Omitted for General pillar
   (single implicit group, no label).
   ----------------------------------------------------------------- */

.faq-subgroup {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.faq-subgroup:last-child {
  margin-bottom: 0;
}

/* Quiet italic-serif sub-label (was a letter-spaced caps eyebrow - one of ~15
   per page, the AI-scaffolding tell). Left accent rule is the sole loud device;
   the serif italic sits clearly below the pillar chapter title and above the
   grotesk question rows. */
.faq-subgroup__title {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: var(--text-base);
  font-style: italic;
  font-weight: 420;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-heading);
  margin: 0 0 var(--space-md);
  padding: var(--space-xs) 0;
  /* Subtle left-rule accent - visually anchors the sub-heading */
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-accent);
  line-height: 1.3;
}

/* Hidden subgroups (filtered out by search JS when all items inside are hidden) */
.faq-subgroup[hidden] {
  display: none;
}

/* -----------------------------------------------------------------
   FAQ FEATURED - the pillar's lead question, promoted out of the
   accordion into an always-open editorial card. One dominant moment
   per pillar; breaks the uniform collapsed-row ladder without adding
   a caps eyebrow (the AI-scaffolding tell this page just removed).
   Signal = elevated surface + serif open question + a short rose
   accent rule. Lives in a [data-faq-subgroup] so search filters it.
   DOMINANT MOMENT: serif open Q&A on a lifted card - .faq-featured
   ----------------------------------------------------------------- */
.faq-subgroup--featured {
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

.faq-featured {
  position: relative;
  isolation: isolate;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
/* Short rose editorial rule at the top-left - the one bespoke accent that marks
   this as the featured question (rose, not the teal used on subgroup rules). */
.faq-featured::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  width: 2.75rem;
  height: 3px;
  border-radius: 0 0 2px 2px;
  background: var(--color-rose-deep);
}
/* Dark: lift the card off the deep field with an inset top-light + deeper shadow. */
[data-theme="dark"] .faq-featured {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-md);
}
/* Author display (above) beats the UA [hidden] rule, so restore it for search. */
.faq-featured[hidden] {
  display: none;
}

.faq-featured__q {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: clamp(1.35rem, 1rem + 1.5vw, 1.95rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--color-heading);
  text-wrap: balance;
  margin: 0.4rem 0 var(--space-md);
}

/* Answer body reuses .faq-item__a-inner (typography, links, lists, CTA) but is
   always visible - no toggle, no hidden panel. */
.faq-featured__a {
  color: var(--color-body);
}

/* -----------------------------------------------------------------
   FAQ ITEM - individual accordion entry
   ----------------------------------------------------------------- */

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

/* Hidden items (filtered out by search JS) */
.faq-item[hidden] {
  display: none;
}

/* Question row - contains the button (h4 in pillar hierarchy: h2 pillar > h3 subgroup > h4 question) */
.faq-item__q {
  margin: 0;
  font-size: inherit; /* don't let the h4 impose size; button controls it */
}

/* Accordion trigger button */
.faq-item__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  min-height: 56px;
  padding: var(--space-md) 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
}

@media (prefers-reduced-motion: no-preference) {
  .faq-item__btn {
    transition: color var(--transition-fast);
  }
}

@media (hover: hover) {
  .faq-item__btn:hover {
    color: var(--color-accent);
  }

  .faq-item__btn:hover .faq-item__icon {
    color: var(--color-accent);
  }
}

.faq-item__btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.faq-item__q-text {
  flex: 1;
}

/* Caret icon - sized, colored, rotates when expanded */
.faq-item__icon {
  color: var(--color-muted);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .faq-item__icon {
    transition: transform var(--transition-base), color var(--transition-fast);
  }
}

.faq-item__btn[aria-expanded="true"] .faq-item__icon {
  transform: rotate(180deg);
  color: var(--color-accent);
}

/* Answer panel - collapsed when hidden attribute is present */
.faq-item__a[hidden] {
  display: none;
}

.faq-item__a {
  display: block;
}

.faq-item__a-inner {
  padding: 0 0 var(--space-xl);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: 1.7;
  color: var(--color-body);
}

/* Rich text content from PW body field */
.faq-item__a-inner p {
  margin: 0 0 var(--space-md);
}

.faq-item__a-inner p:last-child {
  margin-bottom: 0;
}

/* -----------------------------------------------------------------
   PREMIUM IN-ANSWER LINKS
   Inline links inside answer panels use a refined accent treatment.
   Both themes: accent color base, underline on hover, clear focus ring.
   Do NOT make inline links look like buttons - they stay inline.
   ----------------------------------------------------------------- */

/* :not(.btn) so button-classed links (.btn/.btn--outline placed in an answer via
   the CMS) keep their own pill styling. Without it, the prose underline
   (border-bottom + padding-bottom:1px) overrode the button's bottom border and
   bottom padding, producing a mismatched, doubled-edge pill. */
.faq-item__a-inner a:not(.btn) {
  color: var(--color-link);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-link) 40%, transparent);
  padding-bottom: 1px;
  font-weight: var(--weight-medium);
}

.faq-item__a-inner a:not(.btn):focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .faq-item__a-inner a:not(.btn) {
    transition: color var(--transition-fast), border-color var(--transition-fast);
  }
}

@media (hover: hover) {
  .faq-item__a-inner a:not(.btn):hover {
    color: var(--color-accent-hover);
    border-bottom-color: var(--color-accent-hover);
  }
}

/* -----------------------------------------------------------------
   FAQ ANSWER CTA LINK (forward-looking, opt-in class)
   .faq-answer-cta on an <a> inside .faq-item__a-inner renders as a
   prominent pill link for high-priority conversion actions (e.g.,
   "Book your free consultation"). No current answers use this yet -
   it is defined here so content editors can add it without new CSS.
   Note: SVG arrow icon not achievable via ::after; add Phosphor icon
   inline in markup if arrow is needed (track as follow-up).
   ----------------------------------------------------------------- */

.faq-item__a-inner a.faq-answer-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  padding: 0.5em 1.1em;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
  color: var(--color-heading);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent); /* override base */
  border-radius: var(--radius-full);
  text-decoration: none;
  padding-bottom: 0.5em; /* override base padding-bottom: 1px */
}

@media (prefers-reduced-motion: no-preference) {
  .faq-item__a-inner a.faq-answer-cta {
    transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-fast);
  }
}

@media (hover: hover) {
  .faq-item__a-inner a.faq-answer-cta:hover {
    background: color-mix(in srgb, var(--color-accent) 20%, transparent);
    border-color: var(--color-accent);
    color: var(--color-heading);
  }
}

.faq-item__a-inner a.faq-answer-cta:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-full);
}

/* Lists inside answers */
.faq-item__a-inner ul,
.faq-item__a-inner ol {
  margin: 0 0 var(--space-md);
  padding-left: var(--space-xl);
}

.faq-item__a-inner li {
  margin-bottom: var(--space-xs);
}

/* Answer entry animation - only fires when JS adds/removes hidden */
@media (prefers-reduced-motion: no-preference) {
  .faq-item__a:not([hidden]) {
    animation: faq-answer-open 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  @keyframes faq-answer-open {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* -----------------------------------------------------------------
   EMPTY STATE - shown by JS when no items match search
   ----------------------------------------------------------------- */

.faq-empty[hidden] {
  display: none;
}

.faq-empty {
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: 1.6;
}

.faq-empty__clear {
  display: inline;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: inherit;
  font-weight: var(--weight-semibold);
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.faq-empty__clear:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) {
    .faq-empty__clear {
      transition: color var(--transition-fast);
    }

    .faq-empty__clear:hover {
      color: var(--color-accent-hover);
    }
  }
}

.faq-empty a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* -----------------------------------------------------------------
   DARK THEME OVERRIDES
   Token cascade handles most values. Only surfaces that need
   explicit non-token overrides live here.
   ----------------------------------------------------------------- */

[data-theme="dark"] .faq-toc__toggle {
  background: var(--color-bg-card);
  border-color: var(--color-border);
  color: var(--color-heading);
}

[data-theme="dark"] .faq-toc__toggle:hover {
  background: var(--color-bg-elevated);
  border-color: var(--color-border-hover);
}

[data-theme="dark"] .faq-toc__list.is-open {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
}

[data-theme="dark"] .faq-search__input {
  background: var(--color-bg-card);
  border-color: var(--color-border);
  color: var(--color-heading);
}

[data-theme="dark"] .faq-search__input::placeholder {
  color: var(--color-muted);
}

[data-theme="dark"] .faq-search__input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 18%, transparent);
}

[data-theme="dark"] .faq-search__clear {
  color: var(--color-muted);
}

[data-theme="dark"] .faq-search__clear:hover {
  color: var(--color-heading);
  background: color-mix(in srgb, var(--color-heading) 10%, transparent);
}

/* Dark theme: gradient accent line on pillar title is token-driven, no override needed */

[data-theme="dark"] .faq-subgroup__title {
  color: var(--color-eyebrow);
  border-left-color: var(--color-accent);
}

[data-theme="dark"] .faq-item {
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .faq-item__btn {
  color: var(--color-heading);
}

[data-theme="dark"] .faq-item__btn:hover {
  color: var(--color-accent);
}

[data-theme="dark"] .faq-item__a-inner {
  color: var(--color-body);
}

[data-theme="dark"] .faq-toc__link {
  color: var(--color-body);
}

[data-theme="dark"] .faq-toc__link:hover {
  color: var(--color-heading);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border-left-color: var(--color-accent);
}

[data-theme="dark"] .faq-toc__link.is-active {
  color: var(--color-heading);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  border-left-color: var(--color-accent);
}

[data-theme="dark"] .faq-toc__count {
  background: color-mix(in srgb, var(--color-heading) 8%, transparent);
  color: var(--color-muted);
}

/* Dark theme: premium in-answer links use accent token (already token-driven) */
[data-theme="dark"] .faq-item__a-inner a:not(.btn) {
  color: var(--color-link);
  border-bottom-color: color-mix(in srgb, var(--color-link) 35%, transparent);
}

[data-theme="dark"] .faq-item__a-inner a.faq-answer-cta {
  color: var(--color-heading);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* ==========================================================================
   CLOSING CTA BAND (Task 11b)
   Uses .section--cream to stay in the warm cream/teal token system.
   Both themes resolve via .section--cream token overrides in style.css.
   ========================================================================== */

.faq-cta {
  padding-block: clamp(3.5rem, 6vw, 6rem);
  text-align: center;
  /* Light theme: a deeper-cream gradient band + hairline divider so the CTA
     reads as its own closing section instead of blending into the FAQ list. */
  background: linear-gradient(180deg, var(--color-bg-mid) 0%, var(--color-bg-alt) 100%);
  border-top: 1px solid var(--color-border);
}

/* Dark theme: deepen the band toward the footer so it reads darker than the
   FAQ list above it (mirrors the light treatment, with dark tokens). */
[data-theme="dark"] .faq-cta {
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-footer) 100%);
  border-top-color: var(--color-border);
}

.faq-cta__inner {
  max-width: 44rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding-inline: 1.5rem;
}

.faq-cta__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

.faq-cta__sub {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.15rem);
  color: var(--color-body);
  max-width: 34rem;
  margin-inline: auto;
  line-height: 1.6;
  margin-block: 0;
}

/* Stacked on mobile, row at 480px+ */
.faq-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
}

@media (min-width: 480px) {
  .faq-cta__actions {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Tap-target floor + pill geometry to match .btn--cta shape */
.faq-cta__actions .btn {
  box-sizing: border-box;
  padding: 16px 32px;
  min-height: 44px;
  min-width: 180px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Entrance animation - skipped if user prefers reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .faq-cta {
    animation: faq-cta-enter 0.5s ease both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}

@keyframes faq-cta-enter {
  from {
    opacity: 0;
    translate: 0 1.5rem;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}