/*
 * HASKARI ACADEMY — Responsive navigation hardening
 *
 * Progressive disclosure order:
 * 1. preserve the explicit account/sign-in action;
 * 2. wrap the Academy suffix when necessary;
 * 3. collapse the account action to its icon on narrow phones;
 * 4. keep only the emblem and hamburger at extreme widths.
 */

.navbar .container {
    min-width: 0;
}

.navbar__logo-premium,
.navbar__actions {
    flex-shrink: 0;
}

.navbar__logo-premium > span {
    display: inline-flex;
    align-items: baseline;
    min-width: 0;
}

#nav-cta-login,
.profile-dropdown-trigger {
    min-width: max-content;
    white-space: nowrap;
    touch-action: manipulation;
}

/* The legacy compact class must not hide a useful label while room remains. */
@media (min-width: 376px) and (max-width: 480px) {
    .navbar.nav-compact #nav-cta-login,
    .navbar.nav-compact .profile-dropdown-trigger,
    #nav-cta-login,
    .profile-dropdown-trigger {
        width: auto !important;
        min-width: max-content !important;
        aspect-ratio: auto !important;
        padding: 0.48rem 0.62rem !important;
        gap: 0.38rem !important;
        border-radius: 0.65rem !important;
        font-size: 0.72rem !important;
    }

    .navbar.nav-compact #nav-cta-login span,
    .navbar.nav-compact .profile-dropdown-trigger span,
    #nav-cta-login span,
    .profile-dropdown-trigger span {
        display: inline !important;
    }

    .navbar.nav-compact .profile-dropdown-trigger .trigger-chevron,
    .profile-dropdown-trigger .trigger-chevron {
        display: none !important;
    }

    .navbar__actions {
        gap: 0.42rem !important;
    }

    .hamburger {
        flex: 0 0 auto;
    }

    .navbar__logo-premium {
        gap: 0.42rem !important;
        min-width: 0;
    }

    .navbar__logo-premium img {
        width: 2.1rem !important;
        height: 2.1rem !important;
        flex: 0 0 2.1rem;
    }

    .navbar__logo-premium > span {
        font-size: 0.92rem !important;
        letter-spacing: -0.035em !important;
    }
}

/* Galaxy A51 and comparable widths: keep the action, wrap the suffix first. */
@media (min-width: 376px) and (max-width: 425px) {
    .navbar__logo-premium > span {
        flex-direction: column;
        align-items: flex-start;
        line-height: 0.9 !important;
    }

    .navbar__logo-suffix {
        margin-top: 0.15rem;
        font-size: 0.78em;
        letter-spacing: 0 !important;
    }
}

/* Narrow phone: explicit label may collapse only after logo wrapping is exhausted. */
@media (max-width: 375px) {
    .navbar.nav-compact #nav-cta-login,
    .navbar.nav-compact .profile-dropdown-trigger,
    #nav-cta-login,
    .profile-dropdown-trigger {
        width: 2.35rem !important;
        min-width: 2.35rem !important;
        height: 2.35rem !important;
        padding: 0.45rem !important;
        aspect-ratio: 1 / 1 !important;
        justify-content: center !important;
        border-radius: 0.65rem !important;
    }

    .navbar.nav-compact #nav-cta-login span,
    .navbar.nav-compact .profile-dropdown-trigger span,
    #nav-cta-login span,
    .profile-dropdown-trigger span,
    .profile-dropdown-trigger .trigger-chevron {
        display: none !important;
    }

    .navbar__logo-premium > span {
        flex-direction: column;
        align-items: flex-start;
        font-size: 0.88rem !important;
        line-height: 0.88 !important;
    }

    .navbar__logo-suffix {
        margin-top: 0.15rem;
        font-size: 0.76em;
        letter-spacing: 0 !important;
    }
}

/* Very narrow devices: reserve the header for identity + menu only. */
@media (max-width: 305px) {
    #nav-cta-login,
    .profile-dropdown-container,
    #theme-toggle-header {
        display: none !important;
    }

    .navbar__logo-premium > span {
        display: none !important;
    }

    .navbar__logo-premium img {
        width: 2rem !important;
        height: 2rem !important;
    }
}

/* Prevent the older JS ultra-compact mode from hiding branding prematurely. */
@media (min-width: 306px) {
    .navbar.nav-ultra-compact .navbar__logo-premium > span {
        display: inline-flex !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #nav-cta-login,
    .profile-dropdown-trigger,
    .navbar__logo-premium > span {
        transition: none !important;
    }
}