/* Global Variables */
:root {
    --navbar-padding: 8px;
    --navbar-height: calc(42px + 2 * var(--navbar-padding));
    --navbar-font-color: var(--bs-white-rgb);
    --navbar-bg-color: var(--bs-dark-rgb);
    --bd-toc-color: rgba(var(--bs-dark-rgb), 1);
    /* Restrained launcher / tracker palette: slate + cool cyan */
    --heading-h1-color: #164e63;
    --heading-h2-color: #0f5c6b;
    --hud-accent: #0e7490;
    --nav-text: rgba(226, 232, 240, 0.82);
    --nav-hover: #5ab4d6;
    --nav-active: #e2e8f0;
    --hud-shadow-nav: 0 3px 14px rgba(14, 116, 144, 0.22);
    --hud-shadow-foot: 0 -3px 14px rgba(14, 116, 144, 0.22);
}

/* Dark Theme Variables */
[data-bs-theme="dark"] {
    --bd-toc-color: rgba(var(--bs-white-rgb), 1);
    --heading-h1-color: #7eb8d6;
    --heading-h2-color: #8ec5e0;
    --hud-accent: #3d7a96;
    --nav-text: rgba(203, 213, 225, 0.78);
    --nav-hover: #7dd3fc;
    --nav-active: #f1f5f9;
    --hud-shadow-nav: 0 2px 12px rgba(125, 211, 252, 0.08);
    --hud-shadow-foot: 0 -2px 12px rgba(125, 211, 252, 0.08);
}

/* General Link Styles */
a {
    text-decoration: none;
}

/* Viewport gutters: white (light) / black (dark); main column keeps Bootstrap panel tone */
html {
    background-color: #fff;
}

html[data-bs-theme="dark"] {
    background-color: #000;
}

body {
    background-color: transparent;
}

/* Layout Styles */
.bd-layout {
    margin-top: calc(var(--navbar-height) + 1.5rem);
}

.container-xxl.bd-layout {
    background-color: var(--bs-secondary-bg);
    border-radius: var(--bs-border-radius-xl, 1rem);
    border: 1px solid var(--heading-h1-color);
}

html[data-bs-theme="dark"] .container-xxl.bd-layout {
    background-color: var(--bs-body-bg);
}

/* Headings flush left; inset everything else in the article column */
.bd-content > :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(style) {
    padding-left: 1.25rem;
}

.bd-main h1 {
    color: var(--heading-h1-color);
}

.bd-content h2 {
    color: var(--heading-h2-color);
}

/* Code Block Styles */
.hljs {
    padding: 1.25rem 1em !important;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bd-pre-bg);
}

/* Blockquote Styles */
blockquote {
    font-size: 1.35rem;
    color: var(--bs-secondary-color);
    margin: 1rem 0 1.5rem;
    padding-left: 1.5rem;
    border-left: 3px solid var(--bs-secondary-border-subtle);
}

/* Pagination Styles */
.pagination {
    margin-top: 3rem;
}

/* Footer Styles */
.footer {
    font-size: 0.875rem;
    border-top: 1px solid var(--hud-accent);
    box-shadow: var(--hud-shadow-foot);
}

/* Navbar Styles */
.navbar,
.navbar::after {
    padding-top: var(--navbar-padding);
    padding-bottom: var(--navbar-padding);
    background-image: linear-gradient(rgba(var(--navbar-bg-color), 1), rgba(var(--navbar-bg-color), 0.95));
}

.navbar {
    border-bottom: 1px solid var(--hud-accent);
    box-shadow: var(--hud-shadow-nav);
}

/* Navbar Brand Styles */
.navbar .navbar-brand,
.navbar .navbar-brand:hover {
    color: var(--nav-active);
    transform: none;
}

/* Navbar Items Styles */
.navbar .nav-link,
.navbar .nav-line,
.navbar .navbar-toggler {
    color: var(--nav-text);
}

.navbar .nav-link:not(.active):hover,
.navbar .nav-link.show:not(.active),
.navbar .navbar-toggler:hover {
    color: var(--nav-hover);
}

.navbar .nav-link.active,
.navbar .nav-link.active:hover {
    color: var(--nav-active);
    font-weight: 600;
}

/* Navbar Dropdown Menu Styles */
.navbar .dropdown-menu {
    --bs-dropdown-link-active-bg: unset;
    --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
}

/* Navbar Toggler Styles */
.navbar .navbar-toggler {
    border: none;
}

/* Scrollable Navbar for Small Screens */
@media (max-width: 992px) {
    .scrollable-navbar {
        max-height: calc(100vh - var(--navbar-height));
        overflow-y: auto;
	scrollbar-width: none; /* Hide scrollbar in Firefox */
    }

    /* Hide scrollbar in Chrome, Edge, Safari */
    .scrollable-navbar::-webkit-scrollbar {
	display: none;
    }
}

/* Surprise palettes (10): set data-portal-palette on <html> with matching data-bs-theme */

html[data-portal-palette="aurora"][data-bs-theme="dark"] {
    --heading-h1-color: #5ec8e8;
    --heading-h2-color: #7dd3fc;
    --hud-accent: #22b8cf;
    --nav-text: rgba(207, 250, 254, 0.78);
    --nav-hover: #67e8f9;
    --nav-active: #ecfeff;
    --hud-shadow-nav: 0 2px 14px rgba(34, 184, 207, 0.18);
    --hud-shadow-foot: 0 -2px 14px rgba(34, 184, 207, 0.18);
}

html[data-portal-palette="ember"][data-bs-theme="dark"] {
    --heading-h1-color: #fdba74;
    --heading-h2-color: #fb923c;
    --hud-accent: #ea580c;
    --nav-text: rgba(255, 237, 213, 0.82);
    --nav-hover: #fed7aa;
    --nav-active: #fff7ed;
    --hud-shadow-nav: 0 2px 14px rgba(234, 88, 12, 0.2);
    --hud-shadow-foot: 0 -2px 14px rgba(234, 88, 12, 0.2);
}

html[data-portal-palette="nocturne"][data-bs-theme="dark"] {
    --heading-h1-color: #c4b5fd;
    --heading-h2-color: #a78bfa;
    --hud-accent: #7c3aed;
    --nav-text: rgba(221, 214, 254, 0.8);
    --nav-hover: #ddd6fe;
    --nav-active: #f5f3ff;
    --hud-shadow-nav: 0 2px 14px rgba(124, 58, 237, 0.2);
    --hud-shadow-foot: 0 -2px 14px rgba(124, 58, 237, 0.2);
}

html[data-portal-palette="moss"][data-bs-theme="dark"] {
    --heading-h1-color: #86efac;
    --heading-h2-color: #4ade80;
    --hud-accent: #16a34a;
    --nav-text: rgba(220, 252, 231, 0.8);
    --nav-hover: #bbf7d0;
    --nav-active: #f0fdf4;
    --hud-shadow-nav: 0 2px 14px rgba(22, 163, 74, 0.2);
    --hud-shadow-foot: 0 -2px 14px rgba(22, 163, 74, 0.2);
}

html[data-portal-palette="ruby"][data-bs-theme="dark"] {
    --heading-h1-color: #fb7185;
    --heading-h2-color: #f472b6;
    --hud-accent: #e11d48;
    --nav-text: rgba(255, 228, 230, 0.82);
    --nav-hover: #fda4af;
    --nav-active: #fff1f2;
    --hud-shadow-nav: 0 2px 14px rgba(225, 29, 72, 0.2);
    --hud-shadow-foot: 0 -2px 14px rgba(225, 29, 72, 0.2);
}

html[data-portal-palette="aurum"][data-bs-theme="dark"] {
    --heading-h1-color: #fcd34d;
    --heading-h2-color: #facc15;
    --hud-accent: #ca8a04;
    --nav-text: rgba(254, 243, 199, 0.85);
    --nav-hover: #fde047;
    --nav-active: #fefce8;
    --hud-shadow-nav: 0 2px 14px rgba(202, 138, 4, 0.22);
    --hud-shadow-foot: 0 -2px 14px rgba(202, 138, 4, 0.22);
}

html[data-portal-palette="steel"][data-bs-theme="dark"] {
    --heading-h1-color: #cbd5e1;
    --heading-h2-color: #94a3b8;
    --hud-accent: #64748b;
    --nav-text: rgba(226, 232, 240, 0.78);
    --nav-hover: #e2e8f0;
    --nav-active: #f8fafc;
    --hud-shadow-nav: 0 2px 12px rgba(148, 163, 184, 0.15);
    --hud-shadow-foot: 0 -2px 12px rgba(148, 163, 184, 0.15);
}

html[data-portal-palette="ice"][data-bs-theme="light"] {
    --heading-h1-color: #075985;
    --heading-h2-color: #0c4a6e;
    --hud-accent: #0369a1;
    --hud-shadow-nav: 0 3px 14px rgba(3, 105, 161, 0.2);
    --hud-shadow-foot: 0 -3px 14px rgba(3, 105, 161, 0.2);
}

html[data-portal-palette="dusk"][data-bs-theme="light"] {
    --heading-h1-color: #5b21b6;
    --heading-h2-color: #6d28d9;
    --hud-accent: #7c3aed;
    --hud-shadow-nav: 0 3px 14px rgba(124, 58, 237, 0.18);
    --hud-shadow-foot: 0 -3px 14px rgba(124, 58, 237, 0.18);
}

html[data-portal-palette="sage"][data-bs-theme="light"] {
    --heading-h1-color: #166534;
    --heading-h2-color: #14532d;
    --hud-accent: #15803d;
    --hud-shadow-nav: 0 3px 14px rgba(21, 128, 61, 0.2);
    --hud-shadow-foot: 0 -3px 14px rgba(21, 128, 61, 0.2);
}