/**
 * W5OBM Main Theme Styles
 * File: css/w5obm-main.css
 * Central stylesheet for theme-based website architecture
 * Consolidates all common styles for theme compatibility
 */

/* Import Hero Logo Styles */
@import 'hero-logo-styles.css';

/* ===== CSS VARIABLE FALLBACKS ===== */
@layer w5obmFallback {
    :root {
        --primary-blue: #031A54;
        --secondary-blue: #145EFF;
        --accent-gold: #FFD700;
        --accent-gold-dark: #FFC700;
        --success-green: #28a745;
        --warning-orange: #ffc107;
        --danger-red: #dc3545;
        --info-blue: #17a2b8;
        --text-primary: #2c3e50;
        --text-secondary: #5a6c7d;
        --text-muted: #8b9dc3;
        --text-light: #ffffff;
        --bg-primary: #ffffff;
        --bg-secondary: #f8f9fa;
        --bg-light: #f4f6f9;
        --bg-dark: #2c3e50;
        --border-light: #e9ecef;
        --border-medium: #dee2e6;
        --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
        --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
        --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
        --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
        --border-radius: 12px;
        --border-radius-sm: 8px;
        --border-radius-lg: 16px;
        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        --transition-fast: all 0.15s ease;
        --spacing-xs: 0.25rem;
        --spacing-sm: 0.5rem;
        --spacing-md: 1rem;
        --spacing-lg: 1.5rem;
        --spacing-xl: 2rem;
        --spacing-xxl: 3rem;
        --nav-offset-desktop: 80px;
        --nav-offset-mobile: 90px;
    }
}

/* ===== REFERENCE LIBRARY LAYOUT ===== */
.references-page .reference-hero {
    background: linear-gradient(135deg,
            var(--hero-gradient-start, var(--theme-primary, var(--primary-blue))),
            var(--hero-gradient-end, var(--theme-secondary, var(--secondary-blue))));
    padding: 5rem 0;
    color: var(--hero-text-primary, var(--text-light));
    position: relative;
    overflow: hidden;
}

.references-page .reference-hero::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 50%;
    height: 160%;
    background: rgba(255, 255, 255, 0.08);
    transform: rotate(35deg);
}

.references-page .hero-content {
    position: relative;
    z-index: 15;
}

.references-page .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    color: var(--hero-badge-text, var(--hero-text-primary, #fff));
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.references-page .hero-actions .btn {
    border-radius: 30px;
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* ===== Global Hero Pattern ===== */
.page-hero,
.hero-section,
.hero {
    position: relative;
    background: linear-gradient(var(--hero-gradient-angle, 135deg), var(--hero-gradient-start, var(--primary-blue)), var(--hero-gradient-end, var(--secondary-blue)));
    color: #fff;
    overflow: hidden;
    padding: clamp(1.3rem, 3.2vw, 2.7rem) 0;
    margin-top: calc(var(--nav-offset-desktop) * -1);
    padding-top: calc(clamp(1.3rem, 3.2vw, 2.7rem) + var(--nav-offset-desktop));
}

/* Runtime style overrides can apply background/text to `.container` with `!important`.
   Heroes rely on transparent containers so the gradient shows through; force that here. */
.page-hero .container,
.page-hero .container-fluid,
.page-hero .master-container {
    background-color: transparent !important;
    color: inherit !important;
}

.page-hero::after,
.hero-section::after,
.hero::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 60%;
    height: 180%;
    background: rgba(255, 255, 255, 0.08);
    transform: rotate(12deg);
    pointer-events: none;
}

.page-hero--indigo,
.hero-section.hero--indigo,
.hero.hero--indigo {
    background: linear-gradient(
        var(--hero-gradient-angle, 135deg),
        var(--hero-variant-indigo-start, var(--hero-gradient-start, var(--theme-primary, var(--primary-blue, #031A54)))),
        var(--hero-variant-indigo-end, var(--hero-gradient-end, var(--theme-secondary, var(--secondary-blue, #145EFF)))));
}

.page-hero--teal,
.hero-section.hero--teal,
.hero.hero--teal {
    background: linear-gradient(
        var(--hero-gradient-angle, 135deg),
        var(--hero-variant-teal-start, var(--hero-gradient-start, var(--theme-primary, var(--primary-blue, #031A54)))),
        var(--hero-variant-teal-end, var(--hero-gradient-end, var(--theme-secondary, var(--secondary-blue, #145EFF)))));
}

.page-hero--sunset,
.hero-section.hero--sunset,
.hero.hero--sunset {
    background: linear-gradient(
        var(--hero-gradient-angle, 135deg),
        var(--hero-variant-sunset-start, var(--hero-gradient-start, var(--theme-primary, var(--primary-blue, #031A54)))),
        var(--hero-variant-sunset-end, var(--hero-gradient-end, var(--theme-secondary, var(--secondary-blue, #145EFF)))));
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: var(--hero-badge-bg, rgba(255, 255, 255, 0.25));
    border: 1px solid var(--hero-badge-border, rgba(255, 255, 255, 0.55));
    color: var(--hero-badge-text, #ffffff);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.85rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.hero-eyebrow {
    letter-spacing: 0.2em;
    opacity: 0.85;
    color: var(--hero-text-secondary, rgba(255, 255, 255, 0.85));
}

.hero-actions .btn {
    border-width: 2px;
    padding: 0.65rem 1.5rem;
    font-weight: 600;
    border-radius: var(--hero-button-radius, 999px);
    box-shadow: var(--hero-button-shadow, 0 10px 25px rgba(0, 0, 0, 0.12));
}

.hero-actions .btn-outline-light {
    color: var(--hero-button-text, var(--hero-text-primary, #fff));
    border-color: var(--hero-button-border, rgba(255, 255, 255, 0.8));
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.hero-actions .btn-outline-light:hover {
    background: var(--hero-button-hover-bg, rgba(255, 255, 255, 0.18));
    color: var(--hero-button-hover-text, var(--hero-text-primary, #fff));
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}

.hero-stat {
    background: var(--hero-stat-bg, rgba(255, 255, 255, 0.12));
    border-radius: 18px;
    padding: 1.1rem;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    text-align: center;
    box-shadow: 0 10px 25px rgba(3, 26, 84, 0.25);
    border: 1px solid var(--hero-stat-border, rgba(255, 255, 255, 0.25));
}

/* Improve legibility for hero titles/subtitles across overlays */
.page-hero .display-5,
.page-hero .lead,
.hero-section .display-5,
.hero-section .lead,
.hero-section .hero-title,
.hero-section .hero-subtitle {
    text-shadow:
        0 -1px 0 var(--hero-title-bevel-highlight, rgba(255,255,255,0.28)),
        0 1px 0 var(--hero-title-bevel-shadow, rgba(0,0,0,0.35)),
        var(--hero-title-shadow, 0 1px 2px rgba(0, 0, 0, 0.45));
    color: var(--hero-text-primary, #ffffff);
}

.hero-stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--hero-text-primary, #ffffff);
}

.hero-stat-label {
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    opacity: 0.8;
    margin-top: 0.35rem;
    color: var(--hero-text-secondary, rgba(255, 255, 255, 0.85));
}

.hero-stat-meta {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* ===== Homepage Marketing Hero ===== */
.hero-home {
    --home-hero-dark: var(--hero-gradient-start, var(--theme-primary, var(--primary-blue, #031A54)));
    --home-hero-mid: var(--hero-gradient-end, var(--theme-secondary, var(--secondary-blue, #145EFF)));
    position: relative;
    overflow: hidden;
    color: var(--hero-text-primary, #fff);
    background: linear-gradient(var(--hero-gradient-angle, 135deg), var(--home-hero-dark), var(--home-hero-mid));
    padding: clamp(1rem, 2.4vw, 2.15rem) 0;
    margin-top: calc(var(--nav-offset-desktop) * -1);
    padding-top: calc(clamp(1rem, 2.4vw, 2.15rem) + (var(--nav-offset-desktop) * 0.34));
}

.page-hero::before,
.hero-section::before,
.hero::before,
.hero-home::before,
.home-hero::before {
    content: 'Scroll Down \2193';
    position: absolute;
    left: 50%;
    bottom: 0.65rem;
    transform: translateX(-50%);
    z-index: 4;
    color: var(--hero-text-primary, #ffffff);
    background: var(--hero-badge-bg, rgba(255, 255, 255, 0.14));
    border: 1px solid var(--hero-badge-border, rgba(255, 255, 255, 0.4));
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
}

.hero-home::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 60%;
    height: 180%;
    background: rgba(255, 255, 255, 0.08);
    transform: rotate(12deg);
    pointer-events: none;
}

.hero-home>.container {
    width: 100%;
    max-width: 1600px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1.5rem, 4vw, 5rem);
    padding-right: clamp(1.5rem, 4vw, 5rem);
}


.hero-home__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(320px, 1fr);
    align-items: stretch;
    gap: clamp(2rem, 5vw, 4.5rem);
}

@media (min-width: 992px) {
    .hero-home__grid {
        grid-template-columns: minmax(360px, 1fr) minmax(520px, 1.35fr);
    }
}

@media (min-width: 1400px) {
    .hero-home__grid {
        grid-template-columns: minmax(420px, 0.85fr) minmax(720px, 1.65fr);
    }
}

.hero-home__content {
    max-width: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hero-home__media {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.hero-home__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hero-badge-text, #ffffff);
    background: var(--hero-badge-bg, rgba(255, 255, 255, 0.18));
    border: 1px solid var(--hero-badge-border, rgba(255, 255, 255, 0.4));
    border-radius: 999px;
    padding: 0.45rem 1.2rem;
}

.hero-home__eyebrow {
    margin-top: 1rem;
    letter-spacing: 0.35em;
    font-size: 0.85rem;
    opacity: 0.7;
    color: var(--hero-text-secondary, rgba(255, 255, 255, 0.85));
}

.hero-home__title {
    font-size: clamp(2.8rem, 5.2vw, 4.2rem);
    margin-top: 0.75rem;
    margin-bottom: 1.25rem;
    line-height: 1.05;
    font-weight: 700;
    color: var(--hero-text-primary, #ffffff);
    text-shadow: 0 2px 6px color-mix(in srgb, #8a5a12 44%, transparent), 0 12px 28px color-mix(in srgb, #3a2200 52%, transparent);
    /* Remove blur filter for sharper text */
    filter: none;
    /* Improve text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Prevent transform blur */
    backface-visibility: hidden;
    transform: translateZ(0);
}

.hero-home__title-accent {
    background-image: linear-gradient(135deg,
            var(--hero-title-gradient-start, var(--theme-accent-primary, #fff36a)) 0%,
            var(--hero-title-gradient-mid, var(--theme-accent-primary, #ffd700)) 45%,
            var(--hero-title-gradient-end, var(--theme-accent-secondary, #f0b343)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    white-space: nowrap;
}

.hero-title-accent {
    background-image: linear-gradient(var(--hero-title-gradient-angle, 135deg),
            var(--hero-title-gradient-start, var(--theme-accent-primary, #fff36a)) 0%,
            var(--hero-title-gradient-mid, var(--theme-accent-primary, #ffd700)) 45%,
            var(--hero-title-gradient-end, var(--theme-accent-secondary, #f0b343)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    white-space: nowrap;
}

.page-hero .display-5,
.hero-section .display-5,
.hero-section .hero-title,
.hero .display-5,
.hero .hero-title,
.hero-home__title,
.hero-home__support {
    background-image: linear-gradient(180deg,
        var(--hero-title-gold-top, #fff7cf) 0%,
        var(--hero-title-gold-mid, #ffd76a) 45%,
        var(--hero-title-gold-bottom, #c7901f) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    text-shadow:
    0 -1px 0 rgba(255, 244, 201, 0.75),
    0 1px 0 rgba(109, 72, 10, 0.55),
    0 3px 10px rgba(0, 0, 0, 0.38);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .hero-home__title {
        background-image: linear-gradient(180deg,
                var(--hero-title-gold-top, #fff7cf) 0%,
                var(--hero-title-gold-mid, #ffd76a) 45%,
                var(--hero-title-gold-bottom, #c7901f) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.hero-home__lead {
    font-size: 1.15rem;
    color: var(--hero-text-secondary, rgba(255, 255, 255, 0.92));
    margin-bottom: 1.5rem;
}

.hero-home__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.hero-home__support {
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hero-text-secondary, rgba(255, 255, 255, 0.92));
    margin-bottom: 0.8rem;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35), 0 3px 8px rgba(0, 0, 0, 0.25);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .hero-home__support {
        background-image: linear-gradient(180deg,
                var(--hero-title-gold-top, #fff7cf) 0%,
                var(--hero-title-gold-mid, #ffd76a) 45%,
                var(--hero-title-gold-bottom, #c7901f) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.hero-home__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.hero-home__stats--below-preview {
    width: min(100%, 720px);
    justify-content: center;
    margin-inline: auto;
}

.hero-home__stat {
    flex: 1 1 120px;
    min-width: 120px;
    border-radius: 20px;
    padding: 1rem 1.2rem;
    background: var(--hero-stat-bg, rgba(255, 255, 255, 0.08));
    border: 1px solid var(--hero-stat-border, rgba(255, 255, 255, 0.18));
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.hero-home__stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--hero-text-primary, #ffffff);
}

.hero-home__stat-label {
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: 0.8rem;
    color: var(--hero-text-secondary, rgba(255, 255, 255, 0.7));
}

.hero-home__carousel {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    background: var(--hero-stat-bg, rgba(255, 255, 255, 0.08));
    border: 1px solid var(--hero-stat-border, rgba(255, 255, 255, 0.18));
    width: 100%;
    min-width: 0;
    aspect-ratio: 2 / 1;
    min-height: 240px;
    max-height: 460px;
    box-shadow: 0 30px 70px rgba(3, 7, 24, 0.6);
}

@media (max-width: 1100px) {
    .hero-home__carousel {
        aspect-ratio: 16 / 9;
        min-height: 300px;
        max-height: none;
    }
}

@media (max-width: 768px) {
    .hero-home {
        margin-top: calc(var(--nav-offset-desktop) * -1.1);
        padding-top: clamp(2.1rem, 7vw, 3.4rem);
    }
}


.hero-home__slide {
    position: absolute;
    inset: 0;
    background-size: var(--hero-slide-size, cover);
    background-position: center var(--hero-slide-focus, 50%);
    background-repeat: no-repeat;
    background-color: color-mix(in srgb, var(--hero-overlay-from, var(--home-hero-dark)) 85%, transparent);
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 1.1s ease, transform 1.1s ease;
    /* Ensure proper image fitting */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
}

.hero-home__slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.hero-home__slide-overlay {
    position: absolute;
    inset: 0;
    padding: 1.35rem 1.5rem 1.15rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--hero-overlay-from, var(--home-hero-dark)) 10%, transparent) 0%, color-mix(in srgb, var(--hero-overlay-to, var(--home-hero-mid)) 65%, transparent) 75%);
}

.hero-home__slide-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--hero-text-secondary, rgba(255, 255, 255, 0.8));
}

.hero-home__slide-overlay h3 {
    font-size: 1.4rem;
    margin: 0;
}

.hero-home__slide-overlay p {
    margin: 0;
    color: var(--hero-text-secondary, rgba(255, 255, 255, 0.85));
}

.hero-home__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 160px;
    pointer-events: none;
}

.hero-home__fade--left {
    left: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--hero-overlay-from, var(--home-hero-dark)) 35%, transparent), transparent);
}

.hero-home__fade--right {
    right: 0;
    background: linear-gradient(270deg, color-mix(in srgb, var(--hero-overlay-from, var(--home-hero-dark)) 35%, transparent), transparent);
}

@media (max-width: 991px) {
    .hero-home__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-home__carousel {
        width: 100%;
        max-width: none;
        min-width: 0;
        aspect-ratio: 16 / 9;
        min-height: clamp(320px, 70vw, 460px);
    }
}

@media (max-width: 768px) {
    .hero-home__carousel {
        min-height: clamp(230px, 68vw, 340px);
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 575px) {
    .hero-home__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .page-hero--compact {
        padding-top: calc(2.75rem + var(--nav-offset-desktop, 80px));
        padding-bottom: 2.25rem;
    }

    .page-hero--compact .hero-grid {
        gap: 1.75rem;
    }

    .page-hero--compact .hero-title {
        font-size: clamp(2rem, 4vw, 2.85rem);
    }

    .page-hero--compact .hero-actions {
        margin-bottom: 1.5rem;
    }

    .page-hero--compact .hero-aside-card {
        padding: 1.5rem;
        border-radius: 22px;
    }

    .page-hero--compact .hero-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 0.9rem;
    }

    .page-hero--compact .hero-support {
        margin-bottom: 0;
    }

    @media (max-width: 992px) {
        .page-hero--compact {
            padding-top: calc(2.25rem + var(--nav-offset-mobile, 90px));
            padding-bottom: 2rem;
        }
    }

    .hero-home__badge,
    .hero-home__eyebrow {
        letter-spacing: 0.2em;
    }
}

@media (max-width: 767px) {
    .page-hero {
        text-align: center;
    }

    .hero-actions {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .hero-home {
        margin-top: calc(var(--nav-offset-mobile) * -1);
        padding-top: calc(clamp(1.6rem, 5.5vw, 2.8rem) + var(--nav-offset-mobile));
    }

    .page-hero,
    .hero-section,
    .hero {
        margin-top: calc(var(--nav-offset-mobile) * -1);
        padding-top: calc(clamp(1.2rem, 5.2vw, 2.6rem) + var(--nav-offset-mobile));
    }
}

/* ===== Next-Gen Page Hero Layout (IONOS inspired) ===== */
.page-hero--ionos {
    /* Reduce overall hero height ~40% while keeping layout intact */
    padding: clamp(1.8rem, 3.6vw, 3.6rem) 0 clamp(1.2rem, 2.8vw, 2.4rem);
    position: relative;
    overflow: hidden;
    color: #fff;
}

/* Compact hero: previously only adjusted on very small screens */
.page-hero--compact {
    padding: clamp(1.4rem, 3vw, 2.8rem) 0 clamp(1rem, 2.4vw, 2rem);
}

.page-hero--ionos .hero-surface {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.12), transparent 45%),
        radial-gradient(circle at 80% 0%, rgba(255, 255, 255, 0.18), transparent 40%);
    opacity: 0.65;
}

.page-hero--ionos .hero-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.08;
    pointer-events: none;
}

.page-hero--ionos .hero-surface::after {
    content: '';
    position: absolute;
    inset: 0;
    background: none;
}

.hero-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(0);
    opacity: 0.35;
}

.hero-orb--one {
    width: 320px;
    height: 320px;
    right: -80px;
    top: 5%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.35), transparent);
}

.hero-orb--two {
    width: 220px;
    height: 220px;
    left: -60px;
    bottom: -40px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.25), transparent);
}

.hero-grid {
    position: relative;
    z-index: 2;
}

.hero-main {
    position: relative;
    z-index: 2;
}

.hero-logo-wrap {
    max-width: 260px;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
}

.hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.hero-meta-dot {
    width: var(--hero-bullet-size, 8px);
    height: var(--hero-bullet-size, 8px);
    border-radius: 999px;
    background: var(--hero-bullet-color, var(--accent-gold, #ffd700));
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.hero-support {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
}

.hero-aside-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 28px;
    padding: 2.5rem;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 25px 60px rgba(3, 26, 84, 0.35);
    position: relative;
    overflow: hidden;
}

.hero-aside-card::after {
    content: '';
    position: absolute;
    inset: 16px;
    border-radius: 20px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    pointer-events: none;
}

.hero-aside-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.4);
    margin-bottom: 1.5rem;
}

.hero-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.25rem;
}

.hero-highlights {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hero-highlights li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.65rem 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
}

.hero-highlights li i {
    color: var(--hero-bullet-color, var(--accent-gold, #ffd700));
    font-size: var(--hero-bullet-size, 8px);
    margin-top: 4px;
}

.hero-aside-caption {
    font-size: 0.85rem;
}

.page-hero--skyline {
    background: linear-gradient(
        var(--hero-gradient-angle, 135deg),
        var(--hero-variant-skyline-start, var(--hero-gradient-start, var(--theme-primary, var(--primary-blue, #031A54)))),
        var(--hero-variant-skyline-end, var(--hero-gradient-end, var(--theme-secondary, var(--secondary-blue, #145EFF))))
    );
}

/* Navy is the default hero variant and resolves through active theme gradient tokens. */
.page-hero--navy {
    background: linear-gradient(
        var(--hero-gradient-angle, 135deg),
        var(--hero-gradient-start, var(--primary-blue)),
        var(--hero-gradient-end, var(--secondary-blue))
    );
    color: #fff;
}

.page-hero--theme {
    background: linear-gradient(
        var(--hero-gradient-angle, 135deg),
        var(--hero-gradient-start, var(--theme-primary, var(--primary-blue, #031A54))),
        var(--hero-gradient-end, var(--theme-secondary, var(--secondary-blue, #145EFF)))
    );
    color: #fff;
}

.page-hero--aurora {
    background: linear-gradient(
        var(--hero-gradient-angle, 135deg),
        var(--hero-variant-aurora-start, var(--hero-gradient-start, var(--theme-primary, var(--primary-blue, #031A54)))),
        var(--hero-variant-aurora-end, var(--hero-gradient-end, var(--theme-secondary, var(--secondary-blue, #145EFF))))
    );
}

.page-hero--sunset {
    background: linear-gradient(
        var(--hero-gradient-angle, 135deg),
        var(--hero-variant-sunset-start, var(--hero-gradient-start, var(--theme-primary, var(--primary-blue, #031A54)))),
        var(--hero-variant-sunset-end, var(--hero-gradient-end, var(--theme-secondary, var(--secondary-blue, #145EFF))))
    );
}

.page-hero--ember {
    background: linear-gradient(
        var(--hero-gradient-angle, 135deg),
        var(--hero-variant-ember-start, var(--hero-gradient-start, var(--theme-primary, var(--primary-blue, #031A54)))),
        var(--hero-variant-ember-end, var(--hero-gradient-end, var(--theme-secondary, var(--secondary-blue, #145EFF))))
    );
}

.text-white-75 {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* ===== Home Hero Carousel ===== */
.home-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
    padding: clamp(3rem, 7vw, 6.5rem) 0 clamp(2rem, 5vw, 4rem);
    color: #fff;
}

.home-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.25), transparent 55%),
        radial-gradient(circle at 85% 10%, rgba(255, 255, 255, 0.18), transparent 45%);
    opacity: 0.35;
}

.home-hero>.container {
    position: relative;
    z-index: 2;
}

.home-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    letter-spacing: 0.18em;
    font-size: 0.85rem;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.home-hero-meta li {
    margin-bottom: 0.35rem;
    color: rgba(255, 255, 255, 0.85);
}

.home-hero-meta i {
    color: var(--accent-gold, #ffd700);
}

.home-hero-carousel {
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(3, 26, 84, 0.35);
}

.home-hero-carousel .carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 999px;
}

.home-hero-carousel .carousel-caption {
    background: linear-gradient(135deg, rgba(3, 26, 84, 0.85), rgba(20, 94, 255, 0.65));
    border-radius: 20px;
    padding: 1.5rem;
    left: 50%;
    right: auto;
    bottom: 1rem;
    transform: translateX(-50%);
    width: min(92%, 760px);
    text-align: center;
}

.hero-stats-grid--compact .hero-stat {
    padding: 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

@media (max-width: 991px) {
    .home-hero {
        text-align: center;
    }

    .home-hero-carousel {
        margin-top: 1.5rem;
    }

    .hero-stats-grid--compact {
        justify-items: center;
    }
}

@media (max-width: 991px) {
    .hero-meta {
        justify-content: center;
    }

    .hero-aside-card {
        margin-top: 1.75rem;
        padding: 2rem;
    }
}


.references-page .reference-card {
    background: var(--bs-card-bg, var(--bg-primary, #ffffff));
    border-radius: 18px;
    padding: 2rem;
    box-shadow: 0 20px 45px color-mix(in srgb, var(--theme-primary, var(--primary-blue)) 14%, transparent);
    height: 100%;
    border-top: 4px solid var(--secondary-blue);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.references-page .reference-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px color-mix(in srgb, var(--theme-primary, var(--primary-blue)) 20%, transparent);
}

.references-page .reference-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--theme-secondary, var(--secondary-blue)) 14%, transparent);
    color: var(--secondary-blue);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.references-page .reference-items li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.references-page .reference-items span.tag {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-gold);
}

.references-page .resource-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    background: color-mix(in srgb, var(--theme-primary, var(--primary-blue)) 10%, transparent);
    color: var(--primary-blue);
    margin: 0.2rem;
}

.references-page .meta-note {
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ===== IMAGE GUIDELINES ===== */
.img-header-200,
.img-header-lg,
.img_header-200,
.img_header-lg {
    width: 200px !important;
    height: 200px !important;
    object-fit: contain;
    display: block;
    margin: 0 auto 20px auto;
}


.img-card-175,
.img_card-175 {
    width: 175px !important;
    height: 175px !important;
    object-fit: contain;
    display: block;
    margin: 0 auto 20px auto;
}


.img-card-150,
.img_card-150 {
    width: 150px !important;
    height: 150px !important;
    object-fit: contain;
    display: block;
    margin: 0 auto 20px auto;
}


.img-icon-64,
.img_icon-64 {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain;
}


/* ===== HERO SECTIONS ===== */
.hero-section,
.page-hero {
    background: linear-gradient(135deg, var(--primary-blue, var(--w5obm-primary-blue, #031A54)) 0%, var(--secondary-blue, var(--w5obm-secondary-blue, #145EFF)) 100%);
    padding: 8rem 0 4rem;
    color: var(--text-light);
    position: relative;
    overflow: hidden;
}

:root {
    /*
        Premium hero backgrounds are applied with !important.
        If a theme (or injected CSS) accidentally sets a circular variable like
        --secondary-blue: var(--secondary-blue), the gradient becomes invalid and
        the hero appears white-on-white.
        Use fallbacks to concrete palette variables emitted by include/header.php.
    */
    --premium-hero-gradient-from: var(--primary-blue, var(--w5obm-primary-blue, #031A54));
    --premium-hero-gradient-to: var(--secondary-blue, var(--w5obm-secondary-blue, #145EFF));
    --premium-hero-gradient: linear-gradient(135deg, var(--premium-hero-gradient-from) 0%, var(--premium-hero-gradient-to) 100%);
    --premium-hero-text-color: #ffffff;
    --premium-hero-text-muted: rgba(255, 255, 255, 0.82);
    --premium-hero-border-color: rgba(255, 255, 255, 0.35);
    --premium-hero-btn-bg: rgba(255, 255, 255, 0.14);
    --premium-hero-btn-bg-hover: rgba(255, 255, 255, 0.2);
    --premium-hero-btn-border: rgba(255, 255, 255, 0.55);
    --hero-title-gradient-start: var(--theme-accent-primary, #fff36a);
    --hero-title-gradient-mid: var(--theme-accent-primary, #ffd700);
    --hero-title-gradient-end: var(--theme-accent-secondary, #f0b343);
    --hero-support-gradient-start: var(--hero-text-primary, #ffffff);
    --hero-support-gradient-mid: var(--theme-accent-primary, #ffd700);
    --hero-support-gradient-end: var(--theme-accent-secondary, #22d3ee);
}

.premium-hero {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    padding: 2.75rem;
    margin-bottom: 2rem;
    color: var(--premium-hero-text-color);
}

.premium-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .15));
    pointer-events: none;
}

.premium-hero__inner {
    position: relative;
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    z-index: 2;
    align-items: stretch;
}

.premium-hero__copy {
    flex: 1 1 360px;
    max-width: 580px;
}

.premium-hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .78rem;
    color: var(--premium-hero-text-muted);
}

.premium-hero__title {
    font-size: clamp(1.9rem, 3vw, 2.75rem);
    font-weight: 700;
    margin-bottom: .75rem;
}

.premium-hero__subtitle {
    font-size: 1.05rem;
    color: var(--premium-hero-text-muted);
    margin-bottom: 1rem;
}

.premium-hero__description {
    color: var(--premium-hero-text-muted);
    margin-bottom: 1.5rem;
}

.premium-hero__actions .premium-hero__btn {
    min-width: 160px;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.65rem 1.5rem;
    box-shadow: 0 18px 35px rgba(0, 0, 0, .3);
    border: 1px solid var(--premium-hero-btn-border);
    background: var(--premium-hero-btn-bg);
    color: var(--premium-hero-text-color) !important;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.premium-hero__actions .premium-hero__btn:hover,
.premium-hero__actions .premium-hero__btn:focus {
    transform: translateY(-1px);
    box-shadow: 0 20px 35px rgba(0, 0, 0, .35);
}

.premium-hero__btn--solid {
    background: var(--premium-hero-btn-bg-hover);
}

.premium-hero__btn--outline {
    background: transparent;
    border-color: var(--premium-hero-btn-border);
}

.premium-hero__btn--ghost {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

.premium-hero__media {
    flex: 1 1 320px;
    min-height: 320px;
    height: 320px;
    max-height: 320px;
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, .35), 0 20px 60px rgba(3, 10, 37, .45);
    background-color: rgba(3, 17, 48, .95);
}

.premium-hero__media::before,
.premium-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.premium-hero__media::before {
    background: linear-gradient(135deg, rgba(4, 18, 59, .55), rgba(13, 51, 107, .15));
}

.premium-hero__media--carousel::after {
    background: linear-gradient(90deg, rgba(4, 18, 59, .65) 0%, rgba(4, 18, 59, 0) 26%, rgba(4, 18, 59, 0) 74%, rgba(4, 18, 59, .65) 100%);
    mix-blend-mode: multiply;
}

.premium-hero__media-image {
    object-fit: cover;
    object-position: center;
}

.premium-hero__highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.premium-hero__highlight {
    flex: 1 1 150px;
    background: rgba(255, 255, 255, .12);
    border-radius: 16px;
    padding: 1rem 1.25rem;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    min-width: 140px;
}

.premium-hero__highlight-value {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.1;
}

.premium-hero__highlight-label {
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .65);
}

.premium-hero__highlight-meta {
    font-size: .78rem;
    color: rgba(255, 255, 255, .8);
}

.premium-hero--midnight {
    --premium-hero-gradient-from: #04123b;
    --premium-hero-gradient-to: #0c447a;
}

.premium-hero--cobalt {
    --premium-hero-gradient-from: #0c326f;
    --premium-hero-gradient-to: #2563eb;
}

.premium-hero--emerald {
    --premium-hero-gradient-from: #053f2b;
    --premium-hero-gradient-to: #1c8f5c;
}

.premium-hero--indigo {
    --premium-hero-gradient-from: #1f1b4d;
    --premium-hero-gradient-to: #4338ca;
}

.premium-hero--compact {
    padding: 1.75rem 1.5rem;
    border-radius: 22px;
}

.premium-hero--compact .premium-hero__title {
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
}

.premium-hero--compact .premium-hero__subtitle {
    font-size: .95rem;
    margin-bottom: .75rem;
}

.premium-hero--compact .premium-hero__description {
    font-size: .92rem;
    margin-bottom: 1rem;
}

.premium-hero--compact .premium-hero__media {
    min-height: 240px;
    height: 240px;
    max-height: 240px;
}

.premium-hero--compact .premium-hero__highlights {
    margin-top: 1.2rem;
    gap: .75rem;
}

.premium-hero--compact .premium-hero__highlight {
    padding: .85rem 1rem;
}

.premium-hero__carousel .carousel-item {
    min-height: 320px;
    height: 100%;
}

.premium-hero__carousel img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.premium-hero__carousel .carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.premium-hero__media-overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg,
            var(--hero-overlay-from, rgba(3, 17, 48, 0.7)) 0%,
            rgba(3, 17, 48, 0.5) 6%,
            rgba(3, 17, 48, 0.26) 10%,
            rgba(3, 17, 48, 0.12) 13%,
            rgba(3, 17, 48, 0) 15%,
            rgba(3, 17, 48, 0) 85%,
            rgba(3, 17, 48, 0.12) 87%,
            rgba(3, 17, 48, 0.26) 90%,
            rgba(3, 17, 48, 0.5) 94%,
            var(--hero-overlay-to, rgba(3, 17, 48, 0.7)) 100%);
    pointer-events: none;
    z-index: 2;
}

.premium-hero__media .carousel,
.premium-hero__media .carousel-inner,
.premium-hero__media .carousel-item,
.premium-hero__media .carousel-item img,
.premium-hero__media .h-100.w-100,
.premium-hero__media .premium-hero__media-image {
    position: relative;
    z-index: 1;
}

.premium-hero__media .carousel-indicators,
.premium-hero__media .carousel-control-prev,
.premium-hero__media .carousel-control-next {
    z-index: 3;
}

.premium-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.premium-hero__chip {
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    padding: .35rem 1rem;
    font-size: .82rem;
    color: rgba(255, 255, 255, .85);
}

.premium-hero__doc-link {
    margin-top: 1rem;
}

.premium-hero__doc-link .btn {
    border-radius: 999px;
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .premium-hero {
        padding: 2rem;
    }

    .premium-hero__inner {
        flex-direction: column;
    }

    .premium-hero__media {
        min-height: 240px;
        height: 240px;
        max-height: 240px;
    }
}

.premium-hero:not(.hero--light) {
    background: var(--premium-hero-gradient) !important;
    color: var(--premium-hero-text-color) !important;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.25);
}

.premium-hero:not(.hero--light)>*,
.premium-hero:not(.hero--light) .hero-content {
    position: relative;
    z-index: 1;
}

.premium-hero:not(.hero--light) h1,
.premium-hero:not(.hero--light) h2,
.premium-hero:not(.hero--light) h3,
.premium-hero:not(.hero--light) h4,
.premium-hero:not(.hero--light) h5,
.premium-hero:not(.hero--light) h6,
.premium-hero:not(.hero--light) .hero-title {
    color: var(--premium-hero-text-color) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.premium-hero:not(.hero--light) p,
.premium-hero:not(.hero--light) .lead,
.premium-hero:not(.hero--light) li,
.premium-hero:not(.hero--light) small,
.premium-hero:not(.hero--light) .hero-subtitle,
.premium-hero:not(.hero--light) .hero-eyebrow {
    color: var(--premium-hero-text-muted) !important;
}

.premium-hero:not(.hero--light) a:not(.btn) {
    color: var(--premium-hero-text-color) !important;
    text-decoration-color: rgba(255, 255, 255, 0.65);
}

.premium-hero:not(.hero--light) .hero-badge,
.premium-hero:not(.hero--light) .hero-highlight,
.premium-hero:not(.hero--light) .hero-tag {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid var(--premium-hero-border-color);
    color: var(--premium-hero-text-color);
}

.premium-hero:not(.hero--light) .hero-stat,
.premium-hero:not(.hero--light) .stat-card,
.premium-hero:not(.hero--light) .hero-metric {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--premium-hero-text-color);
}

.premium-hero:not(.hero--light) .hero-stat-value,
.premium-hero:not(.hero--light) .stat-number {
    color: #fff;
}

.premium-hero:not(.hero--light) .hero-stat-label,
.premium-hero:not(.hero--light) .stat-label {
    color: rgba(255, 255, 255, 0.75);
}

.premium-hero:not(.hero--light) .btn:not(.btn-light):not(.btn-outline-light):not(.btn-link) {
    background-color: var(--premium-hero-btn-bg) !important;
    color: var(--premium-hero-text-color) !important;
    border: 1px solid var(--premium-hero-btn-border) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.premium-hero:not(.hero--light) .btn:not(.btn-light):not(.btn-outline-light):not(.btn-link):hover {
    background-color: var(--premium-hero-btn-bg-hover) !important;
    transform: translateY(-2px);
}

.premium-hero:not(.hero--light) .btn-outline-light,
.premium-hero:not(.hero--light) .btn-outline-primary,
.premium-hero:not(.hero--light) .btn-outline-secondary {
    color: var(--premium-hero-text-color) !important;
    border-color: var(--premium-hero-btn-border) !important;
}

.premium-hero:not(.hero--light) .btn-light {
    color: var(--primary-blue) !important;
}

.premium-hero:not(.hero--light) .btn-link {
    color: var(--premium-hero-text-color) !important;
}

.premium-hero:not(.hero--light) .hero-callsign,
.premium-hero:not(.hero--light) .hero-logo+.hero-callsign {
    color: var(--primary-blue);
    background: linear-gradient(135deg, var(--accent-gold), #ffc700);
}

.premium-hero:not(.hero--light) .hero-actions {
    gap: 1rem;
    flex-wrap: wrap;
}

.premium-hero:not(.hero--light) .hero-logo img,
.premium-hero:not(.hero--light) .club-hero-logo {
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}

.hero-section::before,
.page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.10) 0, rgba(255, 255, 255, 0.10) 1px, transparent 1px, transparent 28px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.10) 0, rgba(255, 255, 255, 0.10) 1px, transparent 1px, transparent 28px);
    opacity: 0.1;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 15;
}

.hero-callsign {
    font-size: 6rem;
    font-weight: 900;
    color: var(--accent-gold);
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
    margin-bottom: 0;
    line-height: 0.8;
    letter-spacing: -2px;
}

/* ===== CONTENT SECTIONS ===== */
.content-section {
    padding: 4rem 0;
    background: var(--bg-secondary);
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--theme-text-primary, var(--bs-body-color, var(--primary-blue)));
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* ===== CARD COMPONENTS ===== */
.content-card,
.info-card {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    padding: 2rem;
    transition: var(--transition);
    border: 1px solid var(--border-light);
    margin-bottom: 2rem;
}

.content-card:hover,
.info-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.content-card h3,
.info-card h3 {
    color: var(--primary-blue);
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.content-card h3 i,
.info-card h3 i {
    margin-right: 0.75rem;
    color: var(--secondary-blue);
}

/* ===== STATISTICS & METRICS ===== */
.stats-section {
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
    padding: 4rem 0;
    color: var(--text-light);
    position: relative;
    overflow: hidden;
}

.stats-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -15%;
    width: 80%;
    height: 200%;
    background: rgba(255, 255, 255, 0.02);
    transform: rotate(-45deg);
}

.stat-item {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    z-index: 15;
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--accent-gold);
    display: block;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.stat-label {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    margin-top: 0.5rem;
}

/* ===== TABLES ===== */
.data-table {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* ===== BUTTONS ===== */
/* ===== FORMS ===== */
/* ===== ALERTS ===== */
/* ===== BADGES & LABELS ===== */
.license-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.license-extra {
    background: linear-gradient(45deg, var(--success-green), #20c997);
    color: var(--text-light);
}

.license-general {
    background: linear-gradient(45deg, var(--info-blue), #6610f2);
    color: var(--text-light);
}

.license-technician {
    background: linear-gradient(45deg, var(--warning-orange), #fd7e14);
    color: #212529;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {

    .hero-section,
    .page-hero {
        padding: 6rem 0 3rem;
    }

    .hero-callsign {
        font-size: 4rem;
    }

    .content-section {
        padding: 2rem 0;
    }

    .section-title {
        font-size: 2rem;
    }

    .content-card,
    .info-card {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .stat-number {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    .hero-callsign {
        font-size: 3rem;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .content-card,
    .info-card {
        padding: 1.25rem;
    }

    .stat-number {
        font-size: 2rem;
    }
}

/* ===== UTILITY CLASSES ===== */
.text-primary-custom {
    color: var(--primary-blue) !important;
}

.text-secondary-custom {
    color: var(--secondary-blue) !important;
}

.text-accent {
    color: var(--accent-gold) !important;
}

.bg-primary-custom {
    background-color: var(--primary-blue) !important;
}

.bg-secondary-custom {
    background-color: var(--secondary-blue) !important;
}

.bg-accent {
    background-color: var(--accent-gold) !important;
}

.shadow-custom-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow-custom-md {
    box-shadow: var(--shadow-md) !important;
}

.shadow-custom-lg {
    box-shadow: var(--shadow-lg) !important;
}

.border-radius-custom {
    border-radius: var(--border-radius) !important;
}

.border-radius-sm-custom {
    border-radius: var(--border-radius-sm) !important;
}

.border-radius-lg-custom {
    border-radius: var(--border-radius-lg) !important;
}

/* ===== ANIMATION KEYFRAMES ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.animate-fade-up {
    animation: fadeInUp 0.6s ease-out;
}

.animate-fade-left {
    animation: fadeInLeft 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ===== FOOTER STYLES ===== */
.footer-spacing {
    padding-top: 10px;
}

footer {
    border-top: 2px solid var(--accent-gold);
}

/* ===== AUTO CONTRAST (JS-assisted) ===== */
/* Applied by /js/contrast.js when an element has poor contrast. */
[data-w5obm-contrast="dark"] {
    color: #000 !important;
}

[data-w5obm-contrast="light"] {
    color: #fff !important;
}

[data-w5obm-contrast="dark"] a:not(.btn):not(.nav-link):not([class*="text-"]),
[data-w5obm-contrast="light"] a:not(.btn):not(.nav-link):not([class*="text-"]) {
    color: inherit !important;
}

/* =============================================
 * NAVBAR THEME INTEGRATION
 * Uses CSS variables injected by header.php
 * ============================================= */
.w5obm-navbar {
    background: var(--w5obm-navbar-bg, rgba(255, 255, 255, 0.96)) !important;
    border-bottom: 1px solid var(--w5obm-navbar-border, rgba(15, 23, 42, 0.18));
    box-shadow: var(--w5obm-navbar-shadow, 0 8px 26px rgba(0, 0, 0, .1));
    transition: all 0.3s ease;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.w5obm-navbar.scrolled {
    background: var(--w5obm-navbar-bg-scrolled, rgba(255, 255, 255, 0.98)) !important;
}

.w5obm-navbar .nav-link,
.w5obm-navbar .navbar-brand {
    color: var(--w5obm-navbar-text-primary, #2a3b61) !important;
    transition: color 0.2s ease;
}

.w5obm-navbar .nav-link:hover,
.w5obm-navbar .nav-link:focus {
    color: var(--w5obm-navbar-text-secondary, #1e40af) !important;
}

.w5obm-navbar .nav-link.active {
    color: var(--w5obm-navbar-text-secondary, #1e40af) !important;
}

.w5obm-navbar .dropdown-menu {
    background: var(--bs-dropdown-bg, #ffffff);
    color: var(--bs-dropdown-link-color, #212529);
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.15));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.w5obm-navbar .dropdown-item {
    color: var(--bs-dropdown-link-color, #212529);
    transition: all 0.2s ease;
}

.w5obm-navbar .dropdown-item:hover,
.w5obm-navbar .dropdown-item:focus {
    background: var(--bs-dropdown-link-hover-bg, #f8f9fa);
    color: var(--bs-dropdown-link-hover-color, #1e2125);
}

.w5obm-navbar .navbar-toggler {
    border-color: var(--w5obm-navbar-border, rgba(15, 23, 42, 0.18));
}

.w5obm-navbar .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='rgba(248, 250, 252, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Navbar light variant (for preview/light themes) */
.w5obm-navbar.navbar-light .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='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* =============================================
 * GLOBAL COMPONENT THEME INTEGRATION
 * Ensure all components use theme variables
 * ============================================= */
body {
    background-color: var(--bs-body-bg, #ffffff) !important;
    color: var(--bs-body-color, #212529) !important;
}

.card {
    background-color: var(--bs-card-bg, #ffffff);
    color: var(--bs-card-color, inherit);
    border-color: var(--bs-border-color, rgba(0, 0, 0, 0.125));
}

.card-header,
.card-footer {
    background-color: var(--bs-secondary-bg, #f8f9fa);
    border-color: var(--bs-border-color, rgba(0, 0, 0, 0.125));
}

.modal-content {
    background-color: var(--bs-modal-bg, #ffffff);
    color: var(--bs-modal-color, inherit);
}

.modal-header,
.modal-footer {
    border-color: var(--bs-border-color, rgba(0, 0, 0, 0.125));
}

.table {
    --bs-table-bg: var(--bs-body-bg, transparent);
    --bs-table-color: var(--bs-body-color, inherit);
}

.table thead th {
    background-color: var(--bs-secondary-bg, #f8f9fa);
    color: var(--bs-emphasis-color, inherit);
    border-color: var(--bs-border-color, #dee2e6);
}

.form-control,
.form-select {
    background-color: var(--bs-body-bg, #ffffff);
    color: var(--bs-body-color, #212529);
    border-color: var(--bs-border-color, #ced4da);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25);
}

.btn-primary {
    background-color: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--bs-primary-hover, #0b5ed7);
    border-color: var(--bs-primary-hover, #0b5ed7);
}

a:not(.btn):not(.nav-link) {
    color: var(--bs-link-color, #0d6efd);
    text-decoration: none;
}

a:not(.btn):not(.nav-link):hover {
    color: var(--bs-link-hover-color, #0a58ca);
    text-decoration: underline;
}

/* =============================================
 * PUBLIC PAGE CONSISTENCY LAYER
 * Shared spacing, cards, and section rhythm for legacy pages
 * ============================================= */

.content-section,
.events-section,
.resources-section,
.process-section,
.reference-grid,
.info-section,
.details-section,
.education-section,
.contact-section,
.overview-section,
.schedule-section,
.faq-section {
    padding-top: clamp(2.25rem, 5vw, 4rem);
    padding-bottom: clamp(2.25rem, 5vw, 4rem);
}

.section-header,
.content-section h2,
.events-section h2,
.resources-section h2,
.process-section h2,
.info-section h2,
.details-section h2,
.education-section h2,
.contact-section h2,
.overview-section h2,
.schedule-section h2,
.faq-section h2 {
    margin-bottom: 1rem;
    color: var(--theme-text-primary, var(--bs-body-color, var(--text-primary, #1e293b)));
    font-weight: 700;
    letter-spacing: -0.015em;
}

.content-card,
.reference-card,
.resource-card,
.process-card,
.step-card,
.timeline-content,
.info-card,
.detail-card {
    background: var(--card-bg, var(--bs-card-bg, var(--bg-primary, #ffffff)));
    border: 1px solid var(--card-border, color-mix(in srgb, var(--bs-border-color, var(--theme-primary, #0f172a)) 45%, transparent));
    border-radius: 16px;
    box-shadow: var(--shadow-sm, 0 8px 26px color-mix(in srgb, var(--theme-primary, #0f172a) 12%, transparent));
    padding: clamp(1rem, 2.2vw, 1.5rem);
    height: 100%;
}

.content-card:hover,
.reference-card:hover,
.resource-card:hover,
.process-card:hover,
.info-card:hover,
.detail-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 14px 36px color-mix(in srgb, var(--theme-primary, #0f172a) 16%, transparent));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.content-card h3,
.reference-card h3,
.resource-card h3,
.process-card h3,
.info-card h3,
.detail-card h3 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
    color: var(--theme-text-primary, var(--bs-body-color, var(--text-primary, #1e293b)));
}

.content-card p,
.reference-card p,
.resource-card p,
.process-card p,
.info-card p,
.detail-card p {
    color: var(--theme-text-secondary, var(--bs-secondary-color, var(--text-secondary, #64748b)));
    margin-bottom: 0;
}

.page-main,
main .container,
main .container-fluid {
    position: relative;
    z-index: 1;
}

.references-page .navbar,
.references-page .w5obm-navbar {
    background: var(--w5obm-navbar-bg, var(--w5obm-nav-bg, linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%)));
    box-shadow: var(--w5obm-navbar-shadow, var(--w5obm-nav-shadow, var(--shadow-lg)));
}

.references-page .dropdown-menu {
    background-color: var(--bs-dropdown-bg, var(--bs-card-bg, #fff));
    border-color: var(--bs-dropdown-border-color, rgba(0, 0, 0, 0.15));
}

.references-page .dropdown-item {
    color: var(--bs-dropdown-link-color, var(--color-gray-700));
}

.references-page .dropdown-item:hover,
.references-page .dropdown-item:focus {
    color: var(--bs-dropdown-link-hover-color, var(--bs-emphasis-color, #fff));
    background-color: var(--bs-dropdown-link-hover-bg, var(--theme-primary));
}