/* ─────────────────────────────────────────────
   SDO Intro — theme chrome only
   Page colors live in Tailwind tokens (sdo-*).
   Keep this file for toggle UI + header shell.
   ───────────────────────────────────────────── */

:root {
  --sdo-brand: #4565ff;
  --sdo-border: rgba(30, 29, 29, 0.08);
  --sdo-header-scrolled: #ffffff;
  --sdo-shadow: 0 0 15px rgba(0, 0, 0, 0.12);
  --sdo-toggle-track: #e8ecf4;
  --sdo-toggle-thumb: #ffffff;
  --sdo-preloader: #ffffff;
  --sdo-text: #1e1d1d;
  --sdo-text-muted: #757f95;
  --sdo-brand-glow: rgba(69, 101, 255, 0.35);
  color-scheme: light;
}

html.dark {
  --sdo-header-scrolled: rgba(15, 20, 36, 0.92);
  --sdo-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  --sdo-toggle-track: #1c2740;
  --sdo-toggle-thumb: #4565ff;
  --sdo-preloader: #0b1020;
  --sdo-text: #e8eaf2;
  --sdo-text-muted: #9aa3b8;
  --sdo-border: rgba(255, 255, 255, 0.1);
  --sdo-brand-glow: rgba(69, 101, 255, 0.35);
  color-scheme: dark;
}

html {
  transition: color-scheme 0.2s ease;
}

body {
  background-color: var(--color-sdo-surface, #fff);
  color: var(--color-sdo-ink-muted, #757f95);
}

/* ── Theme toggle — base styles in css/sdo-theme-toggle.css ── */

/* Header placement — always visible outside navbar collapse */
.sdo-header-theme {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-inline-start: auto;
  margin-inline-end: 0.75rem;
  z-index: 1001;
}

@media (min-width: 992px) {
  .sdo-header-theme {
    order: 3;
    margin-inline-start: 1.25rem;
    margin-inline-end: 0;
  }

  .navbar > .container > .navbar-collapse {
    order: 2;
    flex-grow: 1;
  }

  .navbar > .container > .navbar-brand {
    order: 1;
  }
}

@media (max-width: 991px) {
  .sdo-header-theme {
    margin-inline-start: auto;
    margin-inline-end: 0.5rem;
  }
}

.mobile-menu-right {
  gap: 0.65rem;
}

/* Transparent header: readable toggle over hero */
.navbar:not(.fixed-top) .sdo-theme-toggle__track {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.navbar:not(.fixed-top) .sdo-theme-toggle__hint {
  opacity: 0.35;
}

.navbar:not(.fixed-top) .sdo-theme-toggle__glyph {
  color: #fff;
}

.navbar:not(.fixed-top) .sdo-theme-toggle__thumb {
  background: #fff;
  border-color: rgba(255, 255, 255, 0.95);
}

.navbar:not(.fixed-top) .sdo-theme-toggle.is-dark .sdo-theme-toggle__thumb {
  background: var(--sdo-brand);
  border-color: rgba(255, 255, 255, 0.75);
}

.navbar.fixed-top {
  background: var(--sdo-header-scrolled) !important;
  box-shadow: var(--sdo-shadow);
  backdrop-filter: blur(12px);
}

html.dark .navbar.fixed-top .nav-item .nav-link {
  color: var(--sdo-text);
}

html.dark .navbar.fixed-top .navbar-toggler-btn-icon {
  color: var(--sdo-text);
}

html.dark .navbar-collapse {
  background: var(--color-sdo-card, #182235);
}

html.dark .preloader {
  background: var(--sdo-preloader);
}

html.dark #scroll-top {
  background: var(--sdo-brand);
}

/* Neutralize old footer title underlines for light/dark token pages */
.footer-widget-title::before {
  background-color: var(--color-sdo-border, #e8ecf4) !important;
}

/* About checklist — readable in light + dark */
.about-list li {
  color: var(--color-sdo-ink, #1e1d1d);
}

.about-list li::before {
  color: var(--sdo-brand, #4565ff);
}

html.dark .about-list li::before {
  color: #818cf8;
}

.footer-logo .logo-white {
  filter: none;
}