/* ==========================================================================
   site.css — design system for forumsupport.org
   Fonts, tokens, reset, body, sidebar nav, shared utilities.
   Edit here; do not duplicate in per-page <style> blocks.
   ========================================================================== */

/* ── FONTS ──────────────────────────────────────────────────────────────────
   Two families: Cormorant Garamond (headings) + Inter (body + UI)
   Lora and Outfit retained for @font-face completeness; Inter overrides body.
   -------------------------------------------------------------------------- */

/* Inter — variable font, latin subset, self-hosted */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Cormorant Garamond — display serif for headings */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: optional;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: optional;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: optional;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: optional;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: optional;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/cormorant-garamond-latin-300-italic.woff2') format('woff2');
  font-weight: 300; font-style: italic; font-display: optional;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: optional;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: optional;
}

/* Lora — retained for italic accents in article components */
@font-face {
  font-family: 'Lora';
  src: url('/fonts/lora-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: optional;
}
@font-face {
  font-family: 'Lora';
  src: url('/fonts/lora-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: optional;
}
@font-face {
  font-family: 'Lora';
  src: url('/fonts/lora-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: optional;
}
@font-face {
  font-family: 'Lora';
  src: url('/fonts/lora-latin-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: optional;
}
@font-face {
  font-family: 'Lora';
  src: url('/fonts/lora-latin-500-italic.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: optional;
}

/* Outfit — retained for any components not yet migrated to Inter */
@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit-latin-300-normal.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: optional;
}
@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: optional;
}
@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: optional;
}
@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: optional;
}

/* ── DESIGN TOKENS ───────────────────────────────────────────────────────────
   Change a value here; it propagates to every page.
   -------------------------------------------------------------------------- */
:root {
  /* Colors */
  --cream:     #FAF7F2;   /* primary background */
  --gold:      #1F4E57;   /* teal accent: links, primary button, owl mark */
  --gold-light: #3E7C87;  /* secondary teal */
  --teal-soft: #E5EDEC;   /* very light teal surface */
  --char:      #2C2C2C;   /* near-black ink */
  --sand:      #E8E0D4;   /* light neutral surface */
  --sand-dark: #D5C9B8;   /* medium neutral, tier band bg */
  --muted:     #52483C;   /* secondary text — passes WCAG AA on cream (7.8:1), sand (6.4:1), sand-dark (5.2:1) */
  --white:     #FFFFFF;

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing scale — 8px base */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-6:  48px;
  --sp-8:  64px;
  --sp-12: 96px;

  /* Sidebar layout */
  --nav-width:      260px;
  --topbar-height:  56px;
  --banner-height:  40px;
}

/* ── RESET ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ── BASE ────────────────────────────────────────────────────────────────────
   html body: specificity 0,0,2 overrides per-page body (0,0,1) so Inter
   becomes the default across the site without touching every page's body rule.
   -------------------------------------------------------------------------- */
html body {
  background:              var(--cream);
  color:                   var(--char);
  font-family:             var(--font-body);
  font-size:               18px;
  line-height:             1.6;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── TEXT MEASURE + PROSE SIZE ───────────────────────────────────────────────
   .fss-body-wrap .article-body p has specificity 0,2,1 — overrides per-page
   .article-body p (0,1,1) which hardcodes 17px on many pages.
   -------------------------------------------------------------------------- */
.fss-body-wrap .article-body p,
.fss-body-wrap .article-body li,
.fss-body-wrap .article-body blockquote {
  font-size: 18px;
  line-height: 1.65;
  max-width: 65ch;
}

/* ── FOCUS STATES ────────────────────────────────────────────────────────────
   Visible :focus-visible ring — accessibility requirement + craft signal.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2.5px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
button:focus-visible,
a:focus-visible {
  outline: 2.5px solid var(--gold);
  outline-offset: 3px;
}

/* ── REDUCED MOTION ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── SIDEBAR NAV ─────────────────────────────────────────────────────────── */

:root {
  --nav-width:     260px;
  --topbar-height: 56px;
  --banner-height: 40px;
}

.fss-topbar {
  position: fixed; top: var(--banner-height); left: 0; right: 0; z-index: 200;
  height: var(--topbar-height);
  background: var(--cream, #FAF7F2);
  border-bottom: 1px solid var(--sand, #E8E0D4);
  display: flex; align-items: center;
  padding: 0 20px; gap: 16px;
}

.fss-topbar__logo {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 16px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--char, #2C2C2C); text-decoration: none;
  flex: 1;
}
.fss-topbar__cta {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold, #1F4E57); border: 1px solid var(--gold, #1F4E57);
  padding: 7px 16px; text-decoration: none; white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}
.fss-topbar__cta:hover { background: var(--gold, #1F4E57); color: var(--cream, #FAF7F2); }
/* Mobile: the hamburger + rail carry navigation, so drop the topbar CTAs to
   give the logo room (otherwise the logo wraps to multiple lines and the CTAs
   overflow/clip on narrow screens). */
@media (max-width: 768px) {
  .fss-topbar__logo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .fss-topbar__cta { display: none; }
}
.fss-hamburger {
  background: none; border: none; cursor: pointer; padding: 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.fss-hamburger span {
  display: block; width: 18px; height: 1.5px;
  background: var(--char, #2C2C2C); transition: transform 0.18s ease, opacity 0.18s ease;
}
.fss-sidebar-open .fss-hamburger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.fss-sidebar-open .fss-hamburger span:nth-child(2) { opacity: 0; }
.fss-sidebar-open .fss-hamburger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Sidebar */
.fss-sidebar {
  position: fixed; top: calc(var(--banner-height) + var(--topbar-height)); left: 0; bottom: 0;
  width: var(--nav-width);
  background: var(--cream, #FAF7F2);
  border-right: 1px solid var(--sand, #E8E0D4);
  z-index: 150;
  padding: 12px 0 12px;
  transition: transform 0.25s ease;
  visibility: hidden;
  contain: layout style paint;
}
.fss-sidebar__ask-sage {
  display: flex; align-items: center; gap: 7px;
  margin: 0 12px 6px; padding: 9px 14px;
  background: #1F4E57; color: #FCFBF9;
  font-family: var(--font-body, 'Inter', sans-serif); font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  text-decoration: none; border-radius: 8px;
  transition: background 0.18s ease, transform 0.18s ease;
}
.fss-sidebar__ask-sage:hover { background: #163B42; color: #FFFFFF; transform: translateY(-1px); }
.fss-sidebar__ask-sage--ghost {
  background: none; color: #1F4E57;
  border: 1.5px solid #1F4E57; margin-bottom: 12px;
}
.fss-sidebar__ask-sage--ghost:hover { background: #E5EDEC; color: #1F4E57; transform: translateY(-1px); }
.fss-sidebar__section { margin-bottom: 2px; }
.fss-sidebar__role {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted, #52483C); display: inline;
}
.fss-sidebar__toggle {
  display: flex; align-items: center; gap: 5px;
  width: 100%; border: none; background: none; cursor: pointer;
  padding: 6px 14px 4px; text-align: left; min-height: 28px;
}
.fss-sidebar__toggle:hover .fss-sidebar__role { color: var(--char, #2C2C2C); }
.fss-sidebar__arrow {
  display: inline-block; width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid var(--muted, #52483C);
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.fss-sidebar__section.open .fss-sidebar__arrow {
  transform: rotate(90deg);
}
.fss-sidebar__links { display: none; }
.fss-sidebar__section.open .fss-sidebar__links { display: block; }

/* Sidebar tooltips */
.fss-sidebar__link[data-tip] { position: relative; }
.fss-sidebar__link[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 100%; top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
  background: var(--char, #2C2C2C);
  color: var(--cream, #FAF7F2);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11px; font-weight: 400; line-height: 1.4;
  padding: 6px 10px; border-radius: 4px;
  white-space: normal; width: 200px;
  pointer-events: none; display: none; z-index: 200;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.fss-sidebar__link[data-tip]::before {
  content: '';
  position: absolute; left: 100%; top: 50%;
  transform: translateY(-50%);
  margin-left: 4px;
  border: 5px solid transparent;
  border-right-color: var(--char, #2C2C2C);
  pointer-events: none; display: none; z-index: 201;
}
.fss-sidebar__link[data-tip]:hover::before,
.fss-sidebar__link[data-tip]:hover::after { display: block; }
@media (max-width: 768px) {
  .fss-sidebar__link[data-tip]::after { display: none; }
}

.fss-sidebar__link {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px; font-weight: 400; line-height: 18px;
  color: var(--muted, #52483C); text-decoration: none;
  display: block; padding: 4px 14px 4px 22px; min-height: 26px;
  transition: color 0.15s, background 0.15s;
  border-left: 2px solid transparent;
}
.fss-sidebar__link:hover { color: var(--char, #2C2C2C); background: rgba(31,78,87,0.06); }
.fss-sidebar__link.active {
  color: var(--gold, #1F4E57);
  border-left-color: var(--gold, #1F4E57);
  background: rgba(31,78,87,0.06);
}
.fss-sidebar__divider {
  border: none; border-top: 1px solid var(--sand, #E8E0D4);
  margin: 5px 16px;
}
.fss-sidebar__link--sub {
  padding-left: 38px; font-size: 12px; color: var(--muted, #52483C);
}
.fss-sidebar__link--sub::before {
  content: "";
  display: inline-block; width: 8px; height: 1px;
  background: var(--sand, #E8E0D4);
  vertical-align: middle; margin-right: 8px; margin-left: -16px;
}
.fss-sidebar__cluster-divider {
  border: none; border-top: 1px solid var(--sand, #E8E0D4);
  margin: 8px 22px; opacity: 0.5;
}

/* Banner */
#fss-banner {
  position: fixed; top: 0; left: 0; right: 0; height: var(--banner-height);
  z-index: 9000; background: #2C2C2C; color: #FAF7F2;
  font-family: var(--font-body, 'Inter', sans-serif); font-size: 13px; letter-spacing: 0.04em;
  padding: 0 16px; display: flex; align-items: center; justify-content: center;
  gap: 8px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  text-align: center;
}
#fss-banner .fss-banner__cta { opacity: 0.85; }
@media (max-width: 600px) {
  :root { --banner-height: 36px; }
  #fss-banner { font-size: 11px; gap: 6px; padding: 0 10px; }
  #fss-banner .fss-banner__long { display: none; }
}

/* Overlay (mobile) */
.fss-overlay {
  display: none; position: fixed; inset: 0; z-index: 140;
  background: rgba(44,44,44,0.35);
}
.fss-sidebar-open .fss-overlay { display: block; }

/* Push body content right on desktop */
.fss-body-wrap { margin-top: calc(var(--banner-height) + var(--topbar-height)); }
@media (min-width: 769px) {
  .fss-body-wrap { margin-left: var(--nav-width); }
  .fss-sidebar { transform: none !important; }
  .fss-hamburger { display: none; }
  .fss-overlay { display: none !important; }
}
@media (max-width: 768px) {
  .fss-sidebar {
    transform: translateX(-100%);
    width: 240px;
    box-shadow: 4px 0 20px rgba(44,44,44,0.12);
  }
  .fss-sidebar-open .fss-sidebar { transform: translateX(0); }
}

/* ── SEARCH ─────────────────────────────────────────────────────────────── */
.fss-search-btn {
  background: none; border: none; cursor: pointer;
  padding: 6px; color: var(--muted, #52483C);
  display: flex; align-items: center;
  transition: color 0.15s;
}
.fss-search-btn:hover { color: var(--gold, #1F4E57); }
.fss-search-btn svg { width: 16px; height: 16px; }

.fss-search-modal {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: rgba(44,44,44,0.5);
  align-items: flex-start; justify-content: center;
  padding-top: 80px;
}
.fss-search-modal.open { display: flex; }
.fss-search-box {
  background: var(--cream, #FAF7F2);
  width: 100%; max-width: 600px;
  border: 1px solid var(--sand, #E8E0D4);
  box-shadow: 0 8px 32px rgba(44,44,44,0.15);
  overflow: hidden;
}
.fss-search-input-wrap {
  display: flex; align-items: center;
  padding: 0 16px; gap: 10px;
  border-bottom: 1px solid var(--sand, #E8E0D4);
}
.fss-search-input-wrap svg { width: 16px; height: 16px; color: var(--muted, #52483C); flex-shrink: 0; }
.fss-search-input {
  flex: 1; border: none; background: none; outline: none;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 15px; color: var(--char, #2C2C2C);
  padding: 16px 0;
}
.fss-search-input::placeholder { color: var(--muted, #52483C); }
.fss-search-close {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11px; color: var(--muted, #52483C);
  padding: 4px 6px; letter-spacing: 0.05em;
}
.fss-search-close:hover { color: var(--char, #2C2C2C); }
.fss-search-results { max-height: 420px; overflow-y: auto; padding: 8px 0; }
.fss-search-results:empty::after {
  content: 'Type to search…';
  display: block; padding: 20px 20px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px; color: var(--muted, #52483C);
}
.fss-result {
  display: block; padding: 12px 20px;
  text-decoration: none;
  border-bottom: 1px solid var(--sand, #E8E0D4);
  transition: background 0.1s;
}
.fss-result:last-child { border-bottom: none; }
.fss-result:hover { background: rgba(31,78,87,0.06); }
.fss-result__title {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px; font-weight: 500;
  color: var(--char, #2C2C2C); margin-bottom: 3px;
}
.fss-result__excerpt {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px; color: var(--muted, #52483C);
  line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.fss-result__excerpt mark {
  background: rgba(31,78,87,0.15);
  color: var(--char, #2C2C2C); font-style: normal;
}
.fss-no-results {
  padding: 20px; font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px; color: var(--muted, #52483C);
  text-align: center;
}
.fss-search-footer {
  padding: 8px 16px; border-top: 1px solid var(--sand, #E8E0D4);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 10px; color: var(--muted, #52483C);
  letter-spacing: 0.05em; text-align: right;
}
.fss-sage-results {
  border-bottom: 1px solid var(--sand, #E8E0D4);
  padding: 10px 0 4px;
}
.fss-sage-label {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold, #1F4E57); padding: 0 20px 6px;
  display: flex; align-items: center; gap: 6px;
}
.fss-sage-label::before { content: '✦'; font-size: 9px; }
.fss-sage-result {
  display: block; padding: 9px 20px;
  text-decoration: none; transition: background 0.1s;
}
.fss-sage-result:hover { background: rgba(31,78,87,0.06); }
.fss-sage-result__title {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px; font-weight: 500;
  color: var(--char, #2C2C2C); margin-bottom: 2px;
}
.fss-sage-result__reason {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11px; color: var(--gold, #1F4E57);
  font-style: italic;
}
.fss-search-divider {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted, #52483C); padding: 8px 20px 4px;
  border-top: 1px solid var(--sand, #E8E0D4); margin-top: 4px;
}
.fss-search-thinking {
  padding: 10px 20px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px; color: var(--muted, #52483C);
  display: flex; align-items: center; gap: 8px;
}
.fss-thinking-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold, #1F4E57); opacity: 0.5;
  animation: fss-pulse 1.2s ease-in-out infinite;
}
.fss-thinking-dot:nth-child(2) { animation-delay: 0.2s; }
.fss-thinking-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes fss-pulse { 0%,100%{ opacity:0.2 } 50%{ opacity:1 } }

/* ── TOPBAR + FOOTER — teal frame ─────────────────────────────────────────
   The topbar sits on teal; override the neutral defaults above.
   -------------------------------------------------------------------------- */
.fss-topbar { background: #1F4E57 !important; border-bottom-color: rgba(255,255,255,.1) !important; }
.fss-topbar__logo { color: #FCFBF9 !important; }
.fss-topbar__cta { color: rgba(255,255,255,.85) !important; border-color: rgba(255,255,255,.35) !important; }
.fss-topbar__cta:hover { background: rgba(255,255,255,.15) !important; color: #fff !important; }
.fss-hamburger span { background: #FCFBF9 !important; }
.fss-search-btn { color: rgba(255,255,255,.75) !important; }

footer {
  background: #1F4E57; color: rgba(255,255,255,.9);
  padding: 28px 24px 32px; text-align: center;
  font-family: var(--font-body, 'Inter', sans-serif); font-size: 12px; line-height: 2;
}
footer a { color: rgba(255,255,255,.95); text-decoration: none; }
footer a:hover { color: #fff; }