/* Divi registers each Filson file at normal weight. Map the site's heavier
 * weights to the existing faces so the browser does not synthesize them. */
@font-face {
    font-family: "Filson Pro Medium";
    src: url("../../uploads/et-fonts/filsonpro-medium.otf") format("opentype");
    font-weight: 500 600;
    font-display: swap;
}

@font-face {
    font-family: "Filson Pro Medium";
    src: url("../../uploads/et-fonts/filsonpro-bold.otf") format("opentype");
    font-weight: 700 900;
    font-display: swap;
}

@font-face {
    font-family: "Filson Pro Bold";
    src: url("../../uploads/et-fonts/filsonpro-bold.otf") format("opentype");
    font-weight: 600 900;
    font-display: swap;
}

/*
 * Arrow fill button. A circle at the right edge floods the pill on hover, focus,
 * or tap. Fixed sizes replace the source component's viewport-based sizes.
 */
.bv-arrow {
    --bv-c: 32px;
    --bv-r: 5px;
    --bv-pl: 20px;
    --bv-pv: 12px;
    --bv-gap: 12px;
    --bv-size: 15px;
    --bv-icon: 15px;
    --bv-y: calc((100% - var(--bv-c)) / 2);
    --bv-ease: cubic-bezier(0.785, 0.135, 0.15, 0.86);
    --bv-time: 450ms;
    --bv-bg: #263e50;
    --bv-border: var(--bv-bg);
    --bv-text: #fff;
    --bv-fill: #f6f0e5;
    --bv-fill-text: #263e50;
}

@media (min-width: 768px) {
    .bv-arrow:where(:not(.bv-arrow--sm)) {
        --bv-c: 40px;
        --bv-pl: 26px;
        --bv-pv: 15px;
        --bv-gap: 16px;
        --bv-size: 16px;
        --bv-icon: 18px;
    }
}

/* Bellevue brand colors. Text pairs meet WCAG AA. */
.bv-arrow--gold { --bv-bg: #f2b544; --bv-text: #263e50; --bv-fill: #263e50; --bv-fill-text: #f6f0e5; }
.bv-arrow--grove { --bv-bg: #287a62; --bv-text: #fff; --bv-fill: #f6f0e5; --bv-fill-text: #287a62; }
.bv-arrow--clay { --bv-bg: #c63c1f; --bv-text: #fff; --bv-fill: #f6f0e5; --bv-fill-text: #c63c1f; }
.bv-arrow--mint { --bv-bg: #a7c7b5; --bv-text: #263e50; --bv-fill: #263e50; --bv-fill-text: #f6f0e5; }
.bv-arrow--black { --bv-bg: #222423; --bv-text: #fff; --bv-fill: #f6f0e5; --bv-fill-text: #222423; }
.bv-arrow--outline { --bv-bg: transparent; --bv-border: #263e50; --bv-text: #263e50; --bv-fill: #263e50; --bv-fill-text: #fff; }
.bv-arrow--outline-light { --bv-bg: transparent; --bv-border: #f6f0e5; --bv-text: #f6f0e5; --bv-fill: #f6f0e5; --bv-fill-text: #263e50; }

/* The repeated class outranks Divi's per-button rules, which carry an ID. */
a.bv-arrow,
:is(#page-container, #et-boc) a.et_pb_button.bv-arrow.bv-arrow.bv-arrow {
    -webkit-tap-highlight-color: transparent;
    background: var(--bv-bg) !important;
    border: 1.5px solid var(--bv-border) !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    color: var(--bv-text) !important;
    cursor: pointer;
    font-size: var(--bv-size) !important;
    font-weight: 500 !important;
    isolation: isolate;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
    max-width: 100%;
    overflow: hidden !important;
    position: relative !important;
    text-align: center;
    text-decoration: none !important;
    text-transform: none !important;
    transition: none !important;
    white-space: normal !important;
}

/* Interior Fullwidth Headers emit their own important padding for both links. */
a.bv-arrow,
:is(#page-container, #et-boc) a.et_pb_button.bv-arrow.bv-arrow.bv-arrow,
body:not(.home) :is(#page-container, #et-boc) .et_pb_fullwidth_header a.et_pb_button.bv-arrow.bv-arrow:is(.et_pb_button_one, .et_pb_button_two) {
    padding: var(--bv-pv) calc(var(--bv-c) + var(--bv-r) + var(--bv-gap)) var(--bv-pv) var(--bv-pl) !important;
}

a.bv-arrow {
    display: inline-block;
}

@media (max-width: 480px) {
    .bv-arrow {
        --bv-pl: 12px;
        --bv-gap: 6px;
    }
}

/* Keeps paired header and footer buttons the same height where they fit. */
@media (min-width: 361px) {
    a.bv-arrow--sm,
    :is(#page-container, #et-boc) a.et_pb_button.bv-arrow.bv-arrow--sm.bv-arrow.bv-arrow {
        white-space: nowrap !important;
    }
}

:is(#page-container, #et-boc) a.et_pb_button.bv-arrow.bv-arrow.bv-arrow::before,
:is(#page-container, #et-boc) a.et_pb_button.bv-arrow.bv-arrow.bv-arrow::after {
    content: none !important;
    display: none !important;
}

.bv-arrow__label,
.bv-arrow__reveal span {
    position: relative;
}

.bv-arrow__fill,
.bv-arrow__reveal,
.bv-arrow__circle {
    pointer-events: none;
    position: absolute;
}

.bv-arrow__fill {
    background: var(--bv-fill);
    border-radius: 999px;
    inset: var(--bv-y) var(--bv-r) var(--bv-y) calc(100% - var(--bv-r) - var(--bv-c));
    transition: inset var(--bv-time) var(--bv-ease);
}

.bv-arrow__reveal {
    align-items: center;
    box-sizing: border-box;
    clip-path: inset(var(--bv-y) var(--bv-r) var(--bv-y) calc(100% - var(--bv-r) - var(--bv-c)));
    color: var(--bv-fill-text);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 0 calc(var(--bv-c) + var(--bv-r) + var(--bv-gap)) 0 var(--bv-pl);
    transition: clip-path var(--bv-time) var(--bv-ease);
}

.bv-arrow__circle {
    background: var(--bv-fill);
    border-radius: 50%;
    color: var(--bv-fill-text);
    height: var(--bv-c);
    overflow: hidden;
    right: var(--bv-r);
    top: 50%;
    transform: translateY(-50%);
    width: var(--bv-c);
}

.bv-arrow__icon {
    height: var(--bv-icon);
    left: 50%;
    position: absolute;
    top: 50%;
    transition: transform var(--bv-time) var(--bv-ease);
    width: var(--bv-icon);
}

.bv-arrow__icon--in {
    transform: translate(-170%, -50%) scale(0);
}

.bv-arrow__icon--out {
    transform: translate(-50%, -50%);
}

.bv-arrow:is(:focus-visible, [data-pressed="true"]) .bv-arrow__fill {
    inset: 0;
}

.bv-arrow:is(:focus-visible, [data-pressed="true"]) .bv-arrow__reveal {
    clip-path: inset(0);
}

.bv-arrow:is(:focus-visible, [data-pressed="true"]) .bv-arrow__icon--in {
    transform: translate(-50%, -50%) scale(1);
}

.bv-arrow:is(:focus-visible, [data-pressed="true"]) .bv-arrow__icon--out {
    transform: translate(70%, -50%) scale(0);
}

@media (hover: hover) {
    .bv-arrow:hover .bv-arrow__fill {
        inset: 0;
    }

    .bv-arrow:hover .bv-arrow__reveal {
        clip-path: inset(0);
    }

    .bv-arrow:hover .bv-arrow__icon--in {
        transform: translate(-50%, -50%) scale(1);
    }

    .bv-arrow:hover .bv-arrow__icon--out {
        transform: translate(70%, -50%) scale(0);
    }
}

a.bv-arrow:focus-visible,
:is(#page-container, #et-boc) a.et_pb_button.bv-arrow.bv-arrow.bv-arrow:focus-visible {
    box-shadow: 0 0 0 2px #fff !important;
    outline: 3px solid #263e50 !important;
    outline-offset: 2px !important;
}

/*
 * Fill style: the same button without the arrow. An inverted copy of the label
 * sweeps in over the button. The source component's GSAP sweep is a CSS transition here.
 */
.bv-arrow--fill {
    --bv-c: 0px;
    --bv-r: 0px;
    --bv-gap: var(--bv-pl);
    --bv-hidden: inset(100% 0% 0% 0%);
    --bv-ease: cubic-bezier(0.165, 0.84, 0.44, 1);
}

.bv-arrow--from-top { --bv-hidden: inset(0% 0% 100% 0%); }
.bv-arrow--from-right { --bv-hidden: inset(0% 0% 0% 100%); }
.bv-arrow--from-left { --bv-hidden: inset(0% 100% 0% 0%); }

.bv-arrow--fill .bv-arrow__fill,
.bv-arrow--fill .bv-arrow__circle {
    display: none;
}

.bv-arrow--fill .bv-arrow__reveal {
    background: var(--bv-fill);
    clip-path: var(--bv-hidden);
    padding: 0 var(--bv-pl);
}

@media (prefers-reduced-motion: reduce) {
    .bv-arrow__fill,
    .bv-arrow__reveal,
    .bv-arrow__icon {
        transition: none;
    }
}

@media (forced-colors: active) {
    .bv-arrow__fill,
    .bv-arrow__reveal {
        display: none;
    }
}