/* Optional front-end overrides that complement theme.json styles. */

/* 1) Box model and media defaults */
:where(html) {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
}

:where(*, *::before, *::after) {
    box-sizing: inherit;
}

:where(img, svg, video, canvas) {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 2) Typography rhythm */
:where(body) {
    margin: 0;
}

:where(p, h1, h2, h3, h4, h5, h6, ul, ol, figure, blockquote) {
    margin: 0;
}

/* 3) List and form consistency */
:where(ul[role="list"], ol[role="list"]) {
    list-style: none;
    padding: 0;
}

:where(button, input, textarea, select) {
    font: inherit;
}

/* 4) WordPress content wrapper scope */
:where(.wp-site-blocks) {
    min-height: 100dvh;
}

.wp-site-blocks,
.wp-site-blocks > main,
.wp-site-blocks .entry-content,
.wp-site-blocks main section:only-child:not(:has(.wex-remote-content)) {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Only center the sole raw <section> case; .entry-content stays top-aligned so long pages don't get vertically centered. */
.wp-site-blocks main section:only-child:not(:has(.wex-remote-content)) {
    justify-content: center;
}

.wp-block-group.is-style-page-section {
    padding-block: var(--wp--custom--spacing--section-padding);
    &> .wp-block-buttons:last-child {
        margin-block-start: var(--wp--custom--spacing--flex-space-extra-large)
    }
}

.has-surface-background-color + .has-surface-background-color {
    padding-block-start: 0;
}

.has-base-background-color + .has-base-background-color {
    padding-block-start: 0;
}

.wp-block-group.arrows {
    position: relative;
    isolation: isolate;
}

.wp-block-group.arrows::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url('/wp-content/themes/wex-block-boilerplate/assets/images/wex-arrow-repeat-thin.svg');
    background-repeat: no-repeat;
    background-position: 635px center;
    background-size: cover;
}

.wp-block-group.arrows > * {
    position: relative;
    z-index: 1;
}

.wp-block-group.is-style-page-section.pre-footer {
    padding-block: 0;
    background-color: var(--wp--preset--color--primary-strong);
    .wp-block-column:has(.wp-block-heading) {
        padding-block: var(--wp--custom--spacing--flex-space-large);
    }
}

@view-transition {
    navigation: auto;
}

.wex-coupon-code,
.wex-phone-number {
    white-space: nowrap;
}

header {
    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;
    padding-inline: var(--wp--custom--spacing--grid-column-gap);
    padding-block: var(--wp--custom--spacing--flex-space-small);
}

footer {
    .wp-block-image img {
        border-radius: 0;
    }
    .wex-footer-logo {
        width: 76px;
    }
    .wp-block-group.is-style-page-section {
        padding-block: var(--wp--custom--spacing--section-padding-small);
        background-color: var(--wp--preset--color--primary-strong);
    }
    .footer-menu-row {
        flex-wrap: wrap;
        gap: var(--wp--preset--spacing--step-6);
        margin-block-start: var(--wp--custom--spacing--section-padding-small);
    }
    .wp-block-navigation {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        font-size: var(--wp--preset--font-size--body-xs-fixed);
        font-weight: 700;
        row-gap: var(--wp--preset--spacing--step-3);
        column-gap: var(--wp--custom--spacing--flex-space-large);
        align-items: start;
        max-width: min( 100%, 500px );
    }
    .footer-lets-talk {
        flex: 0 0 min( 100%, 320px );
        margin-left: auto;
        * {
            text-align: right;
        }
        h2 {
            font-size: var(--wp--preset--font-size--body-md);
        }
        p {
            font-size: var(--wp--preset--font-size--body-xs-fixed);
            margin-block-start: var(--wp--preset--spacing--step-3);
        }
        .wp-block-group {
            margin-block-start: var(--wp--custom--spacing--flex-space-small);
            gap: 10px;
            align-items: center;
        }
    }
    .footer-copyright {
        font-size: 12px;
        margin-block-start: var(--wp--custom--spacing--flex-space-small);
    }
    *,
    .wp-block-heading,
    a {
        color: var(--wp--preset--color--surface);
        transition: color 0.3s ease;
    }
    a * {
        color: inherit;
    }
    a {
        &:hover,
        &:focus {
            color: var(--wp--preset--color--secondary-light) !important;
        }
    }
    .wex-coupon-code {
        font-weight: 600;
    }
}

.page-template-simple-page {
    .entry-content {
        *:first-child {
            padding-top: 0;
        }
    }
}

#export-section-content.export-section-content-override-styles li a,
#export-section-content.export-section-content-override-styles p a {
    color: var(--wp--preset--color--secondary) !important;
    &:hover {
        color: var(--wp--preset--color--secondary-strong) !important;
    }
}