/* ==========================================================================
   FAQ — a reference document, not a marketing page. Search is the interface;
   the section rail is the map. Everything else gets out of the way.
   ========================================================================== */

[hidden] { display: none !important; }
/* --------------------------------------------------------------------------
   HERO — compact. The search field is the tallest thing in it.
   -------------------------------------------------------------------------- */
.faq-hero {
  padding-block: clamp(2.25rem, 1rem + 5vw, 4.25rem) clamp(2.25rem, 1rem + 5vw, 4rem);
  background:
    radial-gradient(70% 110% at 8% -18%, color-mix(in srgb, var(--ink-700) 90%, var(--signal)) 0%, transparent 62%),
    url('../../img/pattern-grid.svg') 0 0 / 80px 80px repeat,
    var(--ink-900);
}
.faq-hero__inner { display: grid; gap: var(--s-7); align-items: end; }
@media (min-width: 62em) {
  .faq-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s-9); }
}
.faq-hero__lede { min-width: 0; }
.faq-hero h1 {
  margin-top: var(--s-3);
  font-size: clamp(2.5rem, 1.4rem + 4.2vw, 4.25rem);
  line-height: 0.94;
}
.faq-hero .lead { margin-top: var(--s-5); max-width: 48ch; }

/* Search */
.faq-search { min-width: 0; }
.faq-search__box { position: relative; }
.faq-search__ico {
  position: absolute; left: 0.9375rem; top: 50%; transform: translateY(-50%);
  color: var(--fg-subtle); pointer-events: none; display: block;
}
.faq-search__input {
  padding: 1.0625rem 3.25rem 1.0625rem 3rem;
  font-size: 1.0625rem; border-radius: var(--r-md);
  background: var(--ink-800); border-color: var(--ink-500); color: var(--paper);
}
.faq-search__input::-webkit-search-cancel-button { display: none; }
.faq-search__input:hover { border-color: var(--steel-500); }
.faq-search__input:focus { border-color: var(--signal); }
.faq-search__clear {
  position: absolute; right: 0.5625rem; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--r-sm); color: var(--fg-muted);
}
.faq-search__clear:hover { background: var(--ink-600); color: var(--paper); }
.faq-search__meta {
  margin-top: var(--s-3); display: flex; gap: 0.4rem; align-items: baseline;
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted);
}
.faq-search__meta .num { color: var(--signal); font-weight: 600; font-size: var(--t-sm); }

.faq-search__quick { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.faq-chip {
  padding: 0.5rem 0.875rem; border-radius: var(--r-pill);
  border: 1px solid var(--rule); background: transparent; color: var(--fg-muted);
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; min-height: 44px;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.faq-chip:hover { color: var(--paper); border-color: var(--steel-500); background: rgba(255,255,255,.06); }

/* --------------------------------------------------------------------------
   LAYOUT — sticky rail beside the questions on desktop.
   -------------------------------------------------------------------------- */
.faq-body { padding-block: var(--section-y); }
.faq-layout { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 62em) {
  .faq-layout { grid-template-columns: 15.5rem minmax(0, 1fr); gap: var(--s-9); }
}
.faq-main { min-width: 0; }

.faq-nav { min-width: 0; }
@media (min-width: 62em) {
  .faq-nav { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}
.faq-nav__t {
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-muted);
  padding-bottom: var(--s-3); border-bottom: 1.5px solid var(--rule-strong);
}
.faq-nav__list a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 44px; padding: 0.5625rem 0.6875rem 0.5625rem 0.75rem;
  border-left: 2px solid transparent; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--t-sm); font-weight: 550; color: var(--fg-muted);
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.faq-nav__list a .num { font-size: var(--t-micro); color: var(--fg-subtle); flex: none; }
.faq-nav__list a:hover { color: var(--fg); background: var(--bg-sunk); }
.faq-nav__list a[aria-current='true'] {
  color: var(--fg); font-weight: 650; border-left-color: var(--signal); background: var(--bg-sunk);
}
.faq-nav__list a[aria-current='true'] .num { color: var(--fg-muted); }
.faq-nav__foot {
  margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--rule);
  display: grid; gap: var(--s-3);
}
@media (max-width: 61.99em) {
  /* On a phone the rail becomes a scrollable chip row: a map, not a wall. */
  .faq-nav__list { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-2); scrollbar-width: none; }
  .faq-nav__list::-webkit-scrollbar { display: none; }
  .faq-nav__list li { flex: none; }
  .faq-nav__list a {
    border: 1px solid var(--rule); border-radius: var(--r-pill); white-space: nowrap;
    padding: 0.5rem 0.875rem; background: var(--bg-raised);
  }
  .faq-nav__list a[aria-current='true'] { border-color: var(--ink-800); border-left-color: var(--ink-800); background: var(--ink-800); color: var(--paper); }
  .faq-nav__list a[aria-current='true'] .num { color: var(--steel-300); }
  .faq-nav__foot { display: none; }
}

/* --------------------------------------------------------------------------
   SECTIONS + ACCORDION
   -------------------------------------------------------------------------- */
.faq-section + .faq-section { margin-top: var(--s-9); }
.faq-section__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  margin-bottom: var(--s-4); padding-bottom: var(--s-3);
}
.faq-section__head h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); }
.faq-section__n {
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-subtle);
  white-space: nowrap;
}
.faq-section .accordion { border-top-color: var(--rule-strong); }
.faq-item .accordion__q { padding-block: var(--s-4); }
.faq-item .accordion__q > [data-accordion-icon] { display: flex; flex: none; }
/* In-prose links get real vertical padding (pulled back out with a negative
   margin so the line rhythm is unchanged) — a 17px-tall word is not a tap
   target on a phone. */
.faq-item .accordion__a a,
.faq-empty a {
  display: inline-block; padding-block: 0.4375rem; margin-block: -0.4375rem;
  color: var(--fg); text-decoration: underline; text-underline-offset: 2px;
}
.faq-item .accordion__a a:hover, .faq-empty a:hover { color: var(--signal-deep); }
.faq-item .accordion__a .num { color: var(--fg); font-weight: 600; }
.faq-item[open] .accordion__q { color: var(--fg); }

.faq-placeholder { color: var(--fg-subtle); font-style: italic; }

.faq-empty {
  padding: var(--s-5); border: 1px dashed var(--rule-strong); border-radius: var(--r-md);
  background: var(--bg-sunk); font-size: var(--t-sm); color: var(--fg-muted);
  margin-bottom: var(--s-6);
}
.faq-empty strong { display: block; color: var(--fg); font-size: 1.0625rem; margin-bottom: 2px; }
.faq-empty__phone { font-family: var(--font-mono); font-weight: 600; color: var(--fg); text-decoration: underline; }
.faq-inline-phone { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }

/* Plain bulleted list inside an answer — .accordion__a styles prose only. */
.faq-list { display: grid; gap: var(--s-2); padding-left: 1.1em; }
.faq-list li { list-style: disc; }
.faq-list li::marker { color: var(--fg-subtle); }

/* Opening-hours block inside an answer */
.faq-hours { display: grid; border-top: 1px solid var(--rule); max-width: 22rem; }
.faq-hours li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding-block: 0.4375rem; border-bottom: 1px solid var(--rule); font-size: var(--t-xs);
}
.faq-hours__d {
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-subtle);
}
.faq-hours__t { color: var(--fg); font-weight: 600; }

/* --------------------------------------------------------------------------
   CLOSING CTA
   -------------------------------------------------------------------------- */
.faq-close {
  background:
    radial-gradient(70% 130% at 92% 0%, color-mix(in srgb, var(--ink-700) 88%, var(--signal)) 0%, transparent 60%),
    var(--ink-900);
}
.faq-close__inner { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 62em) { .faq-close__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-9); } }
.faq-close h2 { font-size: var(--t-d2); }
.faq-close .lead { margin-top: var(--s-4); max-width: 52ch; }
.faq-close .lead strong { color: var(--paper); }
.faq-close__act { display: grid; gap: var(--s-3); justify-items: stretch; }
@media (min-width: 34em) { .faq-close__act { justify-items: start; } }
@media (min-width: 62em) { .faq-close__act { justify-items: end; } }
.faq-close__fine { color: var(--fg-muted); max-width: 32ch; }
@media (min-width: 62em) { .faq-close__fine { text-align: right; } }