/* ===========================================================
   THEME VARIABLES
   =========================================================== */
:root {
  --bg: #0b0f17;
  --fg: #e9eef5;
  --muted: #9fb1c9;
  --card: #0f1420;
  --border: rgba(255,255,255,.08);
  --accent: #61b0ff;
  --accent-2: #7ad1ff;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

:root.light {
  --bg: #ffffff;
  --fg: #000000; /* full black text */
  --muted: #333333; /* darker muted gray for secondary text */
  --card: #f6f8fb;
  --border: rgba(0,0,0,.08);
  --accent: #0b6bcb;
  --accent-2: #0c91ff;
  --shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* ===========================================================
   GLOBAL LAYOUT
   =========================================================== */
html, body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  transition: background 0.4s, color 0.4s;
}

body {
  background: radial-gradient(
      1000px 600px at 0% -20%,
      color-mix(in srgb, var(--accent) 10%, transparent),
      transparent 60%
    ),
    var(--bg);
}

/* ===========================================================
   LINKS
   =========================================================== */
a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover { color: var(--accent-2); }

/* ===========================================================
   HEADER & FOOTER
   =========================================================== */
.header-wrap {
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter: blur(6px);
  transition: background 0.3s;
}
.header-wrap.light { background: color-mix(in srgb, var(--bg) 90%, white 30%); }

footer {
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  border-top: 1px solid var(--border);
  transition: background 0.3s;
}

/* ===========================================================
   NAVBAR LINKS
   =========================================================== */
.navbar-dark .nav-link {
  color: var(--muted);
  transition: color 0.3s;
}
.navbar-dark .nav-link:hover { color: var(--fg); }

/* ===========================================================
   HERO SECTION
   =========================================================== */
.hero {
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 20%, transparent),
      color-mix(in srgb, var(--bg) 80%, transparent)
    ),
    url('../images/HeroJump.png') right/cover no-repeat;
  transition: background 0.4s;
}

:root.light .hero {
  background: linear-gradient(
      135deg,
      rgba(255,255,255,.85),
      rgba(245,248,252,.9)
    ),
    url('../images/HeroJump.png') right/cover no-repeat;
}

/* ===========================================================
   BUTTONS
   =========================================================== */
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-2); }
.btn-outline-light {
  color: var(--fg);
  border-color: var(--border);
}

/* ===========================================================
   CARDS
   =========================================================== */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: background 0.4s, color 0.4s;
}
.card .card-title { color: var(--fg); }
.card .card-text  { color: var(--muted); }

/* ===========================================================
   CHAT BUBBLES
   =========================================================== */
.chat { max-width: 860px; margin-inline: auto; }
.msg {
  display: flex;
  gap: 10px;
  margin: 12px 0;
  align-items: flex-end;
}
.msg.user { flex-direction: row-reverse; }

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  color: #fff;
  box-shadow: var(--shadow);
}
.avatar.user { background: var(--accent); }
.avatar.ai   { background: #22c55e; }

.bubble {
  max-width: 78%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  box-shadow: var(--shadow);
  transition: background 0.4s, color 0.4s;
}
.msg.user .bubble {
  background: color-mix(in srgb, var(--accent) 25%, var(--bg));
}

/* ===========================================================
   TYPING INDICATOR
   =========================================================== */
.typing { display: inline-block; width: 36px; }
.dot {
  height: 8px;
  width: 8px;
  display: inline-block;
  margin: 0 2px;
  border-radius: 50%;
  background: var(--muted);
  opacity: .6;
  animation: blink 1.2s infinite;
}
.dot:nth-child(2) { animation-delay: .2s; }
.dot:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100%{opacity:.2}40%{opacity:1;} }

/* ===========================================================
   PROGRESS BAR
   =========================================================== */
.progress { height: 10px; background: color-mix(in srgb, var(--muted) 10%, transparent); }
.progress-bar { background: var(--accent); }

/* ===========================================================
   LOGO – KEEP ORIGINAL SIZE
   =========================================================== */
.logo {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 56px;
  border-radius: 8px;
}
.logo.img-fluid {
  max-width: none !important;
  height: auto !important;
}

/* ===========================================================
   THEME TOGGLE BUTTON
   =========================================================== */
#themeToggle {
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 14px;
}

/* ===========================================================
   CONTRAST RESCUE PATCHES
   =========================================================== */

/* readable text in header/footer */
.header-wrap, footer { color: var(--fg); }

/* Light theme surfaces */
:root.light .card,
:root.light .bubble,
:root.light .dropdown-menu,
:root.light .modal-content,
:root.light .offcanvas {
  background: #ffffff !important;
  color: #0b1220 !important;
  border-color: rgba(0,0,0,.12) !important;
}

/* Navbar link fix in light theme */
:root.light .navbar-dark .nav-link,
:root.light .navbar-dark .navbar-brand {
  color: #0b1220 !important;
}
:root.light .navbar-dark .nav-link:hover { color: #0c91ff !important; }

/* Outline button readable in light mode */
:root.light .btn-outline-light {
  color: #0b1220 !important;
  border-color: rgba(0,0,0,.22) !important;
  background: transparent !important;
}
:root.light .btn-outline-light:hover {
  background: rgba(0,0,0,.04) !important;
}

/* Hard-coded text-light / text-white fix */
:root.light .text-light,
:root.light .text-white {
  color: #0b1220 !important;
}

/* Badges / AI badge contrast */
:root.light .badge,
:root.light .badge-ai {
  color: #0b1220 !important;
  background: rgba(0,0,0,.06) !important;
  border-color: rgba(0,0,0,.12) !important;
}

/* Chat bubbles contrast in light mode */
:root.light .msg .bubble {
  background: #ffffff !important;
  color: #0b1220 !important;
}
:root.light .msg.user .bubble {
  background: color-mix(in srgb, var(--accent) 8%, #ffffff) !important;
  color: #0b1220 !important;
  border-color: rgba(0,0,0,.12) !important;
}

/* Progress background visibility in light */
:root.light .progress { background: rgba(0,0,0,.06) !important; }
:root.light .progress-bar { background: var(--accent) !important; }

/* Hero brightness in light */
:root.light .hero {
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(245,248,252,.95)),
    url('../images/HeroJump.png') right/cover no-repeat !important;
}

/* Dark mode: outline-dark readable on dark bg */
:root:not(.light) .btn-outline-dark {
  color: #e9eef5 !important;
  border-color: rgba(255,255,255,.24) !important;
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 768px) {
  .bubble { max-width: 88%; }
  .hero { background-position: center right -120px; }
}


/* ===========================================================
   THEME EXTENSIONS (adaptive tokens for headings/meta/tabs/hero)
   =========================================================== */
:root {
  --hero-bg: linear-gradient(90deg,#0b0f17,#172033 51.04%,#0b0f17);
  --hero-fg: #ffffff;
  --text-main: var(--fg);
  --text-secondary: color-mix(in srgb, var(--fg) 70%, transparent);
  --surface: var(--card);
  --surface-contrast: var(--fg);
  --surface-muted: var(--muted);
  --surface-border: var(--border);
  --primary-bg-subtle: color-mix(in srgb, var(--accent) 18%, transparent);
  --primary-text: #ffffff;
  --primary-border-subtle: color-mix(in srgb, var(--accent) 45%, transparent);
}

:root.light {
  --hero-bg: linear-gradient(90deg,#eaf2ff,#f7f9ff 51.04%,#eef4ff);
  --hero-fg: #0b1220;
  --text-main: #0b1220;
  --text-secondary: #445066;
  --surface: #ffffff;
  --surface-contrast: #0b1220;
  --surface-muted: #445066;
  --surface-border: rgba(0,0,0,.12);
  --primary-bg-subtle: color-mix(in srgb, var(--accent) 10%, #ffffff 90%);
  --primary-text: #0b1220;
  --primary-border-subtle: color-mix(in srgb, var(--accent) 30%, #000 0%);
}

/* ===========================================================
   HERO SECTION (policy header block)
   =========================================================== */
.sc-hero {
  background: var(--hero-bg);
  color: var(--hero-fg);
  border-radius: 16px;
  padding: 24px 16px;
}
.sc-hero .sc-title,
.sc-hero .sc-meta,
.sc-hero .sc-tabs .sc-tab { color: inherit; }

/* ===========================================================
   ADAPTIVE TEXT UTILITIES
   =========================================================== */
.sc-title { color: var(--text-main); }
.sc-meta  { color: var(--text-secondary); }

/* ===========================================================
   ADAPTIVE TABS (Data Privacy | Terms of Service)
   =========================================================== */
.sc-tabs {
  display: inline-flex;
  gap: .75rem;
  align-items: center;
  padding: .375rem .75rem;
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  background: var(--surface);
}
.sc-tab {
  color: var(--surface-contrast);
  text-decoration: none;
  padding: .25rem .75rem;
  border-radius: 999px;
  line-height: 1.4;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.sc-tab:hover {
  background: color-mix(in srgb, var(--surface-contrast) 6%, transparent);
}
.sc-tab.active {
  background: var(--primary-bg-subtle);
  color: var(--primary-text);
  border: 1px solid var(--primary-border-subtle);
}

/* ===========================================================
   GOLD BADGE (readable on both themes; no transparent text)
   =========================================================== */
.badge-ai-gold {
  display: inline-block;
  padding: .5rem .9rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.1rem;
  border: 1px solid color-mix(in srgb, #ffd700 65%, #b8860b 35%);
  background: linear-gradient(90deg,#ffd700,#ffea70,#ffd700);
  color: #5a4a00; /* solid text for light & dark */
  box-shadow: 0 0 10px rgba(255,215,0,.35);
  text-shadow: 0 0 2px rgba(255,255,255,.25);
}
:root:not(.light) .badge-ai-gold {
  color: #fff4c2;                /* slightly brighter on dark */
  text-shadow: 0 0 3px rgba(0,0,0,.4);
}

/* Optional: subtle shimmer (remove if you don't want animation) */
.badge-ai-gold.shimmer {
  background-size: 200% 100%;
  animation: scShimmer 3s linear infinite;
}
@keyframes scShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ===========================================================
   ACCORDION TWEAKS (keep readable across themes)
   =========================================================== */
#faq .accordion-item {
  background: var(--surface);
  color: var(--surface-contrast);
  border: 1px solid var(--surface-border);
}
#faq .accordion-button {
  background: var(--surface);
  color: var(--surface-contrast);
}
#faq .accordion-body {
  color: var(--surface-muted);
}


/* ===========================================================
   THEME-AWARE FOOTER LINKS
   =========================================================== */
.link-theme {
  color: var(--sc-text-secondary);
  text-decoration: none;
  transition: color 0.3s ease;
}
.link-theme:hover {
  color: var(--sc-text-main);
  text-decoration: underline;
}

/* ensure good contrast in dark theme */
[data-bs-theme="dark"] .link-theme {
  color: #d1d9e6;
}
[data-bs-theme="dark"] .link-theme:hover {
  color: #ffffff;
}


/* ===========================================================
   THEME-AWARE FOOTER LINKS WITH DIVIDER
   =========================================================== */
.footer-links {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
}

.footer-links a {
  color: var(--sc-text-secondary);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--sc-text-main);
  text-decoration: underline;
}

.footer-links .divider {
  color: var(--sc-text-secondary);
  opacity: 0.6;
}

/* Dark theme adjustment for contrast */
[data-bs-theme="dark"] .footer-links a {
  color: #d1d9e6;
}
[data-bs-theme="dark"] .footer-links a:hover {
  color: #ffffff;
}
[data-bs-theme="dark"] .footer-links .divider {
  color: #9fb1c9;
}


/* Ensure non-header/footer areas follow theme colors */
body, main.container {
  color: var(--sc-text-main);
  background: var(--sc-surface-2);
}

/* Make all Bootstrap cards and list-groups feel native to theme */
.card { background: var(--sc-surface); border-color: var(--sc-border); }
.card .card-title { color: var(--sc-text-main); }
.card .card-text, .text-secondary { color: var(--sc-text-muted) !important; }

.list-group-item { background: var(--sc-surface); color: var(--sc-text-main); border-color: var(--sc-border); }

/* Hero sections that use .hero or .sc-hero */
.hero, .sc-hero { background: var(--sc-hero); color: var(--sc-text-main); }

/* Links in main content follow theme */
main a { color: #3b82f6; }
[data-bs-theme="dark"] main a { color: #8ab4ff; }

/* Remove any old hard-coded “text-light” you might have added inline:
   prefer using theme tokens; if needed, scope text utilities to header/footer only. */
.header-wrap .text-light, .site-footer .text-light { color: #e9eef5 !important; }


/* ----------------------------------------------------
   AI4Ops Premium Golden Hover Effect for Info Cards
---------------------------------------------------- */
.sc-card {
  transition: all 0.35s ease;
  border-radius: 14px;
  background: var(--sc-surface, #ffffff);
  position: relative;
  overflow: visible;
}

/* Golden ambient glow + lift */
.sc-card:hover {
  transform: translateY(-6px);
  box-shadow:
      0 6px 16px rgba(0,0,0,0.18),
      0 0 22px rgba(255, 215, 0, 0.55),
      0 0 32px rgba(255, 223, 128, 0.32);
}

/* Golden glow halo on hover */
.sc-card:hover::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 16px;
  background: radial-gradient(
      circle at center,
      rgba(255, 215, 0, 0.45),
      rgba(255, 215, 0, 0) 60%
  );
  z-index: -1;
  pointer-events: none;
  animation: goldPulse 2.4s ease-in-out infinite;
}

/* Subtle pulsing animation */
@keyframes goldPulse {
  0%   { opacity: 0.58; transform: scale(0.98); }
  50%  { opacity: 0.95; transform: scale(1.04); }
  100% { opacity: 0.58; transform: scale(0.98); }
}


/* ----------------------------------------------------
   Amber CTA Buttons – Lift + Glow
---------------------------------------------------- */
.btn-amber {
  background-color: var(--sc-amber, #FFBF00);
  color: #000;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  padding: 10px 18px;
  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.12s ease;
}

.btn-amber:hover {
  background-color: var(--sc-amber-dark, #E6AC00);
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
      0 4px 12px rgba(0,0,0,0.20),
      0 0 16px rgba(255, 215, 0, 0.65);
}

.btn-amber:active {
  transform: translateY(0);
  box-shadow:
      0 2px 6px rgba(0,0,0,0.25),
      0 0 8px rgba(255, 215, 0, 0.45);
}