html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.text-mywhite {
    color: var(--white);
}

.text-myyellow {
    color: var(--yellow);
}

.feature-card {
    border: 1px solid var(--yellow);
    border-radius: .75rem;
    transition: transform .15s ease, box-shadow .15s ease;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}

    .feature-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0,0,0,.25);
    }

.feature-ico {
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: .5rem;
    opacity: .9;
}

.aeris-acronym {
    font-style: italic;
}

.hero-style {
    min-height: 90vh;
    position: relative;
    overflow: hidden;
    color: var(--yellow);
}

.content-style {
    min-height: 60vh;
    position: relative;
    overflow: hidden;
    color: var(--yellow);
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.btn-yellow {
    color: #000;
    background-color: var(--yellow);
    border: 2px solid var(--yellow-dark);
    transition: background 0.2s, color 0.2s;
}

    .btn-yellow:hover, .btn-yellow:focus {
        background-color: var(--yellow-dark);
        border-color: var(--yellow-dark);
        color: #000;
    }

.btn-yellow-outline {
    color: var(--white);
    background-color: transparent;
    border: 2px solid var(--yellow-dark);
    transition: background 0.2s, color 0.2s;
}

    .btn-yellow-outline:hover, .btn-yellow-outline:focus {
        background-color: var(--yellow-dark);
        color: #000;
        border-color: var(--yellow-dark);
    }

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    background-color: var(--brown);
    color: var(--yellow);
}

/* Dropdown background and text color */
.navbar .dropdown-menu {
    background-color: var(--brown) !important;
    border: 1px solid var(--yellow);
}

    /* Dropdown links */
    .navbar .dropdown-menu .dropdown-item {
        color: var(--yellow) !important;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

        /* Hover and focus state */
        .navbar .dropdown-menu .dropdown-item:hover,
        .navbar .dropdown-menu .dropdown-item:focus {
            background-color: var(--brown-light) !important;
            color: var(--yellow-light) !important;
        }

/* Section headers inside dropdown */
.navbar .dropdown-header {
    color: var(--yellow-light) !important;
    font-weight: bold;
}

/* Divider line color */
.navbar .dropdown-divider {
    border-color: var(--yellow);
}


.navbar {
    background-color: var(--brown-dark);
    color: var(--yellow);
}

.navbar-light .navbar-toggler-icon,
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23c7ae6a' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-light .navbar-toggler,
.navbar-dark .navbar-toggler {
    border-color: var(--yellow) !important;
    color: var(--yellow) !important;
}

.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus {
    color: var(--yellow) !important;
    font-size: 2.5em;
}

/* Top-level nav links */
.navbar .nav-link {
    color: var(--yellow) !important;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 5px; /* matches dropdown item corners */
}

    /* Hover and focus effect */
    .navbar .nav-link:hover,
    .navbar .nav-link:focus {
        background-color: var(--brown-light) !important;
        color: var(--yellow-light) !important;
    }

.site-footer-min {
    border-top: 1px solid var(--yellow);
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
    text-align: center;
    background-color: var(--brown-dark);
    color: var(--yellow-light);
}

    .site-footer-min .footer-link {
        color: var(--yellow);
        text-decoration: none;
    }

        .site-footer-min .footer-link:hover {
            text-decoration: underline;
        }


.card-yellow-outline {
    border: 2px solid var(--yellow-dark);
    background-color: transparent;
    box-shadow: none;
}

.border-yellow {
    border-color: var(--yellow) !important;
}

/* Form fields styling */
.form-control, .form-select {
    background-color: var(--brown-light);
    color: var(--white);
    border: 1px solid var(--yellow);
}

    .form-control::placeholder {
        color: var(--yellow-light);
        opacity: 0.6;
    }

    .form-control:focus, .form-select:focus {
        background-color: var(--brown-light);
        color: var(--white);
        border-color: var(--yellow);
        box-shadow: 0 0 0 0.25rem rgba(199, 174, 106, 0.25);
        /*box-shadow: 0 0 0 0.25rem rgba(57, 50, 50, 0.25);*/
    }

/* Dropdown arrow color fix */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23c7ae6a' d='M7.247 11.14l-4.796-5.481c-.566-.647-.106-1.659.753-1.659h9.592c.86 0 1.319 1.012.753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3e%3c/svg%3e");
}

/* Keep theme colors on autofill */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px var(--brown-light) inset !important;
    -webkit-text-fill-color: var(--white) !important;
    caret-color: var(--yellow-light) !important;
}

    input:-webkit-autofill:focus,
    textarea:-webkit-autofill:focus,
    select:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0px 1000px var(--brown-light) inset !important;
        -webkit-text-fill-color: var(--white) !important;
    }

:root {
    --brown: #393232;
    --brown-light: #544a4a;
    --brown-dark: #1e1a1a;
    --yellow: #c7ae6a;
    --yellow-light: #d5c28f;
    --yellow-dark: #b99a45;
    --white: #E1D9D1;
    --home-gold-intensity: .10; /* 0 → .18  | spotlight strength */
    --home-noise-alpha: .35; /* 0 → .60  | grain/texture strength */
    --home-vignette-strength: .35; /* 0 → .60  | dark edges strength */
}

#homeCenterQuote {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

/* Dots */
.modules-section .legend-dot,
.modules-section .status-dot {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
}

/* Filter buttons — grow on hover, no sticky focus background */
.modules-section .btn-outline-light {
    border-color: rgba(255,255,255, 1);
    border-width: 2px;
    color: var(--yellow);
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
    transform-origin: center;
    will-change: transform;
}

    /* Hover: slight grow + subtle tint */
    .modules-section .btn-outline-light:hover {
        transform: scale(1.08);
        border-color: var(--yellow);
        background: rgba(255,255,255,.08);
    }

/* Remove persistent glow/outline from global styles inside this section */
.modules-section .btn:focus,
.modules-section .btn:active,
.modules-section .btn:active:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Focus/active (mouse): no background unless hovering */
.modules-section .btn-outline-light:focus:not(:hover),
.modules-section .btn-outline-light.active:not(:hover) {
    background: transparent !important;
    border-color: var(--yellow);
}

/* Click feedback (optional, subtle) */
.modules-section .btn-outline-light:active {
    transform: scale(1.05);
}

/* Keyboard-only visible ring (accessible) */
.modules-section .btn-outline-light:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
    box-shadow: none;
}

/* Module bullets */
.modules-section .module-bullets li {
    position: relative;
    padding-left: 1.15rem;
    margin-bottom: .25rem;
}

    .modules-section .module-bullets li::before {
        content: "✓";
        position: absolute;
        left: 0;
        top: 0;
        opacity: .85;
    }

/* Apply this on the Home hero only */
.hero-style.hero--home {
    isolation: isolate;
    /* Layers: gold spotlight, vignette, brand base */
    background-image: radial-gradient(130% 70% at 50% 18%, color-mix(in srgb, var(--yellow) calc(var(--home-gold-intensity)*100%), transparent) 0%, transparent 60%), radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(0,0,0, var(--home-vignette-strength)) 100%), linear-gradient(180deg, var(--brown), var(--brown) 40%, var(--brown) 100%);
}

    /* Noise layer as a separate pseudo-element so we can control opacity via a CSS var */
    .hero-style.hero--home::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        mix-blend-mode: soft-light;
        opacity: var(--home-noise-alpha);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cdefs%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' fill='%23c7ae6a'/%3E%3C/svg%3E");
        background-size: 160px 160px; /* tile size of the grain */
        background-repeat: repeat;
        background-position: 0 0;
    }

    /* Optional: delicate top shimmer frame */
    .hero-style.hero--home::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(199,174,106,.12), transparent 40%), linear-gradient(90deg, transparent, rgba(199,174,106,.05) 10%, transparent 20%, rgba(199,174,106,.05) 30%, transparent 40%);
        background-size: 100% 8px, 300px 1px;
        background-repeat: no-repeat, repeat-x;
        background-position: top left, top left;
        pointer-events: none;
        mix-blend-mode: screen;
    }
/* Sparkle layer sits above noise/vignette, below content */
.hero-sparkles {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen; /* lets gold pop softly */
}

/* A single sparkle dot */
.sparkle-dot {
    position: absolute;
    width: 2px;
    height: 2px; /* base “grain” size */
    border-radius: 50%;
    background: var(--yellow);
    opacity: 0;
    filter: drop-shadow(0 0 10px var(--yellow)) blur(.3px);
    animation: sparkle-flash 1.2s ease-out forwards;
    box-shadow: 0 0 14px 2px rgba(199,174,106,.55); /* new: bloom ring */
}

/* The flash: quick on, quick off */
@keyframes sparkle-flash {
    0% {
        opacity: 0;
        transform: scale(.3);
    }

    10% {
        opacity: 1;
        transform: scale(1.6);
    }

    25% {
        opacity: .8;
        transform: scale(1.2);
    }

    60% {
        opacity: .25;
        transform: scale(1.0);
    }

    100% {
        opacity: 0;
        transform: scale(.95);
    }
}

/* Reduced motion = no sparkles */
@media (prefers-reduced-motion: reduce) {
    .hero-sparkles {
        display: none;
    }
}

/* Feed spacing rhythm */
.feed-list {
    display: grid;
    gap: 1rem;
}

    /* Hover lift */
    .feed-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0,0,0,.25);
    }

/* Make badges consistent with palette */
.badge.bg-dark.text-warning {
    background-color: var(--brown-dark) !important;
    color: var(--yellow) !important;
    border: 1px solid var(--yellow);
}