/* ===== .rcw-slant-cta-button Salient-proof reset (v3 — token bridge) ===== */
/* Tokens (--rcw-*) injected by RCW_Salient from salient_redux (handle: rcw-tokens,
   dependency of this file). Fallbacks = the approved design literals, so the widget
   renders correctly off-Salient or before Redux is configured.
   RULE: inherit fonts + brand colours via tokens; keep layout/spacing literal. */
.rcw-slant-cta-button {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: var(--rcw-font-body, 'Prompt', sans-serif);
    font-weight: var(--rcw-fweight-body, 400);
    letter-spacing: 0;
    line-height: 1.6;
    color: var(--rcw-text, #0a0a0a);
    -webkit-font-smoothing: antialiased;
    display: flex;
}
.rcw-slant-cta-button *,
.rcw-slant-cta-button *::before,
.rcw-slant-cta-button *::after { box-sizing: inherit; }

.rcw-slant-cta-button a {
    color: inherit;
    text-decoration: none;
    box-shadow: none;
    border: 0;
    transition: none;
}
.rcw-slant-cta-button a:hover,
.rcw-slant-cta-button a:focus { color: inherit; text-decoration: none; }

/* ---- alignment ---- */
.rcw-slant-cta-button--align-left   { justify-content: flex-start; }
.rcw-slant-cta-button--align-center { justify-content: center; }
.rcw-slant-cta-button--align-right  { justify-content: flex-end; }

/* ================================================================
   The button.

   Geometry is traced 1:1 from the approved artwork and derives
   entirely from --h (the height of the slab face), so one number
   drives padding, type size, dash thickness, wedge and glow.
   ================================================================ */
.rcw-slant-cta-button__link {
    /* --- the one knob: face height (md by default) --- */
    --h: 64px;

    /* --- derived geometry (ratios of --h) --- */
    --slant-l: calc(var(--h) * 0.835);   /* left edge run              */
    --slant-r: calc(var(--h) * 0.484);   /* right edge run             */
    --foot:    calc(var(--h) * 1.044);   /* where the pointed foot kinks */
    --box-h:   calc(var(--h) * 1.308);   /* face + foot = clickable box */
    --gap:      calc(var(--h) * 0.099);  /* whitespace face  → dash 1  */
    --dash-gap: calc(var(--h) * 0.045);  /* whitespace dash 1 → dash 2 */
    --sw:       calc(var(--h) * 0.126);  /* dash thickness             */
    --stroke-w: calc(var(--h) * 0.026);  /* text outline thickness     */

    /* --- the two colours ---
       The design only ever uses two, and they SWAP ROLES between the
       styles: in Light the brand is the slab and the dark is the wedge;
       in Dark that reverses. So they are defined once here as roles, and
       each style below decides which lands where.

       Each resolves: per-instance override → Salient token → design literal.
       The -rgb pair feeds the glow, which needs a triplet for rgba(). */
    --c-brand:     var(--rcw-slant-brand, var(--rcw-color-1, #fed61e));
    --c-brand-rgb: var(--rcw-slant-brand-rgb, var(--rcw-color-1-rgb, 254, 214, 30));
    --c-dark:      var(--rcw-slant-dark, #23211f);
    --c-dark-rgb:  var(--rcw-slant-dark-rgb, 35, 33, 31);

    /* role assignment — overridden wholesale by .--dark below */
    --slab:   var(--c-brand);
    --glow:   var(--c-brand-rgb);
    --dash:   var(--c-brand);
    --ink:    var(--c-dark);   /* cast under-wedge */
    --label:  #0a0a0a;
    --stroke: #fdf9f8;
    --inner:  .5;        /* strength of the inner white shadow */

    position: relative;
    display: inline-flex;
    align-items: center;
    height: var(--box-h);
    padding: 0 calc(var(--h) * 0.85) calc(var(--h) * 0.19) calc(var(--h) * 1.36);
    /* dashes sit outside the box — reserve their room so layout,
       centring and float clearance all account for them */
    margin-right: calc(var(--gap) + var(--dash-gap) + 2 * var(--sw));
    -webkit-tap-highlight-color: transparent;
    transition: transform .34s cubic-bezier(.4, 0, .2, 1);
}

/* ---- the slab face ---- */
.rcw-slant-cta-button__face {
    position: absolute;
    inset: 0;
    background:
        /* inner white shadow — light caught on the top edge, gone by a quarter down */
        linear-gradient(180deg,
            rgba(255, 255, 255, var(--inner)) 0,
            rgba(255, 255, 255, calc(var(--inner) * .28)) 9%,
            rgba(255, 255, 255, 0) 26%),
        /* lift toward the bottom edge — keeps the slab from reading flat.
           Built from white over the brand colour instead of hard-coded
           colour stops, so any --rcw-color-1 shades the same way. */
        linear-gradient(180deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .07) 40%,
            rgba(255, 255, 255, .24) 100%),
        var(--slab);
    clip-path: polygon(
        var(--slant-l) 0,
        100% 0,
        calc(100% - var(--slant-r)) var(--h),
        var(--foot) var(--h),
        0 100%
    );
}

/* ---- shine: one wide soft band, full button width, sliding across
        then resting. Lives inside the face so the face clip-path
        contains it — it can never spill into the whitespace gaps or
        over the dark wedge. ---- */
.rcw-slant-cta-button__face::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, .4),
        transparent);
    transform: skewX(-26deg);
    animation: rcw-slant-cta-shine var(--shine-dur, 3s) infinite;
}

@keyframes rcw-slant-cta-shine {
    0%        { left: -100%; }
    50%, 100% { left: 100%; }
}

/* ---- pulse: glow breathing around the slab. drop-shadow follows the
        clip-path silhouette, so it hugs the slant instead of boxing it. ---- */
.rcw-slant-cta-button__face,
.rcw-slant-cta-button__dash {
    animation: rcw-slant-cta-pulse var(--pulse-dur, 2s) ease-in-out infinite;
}

@keyframes rcw-slant-cta-pulse {
    0%, 100% {
        filter: drop-shadow(0 calc(var(--h) * .05) calc(var(--h) * .13) rgba(var(--glow), .45));
    }
    50% {
        filter: drop-shadow(0 calc(var(--h) * .09) calc(var(--h) * .26) rgba(var(--glow), .8));
    }
}

/* ---- cast under-wedge: the slab seen edge-on ---- */
.rcw-slant-cta-button__wedge {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--h) * 2.51);
    height: calc(var(--h) * 1.345);
    background: var(--ink);
    clip-path: polygon(7.9% 100%, 43.8% 80.6%, 99.8% 80.6%);
}

/* ---- the two trailing dashes ---- */
.rcw-slant-cta-button__dash {
    position: absolute;
    top: 0;
    height: var(--h);
    width: calc(var(--sw) + var(--slant-r));
    background: var(--dash);
    clip-path: polygon(var(--slant-r) 0, 100% 0, var(--sw) 100%, 0 100%);
    /* at rest: out of sight, sitting low */
    opacity: 0;
    transform: translateY(calc(var(--h) * .22));
    transition:
        transform .28s cubic-bezier(.2, .8, .3, 1),
        opacity   .2s ease;
}
.rcw-slant-cta-button__dash--1 { right: calc(-1 * (var(--gap) + var(--sw))); }
.rcw-slant-cta-button__dash--2 { right: calc(-1 * (var(--gap) + var(--dash-gap) + 2 * var(--sw))); }

/* hover: dashes rise into place and fade in. Dash 1 leads, dash 2 follows. */
.rcw-slant-cta-button__link:hover .rcw-slant-cta-button__dash,
.rcw-slant-cta-button__link:focus-visible .rcw-slant-cta-button__dash {
    opacity: 1;
    transform: translateY(0);
}
.rcw-slant-cta-button__link:hover .rcw-slant-cta-button__dash--2,
.rcw-slant-cta-button__link:focus-visible .rcw-slant-cta-button__dash--2 { transition-delay: .08s; }

/* ---- label ----
   Never an h1–h6: Salient's contextual heading rules out-rank a single
   widget class once the widget sits inside a WPBakery column. */
.rcw-slant-cta-button__label {
    position: relative;
    z-index: 1;
    font-family: var(--rcw-font-heading, 'Montserrat', 'Prompt', sans-serif);
    font-weight: 900;
    font-style: italic;
    font-size: calc(var(--h) * 0.40);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -.02em;
    color: var(--label);
    /* stroke painted BEHIND the fill, so the outline grows outward
       instead of eating into the letterform */
    -webkit-text-stroke: var(--stroke-w) var(--stroke);
    paint-order: stroke fill;
    white-space: nowrap;
}

/* The anchor reset near the top is `.rcw-slant-cta-button a` (0,1,1) and
   out-ranks `.rcw-slant-cta-button__link` (0,1,0) — so the transition above
   lost and the lift jumped instantly instead of easing. Re-assert it here at
   equal specificity, after the reset, where source order settles the tie. */
a.rcw-slant-cta-button__link { transition: transform .34s cubic-bezier(.4, 0, .2, 1); }

/* ---- states ---- */
.rcw-slant-cta-button__link:hover  { transform: translate(3px, -3px); --shine-dur: 1.4s; --pulse-dur: 1s; }
.rcw-slant-cta-button__link:active { transform: translate(0, 1px); }
.rcw-slant-cta-button__link:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 6px;
}

/* ================================================================
   Style variants
   ================================================================ */

/* Dark slab — the same two colours with their roles swapped: the dark
   becomes the slab, the brand becomes the wedge and dashes. */
.rcw-slant-cta-button__link--dark {
    --slab:   var(--c-dark);
    --glow:   var(--c-dark-rgb);
    --ink:    var(--c-brand);
    --dash:   var(--c-brand);
    --label:  #fdf9f8;
    --stroke: #0a0a0a;
    --inner:  .16;
}
/* a dark face needs a weaker glare or the band blows out */
.rcw-slant-cta-button__link--dark .rcw-slant-cta-button__face::after {
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, .16),
        transparent);
}

/* Outline off — zeroing the width keeps paint-order and the colour token
   intact, so flipping it back on needs no other change. */
.rcw-slant-cta-button__link--stroke-off { --stroke-w: 0; }

/* Text colour override. Declared after both style blocks and scoped to a
   single class, so it wins on either style by source order. Choosing Auto
   emits no class at all and the style's own default stands. */
.rcw-slant-cta-button__link--tone-dark {
    --label:  #0a0a0a;
    --stroke: #fdf9f8;
}
.rcw-slant-cta-button__link--tone-light {
    --label:  #fdf9f8;
    --stroke: #0a0a0a;
}

/* ================================================================
   Size scale — one class, because everything derives from --h.
   The clickable box is ~31% taller than the face (the pointed foot).
   ================================================================ */
.rcw-slant-cta-button__link--xs { --h: 40px; }   /* box  52px */
.rcw-slant-cta-button__link--sm { --h: 52px; }   /* box  68px */
.rcw-slant-cta-button__link--md { --h: 64px; }   /* box  84px */
.rcw-slant-cta-button__link--lg { --h: 84px; }   /* box 110px */
.rcw-slant-cta-button__link--fluid { --h: clamp(52px, 6.4vw, 88px); }

/* ================================================================
   Motion opt-outs
   ================================================================ */
.rcw-slant-cta-button__link--motion-shine .rcw-slant-cta-button__face,
.rcw-slant-cta-button__link--motion-shine .rcw-slant-cta-button__dash,
.rcw-slant-cta-button__link--motion-none .rcw-slant-cta-button__face,
.rcw-slant-cta-button__link--motion-none .rcw-slant-cta-button__dash { animation: none; }

.rcw-slant-cta-button__link--motion-glow .rcw-slant-cta-button__face::after,
.rcw-slant-cta-button__link--motion-none .rcw-slant-cta-button__face::after { display: none; }

/* ================================================================
   Responsive — theme reflow breakpoints
   ================================================================ */
@media (max-width: 1000px) {
    .rcw-slant-cta-button--mobile-align-left   { justify-content: flex-start; }
    .rcw-slant-cta-button--mobile-align-center { justify-content: center; }
    .rcw-slant-cta-button--mobile-align-right  { justify-content: flex-end; }
}

/* Touch targets: no step is ever small enough to miss, and the slanted
   nose is dead space — claw some of it back so the button still fits a
   390px viewport. A 52px face is a 68px box, well past the 44px floor. */
@media (pointer: coarse), (max-width: 690px) {
    .rcw-slant-cta-button__link--xs    { --h: 52px; }
    .rcw-slant-cta-button__link--sm    { --h: 58px; }
    .rcw-slant-cta-button__link--md    { --h: 64px; }
    .rcw-slant-cta-button__link--lg    { --h: 66px; }  /* capped: 72px runs edge-to-edge at 390px */
    .rcw-slant-cta-button__link--fluid { --h: clamp(58px, 13vw, 88px); }
    .rcw-slant-cta-button__link {
        padding-left:  calc(var(--h) * 0.98);
        padding-right: calc(var(--h) * 0.55);
    }
}

@media (prefers-reduced-motion: reduce) {
    a.rcw-slant-cta-button__link,
    .rcw-slant-cta-button__link { transition: none; }
    .rcw-slant-cta-button__link:hover { transform: none; }
    .rcw-slant-cta-button__face,
    .rcw-slant-cta-button__dash { animation: none; }
    .rcw-slant-cta-button__face::after { animation: none; opacity: 0; }
    /* dashes stay visible rather than depending on a motion they can't see */
    .rcw-slant-cta-button__dash { transition: none; transform: none; opacity: 1; }
}