/* ======================================= */
/* GLobal */
/* ======================================= */
@font-face {
    font-family: 'gc_gambioregular';
    src: url('/wp-content/themes/evolut-starter/assets/fonts/gc_gambio_sans-webfont.woff2') format('woff2'),
    url('/wp-content/themes/evolut-starter/assets/fonts/gc_gambio_sans-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    --brand-color-primary: #FF4E16;
    --brand-color-secondary: #FEB022;
    --brand-color-tertiary: #C7FF33;
    --brand-color-quarternary: #AEAEAE;
    --brand-color-white: #FFF;
    --brand-color-black: #272727;
    --brand-color-black-25: #F4F4F4;
    --brand-color-black-800: #474747;
    --brand-color-black-700: #525252;

    --brand-color-primary-rgb: 255, 78, 22;
    --brand-color-secondary-rgb: 254, 176, 34;
    --brand-color-tertiary-rgb: 199, 255, 51;
    --brand-color-quarternary-rgb: 174, 174, 174;
    --brand-color-black-rgb: 39, 39, 39;
    --brand-color-white-rgb: 255, 255, 255;

    --brand-heading-font: "gc_gambioregular", sans-serif;
    --brand-body-font: "Figtree", sans-serif;

    --brand-btn-font-weight: 500;

    --brand-btn-padding-lg: 12px 20px;
    --brand-btn-gap-lg: 12px;
    --brand-btn-font-size-lg: 16px;

    --brand-btn-padding-md: 12px 16px;
    --brand-btn-gap-md: 8px;
    --brand-btn-font-size-md: 14px;

    --brand-btn-padding-sm: 8px 12px;
    --brand-btn-gap-sm: 8px;
    --brand-btn-font-size-sm: 14px;

    --headering-font-size-1: 64px;
    --headering-font-size-2: 48px;
    --headering-font-size-3: 40px;
    --headering-font-size-4: 32px;
    --headering-font-size-5: 24px;
    --headering-font-size-6: 20px;
    --headering-font-size-7: 16px;

    --brand-white-arrow-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E");

    --wp--preset--font-size--small: 14px;

    --form-field-border-color: #E9E9E9;
    --form-field-border-radius: 2px;

    /* General font styling */
    font-family: var(--brand-body-font, sans-serif);
    font-optical-sizing: auto;
    letter-spacing: -0.02em;
    line-height: 1.5;
    font-weight: 400;
    color: var(--brand-color-black-800);
}

@media (max-width: 1023px) {
    :root {
        --headering-font-size-1: 30px;
        --headering-font-size-2: 26px;
        --headering-font-size-3: 24px;
        --headering-font-size-4: 22px;
        --headering-font-size-5: 20px;
        --headering-font-size-6: 18px;
    }
}

h1, .heading--h1,
h2, .heading--h2,
h3, .heading--h3,
h4, .heading--h4,
h5, .heading--h5,
h6, .heading--h6,
.heading--h7 {
    font-family: var(--brand-heading-font, sans-serif);
    font-weight: 400;
    font-feature-settings: 'liga' off;
    line-height: 1.16;
    color: var(--brand-color-black);
}


h1, .heading--h1,
h2, .heading--h2 {
    line-height: 1.28;
}

:root :where(.wp-block-cover h1:not(.has-text-color)),
:root :where(.wp-block-cover h2:not(.has-text-color)),
:root :where(.wp-block-cover h3:not(.has-text-color)),
:root :where(.wp-block-cover h4:not(.has-text-color)),
:root :where(.wp-block-cover h5:not(.has-text-color)),
:root :where(.wp-block-cover h6:not(.has-text-color)) {
    color: inherit;
}


h1, .heading--h1 { font-size: var(--headering-font-size-1); }
h2, .heading--h2 { font-size: var(--headering-font-size-2); }
h3, .heading--h3 { font-size: var(--headering-font-size-3); }
h4, .heading--h4 { font-size: var(--headering-font-size-4); }
h5, .heading--h5 { font-size: var(--headering-font-size-5); }
h6, .heading--h6 { font-size: var(--headering-font-size-6); }
.heading--h7 { font-size: var(--headering-font-size-7); }

h1 strong, .heading--h1 strong, h1 b, .heading--h1 b,
h2 strong, .heading--h2 strong, h2 b, .heading--h2 b,
h3 strong, .heading--h3 strong, h3 b, .heading--h3 b,
h4 strong, .heading--h4 strong, h4 b, .heading--h4 b,
h5 strong, .heading--h5 strong, h5 b, .heading--h5 b,
h6 strong, .heading--h6 strong, h6 b, .heading--h6 b {
    font-weight: 400;
}

a {
    color: var(--brand-color-black-800);
}

/* Helpers */
.brand-color--black-800 {
    color: var(--brand-color-black-800);
}

.brand-color--black-700 {
    color: var(--brand-color-black-700);
}

.brand-color--black-800 {
    color: var(--brand-color-black-800);
}

.brand-color--black\/80 {
    color: rgba(var(--brand-color-black-rgb), 0.8);
}

.brand-color--black\/60 {
    color: rgba(var(--brand-color-black-rgb), 0.6);
}

.brand-color--white\/95,
.brand-color--white\/95.has-white-color,
.brand-color--white\/95.has-white-color a {
    color: rgba(var(--brand-color-white-rgb), 0.95) !important;
}

.brand-color--white\/90,
.brand-color--white\/90.has-white-color,
.brand-color--white\/90.has-white-color a {
    color: rgba(var(--brand-color-white-rgb), 0.9) !important;
}

.brand-color--white\/80,
.brand-color--white\/80.has-white-color,
.brand-color--white\/80.has-white-color a {
    color: rgba(var(--brand-color-white-rgb), 0.8) !important;
}

.wp-block-columns.columns--no-gap {
    gap: 0;
}

.wp-block-columns.columns--even-height {
    align-items: stretch !important;
}

.wp-block-columns.columns--even-height .wp-block-column > .wp-block-cover {
    height: 100%;
}

.padded-content {
    --padded-content-x: 80px;
    --padded-content-y: 120px;

    padding: var(--padded-content-y) var(--padded-content-x);
}

@media (max-width: 1023px) {
    .padded-content {
        --padded-content-x: 10%;
        --padded-content-y: 12%;
    }
}

.p-0 {
    padding: 0 !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.px-2 {
    --section-x-padding-gap-multiplier: 2;
    --section-x-padding-gap-size: calc(var(--section-gap-base) * var(--section-x-padding-gap-multiplier));
    padding-left: var(--section-x-padding-gap-size) !important;
    padding-right: var(--section-x-padding-gap-size) !important;
}

.jc-heading-line-height--128 {
    line-height: 1.28;
}

.jc-heading-line-height--140 {
    line-height: 1.4;
}

.jc-flex-column {
    display: flex;
    flex-direction: column;
}

.jc-flex-grow {
    flex-grow: 1;
}

.mt-4 {
    margin-top: 20px;
}

.mb-4 {
    margin-bottom: 20px;
}

.section--padding-x1\.5 { --section-padding-gap-multiplier: 1.5; }

@media (max-width: 767px) {
    .mobile-remove-break br {
        display: none;
    }
}

/* Buttons */
/* Shop hero banner blocks */
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.gform_button,
.gform-button,
.main .btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    line-height: 1;
    font-weight: var(--brand-btn-font-weight);
    color: var(--brand-color-white);
    padding: var(--brand-btn-padding-lg);
    gap: var(--brand-btn-gap-lg);
    height: auto;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:before,
.gform_button:before,
.gform-button:before,
.main .btn:before {
    background-color: var(--brand-color-primary);
    background-image: url('/wp-content/themes/evolut-starter/assets/brand-btn-gradient.png');
    background-position: 0% 50%;
    background-size: cover;
    left: -100%;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover:before,
.gform_button:hover:before,
.gform-button:hover:before,
.main .btn:hover::before {
    transform: translateX(50%);
}

.wp-block-button.btn--black-on-bg .wp-block-button__link {
    background: linear-gradient(0deg, rgba(var(--brand-color-white-rgb), 0.05), rgba(var(--brand-color-white-rgb), 0.05)), var(--brand-color-black) !important;
}

.wp-block-button.btn--black-on-bg .wp-block-button__link:hover {
    background: var(--brand-color-black) !important;
}

.wp-block-button.btn--secondary .wp-block-button__link {
    background-color: var(--brand-color-secondary);
    color: var(--brand-color-black);
    border: 1px solid var(--brand-color-secondary);
    transition: color ease-out 0.4s, background-color ease-out 0.4s;
}
.wp-block-button.btn--secondary .wp-block-button__link:hover {
    background-color: var(--brand-color-primary);
    color: var(--brand-color-white);
    border: 1px solid var(--brand-color-primary);
}
.wp-block-button.btn--secondary .wp-block-button__link:before {
    display: none;
}

.wp-block-button.btn--tertiary .wp-block-button__link {
    background-color: var(--brand-color-tertiary);
    color: var(--brand-color-black);
    border: 1px solid var(--brand-color-tertiary);
    transition: color ease-out 0.4s, background-color ease-out 0.4s;
}
.wp-block-button.btn--tertiary .wp-block-button__link:hover {
    background-color: var(--brand-color-white);
    color: var(--brand-color-black) !important;
    border: 1px solid var(--brand-color-white);
}
.wp-block-button.btn--tertiary .wp-block-button__link:before {
    display: none;
}

/* Footer newsletter form */
.newsletter-form .gform-button,
#gform_fields_195 .gform-button {
    height: 100%;
}

.newsletter-form {
    border-top: none;
}

/* breadcrumbs */
.jc-breadcrumbs--theme-light {
    color: var(--brand-color-primary);
}

/* Gravity forms */
.el-select::before,
.input, .gform_wrapper.gravity-theme .gfield input, .gform_wrapper.gravity-theme .gfield select {
    border-radius: var(--form-field-border-radius);
    border: 1px solid var(--form-field-border-color);
    color: var(--brand-color-black-800);
}

.el-select:not(.el-select--multi) .el-select__option.el-select__option--selected {
    background-color: var(--brand-color-primary);
    color: var(--brand-color-white);
}

.gform_wrapper.gravity-theme .gfield_required {
    color: var(--brand-color-primary);
}

.input--radio, .gform_wrapper.gravity-theme .gfield--type-consent [type="checkbox"],
.gform_wrapper.gravity-theme .gfield-choice-input.gfield-choice-input {
    border-color: var(--brand-color-quarternary);
}

.input--radio:checked, .gform_wrapper.gravity-theme .gfield--type-consent [type="checkbox"]:checked,
.gform_wrapper.gravity-theme .gfield-choice-input.gfield-choice-input:checked {
    background-color: var(--brand-color-primary);
}