/* ── FLEET ROBINSON — THEME TOGGLE ────────────────────────────────────────── */
/* Load this AFTER styles.css                                                  */
/* Dark mode is the default (night / esoteric). Light mode is opt-in (day).   */

/* ── DAY MODE COLOUR PALETTE ── */
:root {
    --sky: #87CEEB; /* sky blue — top of gradient          */
    --sky-mid: #b8dcf0; /* sky mid — middle of gradient        */
    --sky-low: #d4eaf7; /* sky low — lower gradient            */
    --horizon: #FFF8E7; /* horizon — warm white at bottom      */
    --navy: #1a2744; /* primary dark text                   */
    --navy-deep: #0a0f1a; /* deepest navy — strong hover         */
    --navy-mid: #0d2d5a; /* mid navy                            */
    --link: #1a4a8a; /* standard link colour                */
    --link-bright: #1a6abf; /* inline body link colour             */
    --link-deep: #0d4a8a; /* link hover                          */
    --slate: #4a6080; /* secondary / muted text              */
    --sun-gold: #d4a017; /* sun gold accent                     */
    --nav-height: 64px; /* fallback — overridden by JS         */
}

/* ── MODE TOGGLE WIDGET ── */
.mode-toggle-wrap {
    margin: 3rem auto 0;
    text-align: center;
    position: relative;
    z-index: 4;
}

.mode-toggle-question {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    color: var(--ash);
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
    opacity: 0;
    animation: fadeUp 1.2s ease forwards;
    animation-delay: 1.4s;
    transition: opacity 0.4s ease;
}

.mode-toggle-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeUp 1.2s ease forwards;
    animation-delay: 1.6s;
}

.mode-btn {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.55rem 1.4rem;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(201, 168, 76, 0.35);
    background: transparent;
    color: var(--ash);
}

.mode-btn:hover {
    border-color: var(--gold);
    color: var(--gold-pale);
}

.mode-btn.active {
    background: rgba(201, 168, 76, 0.12);
    border-color: var(--gold);
    color: var(--gold-pale);
}

.mode-btn .btn-emoji {
    font-size: 1rem;
    margin-right: 0.4rem;
    vertical-align: middle;
}

/* ── CLOUDS ── */
.cloud {
    position: fixed;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 60px 40px rgba(255, 255, 255, 0.4);
    filter: blur(5px);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 1.2s ease;
}

body.day-mode .cloud {
    opacity: 1;
}

@keyframes driftCloud {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(100vw + 400px));
    }
}

/* ── LIGHT MODE (Day / Exoteric) ── */
body.day-mode {
    background-color: var(--sky-low);
    background-image: linear-gradient(
            to bottom,
            var(--sky) 0%,
            var(--sky-mid) 30%,
            var(--sky-low) 60%,
            var(--horizon) 100%
    );
    background-attachment: fixed;
    color: var(--navy);
}

/* Sun glow replaces the nebula */
body.day-mode::before {
    content: '';
    position: fixed;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 600px;
    aspect-ratio: 1 / 1;
    /*height: 600px;*/
    background: radial-gradient(ellipse at center,
    rgba(255, 220, 80, 0.35) 0%,
    rgba(255, 200, 50, 0.15) 35%,
    transparent 70%);
    pointer-events: none;
    z-index: 2;
}

/* Noise grain — lightened in day mode */
body.day-mode::after {
    opacity: 0.015;
}

/* ── STARFIELD / SUNFIELD CANVAS ── */
body.day-mode #starfield {
    opacity: 0;
    transition: opacity 1.2s ease;
}

body:not(.day-mode) #starfield {
    opacity: 1;
    transition: opacity 1.2s ease;
}

#sunfield {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease;
}

body.day-mode #sunfield {
    opacity: 1;
}

/* ── TYPOGRAPHY ── */
body.day-mode h1,
body.day-mode h2,
body.day-mode .author-name {
    color: var(--navy);
    text-shadow: 0 0 40px rgba(255, 200, 50, 0.25);
}

body.day-mode a {
    color: var(--link);
}

body.day-mode a:hover {
    color: var(--navy-mid);
}

body.day-mode strong {
    color: var(--navy);
    font-weight: 600;
}

body.day-mode .tagline,
body.day-mode .welcome-text,
body.day-mode .about-para {
    color: rgba(26, 39, 68, 0.90);
    font-weight: 400;
}

body.day-mode .opening-line,
body.day-mode .opening-line-2,
body.day-mode .opening-coda,
body.day-mode .pull {
    color: rgba(26, 39, 68, 0.85);
    font-weight: 600;
}

body.day-mode .section-heading {
    color: var(--link);
}

body.day-mode .section-heading::after {
    background: linear-gradient(to right, var(--link), transparent);
}

body.day-mode .closing-cta {
    color: var(--navy);
}

body.day-mode .closing-line {
    color: rgba(26, 39, 68, 0.8);
}

body.day-mode .about-name {
    color: var(--navy);
}

body.day-mode .about-epithet {
    color: var(--slate);
}

/* Inline body links */
body.day-mode p a,
body.day-mode .about-para a,
body.day-mode .policy-text a,
body.day-mode .content a {
    color: var(--link-bright);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(26, 106, 191, 0.4);
    text-underline-offset: 3px;
}

body.day-mode p a:hover,
body.day-mode .about-para a:hover,
body.day-mode .policy-text a:hover,
body.day-mode .content a:hover {
    color: var(--link-deep);
    text-decoration-color: rgba(13, 74, 138, 0.8);
}

/* ── NAVIGATION ── */
body.day-mode nav {
    background: rgba(135, 206, 235, 0.1) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-bottom: 1px solid rgba(135, 206, 235, 0.2);
}

body.day-mode .nav-logo,
body.day-mode .nav-links a {
    color: var(--navy) !important;
}

body.day-mode .nav-links a:hover,
body.day-mode .nav-links a.active {
    color: var(--link) !important;
}

/* ── HERO ── */
body.day-mode .hero::before {
    background: radial-gradient(ellipse at center,
    rgba(255, 220, 80, 0.2) 0%,
    rgba(200, 230, 255, 0.1) 50%,
    transparent 75%);
}

/* ── ZODIAC RING ── */
.zodiac-ring {
    z-index: 1;
}

body.day-mode .zodiac-ring svg circle,
body.day-mode .zodiac-ring svg line {
    stroke: var(--link);
}

body.day-mode .zodiac-ring svg text {
    fill: var(--link);
}

/* ── GOLD RULE ── */
body.day-mode .gold-rule span {
    background: linear-gradient(to right, var(--sun-gold), transparent);
}

body.day-mode .gold-rule em {
    color: var(--sun-gold);
}

/* ── BUTTONS ── */
body.day-mode .btn-primary-fr {
    background: var(--navy);
    border-color: var(--link);
    color: var(--horizon);
}

body.day-mode .btn-primary-fr:hover {
    background: var(--navy-deep);
    border-color: var(--gold);
    color: var(--gold-pale);
}

body.day-mode .btn-ghost {
    border-color: rgba(26, 74, 138, 0.45);
    color: var(--navy);
}

body.day-mode .btn-ghost:hover {
    border-color: var(--link);
    color: var(--link);
}

/* ── MODE TOGGLE (day mode overrides) ── */
body.day-mode .mode-toggle-question {
    color: var(--slate);
}

body.day-mode .mode-btn {
    border-color: rgba(26, 74, 138, 0.3);
    color: var(--slate);
}

body.day-mode .mode-btn:hover {
    border-color: var(--link);
    color: var(--navy);
}

body.day-mode .mode-btn.active {
    background: rgba(26, 74, 138, 0.1);
    border-color: var(--link);
    color: var(--navy);
}

/* ── SECTIONS ── */
body.day-mode .section-label {
    color: var(--slate);
}

body.day-mode .book-desc,
body.day-mode .meta-value {
    color: rgba(26, 39, 68, 0.8);
}

body.day-mode .meta-label {
    color: var(--slate);
}

/* ── EMAIL / CLOSING BLOCK ── */
body.day-mode .email-section {
    border-color: rgba(26, 74, 138, 0.15);
    background: transparent;
}

body.day-mode .email-input {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(26, 74, 138, 0.25);
    color: var(--navy);
    position: relative;
    z-index: 5;
}

body.day-mode .email-input::placeholder {
    color: var(--slate);
}

body.day-mode .email-submit {
    background: var(--navy);
    color: var(--horizon);
}

body.day-mode .email-note {
    color: var(--slate);
}

body.day-mode .email-heading {
    color: var(--navy);
}

body.day-mode .closing-block {
    border-color: rgba(26, 74, 138, 0.15);
    background: linear-gradient(135deg, rgba(200, 220, 240, 0.35), rgba(180, 210, 235, 0.15));
}

body.day-mode .closing-block::before {
    background: var(--sky-low);
    color: var(--link);
}

/* ── FOOTER ── */
body.day-mode footer {
    color: var(--slate);
}

body.day-mode footer a {
    color: var(--link);
}

/* ── MISCELLANEOUS ── */
body.day-mode .divider {
    color: var(--slate);
}

body.day-mode .scroll-hint span {
    color: var(--slate);
}

body.day-mode .scroll-hint .line {
    background: var(--slate);
}

/* ── SMOOTH TRANSITIONS ── */
body {
    transition: background-color 1.2s ease,
    background-image 1.2s ease,
    color 0.6s ease;
}

nav, h1, h2, a, p, .tagline, .welcome-text {
    transition: color 0.6s ease, background-color 0.6s ease;
}

/* Day mode drawer */
body.day-mode .nav-drawer {
    background: rgba(215, 235, 250, 0.97);
    border-bottom: 1px solid rgba(26, 74, 138, 0.15);
}

body.day-mode .nav-drawer ul li a {
    color: var(--navy);
    border-bottom: 1px solid rgba(26, 74, 138, 0.08);
}

body.day-mode .nav-drawer ul li a:hover,
body.day-mode .nav-drawer ul li a.active {
    color: var(--link);
}

body.day-mode .nav-drawer .drawer-lang a {
    color: rgba(26, 39, 68, 0.5);
    border-color: rgba(26, 74, 138, 0.35);
}

body.day-mode .nav-drawer .drawer-lang a.active {
    background: rgba(26, 74, 138, 0.15);
    color: var(--link);
}