/* Banking Roadmap — custom styles + comprehensive dark-mode contrast */

html { scroll-behavior: smooth; }

body {
  font-feature-settings: "ss01", "cv11";
}

section { position: relative; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(15, 28, 63, 0.2); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(15, 28, 63, 0.4); }

details[open] summary svg { transform: rotate(180deg); }

@media print {
  header, footer, .yt-tab, #lockScreen, #mdBtn { display: none !important; }
  body { background: white; color: black; }
}

/* ========================================================
   DARK MODE — comprehensive contrast overrides
   ======================================================== */
.dark body {
  background: #0a0e1a;
  color: #f1efe9;
}

/* Header / Nav */
.dark header {
  background: rgba(10, 14, 26, 0.85) !important;
  border-color: rgba(255,255,255,0.08);
}
.dark header a:hover { color: #c9a35d; }
.dark header button {
  border-color: rgba(255,255,255,0.2);
  color: #f1efe9;
}
.dark header button:hover { background: rgba(255,255,255,0.05); }

/* Backgrounds */
.dark .bg-bg { background: #0a0e1a; }
.dark .bg-white { background: #131826 !important; color: #f1efe9 !important; }
.dark .bg-white\/70 { background: rgba(19, 24, 38, 0.85) !important; backdrop-filter: blur(8px); }
.dark .bg-white\/60 { background: rgba(19, 24, 38, 0.75) !important; }
.dark .bg-white\/5 { background: rgba(255,255,255,0.04); }
.dark .bg-white\/10 { background: rgba(255,255,255,0.08); }

/* Text — every shade */
.dark .text-ink,
.dark .text-ink\/90 { color: #f1efe9 !important; }
.dark .text-ink\/80 { color: rgba(241,239,233,0.85) !important; }
.dark .text-ink\/70 { color: rgba(241,239,233,0.78) !important; }
.dark .text-ink\/60 { color: rgba(241,239,233,0.62) !important; }
.dark .text-ink\/50 { color: rgba(241,239,233,0.5) !important; }
.dark .text-ink\/40 { color: rgba(241,239,233,0.4) !important; }
.dark .text-navy { color: #e3c074 !important; }                /* navy → light gold for dark bg */
.dark .text-accent { color: #6fa8ff !important; }              /* lighter blue */
.dark .text-rose { color: #ff7a8c !important; }
.dark .text-mint { color: #4ade80 !important; }
.dark .text-gold { color: #e3c074 !important; }

/* Borders */
.dark .border-ink\/10 { border-color: rgba(255,255,255,0.1) !important; }
.dark .border-ink\/20 { border-color: rgba(255,255,255,0.18) !important; }
.dark .border-ink\/5 { border-color: rgba(255,255,255,0.05) !important; }

/* Tinted backgrounds (cards, badges) */
.dark .bg-ink\/5 { background: rgba(255,255,255,0.05) !important; }
.dark .bg-ink\/10 { background: rgba(255,255,255,0.08) !important; }
.dark .bg-ink\/2 { background: rgba(255,255,255,0.025) !important; }
.dark .hover\:bg-ink\/5:hover { background: rgba(255,255,255,0.05) !important; }
.dark .hover\:bg-ink\/10:hover { background: rgba(255,255,255,0.08) !important; }
.dark .hover\:bg-ink\/2:hover { background: rgba(255,255,255,0.03) !important; }

/* Coloured tints stay visible — bump contrast */
.dark .bg-mint\/10 { background: rgba(74, 222, 128, 0.15) !important; }
.dark .bg-mint\/15 { background: rgba(74, 222, 128, 0.18) !important; }
.dark .bg-mint\/20 { background: rgba(74, 222, 128, 0.18) !important; }
.dark .bg-rose\/5 { background: rgba(255, 122, 140, 0.08) !important; }
.dark .bg-rose\/10 { background: rgba(255, 122, 140, 0.12) !important; }
.dark .bg-rose\/15 { background: rgba(255, 122, 140, 0.18) !important; }
.dark .bg-rose\/20 { background: rgba(255, 122, 140, 0.18) !important; }
.dark .bg-accent\/10 { background: rgba(111, 168, 255, 0.13) !important; }
.dark .bg-accent\/15 { background: rgba(111, 168, 255, 0.18) !important; }
.dark .bg-accent\/20 { background: rgba(111, 168, 255, 0.2) !important; }
.dark .bg-gold\/10 { background: rgba(227, 192, 116, 0.12) !important; }
.dark .bg-gold\/20 { background: rgba(227, 192, 116, 0.18) !important; }
.dark .bg-gold\/30 { background: rgba(227, 192, 116, 0.25) !important; }
.dark .bg-navy\/10 { background: rgba(27, 51, 122, 0.3) !important; }
.dark .bg-navy\/20 { background: rgba(27, 51, 122, 0.4) !important; }

/* Gradient cards: re-tone in dark */
.dark .bg-gradient-to-br.from-rose\/20 { background: linear-gradient(to bottom right, rgba(255,122,140,0.18), rgba(255,122,140,0.05)) !important; }
.dark .bg-gradient-to-br.from-accent\/20 { background: linear-gradient(to bottom right, rgba(111,168,255,0.18), rgba(111,168,255,0.05)) !important; }
.dark .bg-gradient-to-br.from-navy\/20 { background: linear-gradient(to bottom right, rgba(60,90,180,0.25), rgba(60,90,180,0.06)) !important; }
.dark .bg-gradient-to-br.from-mint\/20 { background: linear-gradient(to bottom right, rgba(74,222,128,0.2), rgba(74,222,128,0.05)) !important; }
.dark .bg-gradient-to-br.from-gold\/30 { background: linear-gradient(to bottom right, rgba(227,192,116,0.25), rgba(227,192,116,0.07)) !important; }

/* Hero gradient overlay — Tailwind inlines via-bg cream into stops, so
   custom-property overrides don't work. Replace background-image directly. */
.dark .bg-gradient-to-br.from-navy\/5,
.dark section .absolute.inset-0.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right,
    rgba(15, 28, 63, 0.55) 0%,
    rgba(10, 14, 26, 0) 55%,
    rgba(227, 192, 116, 0.08) 100%) !important;
}
/* Light mode: soften the bright streak so subtitle text reads cleanly */
:root:not(.dark) section .absolute.inset-0.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right,
    rgba(15, 28, 63, 0.04) 0%,
    rgba(247, 245, 240, 0) 60%,
    rgba(227, 192, 116, 0.12) 100%) !important;
}
/* Hero subtitle bumped from 70% → 85% for guaranteed legibility on either bg */
#heroSubtitle { color: rgba(10, 14, 26, 0.85) !important; }
.dark #heroSubtitle { color: rgba(241, 239, 233, 0.92) !important; }

/* Inputs */
.dark input[type="password"],
.dark input[type="text"],
.dark input[type="email"] {
  color: #f1efe9;
}

/* Tables */
.dark table thead { background: rgba(255,255,255,0.04); color: rgba(241,239,233,0.7); }
.dark table tbody tr { border-color: rgba(255,255,255,0.06); }
.dark table tbody tr:hover { background: rgba(255,255,255,0.03); }

/* Make 'Includes:' labels & details readable on dark */
.dark .text-white\/70 { color: rgba(255,255,255,0.78) !important; }
.dark .text-white\/60 { color: rgba(255,255,255,0.65) !important; }

/* Focus rings always visible */
.dark *:focus-visible {
  outline: 2px solid #c9a35d;
  outline-offset: 2px;
}

/* Footer link hover on dark */
.dark footer a:hover { color: #c9a35d !important; }

/* ========================================================
   LIGHT MODE — WCAG AA contrast pass on cream (#f7f5f0)
   Tailwind CDN injects after our CSS, so use !important
   ======================================================== */
:root:not(.dark) .text-gold,
html:not(.dark) .text-gold { color: #8a6a2c !important; }   /* was #c9a35d (2.17) → 5.2 ratio */
:root:not(.dark) .text-mint,
html:not(.dark) .text-mint { color: #047857 !important; }   /* was #10b981 (2.33) → 5.4 ratio */
:root:not(.dark) .text-rose,
html:not(.dark) .text-rose { color: #be123c !important; }   /* was #f43f5e (3.37) → 6.1 ratio */
:root:not(.dark) .text-accent,
html:not(.dark) .text-accent { color: #1e3a8a !important; } /* was #1d4ed8 → darker for badges */

/* Hero "~120 days" stays brand-gold but slightly darker on light bg */
:root:not(.dark) .from-gold,
html:not(.dark) .from-gold { color: #8a6a2c; }

/* Eligibility "✓ Eligible" badge tint deepens for contrast */
:root:not(.dark) .bg-mint\/15 { background: rgba(4, 120, 87, 0.18) !important; }
:root:not(.dark) .bg-mint\/10 { background: rgba(4, 120, 87, 0.13) !important; }

/* PRELIMS / MAINS labels in syllabus accordion */
:root:not(.dark) .text-mint.uppercase { color: #047857 !important; font-weight: 700; }
:root:not(.dark) .text-rose.uppercase { color: #be123c !important; font-weight: 700; }

/* Phase strip card text — Foundation (mint), Mock Intensive (gold), IBPS Sprint (rose) */
:root:not(.dark) .border-mint\/40 .opacity-70,
:root:not(.dark) .border-mint\/40 { color: #047857 !important; }

/* ========================================================
   DARK MODE — text-navy resolution.
   Default: text-navy on dark page bg is invisible → use light gold.
   Exception: text-navy ON a SOLID bg-gold pill stays dark navy
   (the ★ BEST badge — only place using solid bg-gold).
   ======================================================== */
.dark span.bg-gold.text-navy,
.dark .bg-gold.text-navy { color: #0f1c3f !important; }