/* =====================================================================
   AMC PUBLIC PORTAL — DESKTOP / WEB RESPONSIVENESS
   ---------------------------------------------------------------------
   Fixes header & nav overlap when accessibility "Bigger Text" (or other
   UX4G scaling) increases font size on wide screens.

   Desktop-safe by construction:
     - EVERY rule lives inside @media (min-width: 992px)
     - Mobile layout (<= 991px) is untouched.
   ===================================================================== */

@media (min-width: 992px) {

    /* Top utility bar — allow items to wrap instead of colliding */
    #header .header-top {
        height: auto !important;
        min-height: var(--top-bar-height, 40px);
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        overflow: visible !important;
    }

    #header .header-top nav {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px 12px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #header .header-top .nav-link {
        flex: 0 1 auto !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }

    #header .header-top .lang-picker-wrapper {
        flex: 0 0 auto !important;
    }

    #header .header-top .lang-picker-btn {
        white-space: nowrap !important;
        max-width: 100% !important;
    }

    #header .header-top #on_modal.nav-link,
    #header .header-top .login-link {
        flex-shrink: 0 !important;
    }
}

/* Horizontal desktop navigation (1280px+) */
@media (min-width: 1280px) {

    #header .header-main-row {
        flex-wrap: wrap !important;
        align-items: center !important;
        row-gap: 8px !important;
        min-width: 0 !important;
    }

    #header .modern-logo-wrap {
        flex: 0 0 auto !important;
    }

    #header .header-nav-wrap {
        flex: 1 1 280px !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #header .header-nav-wrap > #navbar.navbar {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Wrap menu items to a new row when scaled text needs more room */
    #header .header-nav-wrap > #navbar.navbar > ul {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        align-content: center !important;
        justify-content: flex-end !important;
        gap: 6px clamp(0.35rem, 1vw, 1.25rem) !important;
        row-gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    #header .header #navbar.navbar > ul > li {
        flex: 0 1 auto !important;
        flex-shrink: 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    #header .navbar a {
        display: inline-flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 0.35em !important;
        white-space: nowrap !important;
        line-height: 1.25 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #header .navbar a > span {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    #header .navbar a > .dropdown-indicator,
    #header .navbar a > i.bi-chevron-down {
        flex: 0 0 auto !important;
        margin-left: 0.15em !important;
    }

    #header .header-action-contact {
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }

    #header .header-action-contact .contact-btn {
        white-space: nowrap !important;
    }
}

/* Medium-wide screens — slightly tighter horizontal gaps */
@media (min-width: 1280px) and (max-width: 1440px) {
    #header .header-nav-wrap > #navbar.navbar > ul {
        gap: 5px clamp(0.25rem, 0.8vw, 0.85rem) !important;
    }
}

/* When UX4G / browser text scaling enlarges root font, allow in-label wrap
   as a last resort so characters never stack on top of each other. */
@media (min-width: 1280px) {
    html[style*="font-size"] #header .navbar a > span,
    html.uw-bigger-text #header .navbar a > span {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        max-width: 12rem !important;
        line-height: 1.2 !important;
        text-align: left !important;
    }

    html[style*="font-size"] #header .navbar a,
    html.uw-bigger-text #header .navbar a {
        align-items: flex-start !important;
        white-space: normal !important;
    }
}