/* ===========================================================================
   NOIR CHROMA — faq.php
   Overrides assets/css/faq-page.css. That file is almost entirely var(--c-*)
   driven, so the token bridge in tokens.css already handles most of it —
   only the hard-coded gradient, focus ring and accordion cue need rules here.
   =========================================================================== */

body[data-skin="noir"] .faq-hero {
  background: var(--n-ink-1);
  border-bottom: 1px solid var(--n-border);
  box-shadow: none;
  position: relative;
}
body[data-skin="noir"] .faq-hero::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: var(--n-grad-line);
  opacity: .5;
}

body[data-skin="noir"] .faq-title {
  font-family: var(--n-font-display);
  font-size: var(--n-fz-3xl);
  font-weight: var(--n-fw-bold);
  letter-spacing: -.02em;
  color: var(--n-fg);
  background: none;
  -webkit-text-fill-color: currentColor;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body[data-skin="noir"] .faq-title {
    background: var(--n-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

body[data-skin="noir"] .faq-search-input {
  background: var(--n-surface-2);
  border: 1px solid var(--n-border);
  color: var(--n-text);
  -webkit-text-fill-color: var(--n-text);
  caret-color: var(--n-pink);
  font-size: max(16px, var(--n-fz-base));
  box-shadow: none;
}
body[data-skin="noir"] .faq-search-input::placeholder {
  color: var(--n-text-dim);
  -webkit-text-fill-color: var(--n-text-dim);
  opacity: 1;
}
body[data-skin="noir"] .faq-search-input:focus {
  border-color: var(--n-accent);
  box-shadow: 0 0 0 3px rgba(255, 61, 139, .18);
}


/* ---- Accordion ---------------------------------------------------------- */

body[data-skin="noir"] .faq-item {
  position: relative;
  background: var(--n-surface);
  border: 1px solid var(--n-border);
  border-radius: var(--n-r-md);
  box-shadow: none;
  overflow: hidden;
}
body[data-skin="noir"] .faq-item:hover {
  border-color: var(--n-border-strong);
  box-shadow: none;
}

/* Open questions grow a chromatic bar on the leading edge. */
body[data-skin="noir"] .faq-item::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0;
  width: 3px;
  background: var(--n-grad);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--n-dur) var(--n-ease-emph);
}
body[data-skin="noir"] .faq-item[open]::before { transform: scaleY(1); }

body[data-skin="noir"] .faq-summary {
  color: var(--n-fg);
  font-family: var(--n-font-display);
  font-weight: var(--n-fw-semi);
  min-height: 52px;
}
body[data-skin="noir"] .faq-summary::after { color: var(--n-accent); }
body[data-skin="noir"] .faq-item[open] .faq-summary {
  border-bottom: 1px solid var(--n-border);
  background: var(--n-surface-2);
}

body[data-skin="noir"] .faq-content {
  color: var(--n-text-muted);
  line-height: var(--n-lh-read);
}
body[data-skin="noir"] .faq-content a { color: var(--n-accent); }

body[data-skin="noir"] .no-results { color: var(--n-text-dim); }


/* ---- Mobile ------------------------------------------------------------- */

@media (max-width: 900px) {
  body[data-skin="noir"] .faq-hero { padding: var(--n-s7) var(--n-s4); }
  body[data-skin="noir"] .faq-title { font-size: var(--n-fz-2xl); }
  body[data-skin="noir"] .faq-summary { min-height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-skin="noir"] .faq-item::before { transition: none; }
  body[data-skin="noir"] .faq-content { animation: none; }
}