/* ===================================================================
 * Dark Mode & Sky Canvas Styles
 *
 * The Academic theme (academic.css) already provides .dark class styles.
 * This file adds the sky canvas, smooth transitions, and supplementary
 * dark mode styles for elements not covered by the built-in dark styles.
 * ------------------------------------------------------------------- */

/* --- Sky canvas (fixed background for all pages) --- */
.sky-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Ensure page content sits above the canvas */
body {
    position: relative;
    margin-top: 0 !important;
}

body > *:not(.sky-canvas) {
    position: relative;
    z-index: 1;
}

/* Navbar must be above other content so mobile dropdown isn't blocked */
#navbar-main {
    z-index: 1040;
}

/* --- Theme toggle button --- */
.theme-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.5rem;
    color: inherit;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.theme-toggle-btn:hover {
    opacity: 1;
}

body.dark .theme-toggle-btn {
    color: #f8f8f2;
}

/* Blog nav toggle — override main.css button defaults and match nav style */
.s-header__nav li .theme-toggle-btn {
    font-size: 16px;
    padding: 0 15px;
    line-height: 48px;
    height: 48px;
    vertical-align: middle;
    opacity: 1;
    background-color: transparent;
    border: none;
    border-radius: 0;
    margin: 0;
    letter-spacing: 0;
    text-transform: none;
    font-weight: normal;
}

.s-header__nav li .theme-toggle-btn:hover,
.s-header__nav li .theme-toggle-btn:focus {
    background-color: transparent;
    border: none;
}

.s-header__nav li .theme-toggle-btn:hover {
    opacity: 1;
}

[data-theme="dark"] .s-header__nav li .theme-toggle-btn {
    color: #f8f8f2;
}

[data-theme="dark"] .s-header__nav li .theme-toggle-btn:hover {
    color: #fff;
}

[data-theme="light"] .s-header__nav li .theme-toggle-btn {
    color: #555;
}

[data-theme="light"] .s-header__nav li .theme-toggle-btn:hover {
    color: #222;
}

/* --- Smooth transitions --- */
body,
body.dark,
.navbar,
.site-footer,
footer,
.home-section,
.card {
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* ===================================================================
 * # Night mode (dark) — Academic pages
 * ------------------------------------------------------------------- */

/* Make backgrounds semi-transparent so starfield shows through */
body.dark,
html[data-theme="dark"] body {
    background: transparent !important;
}

body.dark .navbar,
[data-theme="dark"] .navbar {
    background-color: rgba(30, 31, 41, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: none !important;
}

body.dark .navbar-light .navbar-brand {
    color: #f8f8f2;
}

body.dark .navbar-light .navbar-brand:hover,
body.dark .navbar-light .navbar-brand:focus {
    color: #fff;
}

body.dark .navbar-light .navbar-nav .nav-link,
body.dark .navbar .navbar-nav .nav-link,
body.dark #navbar-main .main-menu-item ul li .nav-link {
    color: rgba(248, 248, 242, 0.7) !important;
}

body.dark .navbar-light .navbar-nav .nav-link:hover,
body.dark .navbar-light .navbar-nav .nav-link:focus,
body.dark .navbar .navbar-nav .nav-link:hover,
body.dark .navbar .navbar-nav .nav-link:focus {
    color: #f8f8f2 !important;
}

body.dark .navbar-light .navbar-nav .nav-link.active,
body.dark .navbar-light .navbar-nav .active > .nav-link,
body.dark .navbar .navbar-nav .nav-link.active,
body.dark #navbar-main .main-menu-item ul li .nav-link.active {
    color: #f8f8f2 !important;
}

body.dark .navbar-light .navbar-toggler {
    color: rgba(248, 248, 242, 0.7);
    border-color: rgba(248, 248, 242, 0.1);
}

/* Mobile navbar dropdown — dark mode */
body.dark .navbar-collapse {
    background-color: rgba(30, 31, 41, 0.95) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 0 0 8px 8px;
}

@media (min-width: 992px) {
    body.dark .navbar-collapse {
        background-color: transparent !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* Home sections — transparent so starfield shows through consistently */
body.dark .home-section,
[data-theme="dark"] .home-section {
    background-color: transparent !important;
}

body.dark .home-section:nth-of-type(even),
[data-theme="dark"] .home-section:nth-of-type(even) {
    background-color: transparent !important;
}

/* Footer */
body.dark .site-footer,
[data-theme="dark"] .site-footer {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.54);
}

body.dark footer,
[data-theme="dark"] footer {
    color: rgba(255, 255, 255, 0.54);
}

body.dark footer p,
[data-theme="dark"] footer p {
    color: rgba(255, 255, 255, 0.54);
}

/* Network/social icons */
body.dark .network-icon li a {
    color: rgba(255, 255, 255, 0.7);
}

body.dark .network-icon li:hover a {
    color: #fff;
}

/* Links */
body.dark a {
    color: #7eb8da;
}

body.dark a:hover {
    color: #a3d1eb;
}

/* Contact page — override contact-style.css which sets .container bg and body color globally */
body.dark {
    color: #f8f8f2 !important;
}

body.dark .navbar .container {
    background-color: transparent !important;
}

body.dark .contact-page-container {
    color: #f8f8f2;
}

body.dark .contact-page-container {
    background-color: transparent !important;
}

body.dark .contact-page-container label {
    color: #f8f8f2;
}

body.dark .contact-page-container h2,
body.dark .contact-page-container h3,
body.dark .contact-page-container p {
    color: #e0e0e0;
}

body.dark .contact-page-container input[type=text],
body.dark .contact-page-container input[type=email],
body.dark .contact-page-container textarea {
    background-color: #44475a;
    color: #f8f8f2;
    border-color: #555;
}

body.dark .contact-page-container input[type=submit] {
    background-color: #04AA6D;
    color: #fff;
}

/* Cookie consent */
body.dark .cc-window {
    background-color: rgba(68, 71, 90, 0.95) !important;
    color: #f8f8f2 !important;
}

/* ===================================================================
 * # Day mode (light) — Academic pages
 * Transparent backgrounds so sky canvas shows through
 * ------------------------------------------------------------------- */

[data-theme="light"] body:not(.dark),
html[data-theme="light"] body {
    background: transparent !important;
}

[data-theme="light"] .navbar {
    background-color: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Mobile navbar dropdown — needs readable background */
[data-theme="light"] .navbar-collapse {
    background-color: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 0 0 8px 8px;
}

@media (min-width: 992px) {
    [data-theme="light"] .navbar-collapse {
        background-color: transparent !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* Links — complement the blue sky */
[data-theme="light"] a {
    color: #2a6496;
}

[data-theme="light"] a:hover,
[data-theme="light"] a:focus {
    color: #1a4971;
}

/* Content sections — fully transparent so sky shows through */
[data-theme="light"] .home-section {
    background-color: transparent !important;
}

[data-theme="light"] .home-section:nth-of-type(even) {
    background-color: transparent !important;
}

[data-theme="light"] footer,
[data-theme="light"] .site-footer {
    background-color: transparent !important;
    margin-top: 0 !important;
    color: rgba(0, 0, 0, 0.6);
}

/* News/publications/projects/contact page content areas */
[data-theme="light"] .container {
    background-color: transparent !important;
}

/* Contact page — override contact-style.css body background */
[data-theme="light"] .contact-page-container {
    background-color: transparent !important;
}

[data-theme="light"] .contact-page-container .container {
    background-color: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
}

[data-theme="light"] .card {
    background-color: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ===================================================================
 * # Blog pages (Keep It Simple theme) — Night mode
 * ------------------------------------------------------------------- */

[data-theme="dark"] .s-header {
    background-color: transparent;
}

[data-theme="dark"] .s-header::before {
    display: none;
}

[data-theme="dark"] .s-header__nav-wrap {
    top: 0;
    background-color: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .s-header__content {
    background-color: transparent;
    background-image: none;
    border-bottom: none;
}

[data-theme="dark"] .s-header__logotext a {
    color: #f8f8f2;
}

[data-theme="dark"] .s-header__tagline {
    color: rgba(248, 248, 242, 0.6);
}

[data-theme="dark"] .s-header__nav li a {
    color: rgba(248, 248, 242, 0.7);
}

[data-theme="dark"] .s-header__nav li a:hover,
[data-theme="dark"] .s-header__nav li.current a {
    color: #f8f8f2;
}

[data-theme="dark"] .s-header__nav li.current > a {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Blog body */
html[data-theme="dark"] body {
    background: rgba(40, 42, 54, 0.6);
    color: #ccc;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #e0e0e0;
}

[data-theme="dark"] a {
    color: #7eb8da;
}

[data-theme="dark"] a:hover,
[data-theme="dark"] a:focus {
    color: #a3d1eb;
}

/* Blog content area */
[data-theme="dark"] .s-content {
    background: transparent;
}

[data-theme="dark"] .entry__header-title {
    color: #f8f8f2;
}

[data-theme="light"] .entry__meta,
[data-theme="light"] .entry__meta ul li {
    color: #555;
}

[data-theme="dark"] .entry__meta {
    color: rgba(248, 248, 242, 0.5);
}

[data-theme="dark"] .entry__content p,
[data-theme="dark"] .entry__content li {
    color: #ccc;
}

[data-theme="dark"] .entry__content blockquote {
    border-color: #3d5a80;
    color: #aaa;
}

[data-theme="dark"] .entry__content blockquote p {
    color: #aaa;
}

/* Blog footer */
[data-theme="dark"] #footer {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.54);
}

[data-theme="dark"] #footer a {
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .ss-copyright {
    color: rgba(255, 255, 255, 0.54);
}

[data-theme="dark"] .ss-go-top a {
    background-color: #44475a;
    color: #f8f8f2;
}

/* Blog preloader */
[data-theme="dark"] #preloader {
    background-color: #282a36;
}

/* Forms */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: #44475a;
    color: #f8f8f2;
    border-color: #555;
}

/* Code blocks */
[data-theme="dark"] pre,
[data-theme="dark"] code {
    background-color: #44475a;
    color: #8be9fd;
}

/* Horizontal rules */
[data-theme="dark"] hr {
    border-color: #44475a;
}

/* Images — subtle brightness adjustment at night */
[data-theme="dark"] img {
    opacity: 0.9;
}

[data-theme="dark"] img:hover {
    opacity: 1;
}

/* Selection color */
[data-theme="dark"] ::selection {
    background: #3d5a80;
    color: #fff;
}

/* ===================================================================
 * # Blog pages (Keep It Simple theme) — Day mode
 * Make backgrounds slightly transparent so sky shows through
 * ------------------------------------------------------------------- */

[data-theme="light"] .s-header {
    background-color: transparent;
}

[data-theme="light"] .s-header__content {
    background-color: transparent;
    background-image: none;
    border-bottom: none;
}

[data-theme="light"] .s-header__nav-wrap {
    background-color: rgba(30, 31, 41, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    top: 0;
}

[data-theme="light"] .s-header__nav li a {
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .s-header__nav li a:hover,
[data-theme="light"] .s-header__nav li a:focus {
    color: #ffffff;
}

[data-theme="light"] .s-header__nav li.current > a {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: none !important;
    color: #ffffff;
}

[data-theme="light"] .s-content {
    background: rgba(255, 255, 255, 0.35);
}

[data-theme="light"] #footer {
    background-color: transparent;
}

/* Override brown (#795548) buttons with sky-blue — light mode */
[data-theme="light"] .btn-outline-primary {
    color: #2a6496;
    border-color: #2a6496;
}

[data-theme="light"] .btn-outline-primary:hover {
    color: #fff;
    background-color: #2a6496;
    border-color: #2a6496;
}

[data-theme="light"] .btn-outline-primary:focus,
[data-theme="light"] .btn-outline-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(42, 100, 150, 0.5);
}

[data-theme="light"] .btn-outline-primary:not(:disabled):not(.disabled):active,
[data-theme="light"] .btn-outline-primary:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: #1a4971;
    border-color: #1a4971;
}

/* Override brown (#795548) buttons — dark mode */
[data-theme="dark"] .btn-outline-primary,
body.dark .btn-outline-primary {
    color: #7eb8da;
    border-color: #7eb8da;
}

[data-theme="dark"] .btn-outline-primary:hover,
body.dark .btn-outline-primary:hover {
    color: #fff;
    background-color: #3d6d8e;
    border-color: #3d6d8e;
}

[data-theme="dark"] .btn-outline-primary:focus,
body.dark .btn-outline-primary:focus {
    box-shadow: 0 0 0 .2rem rgba(126, 184, 218, 0.4);
}

[data-theme="dark"] .btn-outline-primary:not(:disabled):not(.disabled):active,
body.dark .btn-outline-primary:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: #2a6496;
    border-color: #2a6496;
}

/* Cookie consent banner — override brown */
.cc-window.cc-banner {
    background-color: #2a6496 !important;
}

.cc-btn.cc-dismiss {
    color: #2a6496 !important;
}

/* Override blog theme brown (#795548) with sky-blue in light mode */
[data-theme="light"] .s-header::before {
    display: none;
}

[data-theme="light"] .s-header__logotext a {
    color: #2a6496;
}

[data-theme="light"] .s-header__tagline {
    color: #555;
}

[data-theme="light"] .s-header__nav li.current > a {
    color: #ffffff;
}

[data-theme="light"] .ss-go-top a {
    background-color: #2a6496;
}

[data-theme="light"] .header-menu-toggle {
    top: 0;
    background-color: #2a6496;
}

[data-theme="dark"] .header-menu-toggle {
    top: 0;
    background-color: rgba(30, 31, 41, 0.9);
}

/* Mobile nav overlay — needs opaque background so content doesn't bleed through */
@media only screen and (max-width: 800px) {
    .s-header {
        z-index: 100 !important;
    }

    .s-header__nav-wrap {
        z-index: 100;
    }

    [data-theme="light"] .s-header__nav-wrap {
        background-color: rgba(255, 255, 255, 1);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    [data-theme="light"] .s-header__nav li a {
        color: #333 !important;
    }

    [data-theme="light"] .s-header__nav li a:hover,
    [data-theme="light"] .s-header__nav li a:focus {
        color: #000 !important;
    }

    [data-theme="light"] .s-header__nav li.current > a {
        color: #2a6496 !important;
        background-color: rgba(42, 100, 150, 0.1);
    }

    [data-theme="light"] .s-header__nav > li {
        border-bottom-color: rgba(0, 0, 0, 0.1);
    }

    [data-theme="light"] .s-header__nav > li:first-child {
        border-top-color: rgba(0, 0, 0, 0.15);
    }

    [data-theme="dark"] .s-header__nav-wrap {
        background-color: rgba(30, 31, 41, 0.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    [data-theme="dark"] .s-header__nav > li {
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    [data-theme="dark"] .s-header__nav > li:first-child {
        border-top-color: rgba(255, 255, 255, 0.15);
    }
}

/* --- Comment section dark mode --- */
[data-theme="dark"] .comment__info .comment__author {
    color: #ffffff;
}