/* Landing Pages and Hero Styles */

/* Section Head */

div[class*="is-style-section-head"] {
    container: section-head / inline-size;
    max-width: var(--wp--style--global--content-size);
    margin-inline: auto;
    .wp-block-buttons + p {
        margin-top: 15px;
        font-size: 14px;
        color: #253745;
    }
}

div[class*="is-style-section-head"] * {
    @container section-head (min-width: 301px) {
        max-width: min( 1000px, 100% );
        max-width: var(--wp--style--global--content-size);
        margin-left: auto;
        margin-right: auto;
        text-align: center !important;
    }
}

.is-style-section-head + * {
    margin-top: var(--vw-560-1200-40-60);
}

.is-style-section-head + .wp-block-buttons {
    margin-top: var(--cq-300-1000-20-30);
}

.is-style-section-head-heading:not(h1) {
    max-width: min( 100%, 1100px ) !important;
    text-wrap: balance;
    color: var(--color-primary);
    font-size: var(--vw-560-1200-36-48);
    line-height: 1.1;
}

div[class*="is-style-section-head"] .wp-block-heading {
    font-weight: 600;
    letter-spacing: -0.01em;
}

div[class*="is-style-section-head"] p {
    font-family: var(--font-family-heading);
    letter-spacing: -0.01em;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    text-wrap: pretty;
    color: var(--color-text-secondary);
    margin-top: 15px;
}

.is-style-sub-heading {
    font-family: var(--font-family-heading);
}

.is-style-section-description {
    text-wrap: balance !important;
    max-width: min( 100%, 1100px) !important;
    margin-inline: auto;
    font-size: var(--vw-560-1200-18-22);
    line-height: 1.35;
}

/* Callout */
.is-style-callout {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    svg path {
        fill: var(--color-text-primary);
    }
}

.is-style-collection {
    list-style: none;
    padding-inline-start: 0;
}

/* Collection and Grid Styles */
.is-style-collection,
.wp-block-post-template-is-layout-grid {
    container: collection / inline-size;
}

.is-style-collection .wp-block-column,
.wp-block-post-template-is-layout-grid .wp-block-post {
    container: collection-column / inline-size;
}

.is-style-collection .wp-block-column > *:not([role="group"]) {
    margin-block-start: var(--vw-560-1200-16-50);
    margin-block-end: 0;
}

.is-style-stack img {
    width: 100%;
    height: auto;
}

.wp-block-outermost-icon-block {
    .icon-container {
        width: auto !important;
    }
    svg {
        width: auto;
    }
}

@container collection (inline-size > 700px) {
    .is-style-collection:not(.is-style-proof-points) .wp-block-column:only-child {
        display: grid;
        column-gap: var(--grid-column-gap);
        grid-template-areas: "image image"
                             "heading buttons"
                             "paragraph buttons";
        .wp-block-image {
            grid-area: image;
        }
        .wp-block-heading {
            grid-area: heading;
            width: max-content;
        }
        p {
            grid-area: paragraph;
        }
        .wp-block-buttons {
            grid-area: buttons;
            justify-content: end;
            height: fit-content;
            margin-bottom: 0;
            margin-top: var(--cq-650-1000-20-30);
        }
    }
}

.is-style-page-section:not(.has-background) + .is-style-page-section:not(.has-background) {
    padding-block-start: 0;
}

/* Carousel Group Variation */
.swiper-slide {
    margin-block: 0;
}

.testimonial-carousel {
    overflow: hidden;
    padding-bottom: 40px;
    .swiper-slide {
        height: auto;
        cursor: grab;
    }
}

/* Arrows Background */
.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.svg');
    background-image: url('/wp-content/themes/wex-block-theme/assets/images/wex-arrow-repeat-thin.svg');
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 635px;
    background-size: cover;
}

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

/* Column Sizing Styles */
.wp-block-columns.is-style-five-seven,
.wp-block-columns.is-style-seven-five {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    .wp-block-column {
        flex-basis: 286px !important;
        flex-shrink: 0 !important;
        flex-grow: 1;
    }
}

.wp-block-columns.is-style-five-seven {
    .wp-block-column:nth-child(2) {
        flex-grow: 2;
    }
}

.wp-block-columns.is-style-seven-five {
    .wp-block-column:first-child {
        flex-grow: 2;
    }
}

/* Hero Section */
.wp-block-group.is-style-hero {
    padding-block: var(--vw-360-1450-30-60) !important;
    h1.wp-block-heading,
    h1.wp-block-post-title {
        font-size: var(--cq-650-1350-32-58);
        font-weight: 700;
        text-wrap: balance;
        line-height: 1.05;
        letter-spacing: -2%;
    }
    p:not(.is-style-eyebrow) {
        font-size: var(--cq-650-1350-18-22);
        font-weight: 400;
        line-height: 1.45;
    }
    p + p {
        margin-top: 1.36em;
    }
    ul {
        margin-top: var(--cq-300-1000-20-30);
        &.is-style-check-list {
            margin-top: 20px;
            line-height: 1.375;
            li:not(:first-child) {
                margin-top: 2px;
            }
        }
    }
    .wp-block-columns.is-style-image-content {
        column-gap: clamp(2.5rem, -5rem + 13.3333cqi, 6.25rem);
        row-gap: 50px;
        .wp-block-column {
            flex-basis: 325px !important;
            flex-grow: 1.15 !important;
        }
        .wp-block-column:has(.wp-block-image) {
            flex-basis: 275px !important;
        }
        &:has(.gform_wrapper) {
            align-items: center !important;
        }
    }
    &.has-background {
        p:not(.is-style-eyebrow) {
            color: var(--color-text-primary);
        }
    }
    .wp-block-heading {
        letter-spacing: -2%;
    }
}
body:not(.page-template-simple-page) {
    h1.wp-block-heading,
    h1.wp-block-post-title {
        max-width: min( 100%, 1100px ) !important;
    }
}
.home .is-style-hero {
    h1.wp-block-heading {
        font-size: var(--cq-650-1350-38-68);
    }
    .wp-block-columns.is-style-image-content {
        align-items: start !important;
        .wp-block-column {
            flex-basis: min(400px, 100%) !important;
            flex-grow: 2 !important;
            &.wp-block-column:has(.wp-block-image) {
                flex-basis: 275px !important;
                flex-grow: 3 !important;
            }
        }
    }
}
.entry-content:has(.is-style-hero:only-child),
body:not(.blog):has( header + .is-style-hero:last-of-type ) {
    .wp-block-group.is-style-hero:not(:has(.gform_wrapper)):has(+ .is-style-page-section) {
        padding-block: var(--vw-560-1200-35-180) !important;
    }
}

/* Image Content and Text Only Styles */
.is-style-collection .wp-block-buttons {
    margin-top: var(--cq-300-1000-16-20);
}

.is-style-collection:not(.is-style-proof-points) .wp-block-heading,
.is-style-image-content .wp-block-heading,
.is-style-collection:not(.is-style-proof-points) p,
.is-style-image-content p {
    max-width: min( 650px, 100% );
    margin-left: 0 !important;
}

.is-style-collection .wp-block-heading,
.is-style-image-content .wp-block-heading,
.wp-block-post-title {
    font-size: var(--cq-300-1000-18-32);
    line-height: 1.1;
    margin-top: var(--cq-650-1000-20-30);
    a {
        color: var(--color-primary);
    }
}

.wp-block-group.background-color-dark:not(:has(.has-background)) {
    .wp-block-heading,
    .wp-block-post-title,
    p:not(.is-style-eyebrow),
    .wp-block-list,
    li,
    .wp-block-button.is-style-text-link a.wp-element-button,
    a,
    cite {
        color: #fff;
    }
    svg path {
        fill: #fff;
    }
    p.is-style-eyebrow {
        color: var(--wp--preset--color--wex-accent-blue);
    }
}

.is-style-image-content h3.wp-block-heading {
    font-size: var(--cq-300-1000-14-16);
    font-weight: 700;
    margin-top: 10px !important;
    & + p {
        margin-top: 2px;
    }
}

.is-style-image-content p + p {
    margin-top: var(--cq-300-415-20-30);
}

.is-style-image-content p h3.wp-block-heading {
    margin-top: 10px;
}

.is-style-image-content h2.wp-block-heading + h3.wp-block-heading,
.is-style-image-content h2.wp-block-heading + p + h3.wp-block-heading {
    margin-top: 30px !important;
}

.is-style-image-content h2.wp-block-heading + p {
    margin-top: 10px !important;
}

.is-style-collection .wp-block-heading + *,
.is-style-image-content .wp-block-heading + *,
.wp-block-post-excerpt{
    font-size: var(--cq-300-1000-14-16);
    line-height: 1.43;
    margin-top: var(--cq-300-1000-5-6);
}

.is-style-image-content .wp-block-list {
    margin-top: var(--cq-300-1000-20-30);
    color: var(--color-text-secondary);
    max-width: min( 600px, 100% );
}

.is-style-eyebrow + .wp-block-heading {
    margin-top: var(--vw-560-100-8-10);
}

.is-style-collection:has(.wp-block-column:only-child),
.is-style-collection:has(.wp-block-column:only-child) + *,
.wp-block-query:has(.wp-block-post:only-child) {
    max-width: 1000px;
}

.is-style-image-content:not(:has(.is-style-eyebrow)),
.is-style-text-only:not(:has(.is-style-eyebrow)) {
    .wp-block-heading {
        margin-top: 0;
    }
}

.wp-block-columns.is-style-image-content,
.wp-block-columns.is-style-text-only {
    align-items: center !important;
    .wp-block-column {
        flex-basis: 286px !important;
        flex-shrink: 0 !important;
        flex-grow: 1;
    }
    .wp-block-buttons {
        margin-top: var(--cq-300-1000-20-30);
    }
    p + .wp-block-buttons:has(.wex-app-store-badge) {
        margin-top: var(--vw-560-100-8-10);
    }
    .wp-block-wex-app-rating + .wp-block-heading {
        margin-top: var(--vw-560-100-8-10);
    }
}

.wp-block-columns.is-style-image-content .wp-block-column:has(wistia-player){
    margin-inline: auto;
    flex-basis: min(100%, 350px) !important;
    flex-grow: 0 !important;
    wistia-player {
        margin-block-start: 0 !important;
        clip-path: inset(2px round 18px);
    }
}

.wp-block-columns.is-style-featured-item-vertical {
    margin-top: var(--vw-560-950-20-40);
    align-items: start !important;
    .wp-block-column {
        flex-basis: 286px !important;
        flex-shrink: 0 !important;
        flex-grow: 1;
    }
    .wp-block-column *:first-child {
        margin-top: 0;
    }
    .wp-block-column:first-child {
        flex-grow: 26;
        .wp-block-heading {
            font-size: var(--vw-560-950-24-32);
            margin-top: 20px;
        }
        p {
            margin-top: 14px;
            font-size: var(--cq-300-1000-14-16);
            line-height: 1.5;
        }
    }
    h3 {
        font-size: var(--vw-560-950-16-18);
        line-height: 1.5;
    }
    .wp-block-list.is-style-check-list {
        margin-top: 8px;
        font-size: 14px;
        line-height: 20px;
        li:not(:first-child) {
            margin-top: 0;
        }
    }
    .wp-block-buttons {
        margin-top: var(--cq-300-1000-16-20);
    }
}

.wp-block-group:not(.is-style-hero) .wp-block-columns.is-style-image-content,
.wp-block-group:not(.is-style-hero) .wp-block-columns.is-style-text-only {
    flex-wrap: wrap !important;
}

.wp-block-columns.is-style-text-only {
    align-items: start !important;
    row-gap: 15px;
    h2 {
        font-size: var(--vw-560-1200-28-58);
        line-height: 1.07;
        letter-spacing: -1px;
        text-wrap: pretty;
        font-weight: 300;
    }
    p {
        font-size: var(--vw-560-1200-18-22);
        line-height: 1.45;
        text-wrap: pretty;
        font-weight: 400;
        font-family: var(--font-family-heading);
    }
    p,
    .wp-block-list {
        color: var(--color-text-secondary);
    }
    .wp-block-list {
        margin-top: var(--cq-650-1000-20-30);
        font-size: var(--cq-300-1000-14-16);
        li:not(:first-child) {
            margin-top: 2px;
        }
    }
    .wp-block-column {
        flex-basis: 350px !important;
        *:first-child {
            margin-top: 0;
        }
    }
}

.wp-block-list {
    padding-inline-start: 30px;
}

.entry-content .wp-block-group:not(.is-style-hero) .wp-block-columns.is-style-image-content:has(> .wp-block-column:nth-child(2) .wp-block-image:not(.is-style-bottom-anchored)) {
    flex-wrap: wrap-reverse !important;
}

.is-style-footer-apply {
    flex: 1 0 min(300px, 100%);
    max-width: min( 100%, 650px );
    h2 {
        font-size: 48px;
        line-height: 58px;
        font-weight: 600;
        letter-spacing: -4%;
        text-wrap: balance;
    }
    p {
        font-size: 22px;
        line-height: 32px;
        font-weight: 400;
        letter-spacing: -1%;
        margin-top: 10px;
        text-wrap: balance;
    }
}

/* Promo Bar */
.wp-block-columns.is-style-promo-bar {
    display: flex !important;
    flex-wrap: wrap;
    column-gap: var(--cq-650-1000-20-30);
    align-items: center !important;
    container: promo / inline-size;
    background-color: var(--wp--preset--color--wex-extra-light-gray);
    border: 1px solid #0E00264D;
    padding: 20px var(--vw-560-1200-20-50);
    border-radius: var(--vw-560-1200-35-65);
    row-gap: var(--cq-650-1000-20-30);
    .wp-block-column {
        flex-grow: 1;
    }
    .wp-block-heading {
        font-size: var(--cq-300-1000-18-32);
        flex: 1 0 min(300px, 100%);
        text-wrap: pretty;
        color: var(--color-accent);
    }
    p {
        font-size: var(--cq-300-1000-14-16);
        flex: 2 0 min(300px, 100%);
        margin-top: 0;
    }
    .wp-block-column:has(.wp-block-heading) {
        flex-basis: min(450px, 100%) !important;
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        column-gap: var(--cq-650-1000-20-30);
        row-gap: var(--cq-300-1000-5-6);
        flex-grow: 9999;
        .wp-block-heading {
            flex: 1 0 min(300px, 100%);
        }
        p {
            flex: 2 0 min(300px, 100%);
        }
    }
    .wp-block-column:has(.wp-block-buttons) {
        flex-basis: min-content !important;
    }
}

/* Hello Bar */
.wp-block-group:has(.is-style-hello-bar) {
    padding-block: 10px !important;
}

.is-style-hello-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
    margin: 0 auto;
    p {
        font-size: 14px;
        line-height: 1.7;
        margin: 0;
        text-align: center;
        text-wrap: balance;
        strong {
            font-weight: 600;
        }
    }
    .icon-container {
        height: var(--vw-560-1200-28-18) !important;
        flex: none;
    }
}

.is-style-hello-bar:has(.icon-container) p {
    text-align: left;
    text-wrap: pretty;
}

/* Section Head Alignment */
.is-style-page-section:has(.is-style-section-head-left) .wp-block-group.is-layout-flex {
    column-gap: var(--vw-560-1200-20-50);
    flex-wrap: wrap;
    align-items: start;
    .wp-block-heading {
        font-weight: 600;
        font-size: var(--vw-560-1200-36-48);
        margin-top: var(--vw-560-1200-28-40);
    }
    p + .wp-block-heading {
        margin-top: 10px;
    }
}

.is-style-section-head-left:only-child * {
    text-align: left !important;
    margin-left: 0 !important;
}

.is-style-section-head-left * {
    text-align: left !important;
}

.is-style-page-section:has(.is-style-section-head-left) .wp-block-group.is-layout-flex > *:first-child {
    flex: 1 0 min(300px, 100%);
}

.is-style-page-section:has(.is-style-section-head-left) .wp-block-group.is-layout-flex > * + * {
    flex: 999 0 min(100%, 960px);
}

/* Proof Points */
.wex-grid.is-style-proof-points {
    .stats-container {
        margin: 0;
    }

    .stat-item {
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        font-family: var(--font-family-body);
        line-height: 1.43;
        margin-top: 0;
        text-wrap: pretty;
        color: var(--wp--preset--color--wex-rich-black);

        .stat-number {
            font-weight: 500;
            font-size: 38px;
            font-family: var(--font-family-heading);
            display: block;
            margin-bottom: 10px;
            line-height: 1.05;
            margin-left: 0;
        }

        .stat-description {
            font-family: var(--font-family-body);
            margin-left: 0;
        }
    }
}

/* Card Details */
.wp-block-columns.is-style-card-details {
    --card-details-image-size: 250px;
    --card-details-text-size: 350px;
    --card-details-gap: calc( 2 * var(--vw-560-1200-16-50));
    --card-details-wrapping-width: calc( var(--card-details-image-size) + var(--card-details-gap) + var(--card-details-text-size) );
    container: card-details / inline-size;
    column-gap: var(--cq-700-1350-50-100);
    column-rule: 1px solid var(--wp--preset--color--wex-light-gray);
    h2.wp-block-heading {
        font-size: var(--cq-300-1000-18-32);
        margin-top: 8px;
        max-width: none;
        & + p {
            margin-top: 8px;
        }
    }
    p.is-style-sub-heading {
        max-width: none;
    }
    h3 {
        font-size: var(--vw-560-950-16-18);
        margin-top: var(--cq-300-1000-20-30);
        & + * {
            margin-top: 8px;
        }
    }
    .wp-block-list {
        color: var(--color-text-secondary);
    }
    .card-feature-divider-container {
        align-self: stretch;
        container-type: inline-size;
    }
    .card-feature-divider {
        border: 0.5px solid #D9D9D9;
        height: 100%;
        @container (width > 1cqi) {
            display: none;
        }
    }
    .wp-block-column {
        flex-basis: min(350px, 100%) !important;
        flex-shrink: 0 !important;
        flex-grow: 1;
    }
    .wp-block-column:has(.wp-block-heading) {
        flex-grow: 7.25;
    }
    .wp-block-image {
        container-type: inline-size;
        img {
            @container (width > 70vw) {
                width: 100% !important;
            }
        }
    }
    
    .wp-block-column:has(.wp-block-image) {
        align-self: center;
        flex-basis: 250px !important;
        flex-grow: 2.25 !important;
    }
}

/* Blue Half Border */
.is-style-blue-half-border {
    background-color: var(--wp--preset--color--wex-neutral-gray);
    padding: 20px 0 0 20px;
    border-radius: 14px;
    img {
        border-radius: 14px 0 14px 0;
    }
}

/* Miscellaneous */
.wp-block-query.is-style-horizontal {
    .wp-block-post-template {
        --min-column-width: 375px;
    }
    .wp-block-post {
        &:only-child {
            grid-template-columns: 1fr 2fr;
        }
        --column-gap: min(3%, 50px);
        display: grid;
        grid-template-columns: calc( 50% - var(--column-gap) / 2) 1fr;
        grid-template-rows: auto 1fr;
        column-gap: var(--column-gap);
        align-items: center;
        .wp-block-post-featured-image {
            margin-bottom: 0;
            aspect-ratio: auto !important;
            img {
                aspect-ratio: 3/2;
                height: auto !important;
            }
        }
        &:has(.wp-block-post-excerpt) {
            grid-template-areas: "image title"
            "image excerpt";
            align-items: start;
            .wp-block-post-featured-image {
                grid-area: image;
                grid-row: span 2;
            }
            .wp-block-post-title {
                grid-area: title;
            }
            .wp-block-post-excerpt {
                grid-area: excerpt;
            }
        }
    }
}

.wp-block-query .wex-grid .type-post {
    padding: 20px;
    background-color: #F9F9FE;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    min-height: min( 400px, 40vh);
    margin-block-start: 0;
    box-sizing: border-box;
    &:has(a:hover, a:focus) {
        background-color: #F0F0F5;
    }
    &:not(:has(.wp-block-post-author)) {
        min-height: min( 370px, 35vh);
    }
    article {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .wp-block-post-title {
        margin-top: 0;
        font-size: clamp(1.375rem, 0.25rem + 6.6667cqi, 1.5rem);
        color: var(--wp--preset--color--wex-rich-black);
        line-height: 1.15;
    }
    .article-description {
        font-family: var(--font-family-heading);
        margin-top: 5px;
    }
    &:not(:has(.wp-block-post-author)) .article-description {
        margin-bottom: 20px;
    }
    .wp-block-post-author {
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: var(--cq-300-1000-16-18);
        align-items: center;
    }
    .post-archive-meta {
        margin-top: auto;
        justify-content: space-between;
        gap: 20px;
    }
    p {
        font-size: clamp(0.9375rem, 0.375rem + 3.3333cqi, 1rem);
    }
}

.wp-block-query

.wp-block-group:has(.wp-block-post-template) {
    & + .wp-block-buttons {
        margin-block-start: var(--vw-360-1450-30-60);
    }
    .wp-block-separator + * {
        margin-top: var(--vw-360-1450-30-60);
    }
}

.wp-block-separator {
    border: 0.25px solid #5D688C66;
}

.is-style-hero .wp-block-separator {
    margin-top: var(--vw-360-1450-30-60);
}

.is-style-hero:has(.wp-block-separator) {
    padding-block-end: 0;
}

.white-out {
    position: relative;
    isolation: isolate;
}

.white-out::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.75);
    pointer-events: none;
    z-index: 1;
}

.wp-site-blocks {
    position: relative;
}

footer {
    .is-style-page-section {
        padding-block: 0;
        & + .is-style-page-section {
            padding-block-start: var(--vw-360-1450-20-30);
        }
    }
    .is-style-image-content { /* Pre-Footer Image Content */
        .wp-block-column:has(.wp-block-heading) {
            padding-block: var(--vw-360-1450-32-96);
        }
        .wp-block-heading {
            font-size: var(--vw-560-1200-36-48);
            text-wrap: balance;
            font-weight: 600;
            & + p {
                font-size: var(--vw-560-1200-18-22);
            }
        }
    }
    .wex-coupon-code {
        font-weight: 500;
    }
}

.footer-copyright {
    font-size: 11px;
    margin-block-start: var(--vw-560-1200-28-40);
}

.is-style-page-section:has(.wex-fuel-widget-section) {
    padding-block-start: 0;
}

.wex-fuel-widget-section #wex-fuel-widget {
    box-shadow: none;
    #map {
        height: 540px;
    }
}

* {
    box-sizing: border-box;
}