/* Navigation and Header Block Styles */

.header-row {
    padding-inline: var(--vw-560-1200-16-50);
    padding-block: var(--vw-560-1200-14-20);
    column-gap: clamp(0.625rem, 0rem + 1.1111vw, 0.9375rem);
    .wp-block-site-logo {
        margin-right: clamp(0.625rem, -1.25rem + 3.3333vw, 1.5625rem);
    } 
    .wp-block-wex-header-phone-number {
        margin-left: auto;
    }
}

.wp-block-navigation {
    font-family: var(--font-family-body);
    font-size: 14px;
    column-gap: clamp(1.25rem, -1.25rem + 4.4444vw, 2.5rem);
}

footer .wp-block-navigation {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    font-size: var(--vw-560-950-13-15);
    line-height: 23px;
    font-weight: 700;
    row-gap: 7px;
    column-gap: 44px;
    align-items: start;
    max-width: 500px;
}

.page-template-landing-page footer .wp-block-navigation {
    max-height: 100px;
}

.footer-menu-row {
    align-items: start;
    flex-wrap: wrap;
    margin-block-start: var(--vw-360-1450-30-60);
}   

header.wp-block-template-part {
    position: sticky;
    top: 0;
    z-index: 999;
    container-type: scroll-state;
    container-name: site-header;
    background-color: #fff;
    border-bottom: 1px solid #5D688C33;
    margin-top: 0;
}

header + * {
    margin-top: 0;
}

.wp-block-navigation:has(.wp-block-navigation__responsive-container.is-menu-open) {
    .wp-block-navigation__responsive-container {
        padding: var(--wp--style--root--padding-left);
    }
    .wp-block-navigation {
        width: 100%;
        /* height: 100%; */
        font-weight: 600;
        font-size: 1.125rem;
        line-height: 1;
        row-gap: 0;
        li {
            padding-block: 1.25rem;
            border-bottom: 0.5px solid #5D688C66;
            width: 100%;
        }
    }
    .wp-block-buttons {
        width: 100%;
        margin-top: auto;
        .wp-block-button {
            width: 100%;
            a { 
                width: 100% !important;
            }
        }
    }
    .wex-header-phone-number {
        width: 100%;
        margin-top: 20px;
        .wex-header-phone-number__content {
            flex-direction: row;
            justify-content: center;
            column-gap: 20px;
            font-size: 14px;
        }
    }
    .wp-block-navigation__responsive-close {
        height: 100%;
    }
    .wp-block-navigation__responsive-dialog {
        height: 100%;
    }
    .wp-block-navigation__responsive-container-content {
        height: 100%;
        row-gap: 0;
        padding-top: 40px;
    }
}

.header-apply-button-mobile {
    margin-left: auto !important;
}

@media (min-width: 601px) {
    .wp-block-navigation .wex-header-phone-number,
    .header-apply-button-mobile,
    .mobile-nav-item {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .header-row {
        justify-content: start;
    }
    .header-row:has(.wp-block-navigation) .header-apply-button-desktop,
    .header-row:has(.wp-block-navigation) > .wex-header-phone-number {
        display: none !important;
    }
}

@media (min-width: 600px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display:none;
    }
     .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        background-color:inherit;
        display: block;
        position: relative;
        width: 100%;
        z-index: auto;
    }

    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
        display: none;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
        left: 0;
    }
}

@media (min-width: 900px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display:none;
    }
     .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        background-color:inherit;
        display: block;
        position: relative;
        width: 100%;
        z-index: auto;
    }

    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
        display: none;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
        left: 0;
    }
}

/*
 * Override legacy 600px navigation switch rules.
 * Keep mobile navigation behavior active up to 899.98px.
 */
@media (min-width: 600px) and (max-width: 899.98px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex !important;
    }

    .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open {
        display: block !important;
    }

    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
        display: block !important;
    }

    .header-row:has(.wp-block-navigation) .header-apply-button-desktop,
    .header-row:has(.wp-block-navigation) > .wex-header-phone-number {
        display: none !important;
    }

    .wp-block-navigation .wex-header-phone-number,
    .header-apply-button-mobile,
    .mobile-nav-item {
        display: block !important;
    }
}

.wp-block-post-terms {
    display: flex;
    gap: 10px;
    a,
    .wp-block-post-terms__separator {
        text-transform: uppercase;
        text-decoration: none;
        font-weight: 600;
        font-family: var(--font-family-heading);
        color: var(--color-text-tertiary);
        font-size: 0.875rem;
        &:hover,
        &:focus-visible {
            text-decoration: underline;
        }
    }
}

.wp-block-outermost-social-sharing {
    gap: var(--vw-560-1200-14-20);
    li {
        margin-top: 0 !important;
    }
    &::before {
        content: 'Share';
        font-family: 'Inter', sans-serif;
        font-weight: 500;
        font-size: 1rem;
    }
}