/* KKA — polished mobile navigation */

@media (min-width: 769px) {
    .nav .container { justify-content: center !important; }
    .nav ul { width: 100%; justify-content: center !important; align-items: center; }
    .nav li { display: flex; align-items: center; }
}

@media (max-width: 768px) {
    /* Mobile navigation overlays the blue header — it must never create a white strip. */
    .nav {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: none !important;
        overflow: visible !important;
        z-index: 1000 !important;
    }

    .nav .container {
        width: 100% !important;
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        padding: 0 14px !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }

    .nav-brand { display: none !important; }

    .hamburger {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        border: 1px solid rgba(255,255,255,.45) !important;
        border-radius: 12px !important;
        background: rgba(255,255,255,.96) !important;
        box-shadow: 0 3px 12px rgba(0,0,0,.16) !important;
        -webkit-tap-highlight-color: transparent;
    }

    .hamburger:hover, .hamburger:focus-visible { background: #fff !important; outline: none !important; }
    .hamburger:active { transform: scale(.96); }

    .hamburger span {
        display: block !important;
        width: 18px !important;
        height: 2px !important;
        margin: 0 !important;
        background: #173a70 !important;
        border-radius: 999px !important;
        transform: none !important;
        opacity: 1 !important;
        transition: transform 180ms ease, opacity 150ms ease !important;
    }

    .hamburger.active { background: #173a70 !important; border-color: #173a70 !important; }
    .hamburger.active span { background: #fff !important; }
    .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
    .hamburger.active span:nth-child(2) { opacity: 0 !important; }
    .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

    /* Drawer remains white only when the menu is opened. */
    .nav ul {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: min(88vw, 360px) !important;
        height: 100vh !important;
        padding: 76px 14px 24px !important;
        background: #fff !important;
        border-left: 1px solid rgba(23,58,112,.08) !important;
        box-shadow: -12px 0 32px rgba(15,23,42,.14) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        overflow-y: auto !important;
        transition: right .3s ease-in-out !important;
    }

    .nav ul.active { right: 0 !important; }

    .nav a {
        min-height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        padding: 13px 16px !important;
        border: 0 !important;
        border-radius: 10px !important;
        color: #173a70 !important;
        font-size: .98rem !important;
        font-weight: 600 !important;
    }

    .nav a:hover, .nav a:focus-visible { background: #f1f5fb !important; color: #173a70 !important; outline: none !important; }

    .nav .admin-login {
        margin: 10px 2px 4px !important;
        width: calc(100% - 4px) !important;
        min-height: 48px !important;
        justify-content: center !important;
        border-radius: 10px !important;
        background: #f59e0b !important;
        color: #fff !important;
    }

    .nav-overlay { z-index: 999 !important; background: rgba(15,23,42,.38) !important; }

    /* Header begins at the very top, with the menu floating over the blue background. */
    .header {
        position: relative !important;
        margin-top: 0 !important;
        padding-top: 88px !important;
    }
}

@media (max-width: 390px) {
    .nav, .nav .container { height: 60px !important; min-height: 60px !important; max-height: 60px !important; }
    .nav .container { padding: 0 12px !important; }
    .hamburger { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; max-width: 42px !important; max-height: 42px !important; border-radius: 11px !important; }
    .header { padding-top: 82px !important; }
}