/* =========================================================
   QGA DARK MODE - DEEP GENZARI
   Night mode only. Light mode is untouched.
   Main background: #073B3A
   ========================================================= */

:root {
    --qga-night-genzari: #073b3a;
    --qga-night-genzari-surface: #0a4543;
    --qga-night-genzari-soft: #0d504d;
    --qga-night-white: #ffffff;
    --qga-night-accent: #53f4df;
}

/* Background of the night mode itself. */
html[data-theme="dark"],
html[data-qga-theme="dark"],
html[data-mode="dark"],
html.dark,
html.dark-mode,
html.qga-dark,
html.qga-theme-dark {
    background-color: var(--qga-night-genzari) !important;
    color-scheme: dark;
}

html[data-theme="dark"] body,
html[data-qga-theme="dark"] body,
html[data-mode="dark"] body,
html.dark body,
html.dark-mode body,
html.qga-dark body,
html.qga-theme-dark body,
body[data-theme="dark"],
body[data-qga-theme="dark"],
body[data-mode="dark"],
body.dark,
body.dark-mode,
body.qga-dark,
body.qga-theme-dark {
    background: var(--qga-night-genzari) !important;
    background-color: var(--qga-night-genzari) !important;
    color: var(--qga-night-white) !important;
}

/* Main site surfaces should follow the same deep genzari background. */
html[data-theme="dark"] main,
html[data-theme="dark"] .site,
html[data-theme="dark"] .site-content,
html[data-theme="dark"] .qga-site,
html[data-theme="dark"] .qga-main,
html[data-theme="dark"] .qga-page-shell,
html.dark main,
html.dark .site,
html.dark .site-content,
body.dark-mode main,
body.dark-mode .site,
body.dark-mode .site-content,
body.qga-dark main,
body.qga-dark .site,
body.qga-dark .site-content,
body.qga-theme-dark main {
    background-color: var(--qga-night-genzari) !important;
}

/* Header in night mode: same identity, just a touch of separation. */
html[data-theme="dark"] .qga-site-header,
html[data-theme="dark"] .qga-header,
html[data-theme="dark"] .site-header,
html.dark .qga-site-header,
html.dark .qga-header,
html.dark .site-header,
body.dark-mode .qga-site-header,
body.dark-mode .qga-header,
body.dark-mode .site-header,
body.qga-dark .qga-site-header,
body.qga-dark .qga-header,
body.qga-dark .site-header {
    background: rgba(7, 59, 58, 0.97) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* Dropdown / mobile-menu surfaces. */
html[data-theme="dark"] .qga-language-menu,
html[data-theme="dark"] .qga-language-dropdown,
html[data-theme="dark"] .qga-mobile-menu,
html.dark .qga-language-menu,
html.dark .qga-language-dropdown,
html.dark .qga-mobile-menu,
body.dark-mode .qga-language-menu,
body.dark-mode .qga-language-dropdown,
body.dark-mode .qga-mobile-menu,
body.qga-dark .qga-language-menu,
body.qga-dark .qga-language-dropdown,
body.qga-dark .qga-mobile-menu {
    background-color: var(--qga-night-genzari-surface) !important;
    border-color: rgba(255,255,255,0.09) !important;
}

/* Night-mode text: white + vivid turquoise only. */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .qga-brand-name,
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.qga-dark h1,
body.qga-dark h2,
body.qga-dark h3,
body.qga-dark h4 {
    color: var(--qga-night-white) !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] .qga-home-intro__text,
html.dark p,
html.dark li,
html.dark .qga-home-intro__text,
body.dark-mode p,
body.dark-mode li,
body.dark-mode .qga-home-intro__text,
body.qga-dark p,
body.qga-dark li,
body.qga-dark .qga-home-intro__text {
    color: var(--qga-night-accent) !important;
}

/* Header links stay clean white; hover/active becomes vivid turquoise. */
html[data-theme="dark"] header a,
html.dark header a,
body.dark-mode header a,
body.qga-dark header a {
    color: var(--qga-night-white) !important;
}

html[data-theme="dark"] header a:hover,
html[data-theme="dark"] header a:focus-visible,
html[data-theme="dark"] header a[aria-current="page"],
html.dark header a:hover,
html.dark header a:focus-visible,
html.dark header a[aria-current="page"],
body.dark-mode header a:hover,
body.dark-mode header a:focus-visible,
body.dark-mode header a[aria-current="page"],
body.qga-dark header a:hover,
body.qga-dark header a:focus-visible,
body.qga-dark header a[aria-current="page"] {
    color: var(--qga-night-accent) !important;
}

/* Keep form controls readable when we add them later. */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html.dark input,
html.dark textarea,
html.dark select,
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.qga-dark input,
body.qga-dark textarea,
body.qga-dark select {
    background-color: var(--qga-night-genzari-surface) !important;
    color: var(--qga-night-white) !important;
    border-color: rgba(255,255,255,0.14) !important;
}