/*=============================================
    BUTTONS — one shape, one motion, everywhere

    Every call-to-action the plugin renders used to carry its own geometry:
    .main-header__cta came from the theme at 1.1vw/1.9vw, .services__btn at
    1.05vw/2.2vw with no font-weight, .bf__btn at .95vw/1.5vw and weight 700,
    each with its own radius and its own set of px overrides below 1024px.
    This sheet is the single place those values live now.

    It loads last (priority 99 in classes/class-assets.php, after both the
    theme sheet and every per-widget sheet), so the rules here win at equal
    specificity without any !important. Two consequences shape the file:

    - The selector lists have to mirror the specificity of what they replace.
      `.cfw__form .wpcf7-submit` is (0,2,0) in contact-form.css, so it is
      written the same way here rather than as a bare class.

    - The hover rule re-declares the whole background — colour, image, repeat,
      position and size. A widget's own `:hover { background: X }` is the
      shorthand, which resets background-image to none at (0,2,0); re-stating
      the longhands from a later rule of equal specificity is what keeps the
      sweep alive without editing every hover block in the plugin.

    HOVER MOTION
    A gradient panel of --pbtn-sweep is painted over the base fill and scaled
    with background-size. Idle it is anchored right at 0% wide; hovered it is
    anchored left at 100%. background-position is deliberately left out of the
    transition, so the anchor flips while the panel is either invisible (0%) or
    full-bleed (100%) — the swap is never seen. The result reads as a wipe in
    from the left and out to the right.

    background-size rather than a ::before is what makes this work on the
    Contact Form 7 and newsletter submits: those are <input> elements, which
    have no pseudo-elements to animate.
=============================================*/

:root {
    /* colour — every family overrides these four below */
    --pbtn-bg: var(--thm-primary, #e8b64a);
    --pbtn-ink: #1c3244;
    --pbtn-sweep: #16293a;
    --pbtn-sweep-ink: #ffffff;

    /* border is off by default; only the outlined drawer phone button opts in */
    --pbtn-border: transparent;
    --pbtn-border-w: 0;

    /* geometry — clamped instead of vw + breakpoint overrides, so one value
       covers 360px through 2560px and the widget sheets' px overrides below
       1024px no longer have anything to correct */
    --pbtn-pad-y: clamp(15px, 1.15vw, 22px);
    --pbtn-pad-x: clamp(26px, 2.2vw, 42px);
    --pbtn-radius: 8px;
    --pbtn-size: clamp(15px, 1.15vw, 18px);
    --pbtn-weight: 600;
    --pbtn-gap: clamp(8px, .7vw, 12px);

    --pbtn-speed: .45s;
    --pbtn-ease: cubic-bezier(.22, .61, .36, 1);
}

/*=============================================
    PALETTES
    Only the four colour tokens. Each family keeps pointing at the custom
    properties its own sheet and its own Elementor controls already write to,
    so a colour picked in the editor still lands on the button — it now feeds
    the sweep instead of a hard background swap.
=============================================*/

/* the theme's CTA class, which most widgets render */
.main-header__cta {
    --pbtn-bg: var(--thm-primary, #e8b64a);
    --pbtn-ink: #1c3244;
    --pbtn-sweep: #111827;
    --pbtn-sweep-ink: #ffffff;
}

.hero .btn {
    --pbtn-bg: var(--yellow, #e8b64a);
    --pbtn-ink: var(--navy, #1c3244);
    --pbtn-sweep: var(--navy, #1c3244);
}

.about__btn {
    --pbtn-bg: var(--about-yellow, #e8b64a);
    --pbtn-ink: var(--about-navy, #111827);
    --pbtn-sweep: var(--about-navy, #111827);
}

.aib__btn {
    --pbtn-bg: var(--aib-btn-bg, var(--aib-yellow, #e8b64a));
    --pbtn-ink: var(--aib-btn-ink, var(--aib-ink, #111827));
    --pbtn-sweep: var(--aib-ink, #111827);
}

.bf__btn {
    --pbtn-bg: var(--bf-btn-bg, #d9a441);
    --pbtn-ink: var(--bf-btn-ink, #16293a);
    --pbtn-sweep: #16293a;
}

.cdb__btn {
    --pbtn-bg: var(--cdb-btn-bg, #e8b64a);
    --pbtn-ink: var(--cdb-btn-ink, #1c3244);
    --pbtn-sweep: var(--cdb-ink, #1c3244);
}

.cta__btn {
    --pbtn-bg: var(--cta-accent, #e8b64a);
    --pbtn-ink: var(--cta-accent-ink, #1c3244);
    --pbtn-sweep: var(--cta-ink, #ffffff);
    --pbtn-sweep-ink: var(--cta-accent-ink, #1c3244);
}

.cvb__btn {
    --pbtn-bg: var(--cvb-btn-bg, #e8b64a);
    --pbtn-ink: var(--cvb-btn-ink, #16293a);
    --pbtn-sweep: var(--cvb-ink, #16293a);
}

/* dark section, so the sweep is the light one */
.exp__btn {
    --pbtn-bg: var(--exp-btn-bg, #d9a441);
    --pbtn-ink: var(--exp-btn-ink, #16293a);
    --pbtn-sweep: #ffffff;
    --pbtn-sweep-ink: #16293a;
}

.faq__btn {
    --pbtn-bg: var(--faq-yellow, #e8b64a);
    --pbtn-ink: var(--faq-navy, #142535);
    --pbtn-sweep: var(--faq-navy, #142535);
}

.hbn__btn {
    --pbtn-bg: var(--hbn-btn-bg, var(--hbn-gold, #e8b64a));
    --pbtn-ink: var(--hbn-btn-ink, #1c3244);
    --pbtn-sweep: #ffffff;
    --pbtn-sweep-ink: #1c3244;
}

/* the two light skins invert it back */
.hbn--style-2 .hbn__btn,
.hbn--style-3 .hbn__btn {
    --pbtn-sweep: var(--hbn-ink, #1c3244);
    --pbtn-sweep-ink: #ffffff;
}

.ib__btn {
    --pbtn-bg: var(--ib-btn-bg, var(--ib-gold, #e8b64a));
    --pbtn-ink: var(--ib-btn-ink, #1c3244);
    --pbtn-sweep: #ffffff;
    --pbtn-sweep-ink: #1c3244;
}

.ib--style-3 .ib__btn,
.ib--style-6 .ib__btn,
.ib--style-8 .ib__btn,
.ib--style-11 .ib__btn {
    --pbtn-sweep: #294863;
    --pbtn-sweep-ink: #ffffff;
}

.ib--style-7 .ib__btn,
.ib--style-9 .ib__btn,
.ib--style-10 .ib__btn,
.ib--style-12 .ib__btn {
    --pbtn-sweep: #16293a;
    --pbtn-sweep-ink: #ffffff;
}

.lbx__btn {
    --pbtn-bg: var(--lbx-btn-bg, #e8b64a);
    --pbtn-ink: var(--lbx-btn-ink, #1c3244);
    --pbtn-sweep: #ffffff;
    --pbtn-sweep-ink: #1c3244;
}

.lst__btn {
    --pbtn-bg: var(--lst-btn-bg, #e8b64a);
    --pbtn-ink: var(--lst-btn-ink, #1c3244);
    --pbtn-sweep: var(--lst-ink, #1c3244);
}

.lst--style-3 .lst__btn {
    --pbtn-sweep: #294863;
}

.mapc__btn {
    --pbtn-bg: var(--mapc-yellow, #e8b64a);
    --pbtn-ink: var(--mapc-ink, #111827);
    --pbtn-sweep: var(--mapc-ink, #111827);
}

.pol__btn {
    --pbtn-bg: var(--pol-btn-bg, #e8b64a);
    --pbtn-ink: var(--pol-btn-ink, #16293a);
    --pbtn-sweep: #ffffff;
    --pbtn-sweep-ink: #16293a;
}

.services__btn {
    --pbtn-bg: var(--svc-btn-bg, var(--svc-yellow, #e8b64a));
    --pbtn-ink: var(--svc-btn-ink, var(--svc-navy, #1c3244));
    --pbtn-sweep: var(--svc-navy, #16283a);
}

.tm__btn {
    --pbtn-bg: var(--tm-btn-bg, #e8b64a);
    --pbtn-ink: var(--tm-btn-ink, #16293a);
    --pbtn-sweep: #16293a;
}

.tst__btn {
    --pbtn-bg: var(--tst-yellow, #e8b64a);
    --pbtn-ink: var(--tst-ink, #111827);
    --pbtn-sweep: var(--tst-ink, #111827);
}

.wcu__btn {
    --pbtn-bg: var(--wcu-btn-bg, var(--wcu-yellow, #e8b64a));
    --pbtn-ink: var(--wcu-btn-ink, var(--wcu-ink, #111827));
    --pbtn-sweep: var(--wcu-ink, #111827);
}

.wu__btn {
    --pbtn-bg: var(--wu-accent, #e8b64a);
    --pbtn-ink: var(--wu-ink, #1c3244);
    --pbtn-sweep: var(--wu-ink, #1c3244);
}

/* the drawer's phone link is the outlined twin of the CTA: no fill of its own,
   so the sweep is a wash rather than a colour swap and the border stays */
.mobile-nav__phone-btn {
    --pbtn-bg: transparent;
    --pbtn-ink: #ffffff;
    --pbtn-sweep: rgba(255, 255, 255, .14);
    --pbtn-sweep-ink: #ffffff;
    --pbtn-border: rgba(255, 255, 255, .38);
    --pbtn-border-w: 1px;
}

.cfw__form .wpcf7-submit,
.cfw__form input[type="submit"],
.cfw__form button[type="submit"] {
    --pbtn-bg: var(--cfw-accent, #e8b64a);
    --pbtn-ink: var(--cfw-accent-ink, #1c3244);
    --pbtn-sweep: var(--cfw-ink, #ffffff);
    --pbtn-sweep-ink: var(--cfw-accent-ink, #1c3244);
}

/* the contact-info card's submit, whichever form plugin printed it */
.cif__form .wpcf7-submit,
.cif__form input[type="submit"],
.cif__form button[type="submit"] {
    --pbtn-bg: var(--cif-gold, #e8b64a);
    --pbtn-ink: var(--cif-ink, #16293a);
    --pbtn-sweep: var(--cif-ink, #16293a);
    --pbtn-sweep-ink: #ffffff;
}

.nlw__form .wpcf7-submit,
.nlw__form input[type="submit"],
.nlw__form button[type="submit"] {
    --pbtn-bg: var(--nlw-accent, #e8b64a);
    --pbtn-ink: var(--nlw-accent-ink, #16232f);
    --pbtn-sweep: var(--nlw-accent-hover, #f3c766);
    --pbtn-sweep-ink: var(--nlw-accent-ink-hover, #16232f);
}

/*=============================================
    SHAPE
    Everything except the newsletter submit, which is a segment welded into
    the right end of the email field — it takes its width, radius and padding
    from newsletter.css and would be broken by a standalone button's geometry.
=============================================*/

.main-header__cta,
.hero .btn,
.mobile-nav__phone-btn,
.about__btn,
.aib__btn,
.bf__btn,
.cdb__btn,
.cta__btn,
.cvb__btn,
.exp__btn,
.faq__btn,
.hbn__btn,
.ib__btn,
.lbx__btn,
.lst__btn,
.mapc__btn,
.pol__btn,
.services__btn,
.tm__btn,
.tst__btn,
.wcu__btn,
.wu__btn,
.cfw__form .wpcf7-submit,
.cfw__form input[type="submit"],
.cfw__form button[type="submit"],
.cif__form .wpcf7-submit,
.cif__form input[type="submit"],
.cif__form button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pbtn-gap);
    padding: var(--pbtn-pad-y) var(--pbtn-pad-x);
    border: var(--pbtn-border-w) solid var(--pbtn-border);
    border-radius: var(--pbtn-radius);
    font-family: var(--thm-body-font, inherit);
    font-size: var(--pbtn-size);
    font-weight: var(--pbtn-weight);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

/*=============================================
    FILL + MOTION
    The newsletter submit joins from here on: it keeps its own geometry but
    gets the same sweep as everything else.
=============================================*/

.main-header__cta,
.hero .btn,
.mobile-nav__phone-btn,
.about__btn,
.aib__btn,
.bf__btn,
.cdb__btn,
.cta__btn,
.cvb__btn,
.exp__btn,
.faq__btn,
.hbn__btn,
.ib__btn,
.lbx__btn,
.lst__btn,
.mapc__btn,
.pol__btn,
.services__btn,
.tm__btn,
.tst__btn,
.wcu__btn,
.wu__btn,
.cfw__form .wpcf7-submit,
.cfw__form input[type="submit"],
.cfw__form button[type="submit"],
.cif__form .wpcf7-submit,
.cif__form input[type="submit"],
.cif__form button[type="submit"],
.nlw__form .wpcf7-submit,
.nlw__form input[type="submit"],
.nlw__form button[type="submit"] {
    color: var(--pbtn-ink);
    background-color: var(--pbtn-bg);
    background-image: linear-gradient(to right, var(--pbtn-sweep), var(--pbtn-sweep));
    background-repeat: no-repeat;
    /* anchored right while collapsed, so releasing the hover sends the panel
       out through the right edge rather than rewinding it to the left */
    background-position: right center;
    background-size: 0% 100%;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    /* background-position is intentionally absent — see the file header */
    transition:
        background-size var(--pbtn-speed) var(--pbtn-ease),
        color var(--pbtn-speed) var(--pbtn-ease),
        border-color var(--pbtn-speed) var(--pbtn-ease);
}

.main-header__cta:hover,
.main-header__cta:focus-visible,
.hero .btn:hover,
.hero .btn:focus-visible,
.mobile-nav__phone-btn:hover,
.mobile-nav__phone-btn:focus-visible,
.about__btn:hover,
.about__btn:focus-visible,
.aib__btn:hover,
.aib__btn:focus-visible,
.bf__btn:hover,
.bf__btn:focus-visible,
.cdb__btn:hover,
.cdb__btn:focus-visible,
.cta__btn:hover,
.cta__btn:focus-visible,
.cvb__btn:hover,
.cvb__btn:focus-visible,
.exp__btn:hover,
.exp__btn:focus-visible,
.faq__btn:hover,
.faq__btn:focus-visible,
.hbn__btn:hover,
.hbn__btn:focus-visible,
.ib__btn:hover,
.ib__btn:focus-visible,
.lbx__btn:hover,
.lbx__btn:focus-visible,
.lst__btn:hover,
.lst__btn:focus-visible,
.mapc__btn:hover,
.mapc__btn:focus-visible,
.pol__btn:hover,
.pol__btn:focus-visible,
.services__btn:hover,
.services__btn:focus-visible,
.tm__btn:hover,
.tm__btn:focus-visible,
.tst__btn:hover,
.tst__btn:focus-visible,
.wcu__btn:hover,
.wcu__btn:focus-visible,
.wu__btn:hover,
.wu__btn:focus-visible,
.cfw__form .wpcf7-submit:hover,
.cfw__form .wpcf7-submit:focus-visible,
.cfw__form input[type="submit"]:hover,
.cfw__form input[type="submit"]:focus-visible,
.cfw__form button[type="submit"]:hover,
.cfw__form button[type="submit"]:focus-visible,
.cif__form .wpcf7-submit:hover,
.cif__form .wpcf7-submit:focus-visible,
.cif__form input[type="submit"]:hover,
.cif__form input[type="submit"]:focus-visible,
.cif__form button[type="submit"]:hover,
.cif__form button[type="submit"]:focus-visible,
.nlw__form .wpcf7-submit:hover,
.nlw__form .wpcf7-submit:focus-visible,
.nlw__form input[type="submit"]:hover,
.nlw__form input[type="submit"]:focus-visible,
.nlw__form button[type="submit"]:hover,
.nlw__form button[type="submit"]:focus-visible {
    color: var(--pbtn-sweep-ink);
    /* the full background is restated, not just the size: a widget's own
       `:hover { background: X }` is the shorthand, and it would otherwise
       clear background-image from the same specificity level */
    background-color: var(--pbtn-bg);
    background-image: linear-gradient(to right, var(--pbtn-sweep), var(--pbtn-sweep));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100% 100%;
    /* the sweep is the whole hover — no lift. Stated rather than left out:
       the per-widget sheets still carry their own
       `:hover { transform: translateY(-2px) }`, and simply dropping the
       declaration here would hand the lift straight back to them. */
    transform: none;
}

/* CF7 disables its submit while a request is in flight */
.cfw__form .wpcf7-submit:disabled,
.cif__form .wpcf7-submit:disabled,
.nlw__form .wpcf7-submit:disabled {
    opacity: .6;
    cursor: default;
    background-size: 0% 100%;
    transform: none;
}

/*=============================================
    REDUCED MOTION
    The state change still has to be visible, so the sweep collapses to a
    plain swap rather than disappearing.
=============================================*/
@media (prefers-reduced-motion: reduce) {

    .main-header__cta,
    .hero .btn,
    .mobile-nav__phone-btn,
    .about__btn,
    .aib__btn,
    .bf__btn,
    .cdb__btn,
    .cta__btn,
    .cvb__btn,
    .exp__btn,
    .faq__btn,
    .hbn__btn,
    .ib__btn,
    .lbx__btn,
    .lst__btn,
    .mapc__btn,
    .pol__btn,
    .services__btn,
    .tm__btn,
    .tst__btn,
    .wcu__btn,
    .wu__btn,
    .cfw__form .wpcf7-submit,
    .cif__form .wpcf7-submit,
    .cif__form input[type="submit"],
    .cif__form button[type="submit"],
    .nlw__form .wpcf7-submit {
        transition: background-color .15s linear, color .15s linear;
    }

    .main-header__cta:hover,
    .main-header__cta:focus-visible,
    .hero .btn:hover,
    .hero .btn:focus-visible,
    .mobile-nav__phone-btn:hover,
    .mobile-nav__phone-btn:focus-visible,
    .about__btn:hover,
    .about__btn:focus-visible,
    .aib__btn:hover,
    .aib__btn:focus-visible,
    .bf__btn:hover,
    .bf__btn:focus-visible,
    .cdb__btn:hover,
    .cdb__btn:focus-visible,
    .cta__btn:hover,
    .cta__btn:focus-visible,
    .cvb__btn:hover,
    .cvb__btn:focus-visible,
    .exp__btn:hover,
    .exp__btn:focus-visible,
    .faq__btn:hover,
    .faq__btn:focus-visible,
    .hbn__btn:hover,
    .hbn__btn:focus-visible,
    .ib__btn:hover,
    .ib__btn:focus-visible,
    .lbx__btn:hover,
    .lbx__btn:focus-visible,
    .lst__btn:hover,
    .lst__btn:focus-visible,
    .mapc__btn:hover,
    .mapc__btn:focus-visible,
    .pol__btn:hover,
    .pol__btn:focus-visible,
    .services__btn:hover,
    .services__btn:focus-visible,
    .tm__btn:hover,
    .tm__btn:focus-visible,
    .tst__btn:hover,
    .tst__btn:focus-visible,
    .wcu__btn:hover,
    .wcu__btn:focus-visible,
    .wu__btn:hover,
    .wu__btn:focus-visible,
    .cfw__form .wpcf7-submit:hover,
    .cfw__form .wpcf7-submit:focus-visible,
    .cif__form .wpcf7-submit:hover,
    .cif__form .wpcf7-submit:focus-visible,
    .cif__form input[type="submit"]:hover,
    .cif__form input[type="submit"]:focus-visible,
    .cif__form button[type="submit"]:hover,
    .cif__form button[type="submit"]:focus-visible,
    .nlw__form .wpcf7-submit:hover,
    .nlw__form .wpcf7-submit:focus-visible {
        background-color: var(--pbtn-sweep);
        background-image: none;
    }
}