/*
 * Theme buttons — RDV Robotics chamfered button (Figma "RDV Updates", Frame 8,
 * "Find Out More", node 1:906 — replaced the black/gold pill on 2026-10-05).
 * Default: 15% white fill, 3px red stroke, cream text + right arrow, top-right
 * and bottom-left corners cut 10px, soft drop shadow. The same shape as the
 * header CTA (.menubar--cta in css/menubar.css).
 * Hover/focus: red fill, white text, arrow nudges right.
 * Applies to .theme-button (Gravity Forms etc.) and the core Button block.
 */

/* --- Ink: cream on dark surfaces (all the Figma shows), black on light ones.
   A light palette background flips it; a dark surface nested inside one flips
   it back, and the nearest one wins because a custom property inherits. An
   image or video section counts as dark even over a light fallback color,
   which is why the dark rule comes second. Custom colors carry no slug class,
   so they keep whatever the surface around them set. --- */
:is(.has-white-background-color, .has-off-white-background-color, .has-cream-background-color,
    .has-gray-background-color, .has-gold-background-color) {
    --rdv-button-ink: var(--wp--preset--color--black);
}

:is(.has-black-background-color, .has-charcoal-background-color, .has-brick-background-color,
    .has-background-image, .has-background-video, [class*="-gradient-background"]) {
    --rdv-button-ink: var(--wp--preset--color--cream);
}

/* theme.json's styles.elements.button reads --rdv-button-ink and
   --rdv-button-font-size too. In the editor canvas its global rule loads AFTER
   this file at the same specificity, so it has to agree with these values
   rather than lose to them. A plain "20px" there would also be turned into a
   fluid clamp() (settings.typography.fluid), which a var() is not. */
.theme-button,
.wp-block-button__link {
    --rdv-button-font-size: 20px;
    --rdv-button-cut: 10px;
    --rdv-button-line: 3px;
    --rdv-button-ring: var(--rdv-red, #bf4042);
    /* The stroke is painted on the button itself: the straight edges are the
       inset box-shadow, and the two diagonals are these gradient tiles at the
       cut corners (clip-path drops a border's diagonals). The tile is one
       stroke-width larger than the cut so the inner miter is covered, which
       moves the cut line 0.2929 of a stroke-width off the tile's centre. The
       0.5px ramp anti-aliases the hard stop. Keeping it off the pseudos leaves
       ::after for the arrow, and a solid override (the footer's Sign Up) drops
       the whole stroke with `background` + `box-shadow: none`. */
    --rdv-button-stop: calc(50% + var(--rdv-button-line) * .2929);
    --rdv-button-diagonals:
        linear-gradient(225deg, var(--rdv-button-ring) var(--rdv-button-stop), transparent calc(var(--rdv-button-stop) + .5px)),
        linear-gradient(45deg, var(--rdv-button-ring) var(--rdv-button-stop), transparent calc(var(--rdv-button-stop) + .5px));
    display: inline-flex;
    align-items: center;
    gap: 19px;
    padding: 16px 20px; /* 52px tall at line-height 1, as in the Figma */
    border: none;
    border-radius: 0;
    background-color: rgba(255, 255, 255, 0.15);
    background-image: var(--rdv-button-diagonals);
    background-position: top right, bottom left;
    background-size: calc(var(--rdv-button-cut) + var(--rdv-button-line)) calc(var(--rdv-button-cut) + var(--rdv-button-line));
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 var(--rdv-button-line) var(--rdv-button-ring);
    color: var(--rdv-button-ink, var(--wp--preset--color--cream));
    font-family: var(--wp--preset--font-family--roboto, "Roboto", sans-serif);
    font-size: var(--rdv-button-font-size);
    font-weight: 600;
    line-height: 1;
    letter-spacing: .05em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    clip-path: polygon(0 0, calc(100% - var(--rdv-button-cut)) 0, 100% var(--rdv-button-cut),
        100% 100%, var(--rdv-button-cut) 100%, 0 calc(100% - var(--rdv-button-cut)));
    transition: background-color .3s, color .3s;
}

/* The Figma's drop shadow (0 4px, 8.95 blur deviation, 44% black). The
   button's own clip-path would cut any shadow it cast, so its wrapper casts
   one from the clipped result instead. Bare .theme-button has no wrapper and
   goes without. */
.wp-block-button {
    filter: drop-shadow(0 4px 9px rgba(0, 0, 0, 0.44));
}

/* Right arrow — masked with the Figma "Arrow 4" vector and filled with
   currentColor so it follows the text color flip on hover */
.theme-button::after,
.wp-block-button__link::after {
    content: "";
    flex: none;
    width: 18px;
    height: 15px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14.7279'%3E%3Cpath d='M17.7071 8.07107C18.0976 7.68054 18.0976 7.04738 17.7071 6.65685L11.3431 0.292893C10.9526 -0.097631 10.3195 -0.097631 9.92893 0.292893C9.53841 0.683418 9.53841 1.31658 9.92893 1.70711L15.5858 7.36396L9.92893 13.0208C9.53841 13.4113 9.53841 14.0445 9.92893 14.435C10.3195 14.8256 10.9526 14.8256 11.3431 14.435L17.7071 8.07107ZM0 7.36396V8.36396H17V7.36396V6.36396H0V7.36396Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14.7279'%3E%3Cpath d='M17.7071 8.07107C18.0976 7.68054 18.0976 7.04738 17.7071 6.65685L11.3431 0.292893C10.9526 -0.097631 10.3195 -0.097631 9.92893 0.292893C9.53841 0.683418 9.53841 1.31658 9.92893 1.70711L15.5858 7.36396L9.92893 13.0208C9.53841 13.4113 9.53841 14.0445 9.92893 14.435C10.3195 14.8256 10.9526 14.8256 11.3431 14.435L17.7071 8.07107ZM0 7.36396V8.36396H17V7.36396V6.36396H0V7.36396Z'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform .3s;
}

.theme-button:hover,
.theme-button:focus-visible,
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
    background-color: var(--rdv-red, #bf4042);
    color: #fff;
}

.theme-button:hover::after,
.theme-button:focus-visible::after,
.wp-block-button__link:hover::after,
.wp-block-button__link:focus-visible::after {
    transform: translateX(4px);
}

/* css/reset.min.css is a Bootstrap-4-era reboot that predates :focus-visible and
   ships `button:focus{outline:dotted 1px;outline:-webkit-focus-ring-color auto 5px}`.
   It never CONFLICTS with the :focus-visible rule below — it fills the gap where
   that rule deliberately doesn't match, which is exactly where no ring belongs,
   so the bug is invisible until you click a <button> with a mouse. Reset first,
   then reinstate: the two pseudo-classes carry equal specificity, so order decides. */
button:focus {
    outline: none;
}

/* The chamfer clips anything drawn outside the button, so the focus ring sits
   inside it: 8px in clears the 10px cut. */
.theme-button:focus-visible,
.wp-block-button__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -8px;
}

button:focus-visible {
    outline: 2px solid var(--wp--preset--color--black);
    outline-offset: 2px;
}

/* --- Gold variation (gold fill, black text; hover inverts) ---
   The stroke takes the fill's color, so it reads as a solid gold chamfer. */
.wp-block-button.is-style-gold .wp-block-button__link {
    --rdv-button-ring: var(--wp--preset--color--gold);
    background-color: var(--wp--preset--color--gold);
    color: var(--wp--preset--color--black);
}
.wp-block-button.is-style-gold .wp-block-button__link:hover,
.wp-block-button.is-style-gold .wp-block-button__link:focus-visible {
    background-color: var(--wp--preset--color--black);
    color: var(--wp--preset--color--gold);
}

/* --- Outline (core style): the stroke alone, no fill ---
   Core's outline rules (2px border, larger padding, currentColor text, no
   background image) outrank a bare class, hence the longer selectors. */
.wp-block-buttons > .wp-block-button.is-style-outline > .wp-block-button__link {
    border: none;
    padding: 16px 20px;
}
.wp-block-buttons > .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
    color: var(--rdv-button-ink, var(--wp--preset--color--cream));
}
.wp-block-buttons > .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
    background-color: transparent;
    background-image: var(--rdv-button-diagonals);
}
.wp-block-buttons > .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):is(:hover, :focus-visible) {
    color: #fff;
}
.wp-block-buttons > .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):is(:hover, :focus-visible) {
    background-color: var(--rdv-red, #bf4042);
}

/* --- Arrow Link heading style ---
   Heading-scale link with the theme arrow after the text; color inherits. */
.is-style-arrow-link {
    display: flex;
    align-items: center;
    gap: 16px;
}
.is-style-arrow-link a {
    color: inherit;
    text-decoration: none;
}
.is-style-arrow-link::after {
    content: "";
    flex: none;
    width: 29px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.1 19.7 12.4'%3E%3Cpath d='M19.2834 6.65863C19.6055 6.33645 19.6055 5.81409 19.2834 5.49191L14.0331 0.241637C13.7109 -0.0805454 13.1886 -0.0805454 12.8664 0.241637C12.5442 0.563819 12.5442 1.08618 12.8664 1.40836L17.5333 6.07527L12.8664 10.7422C12.5442 11.0644 12.5442 11.5867 12.8664 11.9089C13.1886 12.2311 13.7109 12.2311 14.0331 11.9089L19.2834 6.65863ZM0 6.07527V6.90027H18.7V6.07527V5.25027H0V6.07527Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.1 19.7 12.4'%3E%3Cpath d='M19.2834 6.65863C19.6055 6.33645 19.6055 5.81409 19.2834 5.49191L14.0331 0.241637C13.7109 -0.0805454 13.1886 -0.0805454 12.8664 0.241637C12.5442 0.563819 12.5442 1.08618 12.8664 1.40836L17.5333 6.07527L12.8664 10.7422C12.5442 11.0644 12.5442 11.5867 12.8664 11.9089C13.1886 12.2311 13.7109 12.2311 14.0331 11.9089L19.2834 6.65863ZM0 6.07527V6.90027H18.7V6.07527V5.25027H0V6.07527Z'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform .3s;
}
.is-style-arrow-link:hover::after,
.is-style-arrow-link:focus-within::after {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .theme-button,
    .wp-block-button__link,
    .theme-button::after,
    .wp-block-button__link::after {
        transition: none;
    }

    .theme-button:hover::after,
    .theme-button:focus-visible::after,
    .wp-block-button__link:hover::after,
    .wp-block-button__link:focus-visible::after,
    .is-style-arrow-link::after,
    .is-style-arrow-link:hover::after,
    .is-style-arrow-link:focus-within::after {
        transform: none;
    }
}