:root {
    --font-size: 16px;
    --almost-white: #F2F8FE;
    --almost-black: #0D0701;
    /* --cha-yellow: #F4E601;
    --cha-blue: #2B2E81; */
    --cha-gold: #FEF901;
    --cha-purple: #0719E1;
    --cha-blue: #2B2E81;
    --cha-yellow: #f5e700;
    --chs-green: #26691c;

    color-scheme: light dark;

    --link-color: var(--cha-blue);
    --link-color-dark: rgb(94, 139, 222);
    --link-color-light: rgb(64, 81, 181);

    --bg-black: rgb(30, 33, 41);
    --bg-white: #f8f9fa;
    --bg-color-light: rgba(255, 255, 255, 0.99);
    --bg-color-dark: rgba(33, 37, 41, 0.99);
    --bg-light: var(--almost-white);
    --bg-dark: var(--almost-black);

    --text-color-light: rgba(0, 0, 0, 0.7);
    --text-color-dark: rgba(226, 228, 233, 0.82);
    --heading-color-light: rgba(0, 0, 0, 0.9);
    --heading-color-dark: rgba(255, 255, 255, 0.99);
    --border-color-light: rgba(0, 0, 0, 0.2);
    --border-color-dark: rgba(255, 255, 255, 0.5);
}

@media (prefers-color-scheme: light) {
    :root {
        --bg-color: rgba(255, 255, 255, 0.99);
        --border-color: rgba(0, 0, 0, 0.2);
        --text-color: rgba(0, 0, 0, 0.7);
        --heading-color: rgba(0, 0, 0, 0.9);
        --link-color: rgba(0, 0, 0, 0.8);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: rgba(33, 37, 41, 0.99);
        --border-color: rgba(255, 255, 255, 0.5);
        --text-color: rgba(255, 255, 255, 0.68);
        --heading-color: rgba(255, 255, 255, 0.99);
        --link-color: rgba(255, 255, 255, 0.88);
    }
}

:root:has(#theme [value="light"]:checked) {
    color-scheme: light;
    --bg-color: rgba(255, 255, 255, 0.99);
    --border-color: rgba(0, 0, 0, 0.2);
    --text-color: rgba(0, 0, 0, 0.7);
    --heading-color: rgba(0, 0, 0, 0.9);
    --link-color: rgba(0, 0, 0, 0.8);
}

:root:has(#theme [value="dark"]:checked) {
    color-scheme: dark;
    --bg-color: rgba(33, 37, 41, 0.99);
    --border-color: rgba(255, 255, 255, 0.5);
    --text-color: rgba(255, 255, 255, 0.68);
    --heading-color: rgba(255, 255, 255, 0.99);
    --link-color: rgba(255, 255, 255, 0.88);
}

:root:has(#theme [value="gold"]:checked) {
    color-scheme: light;
    --bg-color: var(--cha-gold);
    --border-color: rgba(0, 0, 0, 0.2);
    --text-color: rgba(0, 0, 0, 0.7);
    --heading-color: rgba(0, 0, 0, 0.9);
    --link-color: rgba(0, 0, 0, 0.8);
}

:root:has(#theme [value="purple"]:checked) {
    color-scheme: dark;
    --bg-color: var(--cha-purple);
    --border-color: rgba(255, 255, 255, 0.5);
    --text-color: rgba(255, 255, 255, 0.68);
    --heading-color: rgba(255, 255, 255, 0.99);
    --link-color: rgba(255, 255, 255, 0.88);
}

:root:has(#theme [value="yellow"]:checked) {
    color-scheme: light;
    --bg-color: var(--cha-yellow);
    --border-color: rgba(0, 0, 0, 0.2);
    --text-color: rgba(0, 0, 0, 0.7);
    --heading-color: rgba(0, 0, 0, 0.9);
    --link-color: rgba(0, 0, 0, 0.8);
}

:root:has(#theme [value="blue"]:checked) {
    color-scheme: dark;
    --bg-color: var(--cha-blue);
    --border-color: rgba(255, 255, 255, 0.5);
    --text-color: rgba(255, 255, 255, 0.68);
    --heading-color: rgba(255, 255, 255, 0.99);
    --link-color: rgba(255, 255, 255, 0.88);
}

html {
    overflow-y: scroll;
    scroll-behavior: smooth;
    color-scheme: dark light;
}

@supports (scrollbar-gutter: stable) {
    html {
        overflow-y: auto;
        scrollbar-gutter: stable;
    }
}

html,
body,
* {
    font-family: 'Montserrat', sans-serif;
}

/* Enable smooth scrolling and vertical scroll snapping for top-level sections */
html,
body {
    min-height: 100vh;
    scroll-behavior: smooth;
    /* overscroll-behavior: none; // removes pull to refresh on mobile */
    margin: 0;
    border: 0;
    padding: 0;
    padding-top: 1px;
    font-size: var(--font-size);
}

h1,
h2,
h3,
h4 {
    color: light-dark(var(--heading-color), var(--heading-color));
}

.btn-cha-purple {
    /* Base State */
    --bs-btn-bg: #2B2E81;
    --bs-btn-border-color: #2B2E81;
    /* Border matches background by default */
    --bs-btn-color: #fff;

    /* Hover State: 10% Darker */
    --bs-btn-hover-bg: hsl(238, 50%, 24%);
    --bs-btn-hover-border-color: hsl(238, 50%, 22%);
    /* Slightly darker border for depth */
    --bs-btn-hover-color: #fff;

    /* Active/Pressed State: 15% Darker */
    --bs-btn-active-bg: hsl(238, 50%, 19%);
    --bs-btn-active-border-color: hsl(238, 50%, 17%);
    --bs-btn-active-color: #fff;

    /* Focus Shadow: Base color with 25% opacity */
    --bs-btn-focus-shadow-rgb: 43, 46, 129;
}

.btn-outline-cha-purple {
    --bs-btn-color: #2B2E81;
    --bs-btn-border-color: #2B2E81;

    --bs-btn-hover-bg: #2B2E81;
    --bs-btn-hover-border-color: #2B2E81;
    --bs-btn-hover-color: #fff;
}

.btn-cha-gold {
    /* Base State: #F4E601 */
    --bs-btn-bg: #f4e601;
    --bs-btn-border-color: #f4e601;
    --bs-btn-color: #000;
    /* Dark text for contrast */

    /* Hover State: 15% darker for clear feedback */
    --bs-btn-hover-bg: hsl(56, 100%, 33%);
    --bs-btn-hover-border-color: hsl(56, 100%, 30%);
    --bs-btn-hover-color: #fff;
    /* Switch to white as background darkens */

    /* Active/Pressed State: 20% darker */
    --bs-btn-active-bg: hsl(56, 100%, 28%);
    --bs-btn-active-border-color: hsl(56, 100%, 25%);
    --bs-btn-active-color: #fff;

    /* Focus Shadow: Base color at 50% opacity */
    --bs-btn-focus-shadow-rgb: 244, 230, 1;
}

.btn-outline-cha-gold {
    --bs-btn-color: #f4e601;
    --bs-btn-border-color: #f4e601;

    --bs-btn-hover-bg: #f4e601;
    --bs-btn-hover-border-color: #f4e601;
    --bs-btn-hover-color: #000;
    /* Dark text on yellow background hover */
}

/* CHA Blue button variants based on --cha-blue (#2B2E81) */
.btn-cha-blue {
    /* Base State */
    --bs-btn-bg: var(--cha-blue);
    --bs-btn-border-color: var(--cha-blue);
    --bs-btn-color: #fff;

    /* Hover State: 10% Darker */
    --bs-btn-hover-bg: hsl(238, 50%, 24%);
    --bs-btn-hover-border-color: hsl(238, 50%, 22%);
    --bs-btn-hover-color: #fff;

    /* Active/Pressed State: 15% Darker */
    --bs-btn-active-bg: hsl(238, 50%, 19%);
    --bs-btn-active-border-color: hsl(238, 50%, 17%);
    --bs-btn-active-color: #fff;

    /* Focus Shadow: Base color with 25% opacity */
    --bs-btn-focus-shadow-rgb: 43, 46, 129;
}

.btn-outline-cha-blue {
    --bs-btn-color: var(--cha-blue);
    --bs-btn-border-color: var(--cha-blue);

    --bs-btn-hover-bg: var(--cha-blue);
    --bs-btn-hover-border-color: var(--cha-blue);
    --bs-btn-hover-color: #fff;
}

/* CHA Yellow button variants based on --cha-yellow (#f5e700) */
.btn-cha-yellow {
    /* Base State */
    --bs-btn-bg: var(--cha-yellow);
    --bs-btn-border-color: var(--cha-yellow);
    --bs-btn-color: #000;

    /* Hover State: noticeably darker for contrast */
    --bs-btn-hover-bg: hsl(56, 100%, 33%);
    --bs-btn-hover-border-color: hsl(56, 100%, 30%);
    --bs-btn-hover-color: #fff;

    /* Active/Pressed State */
    --bs-btn-active-bg: hsl(56, 100%, 28%);
    --bs-btn-active-border-color: hsl(56, 100%, 25%);
    --bs-btn-active-color: #fff;

    /* Focus Shadow: base color at reduced opacity */
    --bs-btn-focus-shadow-rgb: 245, 231, 0;
}

.btn-outline-cha-yellow {
    --bs-btn-color: var(--cha-yellow);
    --bs-btn-border-color: var(--cha-yellow);

    --bs-btn-hover-bg: var(--cha-yellow);
    --bs-btn-hover-border-color: var(--cha-yellow);
    --bs-btn-hover-color: #000;
}

a {
    /* color: inherit; */
    color: light-dark(var(--link-color-light), var(--link-color-dark));
    text-decoration: none;
}

a:hover {
    /* color: inherit; */
    text-decoration: underline;
    /* border-bottom: 1px solid var(--cha-blue); */
}

a.btn:hover,
#navMain a:hover {
    text-decoration: none;
}

@media screen and (min-width: 992px) {

    /* Vertically center navbar items, links and button contents */
    nav.navbar .navbar-nav {
        align-items: center;
    }

    nav.navbar .nav-item,
    nav.navbar .nav-link {
        display: flex;
        align-items: center;
    }

    /* Ensure buttons inside nav-links are centered */
    nav.navbar .nav-link .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

}

.animated-link {
    position: relative;
    /* Container for the absolutely positioned pseudo-element */
    display: inline-block;
    /* Ensures the link wraps its content snugly */
    color: #666;
    text-decoration: none;
    /* Removes the default underline */
    padding-bottom: 5px;
    /* Adds space between text and the animated line */
}

.animated-link::after {
    content: '';
    position: absolute;
    width: 0;
    /* Initial state: zero width */
    height: 3px;
    /* Height of the "border" */
    bottom: 0;
    left: 50%;
    /* Start position: middle */
    background-color: light-dark(var(--link-color-light), var(--link-color-dark));
    /* Color of the line */
    transition: width 0.3s ease-out, left 0.3s ease-out;
    /* Animates width and left position */
    /* Alternatively, use transform: scaleX(0); transform-origin: 50% 50%; transition: transform 0.3s ease-out; */
}

.animated-link:hover::after {
    width: 100%;
    /* Final state: full width */
    left: 0;
    /* Adjust left to 0 as width expands from center */
    /* If using scaleX: transform: scaleX(1); */
}

.divPanel {
    height: 100vh;
}