/* 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)
    }
}

/*
 * entry-content is display:flex (column). Non-alignfull children size to their
 * content width, so a FAQ section without alignfull collapses (~670px) and the
 * section-head + accordion row always wraps. Force content-width like alignfull
 * sections / wexcard.com page sections.
 */
.wp-block-post-content > .is-style-page-section:not(.alignfull),
.entry-content > .is-style-page-section:not(.alignfull) {
    width: 100%;
    max-width: var(--wp--style--global--content-size);
    box-sizing: border-box;
}

/* theme.json custom keys are camelCase; generated preset CSS vars use kebab-case. */
:root {
    --wex-reading-progress-height: 3px;
    --wex-reading-progress-z-index: 999;
    --wex-reading-progress-color: var(--wp--preset--color--secondary);
    --wex-reading-progress-dark-color: var(--wp--preset--color--secondary-strong);
    --wex-reading-progress-track-color: transparent;

    --wp--custom--neutral--textColor: var(--wp--custom--neutral--text-color);
    --wp--custom--neutral--borderColor: var(--wp--custom--neutral--border-color);
    --wp--custom--typography--headingColor: var(--wp--custom--typography--heading-color);
}

.is-surface-canvas {
    background-color: var(--wp--preset--color--white);
}

/* Text selection and CSS Highlight API ranges (WEX Card parity; uses theme secondary). */
::selection {
    background-color: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--white);
}

::-moz-selection {
    background-color: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--white);
}

::highlight(wex-brand-highlight) {
    background-color: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--white);
}

.has-neutral-extra-light-background-color + .has-neutral-extra-light-background-color,
.has-pale-gray-background-color + .has-pale-gray-background-color,
.has-light-neutral-gray-background-color + .has-light-neutral-gray-background-color,
.has-white-background-color + .has-white-background-color {
    padding-block-start: 0;
}

.is-style-hero.has-white-background-color + .has-white-background-color {
    padding-block-start: var(--wp--custom--spacing--section-padding-small);
}

.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-theme/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,
a[href^="tel:"] {
    white-space: nowrap;
}

/* Core post meta blocks (single hero, archives, Query Loop cards). */
.wp-block-post-author,
.wp-block-post-date,
.wp-block-post-time-to-read {
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--body-xs-fixed);
    font-weight: 400;
    color: var(--wp--custom--neutral--text-color);
    display: flex;
    gap: var(--wp--preset--spacing--step-3);
    flex-wrap: nowrap;
    align-items: center;
    flex: 0 0 auto !important;
}

/* Header shell + primary navigation: inc/navigation/navigation.css */

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--white);
        transition: color 0.3s ease;
    }
    a * {
        color: inherit;
    }
    a {
        &:hover,
        &:focus {
            color: var(--wp--preset--color--secondary) !important;
        }
    }
    .wex-coupon-code {
        font-weight: 600;
    }
}

.page-template-simple-page,
.page-template-simple-page-jailed {
    .entry-content {
        > *:first-child {
            padding-block-start: 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;
    }
}

.has-primary-strong-background-color,
.wp-block-group.is-style-hero[style*="background-image"],
.wp-block-group.is-style-hero[class*="gradient-background"] {
    --wp--custom--typography--heading-color: var(--wp--preset--color--white);
    --wp--custom--columns--text-only-paragraph-color: var(--wp--preset--color--white);
    --wp--custom--icons--color: var(--wp--preset--color--white);
    --wp--custom--section-head--description-color: var(--wp--preset--color--white);
    --wp--custom--neutral--text-color: var(--wp--preset--color--white);
	--wp--custom--neutral--border-color: rgba(255, 255, 255, 0.25);
	color: var(--wp--custom--neutral--text-color);
    .wp-block-heading {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

.has-primary-strong-background-color {
    --wp--custom--typography--eyebrow-color: var(--wp--preset--color--white);
    --wp--custom--hero--eyebrow-color: var(--wp--preset--color--white);
}