/* ============================================================================
   PLUTONIUM CMS 6.0 - THEME CSS
   Theme: plutonium6_default
   Generated: 2025-12-01 12:58:15   
   ARCHITECTURE:
   - root_values.css: Base typography, colors, shared utilities (h1-h6, p, a, etc.)
   - theme.php: Front-end layouts, navigation, page structure, theme-specific components
   
   DO NOT duplicate base element styles here - they're in root_values.css
   This file is for front-end-specific layouts that don't appear in CKEditor:
   - Site header/navigation
   - Footer layouts  
   - Page containers
   - Front-end specific components (hero sections, galleries, etc.)
   
   Import order:
   2. root_values.css (design system variables + base typography)
   3. This file (theme-specific customizations)
   ============================================================================ */



/* Import root CSS variables for consistency with admin */
@import url('/plutonium6.0/assets/css/root_values.css');

/* ============================================================================
   PICO CSS RESET - ZERO OUT SPACING & WIDTHS
   Create clean baseline for custom theme styling
   ============================================================================ */

/* Reset Pico container widths and spacing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Scrollbar styling */
html {
    overflow-y: scroll; /* Always show scrollbar to prevent layout shift */
    scrollbar-gutter: stable; /* Reserve space for scrollbar */
}

/* Custom scrollbar appearance (webkit browsers) */
::-webkit-scrollbar {
    width: 28px;
    background: hsla(var(--Gray50), 1);
}

::-webkit-scrollbar-track {
    background: hsla(var(--Gray50), 1);
    border-left: 1px solid hsla(var(--Gray30), 0.3);
}

::-webkit-scrollbar-thumb {
    background: hsla(var(--ColorBrand), 0.6);
    border-radius: 7px;
    border: 2px solid hsla(var(--Gray10), 1);
}

::-webkit-scrollbar-thumb:hover {
    background: hsla(var(--ColorBrand), 0.8);
}

::-webkit-scrollbar-thumb:active {
    background: hsla(var(--ColorBrand), 1);
}

/* Firefox scrollbar */
* {
    scrollbar-width: normal;
    scrollbar-color: hsla(var(--ColorBrand), 0.6) hsla(var(--Gray50), 1);
}

/* Reset container constraints */
main,
section,
article,
aside,
header,
footer,
nav,
div {
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0;
}

/* Reset Pico's container classes */
.container {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Reset grid spacing */
.grid {
    gap: 0;
    margin: 0;
    padding: 0;
}

/* ============================================================================
   THEME-SPECIFIC CSS VARIABLES
   Brand colors from Plutonium 6.0 design system
   ============================================================================ */
    
    /* Logo from database */
    --OrgLogo: url('/plutonium6.0/assets/images/logo.png');
    
 


/* ============================================================================
   SEMANTIC LAYOUT STRUCTURE
   Base styling for semantic HTML elements with zero baseline
   ============================================================================ */

/* Global Body Baseline */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: var(--FontFamily);
    font-size: var(--FontSizeBase);
    line-height: var(--LineHeightBase);
    color: hsla(var(--ColorTextPrimary), 1);
    background-color: hsla(var(--White), 1);
}

/* ============================================================================
   TYPOGRAPHIC OVERRIDES
   Base styling for semantic typography is set in root_values.css
   Set overrides here to modify, but these will not reflect in CKeditor, so there is generally not much reason to override here.
   ============================================================================ */

p, ul, li, ol, dl, dt, dd {
}

ul, ol {
}

ul li, ol li {
}

h1 {
}
h2 {
}
h3 {
}
h4 {
}

/* ============================================================================
   HEADER / NAVIGATION BASELINE
   Semantic <header> with zero spacing - use theme classes for styling
   ============================================================================ */

/* Semantic header element - zero baseline */
header {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Navigation container - zero baseline */
nav {
    margin: 0;
    padding: 0;
    width: 100%;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li {
    margin: 0;
    padding: 0;
}

nav a {
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 0;
    color: inherit;
}

/* ============================================================================
   LAYOUT UTILITIES
   Container and layout helper classes
   ============================================================================ */

.theme-container-fluid {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 var(--ThemeSpace4);
}



/* ============================================================================
   SEMANTIC SECTION ELEMENTS
   Zero baseline for <section> elements - use theme classes for styling
   ============================================================================ */

/* Semantic main element - zero baseline */
main {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: auto;
}

/* Semantic section elements - zero baseline */
section {
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
}

/* Article element - zero baseline */
article {
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
}

/* Aside element - zero baseline */
aside {
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
}

/* Footer element - zero baseline */
footer {
    margin: 0;
    padding: 0;
    width: 100%;
}

/* ============================================================================
   THEME LAYOUT CLASSES
   Use these classes to create consistent layouts
   ============================================================================ */

/* Container Classes - Use instead of Pico containers */
.theme-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--ThemeSpace4);
}

.theme-container-narrow {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--ThemeSpace4);
}

/* Width Classes */
.theme-w-full { width: 100%; }
.theme-w-auto { width: auto; }
.theme-w-fit { width: fit-content; }

/* Height Classes */
.theme-h-auto { height: auto; }
.theme-h-full { height: 100%; }
.theme-h-screen { height: 100vh; }

/* Display Classes */
.theme-block { display: block; }
.theme-inline { display: inline; }
.theme-inline-block { display: inline-block; }
.theme-flex { display: flex; }
.theme-grid { display: grid; }
.theme-hidden { display: none; }

/* ============================================================================
   FRONT-END LAYOUT STRUCTURES
   Page-level layouts that don't appear in CKEditor
   Base typography is handled by root_values.css
   ============================================================================ */

    /* Site Header - Front-end navigation, logo, etc. */
    /* Site Header - Fixed overlay navigation */
    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        min-height: 80px;
        background: hsla(var(--White), 1);
        border-top: 1px solid hsla(var(--White), 1);
        border-bottom: 1px solid hsla(var(--ColorBrand2Dark), 1);
        z-index: 1100;
        overflow: visible; /* Allow dropdowns to show */
    }

    /* Container inside fixed header */
    .site-header .theme-container-fluid {
        display: flex;
        align-items: center;
        height: 80px;
        width: 100%;
        max-width: 100%;
    }

    /* No body padding needed - slider starts at top and nav overlays it */
    body {
        padding-top: 0;
    }

    /* Main content gets normal spacing */
    #main-content {
        margin-top: 0vh;
        position: relative;
        z-index: 2;
    }
    #main-content-page {
        margin-top: -50vh;
        position: relative;
        z-index: 2;
    }
    @media (max-width: 768px) {
        #main-content-page {
            margin-top: -35vh;
        }
    }

    .site-header nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    /* Site Navigation */{
        font-family: inherit;
        font-size: inherit;
        color: inherit;
    }

    /* Code elements - zero baseline */
    code, pre {
        margin: 0;
        padding: 0;
        font-family: var(--FontFamilyMono);
        background: none;
    }

    blockquote {
        margin: 0;
        padding: 0;
        font-style: normal;
    }

    hr {
        margin: 0;
        padding: 0;
        border: none;
        height: 1px;
        background: transparent;
    }
    .content-area {
        width: 90%;
        padding: var(--ThemeSpace2);
        margin: 0 auto;
    }

/* ============================================================================
   THEME BRAND CLASSES
   Apply Plutonium 6.0 brand colors consistently
   ============================================================================ */

    /* Text Color Classes */
    .theme-text-brand { color: hsla(var(--ColorBrand), 1); }
    .theme-text-brand-light { color: hsla(var(--ColorBrandLight), 1); }
    .theme-text-brand-dark { color: hsla(var(--ColorBrandDark), 1); }
    .theme-text-primary { color: hsla(var(--ColorTextPrimary), 1); }
    .theme-text-secondary { color: hsla(var(--ColorTextSecondary), 1); }
    .theme-text-muted { color: hsla(var(--ColorTextMuted), 1); }
    .theme-text-white { color: hsla(var(--White), 1); }
    .theme-text-black { color: hsla(var(--Black), 1); }

    /* Background Color Classes */
    .theme-bg-brand { 
        background-color: hsla(var(--White), .5); 
        border-radius: 100px;
        width: auto;
        margin: 0 1%; /* Use percentage margin for spacing */
        margin-top: 16px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px); /* Safari support */
        height: fit-content;
    }
    .theme-bg-brand-light { background-color: hsla(var(--ColorBrandLight), 1); }
    .theme-bg-brand-dark { background-color: hsla(var(--ColorBrandDark), 1); }
    .theme-bg-white { background-color: hsla(var(--White), 1); }
    .theme-bg-gray-1 { background-color: hsla(var(--Gray1), 1); }
    .theme-bg-gray-2 { background-color: hsla(var(--Gray2), 1); }
    .theme-bg-gray-9 { background-color: hsla(var(--Gray9), 1); }
    .theme-bg-gray-10 { background-color: hsla(var(--Gray10), 1); }

    /* Border Classes */
    .theme-border { border: 1px solid hsla(var(--ColorBorder), 1); }
    .theme-border-brand { border: 1px solid hsla(var(--ColorBrand), 1); }
    .theme-border-t { border-top: 1px solid hsla(var(--ColorBorder), 1); }
    .theme-border-b { border-bottom: 1px solid hsla(var(--ColorBorder), 1); }
    .theme-border-l { border-left: 1px solid hsla(var(--ColorBorder), 1); }
    .theme-border-r { border-right: 1px solid hsla(var(--ColorBorder), 1); }

    /* Shadow Classes */
    .theme-shadow-sm { box-shadow: var(--ShadowSM); }
    .theme-shadow { box-shadow: var(--ShadowBase); }
    .theme-shadow-md { box-shadow: var(--ShadowMD); }
    .theme-shadow-lg { box-shadow: var(--ShadowLG); }

    /* Border Radius Classes */
    .theme-rounded-sm { border-radius: var(--RadiusSM); }
    .theme-rounded { border-radius: var(--RadiusBase); }
    .theme-rounded-lg { border-radius: var(--RadiusLG); }
    .theme-rounded-full { border-radius: 50%; }

    /* Typography Classes */
    .theme-font-heading { font-family: var(--FontFamilyHeading); }
    .theme-font-body { font-family: var(--FontFamily); }
    .theme-font-mono { font-family: var(--FontFamilyMono); }

    .theme-text-xs { font-size: var(--FontSizeXS); }
    .theme-text-sm { font-size: var(--FontSizeSM); }
    .theme-text-base { font-size: var(--FontSizeBase); }
    .theme-text-lg { font-size: var(--FontSizeLG); }
    .theme-text-xl { font-size: var(--FontSizeXL); }
    .theme-text-2xl { font-size: var(--FontSize2XL); }
    .theme-text-3xl { font-size: var(--FontSize3XL); }

    .theme-font-normal { font-weight: var(--FontWeightNormal); }
    .theme-font-medium { font-weight: var(--FontWeightMedium); }
    .theme-font-semibold { font-weight: var(--FontWeightSemibold); }
    .theme-font-bold { font-weight: var(--FontWeightBold); }

    .theme-text-left { text-align: left; }
    .theme-text-center { text-align: center; }
    .theme-text-right { text-align: right; }

/* ============================================================================
   RESPONSIVE BREAKPOINTS
   Mobile-first approach with zero baseline
   ============================================================================ */

    /* Tablet and up */
    @media (min-width: 768px) {
        .theme-container {
            padding: 0 var(--ThemeSpace6);
        }
    }

    /* Desktop and up */
    @media (min-width: 1024px) {
        .theme-container {
            padding: 0 var(--ThemeSpace8);
        }
    }

    /* Large desktop and up */
    @media (min-width: 1280px) {
        .theme-container {
            max-width: 1280px;
        }
    }

    /* Page Title Styling */
    article header h1 {
        color: hsla(var(--Gray10), 1);
        border-bottom: 3px solid hsla(var(--Gray50), 0.2);
        padding-bottom: var(--Space3);
        margin-bottom: var(--Space6);
    }

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

    /* Body background with subtle pattern */
    body {
        background-color: hsla(var(--Gray1), 1);
        background-image: 
            linear-gradient(hsla(var(--Azure), 0.02) 1px, transparent 1px),
            linear-gradient(90deg, hsla(var(--Azure), 0.02) 1px, transparent 1px);
        background-size: 20px 20px;
    }

    @media (max-width: 768px) {
        .hero {
            padding: var(--Space8) var(--Space4);
        }
        
        .hero h1 {
            font-size: var(--FontSize2XL);
        }
        
        .content-area {
            font-size: var(--FontSizeSM);
            padding: var(--Space4);
        }
        
        .content-area h1 {
            font-size: var(--FontSize2XL);
        }
        
        .site-logo {
            height: 40px;
        }
        
        header nav ul {
            flex-wrap: wrap;
            gap: var(--Space2);
        }
    }

    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }

    /* Focus styles for accessibility */
    *:focus-visible {
        outline: 2px solid hsla(var(--Azure), 1);
        outline-offset: 2px;
    }

/* ============================================================================
   ACCESSIBILITY & PERFORMANCE
   ============================================================================ */

    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }

    /* Focus styles for accessibility */
    *:focus-visible {
        outline: 2px solid hsla(var(--ColorBrand), 1);
        outline-offset: 2px;
    }

    /* Reduced motion for accessibility */
    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }
        
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* High contrast mode support */
    @media (prefers-contrast: high) {
        .theme-text-brand {
            color: hsla(var(--Black), 1);
        }
        
        .theme-bg-brand {
            background-color: hsla(var(--Black), 1);
            color: hsla(var(--White), 1);
        }
    }

/* ============================================================================
   NAVIGATION COMPONENT
   Hierarchical horizontal navigation with dropdown menus
   ============================================================================ */
    /* Main Navigation Container */
    .site-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        width: 95%;
        max-width: none;
        margin: 0 auto;
    }

    /* Brand/Logo */
    .nav-brand {
        margin: 0;
        padding-left: 8px;
    }

    .nav-brand-link {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
        height: 100px;
        max-height: 125px;
        text-decoration: none;
        transition: opacity 0.2s ease;
        color: hsla(var(--White), 1);
        font-weight: var(--FontWeightBold);
        font-size: var(--FontSizeH4);
        gap: var(--ThemeSpace2);
    }

    .nav-brand-link:hover {
        opacity: 0.9;
    }

    /* Logo Image */
    .nav-brand-logo {
        height: 125px;
        max-height: 125px;
        width: auto;
        max-width: 300px; /* Prevent overly wide logos */
        object-fit: contain;
        transition: opacity 0.2s ease;
    }

    /* Fallback Text Brand */
    .nav-brand-text {
        color: hsla(var(--White), 1);
        font-weight: var(--FontWeightBold);
        font-size: var(--FontSizeH4);
    }

    /* Mobile Toggle Button */
    .nav-mobile-toggle {
        display: none;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: none;
        border: none;
        cursor: pointer;
        padding: var(--ThemeSpace2);
        font-size: 20px;
        color: hsla(var(--ColorBrand), 1);
        padding: 4px;
        margin-right: 12px;
    }

    .nav-toggle-icon {
        transition: all 0.3s ease;
    }
    
    .nav-toggle-icon::before {
        content: 'more_vert';
    }
    
    .nav-toggle-text {
        font-size: 16px;
        font-weight: 600;
        color: hsla(var(--ColorBrand4Dark), 1);
    }

    /* Navigation Menu Container */
    .nav-menu-container {
        margin: 0;
        padding: var(--Space4);
    }

    /* Main Menu (Top Level) */
    .nav-menu {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
        list-style: none;
        gap: var(--Space1);
    }

    .nav-menu > li {
        position: relative;
        display: flex;
        align-items: center;
    }

    .nav-menu > li > a {
        display: flex;
        align-items: center;
        padding: var(--Space3);
        color: hsla(var(--ColorBrand4Dark), 1);
        text-decoration: none;
        line-height: 1.1;
        font-size: var(--FontSizeBase);
        font-weight: var(--FontWeightMedium);
        transition: all 0.2s ease;
        border-radius: 16px;
        gap: var(--ThemeSpace1);
        flex: 0 1 auto;
    }

    .nav-menu > li > a:hover,
    .nav-menu > li > a:focus {
        color: hsla(var(--Gray10), 1);
        background-color: hsla(var(--Gray50), 0.2);
    }

    .nav-menu > li > a[aria-current="page"] {
        color: hsla(var(--Gray10), 1);
        background-color: hsla(var(--Gray50), 0.2);
    }

    /* Dropdown Indicator - Now a button element */
    .nav-dropdown-indicator {
        background: none;
        border: none;
        cursor: pointer;
        padding: var(--Space2);
        margin: 0;
        margin-left: var(--Space1);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: hsla(var(--ColorBrand4Dark), 1);
        transition: transform 0.2s ease;
        position: relative;
        z-index: 10;
        pointer-events: auto;
    }
    
    .nav-dropdown-icon {
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid currentColor;
        display: block;
    }

    /* Hover effect - scale up slightly, keep same color */
    .nav-dropdown-indicator:hover {
        transform: scale(1.05);
        color: hsla(var(--ColorBrand4Dark), 1);
    }
    
    /* Open state - rotate 180deg */
    .nav-item-has-children.nav-submenu-open .nav-dropdown-indicator {
        transform: rotate(180deg);
    }

    /* Submenu (Dropdown) */
    .nav-submenu {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 250px;
        max-width: 400px;
        background-color: hsla(var(--White), 1);
        border-radius: var(--Radius2XL);
        box-shadow: var(--ShadowLG);
        border: 1px solid hsla(var(--ColorBrand2Dark), 1);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.2s ease;
        margin-top: var(--Space3);
        padding: var(--Space4);
        list-style: none;
        z-index: 1000;
    }

    .nav-item-has-children.nav-submenu-open .nav-submenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Submenu Items */
    .nav-submenu-item {
        margin-bottom: var(--Space2);
        padding-bottom: var(--Space2);
        border-bottom: 1px solid hsla(var(--ColorBrand4), 0.5);
    }

    .nav-submenu-item:last-child {
        border-bottom: none;
    }

    .nav-submenu-item a {
        display: flex;
        align-items: center;
        padding: var(--ThemeSpace2) var(--ThemeSpace4);
        color: hsla(var(--ColorTextPrimary), 1);
        text-decoration: none;
        transition: all 0.2s ease;
        margin: 0;
        position: relative;
    }

    .nav-submenu-item a:hover,
    .nav-submenu-item a:focus {
        background-color: hsla(var(--ColorBrand), 0.05);
        color: hsla(var(--ColorBrand), 1);
        padding: var(--Space2);
        border-radius: var(--RadiusBase);
    }

    .nav-submenu-item a[aria-current="page"] {
        background-color: hsla(var(--ColorBrand), 0.1);
        color: hsla(var(--ColorBrand), 1);
        font-weight: var(--FontWeightMedium);
        padding: var(--Space2);
        border-radius: var(--RadiusBase);
    }

    /* Children indicator */
    .nav-has-children-indicator {
        margin-left: auto;
        color: hsla(var(--ColorTextSecondary), 0.6);
        font-size: var(--FontSizeXS);
        font-weight: var(--FontWeightBold);
    }

    /* Indentation for nested levels */
    .nav-indent {
        display: inline-flex;
        align-items: center;
        margin-right: var(--ThemeSpace2);
    }

    .nav-indent-spacer {
        width: var(--ThemeSpace4);
        height: 1px;
        border-bottom: 1px solid hsla(var(--ColorBorder), 0.3);
        margin-right: var(--ThemeSpace1);
    }

    .nav-indent-spacer:last-child {
        margin-right: var(--ThemeSpace2);
    }

    /* Level-specific styling */
    .nav-submenu-level-1 a {
        font-weight: var(--FontWeightMedium);
        padding-left: var(--ThemeSpace4);
    }

    .nav-submenu-level-2 a {
        padding-left: var(--ThemeSpace6);
        font-size: var(--FontSizeSM);
        color: hsla(var(--ColorTextSecondary), 1);
    }

    .nav-submenu-level-2 a:hover,
    .nav-submenu-level-2 a:focus {
        background-color: hsla(var(--ColorBrand), 0.08);
        color: hsla(var(--ColorBrand), 1);
    }

    .nav-submenu-level-2 a[aria-current="page"] {
        background-color: hsla(var(--ColorBrand), 0.12);
        color: hsla(var(--ColorBrand), 1);
        font-weight: var(--FontWeightMedium);
    }

    .nav-submenu-level-3 a {
        padding-left: var(--ThemeSpace8);
        font-size: var(--FontSizeSM);
        color: hsla(var(--ColorTextSecondary), 0.9);
    }

    .nav-submenu-level-3 a:hover,
    .nav-submenu-level-3 a:focus {
        background-color: hsla(var(--ColorBrand), 0.08);
        color: hsla(var(--ColorBrand), 1);
    }

    .nav-submenu-level-3 a[aria-current="page"] {
        background-color: hsla(var(--ColorBrand), 0.12);
        color: hsla(var(--ColorBrand), 1);
        font-weight: var(--FontWeightMedium);
    }

    .nav-submenu-level-4 a {
        padding-left: calc(var(--ThemeSpace8) + var(--ThemeSpace4));
        font-size: var(--FontSizeXS);
        color: hsla(var(--ColorTextSecondary), 0.8);
    }

    .nav-submenu-level-4 a:hover,
    .nav-submenu-level-4 a:focus {
        background-color: hsla(var(--ColorBrand), 0.08);
        color: hsla(var(--ColorBrand), 1);
    }

    .nav-submenu-level-4 a[aria-current="page"] {
        background-color: hsla(var(--ColorBrand), 0.12);
        color: hsla(var(--ColorBrand), 1);
        font-weight: var(--FontWeightMedium);
    }

    /* Skip to Main Content */
    .skip-to-main {
        position: absolute;
        left: -9999px;
        z-index: 9999;
        text-decoration: none;
        border-radius: var(--RadiusBase);
    }

    .skip-to-main:focus {
        left: var(--ThemeSpace4);
        top: var(--ThemeSpace4);
    }

/* ============================================================================
   NAVIGATION - MOBILE RESPONSIVE STYLES
   ============================================================================ */
    @media (max-width: 1366px) {
        .nav-mobile-toggle {
            display: flex;
        }
        
        .nav-toggle-icon::before {
            content: 'more_vert';
        }
        
        .nav-mobile-toggle[aria-expanded="true"] .nav-toggle-icon::before {
            content: 'close';
        }
        
        .nav-menu-container {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background-color: hsla(var(--White), 1);
            -webkit-backdrop-filter: blur(20px); /* Safari support */
            border-radius: var(--Radius2XL);
            border: 1px solid hsla(var(--ColorBorder), 1);
            box-shadow: var(--ShadowLG);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s ease;
        }
        
        .nav-menu-container.nav-menu-open {
            opacity: 1;
            visibility: visible;
            backdrop-filter: blur(20px);
            transform: translateY(0);
        }
        
        .nav-menu {
            flex-direction: column;
            align-items: stretch;
            padding: var(--ThemeSpace4);
            gap: 0;
        }
        
        .nav-menu > li {
            flex-direction: column;
            align-items: stretch;
            color: hsl(var(--ColorBrand2Dark));
            border-bottom: 1px solid hsla(var(--Gray50), 0.5);
            margin: var(--Space3);
            padding: var(--Space2);
        }
        
        .nav-menu > li:last-child {
            border-bottom: none;
        }
        
        /* Wrapper for link + button to keep them in a row */
        .nav-menu > li {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .nav-menu > li > a {
            color: hsl(var(--ColorBrand2Dark));
            padding: var(--ThemeSpace2);
            flex: 1 1 auto;
            text-align: left;
        }
        
        .nav-menu > li > .nav-dropdown-indicator {
            flex: 0 0 auto;
            margin-left: var(--Space2);
        }
        
        /* Submenu takes full width below the link+button row */
        .nav-menu > li > .nav-submenu {
            flex: 1 1 100%;
            width: 100%;
        }
        
        .nav-submenu {
            position: static;
            opacity: 1;
            visibility: visible;
            transform: none;
            background: none;
            border: none;
            box-shadow: none;
            padding: 0;
            padding-left: var(--Space4);
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            min-width: auto;
            max-width: none;
            align-items: flex-start;
        }
        
        .nav-item-has-children.nav-submenu-open .nav-submenu {
            max-height: 500px;
        }
        
        .nav-submenu-item {
            width: 100%;
            text-align: left;
        }
        
        .nav-submenu-item a {
            color: hsla(var(--ColorBrand2Dark), 0.9);
            padding: var(--ThemeSpace2) 0;
            display: block;
            text-align: left;
            justify-content: flex-start;
        }
        
        .nav-submenu-item a:hover,
        .nav-submenu-item a:focus {
            color: hsla(var(--ColorBrand), 1);
        }
        
        .nav-has-children-indicator {
            color: hsla(var(--White), 0.4);
        }
        
        .nav-indent-spacer {
            border-bottom-color: hsla(var(--White), 0.2);
        }
        
        .nav-submenu-level-1 a {
            color: hsla(var(--ColorBrand2Dark), 0.8);
            padding-left: var(--ThemeSpace6);
        }
        
        .nav-submenu-level-2 a {
            color: hsla(var(--ColorBrand2Dark), 0.8);
            padding-left: var(--ThemeSpace8);
        }
        
        .nav-submenu-level-3 a {
            padding-left: calc(var(--ThemeSpace8) + var(--ThemeSpace4));
        }
        
        .nav-submenu-level-4 a {
            padding-left: calc(var(--ThemeSpace8) + var(--ThemeSpace6));
        }
        
        /* Mobile dropdown indicator styling */
        .nav-dropdown-indicator {
            padding: var(--Space3);
            min-width: 44px;
            min-height: 44px;
        }
    }

/* ============================================================================
TESTIMONIAL FEATURE
   ============================================================================ */
   .testimonials-features {
        position: relative;
        width: 90%;
        max-width: 1920px;
        min-height: 400px;
        margin: 0 auto;
        border-radius: var(--RadiusXL);
        padding: var(--Space6);
        box-shadow: var(--ShadowXL);
        overflow: hidden;
        background-image: url('/media/16x9/city_lights_1_desktop.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
   }
   @media screen and (max-width: 768px) {
    .testimonials-features {
        padding: var(--Space4);
        min-height: 300px;
    }
   }
   
   /* Video background for testimonials */
   .testimonials-features video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        transform: translate(-50%, -50%);
        z-index: 0;
        object-fit: cover;
        border-radius: var(--RadiusXL);
   }
   
   /* Ensure content appears above video */
   .testimonials-features > * {
        position: relative;
        z-index: 1;
   }
   .testimonials-features .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--Space8);
    align-items: center;
   }
   .testimonials-features .content img {
    border-radius: 50%;
    border: 1px solid hsla(var(--White), 0.5);
    box-shadow: var(--ShadowMD);
    margin: var(--Space4);
   }
   
   /* Team Grid Layout */
   .team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--Space8);
    align-items: start;
   }
   
   .team-member {
    display: grid;
    grid-template-rows: auto auto 1fr auto; /* image, name, title, buttons */
    gap: var(--Space3);
    text-align: center;
    height: 540px;
   }
   
   .team-member img {
    width: 90%;
    margin-bottom: var(--Space2);
   }
   
   .team-member h3 {
    margin: 0;
    font-size: var(--FontSizeLG);
    font-weight: var(--FontWeightBold);
   }
   
   .team-member p {
    margin: 0;
    font-size: var(--FontSizeBase);
    line-height: 1.4;
   }
   
   .team-member-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--Space2);
    margin-top: auto;
   }
   
   .testimonials-features .content h1,
   .testimonials-features .content h2,
   .testimonials-features .content h3,
   .testimonials-features .content p {
    color: hsla(var(--White), 1);
    text-shadow: 1px 1px 4px hsla(var(--Black), 0.7);
   }
   
   @media screen and (max-width: 768px) {
    .testimonials-features .content {
        grid-template-columns: 1fr;
        grid-gap: var(--Space4);
        text-align: center;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
        gap: var(--Space6);
    }
   }
   
   /* Testimonial carousel styles */
   .testimonials-features .testimonials {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
   }
   
   .testimonial-item {
    transition: opacity 0.8s ease-in-out;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
   }
   
   .testimonial-quote {
    font-size: var(--FontSizeBase);
    color: hsla(var(--White), 1);
    margin-bottom: var(--Space4);
    line-height: var(--LineHeightRelaxed);
    text-align: justify;
   }
   .testimonial-quote-dark {
    font-size: var(--FontSizeBase);
    color: hsla(var(--ColorBrand4), 1);
    margin-bottom: var(--Space4);
    text-align: justify;
   }
   
   .testimonial-footer {
    display: flex;
    flex-direction: column;
    gap: var(--Space1);
    font-style: normal;
    background: none;
   }
   
   .testimonial-author {
    font-weight: var(--FontWeightBold);
    color: hsla(var(--White), 1);
    font-size: var(--FontSizeBase);
    font-style: normal;
   }
   
   .testimonial-title {
    font-size: var(--FontSizeSM);
    opacity: 0.9;
   }
   /*=========== Profile Testimonial Styling ===========*/
    .testimonials-carousel {
      position: relative;
      width: 75%;
      max-width: 1366px;
      margin: 0 auto;
      margin-top: var(--Space8);
      padding: var(--Space6);
      background-color: hsla(var(--White), 1);
      border-radius: var(--RadiusXL);
      box-shadow: var(--ShadowLG);
  }

  .testimonials-wrapper {
      position: relative;
  }

  .testimonial-slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      transition: opacity 0.6s ease-in-out;
      pointer-events: none;
  }

  .testimonial-slide.active {
      opacity: 1;
      position: relative;
      pointer-events: auto;
  }

  .testimonial-source {
      display: block;
      font-size: 0.95rem;
      font-style: normal;
      font-weight: 600;
      color: var(--ColorBrandDark);
      margin-top: 1rem;
  }

  .carousel-indicators {
      display: flex;
      justify-content: center;
      gap: 0.5rem;
      margin-top: 1.5rem;
  }

  .carousel-indicators .indicator {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 2px solid var(--ColorBrand);
      padding: 0;
      cursor: pointer;
      transition: background-color 0.3s ease;
  }

  .carousel-indicators .indicator:hover {
      background: var(--BrandColorLight);
  }

  .carousel-indicators .indicator.active {
      background: var(--BrandColorDark);
  }

/* ============================================================================
   FOOTER STYLING
   ============================================================================ */
    footer {
        position: relative;
        z-index: var(--ZIndexFixed);
        background: linear-gradient(hsla(var(--Gray10), 0), hsla(var(--Gray10), 1));
        padding: var(--Space6);
    }
    footer .footerGrid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: var(--Space6);
        padding: var(--Space4);
        border-radius: var(--RadiusXL);
        background-color: hsla(var(--White), 0.9);
    }
    footer .quickLinks {
        display: flex;
        flex-direction: column;
        gap: var(--Space2);
    }
    footer .quickLinks a {
        color: hsla(var(--ColorBrandDark), 1);
        text-decoration: none;
        transition: color 0.2s ease;
        padding-bottom: var(--Space2);
        border-bottom: 1px solid hsl(var(--Gray80));
    }
    footer .orgInfo {
        display: flex;
        flex-direction: column;
        gap: var(--Space2);
    } 
    footer .orgInfo img {
        width: 150px;
        height: auto;
        margin: 0 auto;
    }

    footer .orgInfo h4 {
        font-family: var(--FontFamily);
        border-bottom: 1px solid hsl(var(--Gray80));
        padding-bottom: var(--Space2);
        margin-bottom: var(--Space4);
    }

    footer .socialLinks a {
        color: hsla(var(--Gray50), 1);
        text-decoration: none;
        transition: color 0.2s ease;
        font-size: var(--FontSize2XL);  /* Scale up icons */
    }

    footer .socialLinks a:hover,
    footer .socialLinks a:focus {
        color: hsla(var(--Gray80), 1);
    }

    footer .footerCopyright {
            text-align: center;
            margin-top: var(--Space4);
    }
    @media screen and (max-width: 768px) {
        footer .footerGrid {
            grid-template-columns: 1fr;
            align-items: center;
            text-align: center;
        }
    }
/* ============================================================================
   Career Feature Elements
   ============================================================================ */ 
   #featured-jobs {
        width: 90%;
        max-width: 1920px;
        margin: 0 auto;
        margin-top: var(--Space16);
   }  


/* === NEWS TEMPLATE STYLES === */

    /* News Index Styles */
    .news-index-header {
        text-align: center;
        margin-bottom: var(--ThemeSpace8);
    }

    .news-filter-breadcrumb {
        font-size: 0.875rem;
    }

    .news-articles-grid {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 2rem;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .profile-news-by-author {
        width: 90%;
        margin: 0 auto;
        padding: var(--Space4) 0;
        border-radius: var(--RadiusXL);
        background: hsla(var(--White), .8);
        backdrop-filter: blur(8px);
        margin-top: var(--Space6);
        margin-bottom: var(--Space6);
        padding: var(--Space4);
    }

    @media (min-width: 768px) {
        .news-articles-grid {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 2rem;
        }
    }

    @media (min-width: 1024px) {
        .news-articles-grid {
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 2.5rem;
        }
    }

    /* News Card Styles */

    .news-index {
        margin: 0 auto;
        margin-top: -50vh;
        background: hsla(var(--White), .8);
        backdrop-filter: blur(8px);
        padding: var(--Space8);
        border-radius: var(--RadiusXL);
    }
    @media (max-width: 768px) {
        .news-index {
            padding: var(--Space4);
            margin-top: -30vh;
            width: 90%;
        }
    }

    .news-card {
        background: hsla(var(--White), 1);
        border-radius: var(--RadiusLG);
        box-shadow: var(--ShadowSM);
        overflow: hidden;
        transition: box-shadow 0.2s ease;
        border: 1px solid hsla(var(--ColorBorder), 1);
        padding: var(--Space4);
    }

    .news-card:hover {
        box-shadow: var(--ShadowMD);
    }

    .news-card-image img {
        width: 100%;
        height: 12rem;
        min-height: 325px;
        object-fit: cover;
        display: block;
        border-radius: var(--RadiusBase);
    }

    .news-card-content {
        padding: var(--ThemeSpace6);
    }

    .news-card-categories {
        margin-bottom: var(--ThemeSpace3);
    }

    .news-category-tag {
        display: inline-block;
        font-size: 0.75rem;
        font-weight: var(--FontWeightSemiBold);
        color: hsla(var(--PlutoAccent), 1);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-right: var(--ThemeSpace3);
        text-decoration: none;
    }

    .news-category-tag:hover {
        color: hsla(var(--PlutoAccentDark), 1);
    }

    .news-card-title {
        margin-bottom: var(--ThemeSpace3);
        font-size: 1.25rem;
        font-weight: var(--FontWeightSemiBold);
        line-height: 1.4;
    }

    .news-card-title a {
        color: inherit;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .news-card-title a:hover {
        color: hsla(var(--PlutoAccent), 1);
    }

    .news-card-summary {
        margin-bottom: var(--ThemeSpace4);
        color: hsla(var(--ColorTextSecondary), 1);
        line-height: 1.5;
    }

    .news-card-meta {
        font-size: 0.875rem;
        color: hsla(var(--ColorTextSecondary), 1);
    }

    /* Individual Article Styles */
    /* Individual Article Styles */
    .news-article {
        max-width: var(--MaxWidth4XL);
        margin: 0 auto;
        margin-top: -80vh;
        background: hsla(var(--White), .8);
        backdrop-filter: blur(8px);
        padding: var(--Space8);
        border-radius: var(--RadiusLG);
    }
    @media (max-width: 768px) {
        .news-article {
            padding: var(--Space4);
            margin-top: -45vh;
            width: 90%;
        }
    }

    .news-article-header {
        
        text-align: center;
        margin: 0 auto;
        margin-bottom: 36px;
        border-radius: var(--RadiusBase);
    }

    .news-breadcrumb {
        margin-bottom: var(--ThemeSpace4);
        text-align: left;
    }

    .news-breadcrumb a {
        color: hsla(var(--PlutoAccent), 1);
        text-decoration: none;
        font-size: 0.875rem;
    }

    .news-breadcrumb a:hover {
        text-decoration: underline;
    }

    .news-article-title {
        margin-bottom: var(--ThemeSpace4);
        font-size: 2.5rem;
        font-weight: var(--FontWeightBold);
        line-height: 1.2;
    }

    @media (max-width: 768px) {
        .news-article-title {
            font-size: 2rem;
        }
    }

    .news-article-meta {
        margin-bottom: var(--ThemeSpace4);
        color: hsla(var(--ColorTextSecondary), 1);
        font-size: 0.875rem;
    }

    .news-categories a {
        color: hsla(var(--PlutoAccent), 1);
        text-decoration: none;
        margin-right: var(--ThemeSpace2);
    }

    .news-categories a:hover {
        text-decoration: underline;
    }

    .news-article-summary {
        font-size: 1.125rem;
        color: hsla(var(--ColorTextSecondary), 1);
        margin-bottom: var(--ThemeSpace6);
        font-style: italic;
        line-height: 1.6;
    }

    .news-featured-image {
        margin-bottom: var(--ThemeSpace6);
    }

    .news-featured-image img {
        width: 100%;
        height: auto;
        border-radius: var(--RadiusBase);
        box-shadow: var(--ShadowSM);
    }

    .news-article-content {
        margin-bottom: var(--ThemeSpace8);
        line-height: 1.7;
    }

    .news-article-content h2,
    .news-article-content h3,
    .news-article-content h4 {
        margin-top: var(--Space6);
        margin-bottom: var(--Space4);
    }

    .news-article-content p {
        margin-bottom: var(--Space4);
        font-size: var(--FontSizeBase);
    }

    .news-article-content li {
        line-height: var(--LineHeightTight);
    }

    .news-article-content img {
        max-width: 100%;
        height: auto;
        border-radius: var(--RadiusBase);
        margin: var(--ThemeSpace4) 0;
    }

    /* Article Tags */
    .news-article-tags {
        margin-bottom: var(--ThemeSpace6);
    }

    .news-tags {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ThemeSpace2);
    }

    .news-tag {
        background: hsla(var(--ColorSurface), 1);
        padding: var(--ThemeSpace1) var(--ThemeSpace3);
        border-radius: var(--RadiusBase);
        font-size: 0.875rem;
        color: hsla(var(--ColorTextSecondary), 1);
        border: 1px solid hsla(var(--ColorBorder), 1);
    }

    /* Article Gallery */
    .news-article-gallery {
        margin-bottom: var(--ThemeSpace8);
    }

    .news-gallery-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        width: 100%;
    }

    @media (min-width: 768px) {
        .news-gallery-grid {
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 1.5rem;
        }
    }

    .news-gallery-item img {
        width: 100%;
        height: 12rem;
        object-fit: cover;
        border-radius: var(--RadiusBase);
        transition: transform 0.2s ease;
    }

    .news-gallery-item img:hover {
        transform: scale(1.02);
    }

    /* Empty State */
    .news-empty-state {
        text-align: center;
        padding: var(--ThemeSpace12) var(--ThemeSpace4);
    }

    .news-empty-state h2 {
        margin-bottom: var(--ThemeSpace4);
        color: hsla(var(--ColorTextSecondary), 1);
    }

    .news-empty-state p {
        color: hsla(var(--ColorTextSecondary), 1);
        margin-bottom: var(--ThemeSpace6);
        font-size: 1.125rem;
    }

    /* Category Link Styles */
    .news-category-link {
        color: hsla(var(--PlutoAccent), 1);
        text-decoration: none;
        margin-right: var(--ThemeSpace2);
        font-weight: var(--FontWeightMedium);
    }

    .news-category-link:hover {
        text-decoration: underline;
    }

    .news-category-link:not(:last-child)::after {
        content: ",";
        color: hsla(var(--ColorTextSecondary), 1);
        margin-left: 2px;
    }

/*
   USAGE EXAMPLES:
   
   Basic Page Structure:
   <body>
       <header class="site-header theme-bg-brand theme-py-0">
           <nav class="site-nav theme-container">
               <!-- Navigation content -->
           </nav>
       </header>
       
       <main class="theme-py-8">
           <section class="content-section theme-container theme-py-12">
               <h1 class="theme-text-3xl theme-font-bold theme-text-brand theme-mb-6">Page Title</h1>
               <p class="theme-text-base theme-mb-4">Content paragraph...</p>
           </section>
       </main>
       
       <footer class="site-footer theme-bg-gray-9 theme-py-8">
           <div class="theme-container theme-text-center theme-text-white">
               <!-- Footer content -->
           </div>
       </footer>
   </body>
   
   Benefits of this approach:
   - Zero spacing baseline from Pico CSS
   - Semantic HTML structure preserved
   - Consistent spacing via theme classes  
   - Easy to customize and maintain
   - Brand colors from Plutonium 6.0 design system
   - Responsive and accessible
*/