/* ====================================================
   AERO MODE - Because I really need to distract myself from working on the museum.
   Also because I learned 'bout color-mix.
   ==================================================== */

html.aero-mode {
    /* Backgrounds */
    --bg-page: grey;
    --bg-deep: color-mix(in srgb, black 40%, transparent);
    --bg-surface: color-mix(in srgb, black 30%, transparent);
    --bg-elevated: color-mix(in srgb, black 20%, transparent);
    --bg-hover: color-mix(in srgb, white 15%, transparent);

    /* Borders */
    --border-default: color-mix(in srgb, black 50%, transparent);
    --border-blue: color-mix(in srgb, black 60%, transparent);

    /* Navy / Header Colors (Primary brand colors) */
    --navy-dark: black;
    --navy: dimgrey;
    --navy-light: grey;

    /* Accent Colors */
    --accent-blue: silver;
    --accent-blue-muted: dimgrey;
    --header-border: color-mix(in srgb, black 50%, transparent);
    --accent-hover: white;
    --accent-visited: darkgrey;

    /* Text Colors */
    --text-primary: white;
    --text-heading: white;
    --text-body: gainsboro;
    --text-nav: lightgrey;
    --text-label: silver;
    --text-muted: silver;
    --text-dim: darkgrey;
    --text-footer: white;
    --text-powered: lightgrey;

    /* Gradients */
    /* Smoked glass style gradients with sharp stops */
    --grad-header: linear-gradient(to bottom, color-mix(in srgb, white 15%, transparent) 0%, color-mix(in srgb, white 5%, transparent) 48%, color-mix(in srgb, black 20%, transparent) 50%, color-mix(in srgb, black 40%, transparent) 100%);
    --grad-nav: linear-gradient(to bottom, color-mix(in srgb, white 10%, transparent) 0%, color-mix(in srgb, black 10%, transparent) 49%, color-mix(in srgb, black 30%, transparent) 50%, color-mix(in srgb, black 50%, transparent) 100%);
    --grad-sidebar-h3: linear-gradient(to bottom, color-mix(in srgb, white 15%, transparent) 0%, color-mix(in srgb, black 10%, transparent) 49%, color-mix(in srgb, black 40%, transparent) 50%, color-mix(in srgb, black 60%, transparent) 100%);
    --grad-footer: linear-gradient(to bottom, color-mix(in srgb, black 40%, transparent) 0%, color-mix(in srgb, black 70%, transparent) 100%);

    /* Misc Elements */
    --header-bottom: color-mix(in srgb, black 60%, transparent);
    --nav-border-bottom: color-mix(in srgb, black 50%, transparent);
    --wrapper-shadow: 0 15px 35px color-mix(in srgb, black 80%, transparent);
}

/* ====================================================
   OVERRIDES
   Specific styling rules for the Aero theme
   ==================================================== */

/* Background gradient */
html.aero-mode body {
    background: linear-gradient(135deg, dimgrey 0%, darkslategray 50%, black 100%);
    background-attachment: fixed;
}

/* Main wrapper*/
html.aero-mode #wrapper {
    background-color: color-mix(in srgb, black 30%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid color-mix(in srgb, black 60%, transparent);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 20%, transparent), inset 1px 0 0 color-mix(in srgb, white 10%, transparent), inset -1px 0 0 color-mix(in srgb, white 10%, transparent), inset 0 -1px 0 color-mix(in srgb, black 30%, transparent), var(--wrapper-shadow);
}

/* Header matches the glass border */
html.aero-mode #header {
    border-radius: 7px 7px 0 0;
    border-bottom: 1px solid var(--header-bottom);
}

html.aero-mode #footer {
    border-radius: 0 0 7px 7px;
    border-top: 1px solid color-mix(in srgb, white 10%, transparent);
}

html.aero-mode .sidebar-section,
html.aero-mode .news-item,
html.aero-mode .button-card,
html.aero-mode .button-grid,
html.aero-mode #content pre {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 5px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 15%, transparent), 0 2px 4px color-mix(in srgb, black 30%, transparent);
}

/* Fix heading borders for rounded cards */
html.aero-mode .sidebar-section h3 {
    border-radius: 4px 4px 0 0;
    text-shadow: 0 1px 2px black;
    color: white;
    border-bottom: 1px solid color-mix(in srgb, black 40%, transparent);
}

html.aero-mode .header-photo {
    border-radius: 4px;
    box-shadow: 0 4px 10px color-mix(in srgb, black 70%, transparent);
    border: 1px solid color-mix(in srgb, white 20%, transparent);
}

/* Shadow for the header text readability */
html.aero-mode #header h1 {
    text-shadow: 0 0 8px color-mix(in srgb, white 30%, transparent), 0 0 15px color-mix(in srgb, black 80%, transparent), 0 2px 4px color-mix(in srgb, black 90%, transparent);
    color: white;
}

html.aero-mode #header .tagline {
    color: lightgrey;
    text-shadow: 0 1px 2px black;
}

html.aero-mode .header-contacts a {
    color: white;
    text-shadow: 0 1px 3px black;
}

/* Theme Dialog */
html.aero-mode #theme-dialog {
    background-color: color-mix(in srgb, black 50%, transparent);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid color-mix(in srgb, black 80%, transparent);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 20%, transparent), inset 1px 0 0 color-mix(in srgb, white 10%, transparent), inset -1px 0 0 color-mix(in srgb, white 10%, transparent), 0 15px 40px color-mix(in srgb, black 90%, transparent);
    color: white;
}

html.aero-mode .theme-select-btn {
    border-radius: 4px;
    background-color: color-mix(in srgb, black 30%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 10%, transparent), 0 1px 2px color-mix(in srgb, black 50%, transparent);
    border: 1px solid color-mix(in srgb, black 50%, transparent);
    color: gainsboro;
}

html.aero-mode .theme-select-btn:hover {
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 20%, transparent), 0 2px 5px color-mix(in srgb, black 60%, transparent);
    background-color: color-mix(in srgb, black 10%, transparent);
    color: white;
}

html.aero-mode .theme-select-btn.active {
    background-color: color-mix(in srgb, white 10%, transparent);
    border-color: color-mix(in srgb, white 30%, transparent);
    color: white;
}

html.aero-mode .theme-dialog-close {
    border-radius: 4px;
    background-color: color-mix(in srgb, black 40%, transparent);
    border: 1px solid color-mix(in srgb, black 60%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 10%, transparent);
    color: gainsboro;
}

html.aero-mode .theme-dialog-close:hover {
    background-color: color-mix(in srgb, black 20%, transparent);
    color: white;
}

html.aero-mode #theme-toggle {
    border-radius: 8px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    background-color: color-mix(in srgb, black 40%, transparent);
    border: 1px solid color-mix(in srgb, black 60%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 15%, transparent), 0 2px 5px color-mix(in srgb, black 60%, transparent);
    color: lightgrey;
}

html.aero-mode #theme-toggle:hover {
    background-color: color-mix(in srgb, black 20%, transparent);
    color: white;
}


/* ====================================================
   CALCULATOR MUSEUM — Aero Overrides
   Glassmorphism treatment for museum components
   ==================================================== */

html.aero-mode .museum-hero {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 5px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 15%, transparent),
                0 2px 4px color-mix(in srgb, black 30%, transparent);
}

html.aero-mode .museum-hero h2 {
    text-shadow: 0 0 8px color-mix(in srgb, white 30%, transparent),
                 0 2px 4px color-mix(in srgb, black 90%, transparent);
    color: white;
}

html.aero-mode .cta-button {
    border-radius: 4px;
    background-color: color-mix(in srgb, black 40%, transparent);
    border: 1px solid color-mix(in srgb, black 60%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 15%, transparent),
                0 2px 5px color-mix(in srgb, black 60%, transparent);
}

html.aero-mode .cta-button:hover {
    background-color: color-mix(in srgb, black 20%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 20%, transparent),
                0 4px 10px color-mix(in srgb, black 60%, transparent);
}

html.aero-mode .museum-stats {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 5px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 15%, transparent),
                0 2px 4px color-mix(in srgb, black 30%, transparent);
}

html.aero-mode .stat-pill {
    border-radius: 4px;
    background-color: color-mix(in srgb, black 30%, transparent);
    border: 1px solid color-mix(in srgb, black 50%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 10%, transparent),
                0 1px 2px color-mix(in srgb, black 30%, transparent);
}

html.aero-mode .stat-number {
    color: white;
    text-shadow: 0 1px 2px black;
}

html.aero-mode .exhibit-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 5px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 15%, transparent),
                0 2px 4px color-mix(in srgb, black 30%, transparent);
    overflow: hidden;
}

html.aero-mode .exhibit-card img {
    border-radius: 4px 4px 0 0;
}

html.aero-mode .exhibit-card .badge {
    border-radius: 3px;
    background-color: color-mix(in srgb, black 50%, transparent);
    text-shadow: 0 1px 2px black;
}

html.aero-mode .card-body h3 {
    color: white;
    text-shadow: 0 1px 2px black;
}

html.aero-mode .museum-explore {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 5px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 15%, transparent),
                0 2px 4px color-mix(in srgb, black 30%, transparent);
}

html.aero-mode .museum-why {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-left: 3px solid color-mix(in srgb, white 30%, transparent);
    border-radius: 5px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 15%, transparent),
                0 2px 4px color-mix(in srgb, black 30%, transparent);
}