/*
 * AFME Mobile Phone Experience V1.4
 * Portrait-phone only. Desktop, tablet and phone-landscape are intentionally untouched.
 */

@media (max-width: 600px) and (orientation: portrait) {
    /* Keep the entire header inside the viewport. */
    header,
    header .wp-block-group,
    header .wp-block-group__inner-container {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* The JS marks the actual top header row so we can fix only that row. */
    header .afme-phone-header-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Logo stays readable but leaves enough room for a compact menu button. */
    header .afme-phone-logo-wrap {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 68px) !important;
    }

    header .afme-phone-logo-wrap img,
    header .afme-phone-logo-wrap .custom-logo,
    header img.custom-logo {
        width: auto !important;
        max-width: 230px !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* The normal yellow member CTA cannot share the narrow portrait row safely. */
    header .afme-phone-original-account {
        display: none !important;
    }

    /* Let AFME Navigation occupy only the space it actually needs. */
    header .wp-block-navigation.afme-nav21-host,
    header .afme-nav21-host,
    header .afme-phone-nav-host {
        flex: 0 0 auto !important;
        flex-basis: auto !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: auto !important;
    }

    header .afme-nav21 {
        position: relative !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    /* Compact hamburger-only button in portrait. */
    header .afme-nav21__mobile-toggle {
        display: flex !important;
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        min-height: 48px !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    header .afme-nav21__mobile-toggle > span:first-child {
        display: none !important;
    }

    header .afme-nav21__mobile-toggle > span:last-child {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 24px !important;
        line-height: 1 !important;
    }

    /* Open menu becomes a neat phone-width panel beneath the toggle. */
    header .afme-nav21__mobile {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        right: 0 !important;
        left: auto !important;
        width: min(340px, calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        max-height: calc(100vh - 150px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        margin: 0 !important;
        z-index: 100000 !important;
        box-shadow: 0 16px 42px rgba(11, 42, 72, 0.18) !important;
    }

    /* Account action is deliberately placed inside the phone menu. */
    header .afme-phone-account-item {
        padding: 12px !important;
        background: #fff !important;
    }

    header .afme-phone-account-item > a {
        display: flex !important;
        min-height: 48px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 18px !important;
        border-radius: 999px !important;
        background: #ffc400 !important;
        color: #071f39 !important;
        font-weight: 700 !important;
        text-align: center !important;
        text-decoration: none !important;
    }

    /* Prevent the header itself creating the huge empty portrait gap. */
    header .afme-phone-header-row {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    /* Never allow controls to escape the viewport horizontally. */
    header * {
        box-sizing: border-box;
    }

    /* Homepage Layout Refinement also marks the header row/CTA on phones.
       Neutralise only those header helper rules; never resize or clamp homepage content. */
    body.home header .afme-mobile-header-row {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }

    body.home header .afme-mobile-header-cta.afme-phone-original-account {
        display: none !important;
    }

    body.home header .wp-block-navigation.afme-nav21-host,
    body.home header .afme-nav21-host,
    body.home header .afme-phone-nav-host {
        flex: 0 0 auto !important;
        flex-basis: auto !important;
        width: auto !important;
        max-width: 52px !important;
        margin-left: auto !important;
        position: relative !important;
        z-index: 100000 !important;
    }
}

@media (max-width: 430px) and (orientation: portrait) {
    header .afme-phone-logo-wrap img,
    header .afme-phone-logo-wrap .custom-logo,
    header img.custom-logo {
        max-width: 205px !important;
    }
}

@media (max-width: 375px) and (orientation: portrait) {
    header .afme-phone-logo-wrap img,
    header .afme-phone-logo-wrap .custom-logo,
    header img.custom-logo {
        max-width: 185px !important;
    }

    header .afme-nav21__mobile {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
    }
}