:root {
    --aec-blue: #003366;
    --aec-blue-light: #004080;
    --aec-gold: #FFD700;
    --top-bar-bg: #f8f9fa;
    --top-bar-text: #333;
    --nav-bg: #003366;
    --nav-text: #ffffff;
    --footer-bg: #1a1a1a;
    --footer-text: #e0e0e0;
}

[data-theme='dark'] {
    --aec-blue: #001a33;
    --aec-blue-light: #00264d;
    --top-bar-bg: #121212;
    --top-bar-text: #e0e0e0;
    --nav-bg: #001a33;
    --footer-bg: #000000;
}

body {
    transition: background-color 0.3s, color 0.3s;
}

.mega-menu {
    display: none;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 60;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.group:hover .mega-menu {
    display: block;
}

/* Mobile specific menu styles */
@media (max-width: 1024px) {
    .group:hover .mega-menu {
        display: none;
    }
    
    .mega-menu {
        position: static;
        display: none;
        max-height: none !important;
        overflow-y: visible !important;
        width: 100% !important;
        box-shadow: none !important;
    }

    .group.mobile-submenu-open .mega-menu {
        display: block !important;
    }
    
    #mobile-menu {
        display: none; /* Controlled by JS toggling 'hidden' class */
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        height: auto !important;
        max-height: calc(100vh - 120px) !important;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        background-color: #003366 !important;
        z-index: 9999 !important;
        padding-bottom: 2rem !important;
        border-bottom: 2px solid #FFD700;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    #mobile-menu.hidden {
        display: none !important;
    }

    #mobile-menu:not(.hidden) {
        display: flex !important;
    }
}

/* Navigation & Menu Components */
.mega-menu-item {
    display: block;
    padding: 0.5rem 1rem;
    color: #374151; /* text-gray-700 */
    transition: all 0.2s;
}

.mega-menu-item:hover {
    background-color: #f3f4f6; /* bg-gray-100 */
    color: var(--aec-blue);
}

[data-theme='dark'] .mega-menu-item {
    color: #d1d5db; /* text-gray-300 */
}

[data-theme='dark'] .mega-menu-item:hover {
    background-color: #374151; /* bg-gray-700 */
    color: var(--aec-gold);
}

/* Accessibility: Font size classes */
.font-size-sm { font-size: 0.875rem; }
.font-size-base { font-size: 1rem; }
.font-size-lg { font-size: 1.125rem; }
.font-size-xl { font-size: 1.25rem; }