/* info-theme.css — dark theme for standalone disease-info pages
   (Hepatitis, Child, measles, MMR, mumps, rubella, Pneumococcal, Tetanus) */

body.dark-theme {
    background-color: #0b0d12 !important;
    color: #e8e8e8 !important;
}

/* ── HEADER — distinct dark shade of its own ── */
body.dark-theme .header {
    background-color: #070911 !important;
}
body.dark-theme .header .logo,
body.dark-theme .header .header-subtitle,
body.dark-theme .header-content .logo,
body.dark-theme .header-content .header-subtitle {
    color: #e8e8e8 !important;
}

/* ── NAV BAR — distinct shade from header AND body, with a real hover state ── */
body.dark-theme .nav-bar {
    background-color: #151a28 !important;
    border-bottom: 1px solid #2a3348 !important;
}
body.dark-theme .nav-bar .nav-link {
    color: #c3cbe0 !important;
    background: transparent !important;
}
body.dark-theme .nav-bar .nav-link:hover {
    color: #ffffff !important;
    background: #6884d3 !important;
}

/* ── Headings & body text ── */
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme p,
body.dark-theme li,
body.dark-theme span,
body.dark-theme strong,
body.dark-theme small {
    color: #e8e8e8 !important;
}

body.dark-theme .main-heading,
body.dark-theme .section-heading,
body.dark-theme .info-heading,
body.dark-theme .fact-title,
body.dark-theme .symptom-title,
body.dark-theme .complication-title,
body.dark-theme .consequence-title {
    color: #8fa4e0 !important;
}

/* ── Card-style content blocks ── */
body.dark-theme .content-section,
body.dark-theme .stat-box,
body.dark-theme .symptom-box,
body.dark-theme .prevention-box,
body.dark-theme .complication-box,
body.dark-theme .consequence-box,
body.dark-theme .fact-box,
body.dark-theme .source-info,
body.dark-theme .highlight-box {
    background-color: #151a28 !important;
    color: #e8e8e8 !important;
    border-color: #2a3348 !important;
}

/* ── "How it Spreads" transmission boxes — these were solid light-blue/white,
   completely unreadable in dark mode ── */
body.dark-theme .transmission-item {
    background-color: #1c2338 !important;
    color: #e8e8e8 !important;
    border-left: 3px solid #6884d3 !important;
}

/* ── Vaccine availability pill (e.g. "Available (MMR)") ── */
body.dark-theme .vaccine-status {
    background-color: #26314f !important;
    color: #b9c6f5 !important;
}

body.dark-theme a {
    color: #8fa4e0 !important;
}
body.dark-theme a:hover {
    color: #6884d3 !important;
}

/* ── FOOTER — clearly separated with a top border and its own darker shade ── */
body.dark-theme .footer {
    background-color: #070911 !important;
    color: #e8e8e8 !important;
    border-top: 1px solid #22283a !important;
}

/* ── ICON TOGGLE BUTTONS — theme toggle (moon icon) and language
   toggle (EN/UR). This mirrors the exact .theme-toggle / .language-toggle
   block from style.css (used on all main site pages), with its
   var(--text) / var(--primary-lighter) / var(--primary-dark) swapped
   for real hex colors, since those variables aren't defined on these
   standalone info pages. Works in both light and dark mode. ── */
.theme-toggle,
.language-toggle,
#themeToggle {
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 1.2rem;
    cursor: pointer;
    margin-left: 15px;
    color: #28375f;
    transition: color 0.3s, background-color 0.3s;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.language-toggle {
    font-size: 14px;
    font-weight: 700;
}

.theme-toggle:hover,
.language-toggle:hover,
#themeToggle:hover {
    background-color: rgba(104, 132, 211, 0.15) !important;
    color: #6884d3;
}

.theme-toggle:focus,
.theme-toggle:active,
.language-toggle:focus,
.language-toggle:active,
#themeToggle:focus,
#themeToggle:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

body.dark-theme .theme-toggle,
body.dark-theme .language-toggle,
body.dark-theme #themeToggle {
    color: #e8e8e8;
}

body.dark-theme .theme-toggle:hover,
body.dark-theme .language-toggle:hover,
body.dark-theme #themeToggle:hover {
    background-color: rgba(104, 132, 211, 0.2) !important;
    color: #8fa4e0;
}

/* Keep the language-switch <form> from disturbing nav-bar's flex layout */
.nav-bar form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

/* Nudge the moon icon down slightly so it sits on the same visual
   baseline as the nav-link text (Overview, Symptoms, etc.) next to it */
.theme-toggle i,
#themeToggle i {
    position: relative;
    top: 10px;
}