/* Step 246 — Mobile Header Hotfix
   Scope: mobile header responsiveness only. No database, route, or business-logic changes. */

.mobile-nav-toggle,
.mobile-nav-drawer {
    display: none;
}

@media (max-width: 980px) {
    .premium-site-header,
    .topbar.compact-topbar.premium-site-header.phase53-site-header {
        padding: 12px 14px !important;
        border-radius: 22px !important;
    }

    .premium-site-header .premium-header-line,
    .phase53-site-header .premium-header-line,
    .mobile-header-one-line {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "brand actions" !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .premium-site-header .premium-brand-lockup {
        min-width: 0 !important;
        gap: 10px !important;
    }

    .phase53-site-header .desktop-brand-text {
        display: inline-flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
    }

    .phase53-site-header .desktop-brand-text strong,
    .phase53-site-header .desktop-brand-text small {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }

    .phase53-site-header .desktop-brand-text strong { font-size: 1.05rem !important; }
    .phase53-site-header .desktop-brand-text small { font-size: .73rem !important; opacity: .9 !important; }

    .premium-site-header .desktop-main-nav,
    .phase53-main-nav {
        display: none !important;
    }

    .phase53-site-header .premium-header-actions,
    .header-right-compact.premium-header-actions {
        grid-area: actions !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        margin-left: 0 !important;
    }

    .phase53-site-header .header-home-icon,
    .phase53-site-header .header-whatsapp-link,
    .phase53-site-header .header-mini-link,
    .phase53-site-header .student-compact-action {
        display: none !important;
    }

    .mobile-nav-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        border: 1px solid rgba(241, 196, 75, .38) !important;
        background: rgba(255,255,255,.08) !important;
        color: #eef4ff !important;
        border-radius: 14px !important;
        min-height: 42px !important;
        padding: 0 13px !important;
        white-space: nowrap !important;
        box-shadow: none !important;
    }

    .mobile-nav-toggle i { font-size: 1.1rem !important; }
    .mobile-nav-toggle span { font-weight: 700 !important; font-size: .95rem !important; }

    .phase53-site-header .tiny-lang-form,
    .phase53-site-header .language-switcher-form {
        margin: 0 !important;
        flex: 0 0 auto !important;
    }

    .phase53-site-header .language-switcher {
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
        min-height: 42px !important;
        padding: 0 30px 0 10px !important;
        border-radius: 14px !important;
    }

    .phase53-site-header .compact-login-btn,
    .phase53-site-header .premium-login-btn,
    .phase53-site-header .compact-header-logout .chip {
        min-height: 42px !important;
        padding: 0 16px !important;
        border-radius: 14px !important;
        font-size: .95rem !important;
        font-weight: 700 !important;
        flex: 0 0 auto !important;
    }

    .mobile-nav-drawer {
        position: fixed;
        inset: 0;
        z-index: 1200;
    }

    .mobile-nav-drawer[hidden] {
        display: none !important;
    }

    .mobile-nav-drawer:not([hidden]) {
        display: block !important;
    }

    .mobile-nav-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(7, 18, 47, .72);
        border: 0;
    }

    .mobile-nav-sheet {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(86vw, 350px);
        background: linear-gradient(180deg, rgba(10, 24, 65, .98), rgba(6, 18, 47, .98));
        border-left: 1px solid rgba(255,255,255,.08);
        box-shadow: -16px 0 40px rgba(0,0,0,.28);
        padding: 18px 16px 22px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .mobile-nav-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        color: #eef4ff;
    }

    .mobile-nav-head strong {
        font-size: 1.05rem;
        color: #eef4ff;
    }

    .mobile-nav-close {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,.1);
        background: rgba(255,255,255,.06);
        color: #eef4ff;
    }

    .mobile-nav-links {
        display: grid;
        gap: 8px;
    }

    .mobile-nav-links a {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 46px;
        padding: 0 14px;
        border-radius: 14px;
        color: #eef4ff;
        text-decoration: none;
        background: rgba(255,255,255,.05);
        border: 1px solid rgba(255,255,255,.08);
    }

    .mobile-nav-links a.is-active {
        background: rgba(241, 196, 75, .16);
        border-color: rgba(241, 196, 75, .38);
        color: #f8d465;
    }

    .mobile-nav-links a i {
        font-size: 1rem;
        width: 18px;
        text-align: center;
    }

    .mobile-nav-utility {
        display: grid;
        gap: 10px;
        padding-top: 6px;
        margin-top: auto;
    }

    .mobile-nav-cta,
    .mobile-nav-primary-cta,
    .mobile-nav-logout-form .mobile-nav-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 46px;
        border-radius: 14px;
        text-decoration: none;
    }

    .mobile-nav-primary-cta {
        background: #f1c44b;
        color: #1a1a1a;
        font-weight: 800;
    }

    .mobile-nav-logout-form { margin: 0; }

    body.mobile-nav-open {
        overflow: hidden;
    }
}

@media (max-width: 520px) {
    .phase53-site-header .desktop-brand-text strong {
        font-size: .96rem !important;
    }

    .phase53-site-header .desktop-brand-text small {
        font-size: .68rem !important;
    }

    .phase53-site-header .premium-header-actions {
        gap: 6px !important;
    }

    .mobile-nav-toggle {
        min-width: 42px !important;
        padding: 0 11px !important;
    }

    .mobile-nav-toggle span {
        display: none !important;
    }

    .phase53-site-header .compact-login-btn,
    .phase53-site-header .premium-login-btn,
    .phase53-site-header .compact-header-logout .chip {
        padding: 0 14px !important;
        font-size: .92rem !important;
    }
}