/**
 * WEX Brand Theme - Brand-Specific Styles Only
 * 
 * This child theme stylesheet contains only visual styling specific to the WEX Brand.
 * All foundational block support, layout utilities, and responsive variables are
 * defined in the parent theme (wex-block-theme).
 *
 * Included CSS files from parent theme:
 * - theme-variables-utilities.css: Responsive sizing, spacing, typography variables
 * - landing-pages.css: Hero, section head, collections, image-content layouts
 * - testimonials.css: Testimonial block styles
 * - article-content.css: Article/blog post styles
 * - navigation.css: Header, navigation, footer styles
 * - forms/accordion.css: Form and accordion block styles
 * - fuel-cards/fuel-cards-styles.css: Fuel card specific styles
 * - app-rating/app-rating.css: App rating block styles
 * - global-block-styles.css: General block and element styles
 */

/* ========================================================================
   Brand-Specific: Semantic Color Variables
   
   Map generic semantic color variables to WEX brand colors.
   These variables are referenced throughout the parent theme and can be
   overridden in child themes for different brand color schemes.
   ======================================================================== */
:root {
    /* WEX Brand Color Palette - Semantic Color Mappings */
    --color-text-primary: var(--wp--preset--color--wex-rich-black);
    --color-text-secondary: var(--wp--preset--color--wex-dark-neutral-gray);
    --color-text-tertiary: var(--wp--preset--color--wex-medium-neutral-gray);
    --color-text-muted: var(--wp--preset--color--wex-main-gray);
    --color-accent: var(--wp--preset--color--wex-accent-red);
    --color-primary: var(--wp--preset--color--wex-dark-blue);
    --color-background-light: var(--wp--preset--color--wex-pale-gray);
    --color-background-extra-light: var(--wp--preset--color--wex-extra-light-gray);
    
    /* WEX Brand Block-Specific Variables */
    --app-rating--ratings-text-font-weight: 400;
    --app-rating--color: var(--wp--preset--color--wex-rich-black);
    --app-rating--count--color: var(--wp--preset--color--wex-rich-black);
    --app-rating--font-size: 0.875rem;
    --app-rating--font-family: 'Inter', sans-serif;
    --app-rating--star-color: #FFBF3F;
    --app-rating--block-margin-top: 0;
    --app-rating--rating-number-font-weight: 700;
    --app-rating--disclaimer-font-size: 0.875rem;
    --app-rating--disclaimer-color: var(--wp--preset--color--wex-dark-neutral-gray);
    
    /* Footer Disclaimers Block Variables */
    --footer-disclaimers--text-color: var(--wp--preset--color--wex-dark-neutral-gray);
    --footer-disclaimers--claim-underline-offset: -0.25em;

    /* Swiper */
    --swiper-pagination-color: var(--wp--preset--color--wex-rich-black);
    --swiper-pagination-bullet-width: 12px;
    --swiper-pagination-bullet-height: 12px;
    --swiper-pagination-bullet-horizontal-gap: 5px;
    --swiper-pagination-offset: var(--vw-560-1200-14-20);
    --swiper-pagination-bottom: 0px;

    /* Reading Progress Bar */
    --wex-reading-progress-height: 2px;
    --wex-reading-progress-z-index: 999;
    --wex-reading-progress-color: linear-gradient(90deg, #1B6DFE 0%, #DF4730 100%);
    --wex-reading-progress-dark-color: linear-gradient(90deg, #1B6DFE 0%, #DF4730 100%);
    --wex-reading-progress-track-color: transparent;

}

/* ========================================================================
   Brand-Specific: Ombre Outline Style with Brand Colors
   ======================================================================== */
.is-style-ombre-outline {
    position: relative;
    --border-width: 2px;
    --border-inline-inset: 4%;
    --border-block-inset: 5%;
    --border-radius: 15px;
}

.is-style-ombre-outline::before,
.is-style-ombre-outline::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius, 15px);
    padding: var(--border-width, 2px);
    box-sizing: border-box;
    width: calc( 100% - var(--border-inline-inset, 17px) * 2 );
    height: calc( 100% - var(--border-block-inset, 17px) * 2 );
    top: var(--border-block-inset, 17px);
    left: var(--border-inline-inset, 17px);
}

.is-style-ombre-outline::before {
    background: linear-gradient(320deg, #1C6EFF 0.55%, #3D5DD9 3.52%, #6948A6 8.46%, #91357A 13.41%, #B22554 18.35%, #CD1735 24.28%, #E20D1D 29.23%, #F1060D 35.16%, #FA0203 42.09%, #FD0100 50%, #FFBC00 99.45%);
    mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
    mask-composite: exclude; 
}

.is-style-ombre-outline::after {
    background: linear-gradient(12deg, rgba(224, 12, 12, 1) 0%, rgba(118, 0, 0, 0) 20%);
}

/* ========================================================================
   Brand-Specific: Dark Background Text Color Override
   ======================================================================== */
.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;
    }
}

.background-color-dark:not(:has(.has-background)) cite:before {
    border-top-color: #fff;
}

.background-color-dark {
    .icon-container path {
        fill: var(--wp--preset--color--wex-neutral-gray);
    }
}

/* ========================================================================
   Brand-Specific: Page Template Styles
   ======================================================================== */
.page-template-simple-page {
    .entry-content {
        *:first-child {
            padding-top: 0;
        }
    }
}

/* ========================================================================
   Brand-Specific: Fuel Card Widget Section
   ======================================================================== */
#wex-fuel-widget-section {
    max-width: none;
    margin-inline: 0;
    #output-data-area {
        background-color: transparent;
    }
    #search-buttom-container {
        flex-grow: 999;
        min-width: min(500px, 100%);
    }
    #table-output-data {
        border-collapse: collapse;
        thead th {
            background-color: var(--wp--preset--color--wex-dark-blue);
            span {
                font-size: 18px;
                font-weight: 400;
            }
        }
        tbody {
            color: var(--wp--preset--color--wex-rich-black);
            tr:hover td,
            tr:focus td {
                color: #172DA0;
            }
            tr:nth-child(odd) {
                td,
                th {
                    background-color: var(--wp--preset--color--wex-extra-light-gray);
                }
            }
        }
    }
    #seach-tools > * {
        width: auto;
    }
}

#wex-fuel-widget-section #search-tools > * {
    width: auto !important;
    max-width: none !important;
    &.wfw-filter-title {
        max-width: max-content !important;
    }
    .phoenix-select__wrapper {
        width: auto !important;
        max-width: none !important;
        select {
            width: auto !important;
            max-width: none !important;
            padding-right: 2rem !important;
        }
    }
}

#wex-fuel-widget-section :focus,
#wex-fuel-widget-section button:focus {
    outline: 5px auto #172DA0;
}