html {
    --cq-300-1000-75-100: clamp(4.6875rem, 4.0179rem + 3.5714cqi, 6.25rem);
    --hero-top-padding: var(--vw-360-1450-60-120);
}

@view-transition {
    navigation: auto;
}

/* Brand text highlight colors for selection and Highlight API ranges. */
::selection {
    background-color: var(--color-primary, #1b6dfe);
    color: var(--wp--preset--color--wex-white, #fff);
}

::-moz-selection {
    background-color: var(--color-primary, #1b6dfe);
    color: var(--wp--preset--color--wex-white, #fff);
}

::highlight(wex-brand-highlight) {
    background-color: var(--color-primary, #1b6dfe);
    color: var(--wp--preset--color--wex-white, #fff);
}

.is-style-hero {
    container: hero / inline-size;
}

.is-style-page-section {
    margin-block: 0 !important; /* We don't need block margins on the group block since the inner blocks have their own padding to separate them */
    padding-block: var(--vw-360-1450-60-120); /* Default padding for all sections. */
    position: relative;
    &:not(.has-background) + .wp-block-group:not(.has-background) {
        padding-block-start: 0; /* Remove top padding when two sections are adjacent and don't have a background so the spacing isn't too much */
    }
    &:has(#wex-fuel-widget-section) {
        padding-inline: 0;
    }
}

footer {
    margin-block-start : 0 !important; /* Remove the top margin on the footer so it doesn't add extra unwanted space */
    .wp-block-group:last-child {
        padding-block-end: var(--vw-560-1200-28-40); /* Tighten bottom padding a bit on last footer group */
    }
}

.footer-lets-talk {
    flex: 0 0 min( 100%, 295px );
    margin-left: auto !important;
    gap: 0;
    * {
        text-align: right;
    }
    h2 {
        font-size: 18px;
        line-height: 28px;
        font-weight: 700;
        margin-top: 30px;
    }
    p {
        font-size: 14px;
        line-height: 20px;
        margin-top: 8px;
    }
}

.wp-block-group:has(.wex-grid) {
    --grid-column-gap: var(--vw-560-1200-16-50);
    --grid-row-gap: 40px;
    --min-column-width: 286px;
}

.wp-block-column:has(.is-style-bottom-anchored) {
    position: relative;
    container-type: inline-size;
    .is-style-bottom-anchored {
        --bottom-anchored-image-width: min(100%, 400px);
        position: absolute;
        width: var(--bottom-anchored-image-width);
        left: calc(50% - (var(--bottom-anchored-image-width) / 2));
        pointer-events: none;
    }
    @container ( width > 70vw) {
        .is-style-bottom-anchored {
            position:relative;
            img {
                aspect-ratio: 1;
                object-fit: cover;
                object-position: top;
                margin-block-end: calc( -1 * var(--vw-360-1450-30-60) );
            }
        }
    }
}

.wp-block-columns:has(.is-style-bottom-anchored) {
    > .wp-block-column {
        position: relative;
        z-index: 2;
    }

    > .wp-block-column:has(.is-style-bottom-anchored) {
        z-index: 1;
    }
}

.wp-block-group:has(.is-style-vertical-flush) {
    padding-block: 0;
    .wp-block-column:not(:has(.is-style-vertical-flush)) {
        padding-block: var(--vw-360-1450-60-120);
    }
}

.wex-grid {
    display: grid !important;
    column-gap: var(--grid-column-gap);
    row-gap: var(--grid-row-gap);
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    .wp-block-heading {
        text-wrap: pretty;
    }
    .wp-block-post-title {
        text-wrap: auto;
    }
}

.is-style-fuel-card-features,
.is-style-check-list {
    list-style-image: url('/wp-content/themes/wex-block-theme/assets/images/list-check.svg');

}

.is-style-check-list {
    padding-inline-start: 40px;
}

.wp-block-quote.is-style-testimonial {
    position: relative;
    margin-inline: auto;
}

.wp-block-quote .wex-quote-stars {
    display: block;
    width: 92px;
    height: 16px;
    margin-inline: auto;
    margin-bottom: 16px;
}

.wp-block-quote .wex-quote-image {
    display: block;
    width: var(--cq-300-1000-30-60);
    height: var(--cq-300-1000-30-60);
    object-fit: cover;
    margin-inline: auto;
    margin-top: 20px;
}

.is-style-callout {
    gap: 10px;
    padding-block: 15px;
    width: 100%;
    border-block: 1px solid #5D688C66;
    margin-block-start: var(--cq-300-1000-20-30);
    .icon-container {
        height: 13px;
        width: auto;
    }
    p {
        font-size: 13px !important;
        line-height: 22px !important;
        font-weight: 500 !important;
        margin-top: 0 !important;
        letter-spacing: 0;
    }
}

.is-style-callout + .is-style-callout {
    border-top: 0;
    margin-block-start: 0;
}

.article-highlights {
    border-bottom: 0.5px solid #5D688C66;
    padding-bottom: var(--vw-360-1450-30-60);
}

.wp-block-post-author__avatar {
    margin-right: 0;
    img {
        width: 40px;
        height: auto;
        border-radius: 50%;
    } 
}

.wp-block-post-author__name {
    margin-top: 0;
}

.wp-block-query .wp-block-post.type-post {
    position: relative;
    isolation: isolate;
}

.wp-block-query .wp-block-post.type-post .wp-block-post-title a {
    position: static;
    transition: all 0.3s ease;
    &:hover,
    &:focus-visible {
        text-decoration: underline;
    }
}

.wp-block-query .wp-block-post.type-post .wp-block-post-title a:only-of-type::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.wp-block-query .wp-block-post.type-post .wp-block-post-title a:only-of-type:focus-visible {
    outline: none;
}

.wp-block-query .wp-block-post.type-post:focus-within {
    outline: 2px solid var(--wp--preset--color--wex-dark-blue);
    outline-offset: 2px;
}

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

.is-style-hero.has-wex-white-background-color + .has-wex-white-background-color {
    padding-block-start: var(--vw-360-1450-30-60) !important;
}

header + main article {
    padding: 0 !important;
}

/* Screen reader text utility class for skip links and other accessibility features */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    word-wrap: normal !important;
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.screen-reader-text:focus {
    clip: auto !important;
    -webkit-clip-path: none;
    clip-path: none;
    display: block;
    height: auto;
    left: 0;
    margin: 0;
    overflow: visible;
    padding: 0.5rem;
    position: absolute;
    top: 0;
    width: auto;
    z-index: 100000;
    background-color: #000;
    color: #fff;
}