/* ============================================================================
   editorial.css — "Monochrome Editorial" structural design layer
   ----------------------------------------------------------------------------
   Loaded LAST (after theme-aura.css) so it re-skins the shared component
   classes (.glass, .data-table, buttons, inputs, chips, nav) into a flat,
   shadowless, hairline-bordered "institutional precision" structure.

   IT DOES NOT pick colors — those still come from the active theme's tokens
   (--bg-*, --text-*, --accent*, --border-color set by theme.js). So every
   existing theme (Midnight default, Sunset, Olive, Ocean, Terracotta, Light,
   Editorial, Custom) keeps working; this only changes STRUCTURE: glass→flat,
   shadows→1px hairlines, standardized radii, tightened Inter typography.

   Equal-specificity selectors win over theme-aura.css purely by load order,
   so this stays easy to disable (remove the <link>) and never fights Tailwind
   utilities (those keep their higher specificity).
   ============================================================================ */

:root {
  /* hairline + radius tokens — derived from the theme's own border token */
  --edl-line:        var(--border-color, rgba(255,255,255,0.08));
  --edl-line-strong: var(--border-color, rgba(255,255,255,0.16));
  --edl-radius-card: 14px;
  --edl-radius-btn:  8px;
  --edl-radius-chip: 6px;
  --edl-surface:     var(--bg-card, rgba(255,255,255,0.02));
}

/* Light themes get true editorial hairlines (crisp gray instead of faint) */
[data-theme="light"], [data-theme="editorial"] {
  --edl-line:        rgba(0,0,0,0.10);
  --edl-line-strong: rgba(0,0,0,0.22);
}

/* ----------------------------------------------------------------------------
   1. TYPOGRAPHY — Inter everywhere, tight editorial headlines
   ---------------------------------------------------------------------------- */
:where(h1, h2, h3, .headline, .hero-title) {
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: -0.03em;
  font-weight: 700;
}
:where(h1, .hero-title) { letter-spacing: -0.04em; }
:where(h4, h5, h6) { font-family: 'Inter', system-ui, sans-serif; letter-spacing: -0.02em; }

/* Surgical all-caps metadata label */
.label-caps, .edl-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
}

/* ----------------------------------------------------------------------------
   2. SURFACES — kill glassmorphism, go flat + 1px hairline
   ---------------------------------------------------------------------------- */
.glass, .liquid-glass {
  background: var(--edl-surface) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid var(--edl-line) !important;
  box-shadow: none !important;
  border-radius: var(--edl-radius-card);
}
/* remove the dark glass shimmer pseudo-element entirely */
:root:not([data-theme="light"]) .glass::before,
:root:not([data-theme="light"]) .liquid-glass::before { display: none !important; content: none !important; }

/* hover "lift" = border brightens, not a shadow */
.glass:hover, .liquid-glass:hover { border-color: var(--edl-line-strong) !important; transition: border-color .2s ease; }

/* keep scrollable wrappers scrollable (theme-aura already does; re-assert) */
.table-wrap.glass, .glass.scroll-y, .scroll-area.glass { overflow: auto !important; }

/* ----------------------------------------------------------------------------
   3. BUTTONS — editorial primary (solid ink/accent) + hairline secondary
   ---------------------------------------------------------------------------- */
.gradient-btn, .btn-primary, button.primary {
  background: var(--accent, #0047ff) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: var(--edl-radius-btn) !important;
  box-shadow: none !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: filter .15s ease, transform .12s ease;
}
.gradient-btn:hover, .btn-primary:hover, button.primary:hover { filter: brightness(1.08); }
.gradient-btn:active, .btn-primary:active, button.primary:active { transform: scale(.97); }

/* secondary / outline buttons (theme-aura .pill or generic) */
.btn-secondary, .btn-outline, .pill-outline {
  background: transparent !important;
  border: 1px solid var(--edl-line-strong) !important;
  color: var(--text-primary, #f8fafc) !important;
  border-radius: var(--edl-radius-btn) !important;
  box-shadow: none !important;
}
.btn-secondary:hover, .btn-outline:hover, .pill-outline:hover { border-color: var(--accent, #0047ff) !important; color: var(--accent, #0047ff) !important; }

/* ----------------------------------------------------------------------------
   4. INPUTS — flat, hairline, accent focus
   ---------------------------------------------------------------------------- */
:where(input, select, textarea) {
  border-radius: var(--edl-radius-btn);
}
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border: 1px solid var(--edl-line) ;
  box-shadow: none ;
}
:where(input, select, textarea):focus {
  border-color: var(--accent, #0047ff) ;
  outline: none ;
}

/* ----------------------------------------------------------------------------
   5. TABLES — institutional density, label-caps headers, hairline rows
   ---------------------------------------------------------------------------- */
.data-table { border-collapse: collapse; }
.data-table thead th, .data-table th {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8) !important;
  border-bottom: 1px solid var(--edl-line-strong) !important;
}
.data-table td, .data-table th { border-bottom: 1px solid var(--edl-line) !important; }
.data-table tbody tr { transition: background .15s ease; }
.data-table tbody tr:hover { background: color-mix(in srgb, var(--accent, #0047ff) 6%, transparent) !important; }

/* ----------------------------------------------------------------------------
   6. CHIPS / BADGES / PILLS — tight radius, hairline
   ---------------------------------------------------------------------------- */
.badge, .chip, .tag, .pill {
  border-radius: var(--edl-radius-chip) !important;
  box-shadow: none !important;
}

/* ----------------------------------------------------------------------------
   7. DIVIDERS / SECTION RHYTHM
   ---------------------------------------------------------------------------- */
hr, .divider { border: none; border-top: 1px solid var(--edl-line); }

/* ----------------------------------------------------------------------------
   8. NAV — flatten the glass nav into a hairline-bottom bar
   ---------------------------------------------------------------------------- */
#sma-nav nav, nav.glass, .navbar.glass {
  box-shadow: none !important;
  border-bottom: 1px solid var(--edl-line) !important;
}

/* ----------------------------------------------------------------------------
   9. SOFTEN dark-only texture for a cleaner flat canvas (editorial = shadowless)
   ---------------------------------------------------------------------------- */
:root:not([data-theme="light"]):not([data-theme="editorial"]) body::after { opacity: 0.35; }
[data-theme="editorial"] body::after, [data-theme="editorial"] body::before { display: none !important; }

/* ----------------------------------------------------------------------------
   10. KPI / stat cards commonly used across pages — flatten consistently
   ---------------------------------------------------------------------------- */
.cc-kpi, .kpi-card, .stat-card, .metric-card {
  background: var(--edl-surface) !important;
  border: 1px solid var(--edl-line) !important;
  box-shadow: none !important;
  border-radius: var(--edl-radius-card) !important;
}

/* ----------------------------------------------------------------------------
   11. EDITORIAL light theme — fix inherited dark-theme text treatments
   (theme-aura paints .gradient-text navy→cyan on every non-light theme; on the
   editorial white canvas that reads wrong, so recolor to the ink/accent.)
   ---------------------------------------------------------------------------- */
[data-theme="editorial"] .gradient-text,
[data-theme="editorial"] .serif-italic.gradient-text,
[data-theme="editorial"] .aura-shiny {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--text-primary, #151619) !important;
  color: var(--text-primary, #151619) !important;
  animation: none !important;
}
/* electric-blue highlight for keyword spans the mockups emphasize */
[data-theme="editorial"] .accent-text,
[data-theme="editorial"] .text-accent { color: var(--accent, #0047ff) !important; -webkit-text-fill-color: var(--accent, #0047ff) !important; }
[data-theme="editorial"] ::selection { background: rgba(0,71,255,0.18); }

/* respect reduced motion (transitions above are tiny, but be safe) */
@media (prefers-reduced-motion: reduce) {
  .glass, .liquid-glass, .gradient-btn, .data-table tbody tr { transition: none !important; }
}

/* ============================================================================
   12. LIGHT-MODE TEXT CONTRAST FIX  (Light + Editorial themes)
   ----------------------------------------------------------------------------
   ROOT CAUSE: the whole site was authored for the dark glassmorphism theme, so
   thousands of elements hardcode white / light-gray text (Tailwind `text-white`,
   `text-slate-100..400`, and arbitrary `text-[#94a3b8]` / `text-[#e2e8f0]` …).
   On the white/near-white canvas of the Light and Editorial themes that text is
   invisible (light-on-light). theme.js sets data-theme on <html>, so we scope
   every fix to the two pale themes and leave all dark themes untouched.

   Strategy: re-color neutral light text to readable ink, but EXCLUDE elements
   that legitimately keep white text because they sit on a solid colored fill
   (primary buttons, the brand gradient pill, solid accent badges). Translucent
   white fills (bg-white/5, bg-white/10) are NOT excluded — white text on a faint
   wash over a white page is exactly the invisible case we must fix.

   These selectors live in editorial.css which loads LAST, so they win over
   theme-aura.css and the page's own Tailwind utilities by load order /
   !important where needed. WCAG AA target ~4.5:1 on #ffffff.
   ============================================================================ */

/* ---- shared excludes: things that must stay light because they're on a solid
   colored background. Used via :not() chains below. ---------------------------- */

/* 12a. White body text → ink. Excludes solid-color buttons/badges/gradients. */
[data-theme="light"]  :where(.text-white):not(.gradient-btn):not(.btn-primary):not(.gradient-pill):not([class*="bg-gradient"]):not([class*="bg-blue-"]):not([class*="bg-green-"]):not([class*="bg-red-"]):not([class*="bg-emerald-"]):not([class*="bg-indigo-"]):not([class*="bg-purple-"]):not([class*="bg-cyan-"]):not([class*="bg-amber-"]):not([class*="bg-rose-"]):not([class*="bg-orange-"]):not([class*="bg-teal-"]):not([class*="bg-sky-"]):not([class*="bg-violet-"]):not([class*="bg-pink-"]):not([class*="bg-[#1"]):not([class*="bg-[#2"]):not([class*="bg-[#3"]),
[data-theme="editorial"] :where(.text-white):not(.gradient-btn):not(.btn-primary):not(.gradient-pill):not([class*="bg-gradient"]):not([class*="bg-blue-"]):not([class*="bg-green-"]):not([class*="bg-red-"]):not([class*="bg-emerald-"]):not([class*="bg-indigo-"]):not([class*="bg-purple-"]):not([class*="bg-cyan-"]):not([class*="bg-amber-"]):not([class*="bg-rose-"]):not([class*="bg-orange-"]):not([class*="bg-teal-"]):not([class*="bg-sky-"]):not([class*="bg-violet-"]):not([class*="bg-pink-"]):not([class*="bg-[#1"]):not([class*="bg-[#2"]):not([class*="bg-[#3"]) {
  color: var(--text-primary, #151619) !important;
}

/* Keep descendants of a primary button / gradient pill white even if they carry
   text-white (icon labels, spans). */
[data-theme="light"]  .gradient-btn .text-white,
[data-theme="light"]  .btn-primary  .text-white,
[data-theme="editorial"] .gradient-btn .text-white,
[data-theme="editorial"] .btn-primary  .text-white { color: #fff !important; }

/* 12b. Light grays used as headings / strong body → ink. */
[data-theme="light"]  :where(.text-slate-100, .text-slate-200, .text-gray-100, .text-gray-200),
[data-theme="editorial"] :where(.text-slate-100, .text-slate-200, .text-gray-100, .text-gray-200) {
  color: var(--text-primary, #151619) !important;
}

/* 12c. Mid-light grays used as secondary body text → readable secondary ink. */
[data-theme="light"]  :where(.text-slate-300, .text-gray-300),
[data-theme="editorial"] :where(.text-slate-300, .text-gray-300) {
  color: var(--text-secondary, #2b303b) !important;
}

/* 12d. Muted grays (slate-400 / arbitrary light hex) → theme muted token. */
[data-theme="light"]  :where(.text-slate-400, .text-gray-400),
[data-theme="editorial"] :where(.text-slate-400, .text-gray-400),
[data-theme="light"]  :where([class*="text-[#cbd5e1]"], [class*="text-[#e2e8f0]"], [class*="text-[#f1f5f9]"], [class*="text-[#f8fafc]"]),
[data-theme="editorial"] :where([class*="text-[#cbd5e1]"], [class*="text-[#e2e8f0]"], [class*="text-[#f1f5f9]"], [class*="text-[#f8fafc]"]) {
  color: var(--text-secondary, #2b303b) !important;
}

/* 12e. Arbitrary near-white-gray hex text (the heavy hitters #94a3b8/#64748b/
   #475569). theme-aura already remaps these for data-theme="light" — extend the
   same fix to the editorial theme, which was missed. */
[data-theme="editorial"] :where([class*="text-[#94a3b8]"]) { color: var(--text-muted, #4b4b4b) !important; }
[data-theme="editorial"] :where([class*="text-[#64748b]"]) { color: var(--text-muted, #4b4b4b) !important; }
[data-theme="editorial"] :where([class*="text-[#9ca3af]"]) { color: var(--text-muted, #4b4b4b) !important; }
[data-theme="editorial"] :where([class*="text-[#475569]"]) { color: var(--text-muted, #4b4b4b) !important; }
/* #475569 is borderline (4.6:1) on the lighter Light canvas — nudge to muted. */
[data-theme="light"]     :where([class*="text-[#475569]"]) { color: var(--text-muted, #6b7280) !important; }

/* 12f. Inline white text (style="color:#fff") on non-button elements. We can't
   :not() inline styles reliably, so re-assert the body color only where the
   element is NOT a known button/pill. Page-level hardcodes are patched in HTML;
   this catches the generic case for plain text blocks. */
[data-theme="light"]  [style*="color:#fff"]:not(.gradient-btn):not(.btn-primary):not([class*="bg-gradient"]),
[data-theme="editorial"] [style*="color:#fff"]:not(.gradient-btn):not(.btn-primary):not([class*="bg-gradient"]),
[data-theme="light"]  [style*="color: #fff"]:not(.gradient-btn):not(.btn-primary):not([class*="bg-gradient"]),
[data-theme="editorial"] [style*="color: #fff"]:not(.gradient-btn):not(.btn-primary):not([class*="bg-gradient"]) {
  color: var(--text-primary, #151619) !important;
}

/* 12g. Hover states that swap to white (e.g. footer links hover:text-white) read
   as "text disappears on hover" in light mode — map hover to ink instead. */
[data-theme="light"]  a:hover.text-white,
[data-theme="editorial"] a:hover.text-white { color: var(--text-primary, #151619) !important; }

/* 12h. placeholder text often hardcoded very light → readable muted. */
[data-theme="light"]  ::placeholder,
[data-theme="editorial"] ::placeholder { color: var(--text-muted, #6b7280) !important; opacity: 1; }

/* 12i. native <select> option popups: theme-aura forces dark option bg on every
   NON-light theme — that includes editorial (white page → dark popup is jarring,
   and any white option text the page set becomes white-on-white once the bg is
   light). Restore light option styling for the editorial theme too. */
[data-theme="editorial"] :where(option)  { background: #ffffff; color: var(--text-primary, #151619); }
[data-theme="editorial"] :where(optgroup){ background: #ffffff; color: var(--text-muted, #4b4b4b); }

/* 12j. PAGE-LOCAL <style> BLOCKS — many pages define their own CSS with hardcoded
   light text (e.g. `h1.page-title{color:#f8fafc}`, `body{color:#e2e8f0}`,
   `.cmp-feature{color:#cbd5e1}`). Those are element/class rules our class-based
   fixes above don't match, and they out-specify theme-aura's body color. Force
   the core text-bearing elements to the theme ink in the pale themes. We keep
   this to structural text elements so we never recolor buttons/badges (which use
   their own background + are excluded above). */
[data-theme="light"]  :where(body, p, li, td, th, dd, dt, blockquote,
                              h1, h2, h3, h4, h5, h6,
                              .page-title, .section-title, .endpoint-title,
                              .endpoint-url, strong, b):not([class*="text-["]):not([class*="text-slate-"]):not([class*="text-gray-"]):not([class*="text-green"]):not([class*="text-red"]):not([class*="text-blue"]):not([class*="text-emerald"]):not([class*="text-amber"]):not([class*="text-rose"]):not([class*="text-cyan"]):not([class*="text-indigo"]):not([class*="text-purple"]),
[data-theme="editorial"] :where(body, p, li, td, th, dd, dt, blockquote,
                              h1, h2, h3, h4, h5, h6,
                              .page-title, .section-title, .endpoint-title,
                              .endpoint-url, strong, b):not([class*="text-["]):not([class*="text-slate-"]):not([class*="text-gray-"]):not([class*="text-green"]):not([class*="text-red"]):not([class*="text-blue"]):not([class*="text-emerald"]):not([class*="text-amber"]):not([class*="text-rose"]):not([class*="text-cyan"]):not([class*="text-indigo"]):not([class*="text-purple"]) {
  color: var(--text-primary, #151619) !important;
}
/* Inline near-white text colors hardcoded on individual elements. */
[data-theme="light"]  [style*="color:#e2e8f0"], [data-theme="editorial"] [style*="color:#e2e8f0"],
[data-theme="light"]  [style*="color:#f8fafc"], [data-theme="editorial"] [style*="color:#f8fafc"],
[data-theme="light"]  [style*="color:#f1f5f9"], [data-theme="editorial"] [style*="color:#f1f5f9"],
[data-theme="light"]  [style*="color:#cbd5e1"], [data-theme="editorial"] [style*="color:#cbd5e1"],
[data-theme="light"]  [style*="color: #e2e8f0"], [data-theme="editorial"] [style*="color: #e2e8f0"],
[data-theme="light"]  [style*="color: #f8fafc"], [data-theme="editorial"] [style*="color: #f8fafc"] {
  color: var(--text-primary, #151619) !important;
}

/* ============================================================================
   13. LIGHT-MODE NAV BAR CONTRAST  (Light + Editorial themes)
   ----------------------------------------------------------------------------
   nav.js injects the top bar with dark-theme inline styles (rgba(10,10,15,.85)
   background, #94a3b8 / #f8fafc text). On light themes the glass-nav
   background is set via --bg-nav but the link text and mega-btn text stay dark
   because they use `color:var(--text-muted,#94a3b8)` — that CSS variable IS
   set correctly by theme.js, so the links should already read correctly.
   Below we add extra safety for any hardcoded colors inside the nav.
   ============================================================================ */

/* Nav bar background + border */
[data-theme="light"]  nav.glass-nav,
[data-theme="editorial"] nav.glass-nav {
  background: var(--bg-nav, rgba(248,249,250,0.95)) !important;
  border-bottom: 1px solid rgba(0,0,0,0.10) !important;
}

/* Desktop primary flat links (Home, Performance, Docs, Pricing) */
[data-theme="light"]  .sma-desktop-links > a,
[data-theme="editorial"] .sma-desktop-links > a {
  color: var(--text-secondary, #374151) !important;
}
[data-theme="light"]  .sma-desktop-links > a:hover,
[data-theme="editorial"] .sma-desktop-links > a:hover {
  color: var(--text-primary, #1a1a2e) !important;
}

/* Mega-dropdown trigger buttons */
[data-theme="light"]  .sma-mega-btn,
[data-theme="editorial"] .sma-mega-btn {
  color: var(--text-secondary, #374151) !important;
}
[data-theme="light"]  .sma-mega-btn:hover,
[data-theme="editorial"] .sma-mega-btn:hover,
[data-theme="light"]  .sma-mega-btn-active,
[data-theme="editorial"] .sma-mega-btn-active {
  color: var(--text-primary, #1a1a2e) !important;
}

/* Mega dropdown link labels (already handled via --text-secondary/--text-primary
   vars in nav.js CSS; add fallback for editorial theme) */
[data-theme="editorial"] .sma-mega-label { color: var(--text-secondary, #2b303b) !important; }
[data-theme="editorial"] .sma-mega-link:hover .sma-mega-label { color: var(--text-primary, #151619) !important; }
[data-theme="editorial"] .sma-mega-desc  { color: var(--text-muted, #4b4b4b) !important; }

/* Hamburger button on light */
[data-theme="light"]  #sma-mobile-toggle,
[data-theme="editorial"] #sma-mobile-toggle {
  border-color: rgba(0,0,0,0.12) !important;
  background: rgba(0,0,0,0.04) !important;
  color: var(--text-secondary, #374151) !important;
}

/* Login / Get API Key buttons in nav on light */
[data-theme="light"]  .sma-desktop-links .outline-btn,
[data-theme="editorial"] .sma-desktop-links .outline-btn {
  border-color: rgba(0,0,0,0.15) !important;
  color: var(--text-primary, #1a1a2e) !important;
}

/* end === LIGHT-MODE NAV BAR CONTRAST === */