/* Hand-written companion to the generated dark.css.
   Covers what a mechanical pass cannot: gradients, inline style="" colours
   (which beat any stylesheet, hence !important), photo treatment, and the
   toggle button itself. Load AFTER dark.css. */

/* ============================ 1. GRADIENTS ============================
   Only the ones that paint a light surface. Brand gradients (gold elite
   badge, discount red→pink, academy CTA) keep their identity on purpose. */
html[data-theme="dark"] .instructor-section {
  background: linear-gradient(180deg, #0d0f1a 0%, #121527 50%, #0d0f1a 100%);
}
html[data-theme="dark"] .academy-marquee-section {
  background: linear-gradient(180deg, #0d0f1a 0%, #121527 100%);
}
html[data-theme="dark"] .pricing-card.elite {
  background: linear-gradient(180deg, #191d30 0%, #171a28 100%);
}
html[data-theme="dark"] .prize-card.gold-glow {
  background: linear-gradient(180deg, #241d0f 0%, #161a2b 100%);
}
html[data-theme="dark"] .calc-result-box {
  background: linear-gradient(135deg, #16203a 0%, #1d1730 100%);
}
html[data-theme="dark"] .hero-expert-badge-top {
  background: linear-gradient(135deg, #232840 0%, #2f3550 100%);
}
/* the faint grid would vanish entirely on a dark ground */
html[data-theme="dark"] .bg-grid-overlay {
  background-image:
    linear-gradient(to right, rgba(122,165,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(122,165,255,.055) 1px, transparent 1px);
}

/* ======================= 2. INLINE style="" COLOURS =======================
   Matching on the attribute avoids editing 42 spots in the HTML — and keeps
   this whole theme removable by deleting two <link> tags. */
html[data-theme="dark"] [style*="color:#0f172a"],
html[data-theme="dark"] [style*="color: #0f172a"]   { color: #e8eaf6 !important; }
html[data-theme="dark"] [style*="color:#64748b"],
html[data-theme="dark"] [style*="color: #64748b"]   { color: #969db8 !important; }
html[data-theme="dark"] [style*="color:#94a3b8"],
html[data-theme="dark"] [style*="color: #94a3b8"]   { color: #7f879f !important; }
html[data-theme="dark"] [style*="color:#b45309"]    { color: #fbbf24 !important; }
html[data-theme="dark"] [style*="color:#dc2626"]    { color: #f87171 !important; }
html[data-theme="dark"] [style*="color:#ef4444"]    { color: #f87171 !important; }
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"] { background: #161a2b !important; }
html[data-theme="dark"] [style*="background: #f8fafc"],
html[data-theme="dark"] [style*="background:#f8fafc"] { background: #121527 !important; }
html[data-theme="dark"] [style*="#e2e8f0"]          { border-color: #2a2f45 !important; }
html[data-theme="dark"] [style*="#cbd5e1"]          { border-color: #363c55 !important; }
html[data-theme="dark"] [style*="#ddd6fe"]          { border-color: #332a55 !important; }
/* the "chegirma" pill: light-blue tint reads as a grey smudge on dark */
html[data-theme="dark"] [style*="background: rgba(37, 99, 235, 0.15)"] {
  background: rgba(122,165,255,.16) !important;
  color: #a8c5ff !important;
  border-color: rgba(122,165,255,.35) !important;
}

/* form fields: inline background:#fff + border, and the placeholder */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: #111422;
  color: #e8eaf6;
  border-color: #363c55;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #6f7690; }

/* ===================== 3. RESULT PHOTOS & CERTIFICATES =====================
   41 screenshots on white paper. At full brightness they burn holes in a dark
   page, so they sit back slightly and come up to full on hover / in lightbox. */
html[data-theme="dark"] .marquee-card-img {
  filter: brightness(.86) contrast(1.03);
  transition: filter .25s ease;
}
html[data-theme="dark"] .marquee-card:hover .marquee-card-img { filter: none; }
html[data-theme="dark"] .cert-lightbox-img { filter: none; }          /* deliberate viewing */
html[data-theme="dark"] .marquee-card {
  border-color: #2a2f45;
  background: #161a2b;
}

/* ============================ 4. THEME TOGGLE ============================ */
.theme-toggle {
  --tt: 38px;
  width: var(--tt); height: var(--tt);
  flex: 0 0 auto;
  margin-left: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.theme-toggle:hover { background: var(--bg-tertiary); color: var(--text-primary); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 2px solid #7aa5ff; outline-offset: 2px; }
.theme-toggle svg { width: 19px; height: 19px; display: block; }
/* one icon shows at a time — sun in dark mode (tap to go light), moon in light */
.theme-toggle .tt-sun { display: none; }
html[data-theme="dark"] .theme-toggle .tt-sun { display: block; }
html[data-theme="dark"] .theme-toggle .tt-moon { display: none; }
html[data-theme="dark"] .theme-toggle {
  background: #1c2138; border-color: #363c55; color: #ffd479;
}
@media (max-width: 520px) {
  .theme-toggle { --tt: 34px; margin-left: 6px; }
  .theme-toggle svg { width: 17px; height: 17px; }
}

/* ===================== 5. ODDS AND ENDS ON DARK ===================== */
html[data-theme="dark"] .navbar { background: rgba(13,15,26,.82); border-bottom-color: #232840; }
html[data-theme="dark"] .navbar.scrolled { background: rgba(13,15,26,.95); }
html[data-theme="dark"] ::selection { background: rgba(122,165,255,.3); }
html[data-theme="dark"] hr { border-color: #2a2f45; }
/* scrollbars follow the theme rather than staying stark white */
html[data-theme="dark"] { scrollbar-color: #363c55 #0d0f1a; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0d0f1a; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #363c55; border-radius: 8px; }