/*
 * GG_MOBILE_HEADER_RESOLUTION_FIX_V1
 *
 * Corrects:
 * - Four authenticated header items inside an old three-column grid
 * - Duplicate iPhone safe-area top spacing
 * - Narrow-screen logo/language/notification overlap
 */

/* Authenticated mobile header */
@media (max-width: 900px) {
    body.is-authenticated .site-header {
        padding-top:
            var(
                --phase8-safe-top,
                env(safe-area-inset-top, 0px)
            ) !important;
    }

    body.is-authenticated .site-header .nav-wrap {
        display: grid !important;

        grid-template-columns:
            40px
            minmax(0, 1fr)
            max-content
            40px !important;

        grid-template-areas:
            "menu brand language actions";

        align-items: center !important;

        width: calc(100% - 16px) !important;
        max-width: 760px !important;

        min-height: 58px !important;

        margin-inline: auto !important;

        padding-top: 7px !important;
        padding-right: 0 !important;
        padding-bottom: 8px !important;
        padding-left: 0 !important;

        column-gap: 6px !important;
        row-gap: 0 !important;
    }

    body.is-authenticated
    .site-header
    .mobile-menu-toggle {
        grid-area: menu;

        justify-self: start;
        align-self: center;

        margin: 0 !important;
    }

    body.is-authenticated
    .site-header
    .nav-wrap > .brand {
        grid-area: brand;

        display: flex !important;

        min-width: 0 !important;
        max-width: 100% !important;

        justify-self: start !important;
        align-self: center !important;

        overflow: hidden;
    }

    body.is-authenticated
    .site-header
    .nav-wrap > .brand
    .premium-brand-logo {
        display: block !important;

        width: auto !important;
        max-width: min(34vw, 142px) !important;
        max-height: 36px !important;

        object-fit: contain !important;
        object-position: left center !important;
    }

    body.is-authenticated
    .site-header
    .gg-language-switcher {
        grid-area: language;

        display: inline-flex !important;

        width: max-content !important;
        min-width: 0 !important;
        max-width: 100% !important;

        justify-self: center !important;
        align-self: center !important;

        margin: 0 !important;
        padding: 3px 4px !important;

        gap: 2px !important;

        white-space: nowrap !important;
    }

    body.is-authenticated
    .site-header
    .gg-language-option {
        min-width: 25px !important;
        min-height: 24px !important;

        padding: 3px 4px !important;

        font-size: .62rem !important;
        line-height: 1 !important;
    }

    body.is-authenticated
    .site-header
    .header-actions {
        grid-area: actions;

        display: grid !important;

        width: 40px !important;
        min-width: 40px !important;

        justify-self: end !important;
        align-self: center !important;

        place-items: center !important;

        margin: 0 !important;
    }

    body.is-authenticated
    .site-header
    .header-actions
    .notification-button {
        display: grid !important;

        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;

        margin: 0 !important;

        place-items: center !important;
    }
}

/* Guest header: one row on tablets and wider phones */
@media (min-width: 521px) and (max-width: 900px) {
    body.is-guest .site-header {
        padding-top:
            var(
                --phase8-safe-top,
                env(safe-area-inset-top, 0px)
            ) !important;
    }

    body.is-guest .site-header .nav-wrap {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            max-content
            auto !important;

        grid-template-areas:
            "brand language guest";

        align-items: center !important;

        width: calc(100% - 20px) !important;

        padding-top: 7px !important;
        padding-bottom: 8px !important;

        gap: 8px !important;
    }

    body.is-guest .site-header .brand {
        grid-area: brand;

        min-width: 0 !important;
        justify-self: start !important;
    }

    body.is-guest
    .site-header
    .brand
    .premium-brand-logo {
        width: auto !important;
        max-width: min(32vw, 160px) !important;
        max-height: 36px !important;
    }

    body.is-guest
    .site-header
    .gg-language-switcher {
        grid-area: language;

        width: max-content !important;

        justify-self: center !important;

        margin: 0 !important;
    }

    body.is-guest .site-header .guest-nav {
        grid-area: guest;

        justify-self: end !important;
    }
}

/* Guest header: two clean rows on narrow phones */
@media (max-width: 520px) {
    body.is-guest .site-header {
        padding-top:
            var(
                --phase8-safe-top,
                env(safe-area-inset-top, 0px)
            ) !important;
    }

    body.is-guest .site-header .nav-wrap {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        grid-template-areas:
            "brand guest"
            "language language";

        align-items: center !important;

        width: calc(100% - 16px) !important;

        padding-top: 7px !important;
        padding-bottom: 7px !important;

        column-gap: 8px !important;
        row-gap: 5px !important;
    }

    body.is-guest .site-header .brand {
        grid-area: brand;

        min-width: 0 !important;
        justify-self: start !important;
    }

    body.is-guest
    .site-header
    .brand
    .premium-brand-logo {
        width: auto !important;
        max-width: min(37vw, 126px) !important;
        max-height: 32px !important;
    }

    body.is-guest
    .site-header
    .gg-language-switcher {
        grid-area: language;

        width: max-content !important;

        justify-self: center !important;

        margin: 0 !important;

        min-height: 28px !important;
        padding: 2px 4px !important;
    }

    body.is-guest
    .site-header
    .gg-language-option {
        min-width: 25px !important;
        min-height: 23px !important;

        padding: 3px 4px !important;

        font-size: .61rem !important;
    }

    body.is-guest .site-header .guest-nav {
        grid-area: guest;

        min-width: 0 !important;

        justify-self: end !important;

        gap: 5px !important;
    }
}

/* Very narrow Android/iPhone displays */
@media (max-width: 390px) {
    body.is-authenticated .site-header .nav-wrap {
        grid-template-columns:
            38px
            minmax(0, 1fr)
            max-content
            38px !important;

        width: calc(100% - 12px) !important;

        column-gap: 4px !important;
    }

    body.is-authenticated
    .site-header
    .mobile-menu-toggle,
    body.is-authenticated
    .site-header
    .header-actions,
    body.is-authenticated
    .site-header
    .header-actions
    .notification-button {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }

    body.is-authenticated
    .site-header
    .nav-wrap > .brand
    .premium-brand-logo {
        max-width: min(28vw, 112px) !important;
        max-height: 33px !important;
    }

    body.is-authenticated
    .site-header
    .gg-language-switcher {
        padding-inline: 3px !important;
    }

    body.is-authenticated
    .site-header
    .gg-language-option {
        min-width: 23px !important;

        padding-inline: 3px !important;

        font-size: .59rem !important;
    }
}

@media (max-width: 340px) {
    body.is-authenticated
    .site-header
    .nav-wrap > .brand
    .premium-brand-logo {
        max-width: min(27vw, 92px) !important;
    }

    body.is-authenticated
    .site-header
    .gg-language-option {
        min-width: 22px !important;
        padding-inline: 2px !important;
        font-size: .57rem !important;
    }

    body.is-guest
    .site-header
    .brand
    .premium-brand-logo {
        max-width: min(34vw, 108px) !important;
    }

    body.is-guest .site-header .guest-nav a {
        padding-inline: 7px !important;
        font-size: .76rem !important;
    }
}