/*
 * GearCheckpoint global mobile header repair.
 * Force compact branding and the WordPress responsive menu
 * before desktop navigation wraps.
 */

@media (max-width: 900px) {

    header.wp-block-template-part,
    header.wp-block-template-part > *,
    .wp-block-template-part header,
    .wp-block-template-part header > *,
    .wp-site-blocks > header {
        box-sizing: border-box;
        max-width: 100%;
    }

    header.wp-block-template-part .wp-block-group,
    .wp-block-template-part header .wp-block-group,
    .wp-site-blocks > header .wp-block-group {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Keep logo on one line and prevent word splitting. */
    header.wp-block-template-part .wp-block-site-title,
    header.wp-block-template-part .wp-block-site-title a,
    .wp-block-template-part header .wp-block-site-title,
    .wp-block-template-part header .wp-block-site-title a {
        display: inline-block;
        width: auto;
        max-width: none;
        min-width: max-content;
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
        line-height: 1.1;
    }

    /* Prevent the header row from wrapping. */
    header.wp-block-template-part .wp-block-group.is-layout-flex,
    .wp-block-template-part header .wp-block-group.is-layout-flex {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
    }

    /* Ensure navigation occupies only the space it needs. */
    header.wp-block-template-part .wp-block-navigation,
    .wp-block-template-part header .wp-block-navigation {
        width: auto !important;
        min-width: 0 !important;
        margin-left: auto !important;
        flex: 0 0 auto !important;
    }

    /*
     * Force WordPress responsive navigation.
     * Hide desktop list and show hamburger/open button.
     */
    header.wp-block-template-part
    .wp-block-navigation__container,
    .wp-block-template-part header
    .wp-block-navigation__container {
        display: none !important;
    }

    header.wp-block-template-part
    .wp-block-navigation__responsive-container-open,
    .wp-block-template-part header
    .wp-block-navigation__responsive-container-open {
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 8px !important;
        color: currentColor;
    }

    /*
     * The opened overlay must remain visible.
     * WordPress adds is-menu-open to the responsive container.
     */
    header.wp-block-template-part
    .wp-block-navigation__responsive-container.is-menu-open,
    .wp-block-template-part header
    .wp-block-navigation__responsive-container.is-menu-open {
        display: flex !important;
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        padding: 24px !important;
        box-sizing: border-box;
        overflow-y: auto !important;
        z-index: 100000 !important;
    }

    header.wp-block-template-part
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container,
    .wp-block-template-part header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 8px !important;
    }

    header.wp-block-template-part
    .wp-block-navigation__responsive-container-content,
    .wp-block-template-part header
    .wp-block-navigation__responsive-container-content {
        width: 100%;
        min-width: 0;
    }

    header.wp-block-template-part
    .wp-block-navigation__responsive-container-close,
    .wp-block-template-part header
    .wp-block-navigation__responsive-container-close {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 8px !important;
    }

    /* Mobile menu links must fit and remain readable. */
    header.wp-block-template-part
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item,
    .wp-block-template-part header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item {
        width: 100%;
        min-width: 0;
    }

    header.wp-block-template-part
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content,
    .wp-block-template-part header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 12px 10px !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        line-height: 1.35;
    }

    /* Keep Race to the Top submenu visible and stacked. */
    header.wp-block-template-part
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container,
    .wp-block-template-part header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 4px 0 8px !important;
        padding: 0 0 0 16px !important;
        border: 0 !important;
        box-shadow: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media (max-width: 480px) {

    header.wp-block-template-part,
    .wp-block-template-part header,
    .wp-site-blocks > header {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    header.wp-block-template-part .wp-block-site-title,
    header.wp-block-template-part .wp-block-site-title a,
    .wp-block-template-part header .wp-block-site-title,
    .wp-block-template-part header .wp-block-site-title a {
        font-size: clamp(1rem, 5vw, 1.25rem) !important;
    }

    header.wp-block-template-part .wp-block-group.is-layout-flex,
    .wp-block-template-part header .wp-block-group.is-layout-flex {
        gap: 10px !important;
    }
}