/* =========================================================
   DARK MODE — VitaCheck
   ========================================================= */
html[data-theme="dark"] {
  --surface: #0a1115;
  --surface-2: #111b20;
  --dark: #edf6f4;
  --light: #0a1115;
  --muted: rgba(237, 246, 244, 0.64);
  --line: rgba(237, 246, 244, 0.13);
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .site-header {
  background: rgba(10, 17, 21, 0.88);
}

html[data-theme="dark"] .page-hero {
  color: white;
}

html[data-theme="dark"] .page-hero .lead {
  color: rgba(255, 255, 255, 0.82);
}

html[data-theme="dark"] .page-hero .eyebrow {
  color: white !important;
}

html[data-theme="dark"] .sidebar {
  background: #071014;
  color: white;
}

html[data-theme="dark"] .footer {
  background: #071014;
}

html[data-theme="dark"] .btn-dark {
  background: #edf6f4;
  color: #071014;
}

/* HOME 2 — hero card must stay dark with light text in dark mode */
html[data-theme="dark"] .page-home2 .hero > .container > .card {
  background: linear-gradient(
    135deg,
    #071014,
    color-mix(in srgb, #071014 78%, var(--primary))
  ) !important;
  color: #edf6f4 !important;
}

html[data-theme="dark"] .page-home2 .hero > .container > .card h1,
html[data-theme="dark"] .page-home2 .hero > .container > .card h2,
html[data-theme="dark"] .page-home2 .hero > .container > .card h3 {
  color: #edf6f4 !important;
}

html[data-theme="dark"] .page-home2 .hero > .container > .card .lead {
  color: rgba(237, 246, 244, 0.78) !important;
}

html[data-theme="dark"] .page-home2 .hero > .container > .card .eyebrow {
  color: color-mix(in srgb, var(--primary) 70%, #edf6f4) !important;
}

html[data-theme="dark"] .page-home2 .hero > .container > .card .btn-outline {
  border-color: rgba(237, 246, 244, 0.35);
  color: #edf6f4;
}

html[data-theme="dark"] .page-home2 .hero > .container > .card .btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: transparent;
}

/* Nav dropdown */
html[data-theme="dark"] .nav-drop-menu {
  background: var(--surface-2);
}

html[data-theme="dark"] .nav-drop-menu a {
  color: var(--dark) !important;
}

/* Other dark surfaces */
html[data-theme="dark"] .page-services main > .section:nth-of-type(4) {
  background: #071014;
  color: #edf6f4;
}

html[data-theme="dark"] .page-hero::before {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.26));
}

html[data-theme="dark"] .medical-float {
  opacity: 0.3;
}

/* Mobile menu in dark mode */
html[data-theme="dark"] .mobile-menu {
  background: var(--surface-2);
  border-top-color: var(--line);
}

html[data-theme="dark"] .mobile-menu > a {
  color: var(--dark);
}

html[data-theme="dark"] .mobile-home-group a {
  background: var(--surface);
  border-color: var(--line);
  color: var(--dark);
}


/* Dim overlays stay strong in dark mode */
html[data-theme="dark"] .page-hero::before {
  background: linear-gradient(
    105deg,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.72) 45%,
    rgba(0, 0, 0, 0.50) 100%
  );
}
html[data-theme="dark"] .page-hero-login::before {
  background: linear-gradient(
    105deg,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.70) 50%,
    rgba(0, 0, 0, 0.50) 100%
  );
}

html[data-theme="dark"] .page-home2 .hero::after {
  background: linear-gradient(
    105deg,
    rgba(0, 0, 0, 0.60) 0%,
    rgba(0, 0, 0, 0.40) 100%
  );
}


/* Login/Register form card readable in dark mode */
html[data-theme="dark"] .page-hero-login .card {
  background: var(--surface-2);
  color: var(--dark);
}
html[data-theme="dark"] .page-hero-login .card label,
html[data-theme="dark"] .page-hero-login .card input,
html[data-theme="dark"] .page-hero-login .card a {
  color: var(--dark);
}
html[data-theme="dark"] .page-hero-login .card input {
  background: var(--surface);
  border-color: var(--line);
  color: var(--dark);
}

/* Home 2 — Quality assurance: keep copy readable in dark mode */
html[data-theme="dark"] .page-home2 main > .section-sm:nth-of-type(6) .split > div:last-child,
html[data-theme="dark"] .page-home2 main > .section-sm:nth-of-type(6) .split > div:last-child h2 {
  color: #edf6f4 !important;
}
html[data-theme="dark"] .page-home2 main > .section-sm:nth-of-type(6) .split > div:last-child .lead {
  color: rgba(237, 246, 244, 0.78) !important;
}
html[data-theme="dark"] .page-home2 main > .section-sm:nth-of-type(6) .split > div:last-child .eyebrow {
  color: color-mix(in srgb, var(--primary) 72%, #edf6f4) !important;
}

/* Home 2 — Quality Assurance dark-mode visibility (definitive fix) */
html[data-theme="dark"] body.page-home2 main > section:nth-of-type(6) .split > div:last-child,
html[data-theme="dark"] body.page-home2 main > section:nth-of-type(6) .split > div:last-child h2,
html[data-theme="dark"] body.page-home2 main > section:nth-of-type(6) .split > div:last-child h3,
html[data-theme="dark"] body.page-home2 main > section:nth-of-type(6) .split > div:last-child p {
  color: #edf6f4 !important;
}
html[data-theme="dark"] body.page-home2 main > section:nth-of-type(6) .split > div:last-child .lead {
  color: rgba(237, 246, 244, 0.82) !important;
}
html[data-theme="dark"] body.page-home2 main > section:nth-of-type(6) .split > div:last-child .eyebrow {
  color: #79C99E !important;
}

/* Home 2 — Quality Assurance stats strip: dark-mode contrast fix only */
html[data-theme="dark"] body.page-home2 .stats-strip {
  background: #101b1d !important;
  color: #edf6f4 !important;
  border: 1px solid rgba(237, 246, 244, 0.12) !important;
}
html[data-theme="dark"] body.page-home2 .stats-strip .stat strong {
  color: #edf6f4 !important;
}
html[data-theme="dark"] body.page-home2 .stats-strip .stat span {
  color: rgba(237, 246, 244, 0.72) !important;
}