/* =========================================================================
   FAQ (/faq) — a calm, fast, text-focused knowledge library.
   No motion, no distraction: no transitions/animations anywhere in this
   file except the native <details> disclosure triangle, which the browser
   handles itself. Uses the site's own default dark/night palette (same
   values as stacks.css's --stk-* tokens: bg #0c0c0b, surface #131312/#1b1b1a,
   line #2c2c2a, orange #ffb000 accent, cream #f3f2ec text, muted #8f8e86) --
   the values are duplicated here rather than referencing stacks.css's
   variables directly since that stylesheet isn't loaded on this page, but
   they're kept identical on purpose so this page reads as the same site,
   not an island. Only color changed here from the original build; the
   "no motion, no distraction" typography/behavior decisions are untouched.
   ========================================================================= */

.ana-faq-page{
  --faq-bg:#0c0c0b; --faq-surface:#131312; --faq-surface-2:#1b1b1a;
  --faq-ink:#f3f2ec; --faq-muted:#8f8e86; --faq-line:#2c2c2a; --faq-accent:#ffb000;
  background:var(--faq-bg) !important; color:var(--faq-ink) !important;
}
.ana-faq-page, .ana-faq-page .ct-container, .ana-faq-page .entry-content,
.ana-faq-page #main, .ana-faq-page #content, .ana-faq-page article{
  color:var(--faq-ink) !important;
}
.ana-faq-page h1, .ana-faq-page h2, .ana-faq-page h3{ color:var(--faq-ink) !important; }

.faq-page, .faq-page *{ box-sizing:border-box; }
.faq-page{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:.3px; line-height:1.6;
  max-width:1120px; margin:0 auto; padding:40px clamp(16px,4vw,40px) 100px;
  display:grid; grid-template-columns:250px 1fr; gap:48px; align-items:start;
}

/* ---- DESKTOP CATEGORY INDEX (left sidebar) ---- */
.faq-nav{
  display:flex; flex-direction:column;
  position:sticky; top:24px;
}
.faq-nav a{
  text-decoration:none; color:var(--faq-ink); padding:12px 16px;
  font-size:14.5px; font-weight:500; border-radius:6px;
}
.faq-nav a:hover{ background:var(--faq-surface-2); }
.faq-nav a.is-active{ font-weight:700; }

/* ---- MOBILE CATEGORY DROPDOWN (hidden on desktop) ---- */
.faq-select-wrap{ display:none; }
.faq-select{
  width:100%; appearance:none; -webkit-appearance:none; -moz-appearance:none;
  font-family:inherit; font-size:15px; letter-spacing:.3px; color:var(--faq-ink);
  background-color:var(--faq-surface-2); border:none; border-radius:8px;
  padding:14px 40px 14px 16px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238f8e86' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.faq-select:focus{ outline:2px solid var(--faq-accent); outline-offset:1px; }

/* ---- CONTENT (right column) ---- */
.faq-content{ min-width:0; }

.faq-search-wrap{ margin-bottom:44px; }
/* Bolder: was a quiet 15px utility pill at the same visual weight as
   everything around it. Sized up to a real focal moment (bigger type, much
   more padding) and given the same at-rest accent ring the rest of the site
   already uses for "this is alive" (stacks.css's .stk-card box-shadow inset
   ring) -- reused, not invented, so this still reads as the same brand, just
   more sure of itself here specifically. */
.faq-search{
  width:100%; font-family:inherit; font-size:18px; font-weight:600; letter-spacing:.3px; color:var(--faq-ink);
  background:var(--faq-surface-2); border:2px solid var(--faq-line); border-radius:999px;
  /* Icon removed -- it kept crowding the placeholder regardless of spacing,
     so rather than keep chasing the gap, the field is plain text now. */
  padding:20px 28px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--faq-accent) 22%, transparent);
}
.faq-search::placeholder{ color:var(--faq-muted); font-weight:500; }
.faq-search:focus{
  outline:none; border-color:var(--faq-accent);
  box-shadow:inset 0 0 0 2px var(--faq-accent), 0 0 28px -10px color-mix(in srgb, var(--faq-accent) 65%, transparent);
}

.faq-section{ margin-bottom:40px; scroll-margin-top:24px; }
.faq-section-h{
  font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--faq-muted); margin:0 0 4px;
}

/* ---- ACCORDION (native <details>/<summary>) ---- */
.faq-item{ border-bottom:1px solid var(--faq-line); }
.faq-item summary{
  cursor:pointer; padding:16px 0; font-size:16px; font-weight:600; color:var(--faq-ink);
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::marker{ content:""; }
/* Removing the native disclosure triangle above (for a plain, quiet question
   row) drops the one built-in cue that this row expands -- replaced with a
   flat, static +/- swapped instantly via the [open] attribute, not animated,
   so it still respects "no motion." */
.faq-item summary::after{
  content:"+"; flex:none; font-size:20px; font-weight:400; color:var(--faq-muted); line-height:1;
}
.faq-item[open] summary::after{ content:"\2212"; }
.faq-answer{
  padding:0 0 16px 20px; border-left:2px solid var(--faq-accent);
  font-size:15px; color:var(--faq-muted);
}
.faq-answer p{ margin:0 0 12px; }
.faq-answer p:last-child{ margin-bottom:0; }
.faq-answer a{ color:var(--faq-accent); }

.faq-empty{ color:var(--faq-muted); font-size:15px; padding:20px 0; }

/* ---- CONTACT ---- */
.faq-divider{ border:none; border-top:1px solid var(--faq-line); margin:40px 0 24px; }
.faq-contact{ text-align:center; }
.faq-contact p{ color:var(--faq-muted); font-size:15px; margin:0 0 14px; }
/* Dark text on the orange fill, matching the site's own primary-button
   convention (e.g. .stk-btn--primary) rather than white-on-accent. */
.faq-contact-btn{
  display:inline-block; text-decoration:none; font-size:14px; font-weight:700;
  color:#2c2c2c; background:var(--faq-accent); border-radius:8px; padding:12px 28px;
}
.faq-contact-btn:hover{ color:#2c2c2c; }

/* ---- RESPONSIVE ---- */
@media (max-width:820px){
  .faq-page{ grid-template-columns:1fr; gap:20px; }
  .faq-nav{ display:none; }
  .faq-select-wrap{ display:block; }
}