/* Engram FAQ-page additions
 * Only the truly new bits that aren't in engram-landing.css:
 *   - Search bar
 *   - Category anchor tabs
 *   - Compact hero (smaller than homepage hero — this is a content page)
 *
 * Everything else (nav, section, container, eyebrow, faq accordion,
 * btn, footer) is inherited from /engram-landing.css. */

/* ─── Compact hero for content pages ──────────────────────────── */
.faq-hero {
  padding: 140px 0 60px;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(11,180,176,0.10), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-1) 100%);
}
.faq-hero .eyebrow {
  display: inline-block;
  margin-bottom: 18px;
}
.faq-hero h2 {
  font-size: clamp(34px, 5.5vw, 64px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  max-width: 22ch;
  background: linear-gradient(180deg, #ffffff 0%, #B8BFD1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.faq-hero h2 em {
  font-style: normal;
  background: linear-gradient(180deg, #0BB4B0 0%, #04918E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.faq-hero p.sub {
  font-size: 17px;
  color: var(--text-dim);
  max-width: 70ch;
  margin: 0 0 36px;
  line-height: 1.6;
}

/* ─── Sticky search bar — uses .form-input from contact modal ─── */
/* Wrapper only handles sticky positioning + counter layout.        */
/* Input itself inherits .form-input styling (bg, border, radius,   */
/* padding, focus state) from engram-landing.css.                   */
.faq-search-wrap {
  position: sticky;
  top: 86px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 640px;
}
.faq-search-input {
  /* .form-input gives us bg/border/radius/padding/focus.            */
  /* Only override font-size to match search-feel (15px > form 14px) */
  font-size: 15px;
  padding: 12px 16px;
}
.faq-count {
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: 10px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ─── Category anchor tabs ────────────────────────────────────── */
.faq-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.faq-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.faq-tabs a:hover {
  border-color: var(--teal-bright);
  color: var(--text);
  background: rgba(11, 180, 176, 0.06);
}
.faq-tabs .tab-count {
  display: inline-block;
  padding: 1px 8px;
  min-width: 22px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-faint);
  background: var(--ink);
  border-radius: 999px;
  text-align: center;
}

/* ─── Section heading rhythm tweak for content pages ──────────── */
.faq-hero + .section,
.faq-hero ~ .section h2 {
  /* Slightly tighter than full-blown landing hero */
}

/* ─── Empty-state when search yields nothing ──────────────────── */
.faq-empty-state {
  text-align: center;
  color: var(--text-dim);
  padding: 60px 24px;
  font-size: 15px;
}
.faq-empty-state a {
  color: var(--teal-bright);
  border-bottom: 1px dotted rgba(11, 180, 176, 0.4);
}

/* ─── aria-current="page" treatment ───────────────────────────── */
.nav-links a[aria-current="page"] {
  color: var(--text);
}
.nav-links a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 2px;
  background: var(--teal-bright);
  border-radius: 2px;
}

/* ─── Mobile tweaks ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .faq-hero {
    padding: 110px 0 40px;
  }
  .faq-search-wrap {
    top: 70px;
    gap: 8px;
  }
  .faq-search-input {
    font-size: 14px;
    padding: 10px 14px;
  }
  .faq-count {
    font-size: 11px;
    padding: 6px 10px;
  }
}

/* ─── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .faq-tabs a,
  .faq-search-wrap {
    transition: none !important;
  }
}