/**
 * NewtonX — Branded button styles for the Gutenberg Block Editor + Frontend
 *
 * Registered styles:
 *   .is-style-btn-one    → "Solid Hover"    (white bg, gradient circle-reveal hover)
 *   .is-style-btn-dashed → "Dashed Outline" (dashed border, gradient fill hover)
 *
 * WP color controls (.has-*-color, .has-*-background-color) are respected.
 *
 */

/* =========================================================
   Shared base (applies to both styles)
   ========================================================= */
.wp-block-button.is-style-btn-one .wp-block-button__link,
.wp-block-button.is-style-btn-dashed .wp-block-button__link {
    display: inline-block;
    padding: clamp(1rem, 0.956rem + 0.1878vw, 1.125rem);
    font-family: 'Banana Grotesk SemiBold', sans-serif !important;
    font-weight: 600;
    font-size: 0.875rem;
    text-align: center;
    line-height: 0.9;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    height: auto;
    position: relative;
    overflow: hidden;
    border-radius: 0 !important;
    cursor: url('../image/cursor-hover.svg'), auto;
    transition-timing-function: cubic-bezier(0.625, 0.05, 0, 1);
    transition-property: all;
    transition-duration: 225ms;
}

/* =========================================================
   .is-style-btn-one  —  "Solid Hover"
   ========================================================= */
.wp-block-button.is-style-btn-one .wp-block-button__link {
    background: #fff;
    color: #000;
    border: 1px solid transparent;
}

/* Gradient circle-reveal layer */
.wp-block-button.is-style-btn-one .wp-block-button__link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(15, 75, 255, 1) 0%,
            rgba(255, 134, 51, 1) 100%);
    z-index: 0;
    clip-path: circle(0px at var(--mouse-x, 50%) var(--mouse-y, 50%));
    transition: clip-path 0s ease;
}

.wp-block-button.is-style-btn-one .wp-block-button__link:hover::before {
    clip-path: circle(15px at var(--mouse-x, 50%) var(--mouse-y, 50%));
}

/* Keep text above the pseudo-element */
.wp-block-button.is-style-btn-one .wp-block-button__link span,
.wp-block-button.is-style-btn-one .wp-block-button__link {
    position: relative;
    z-index: 1;
}

.wp-block-button.is-style-btn-one .wp-block-button__link::before {
    z-index: 0;
}

/* =========================================================
   .is-style-btn-dashed  —  "Dashed Outline"
   ========================================================= */
.wp-block-button.is-style-btn-dashed .wp-block-button__link {
    background: transparent;
    color: #000;
    border: none;
}

/* Dashed border via ::after (matches .is-current state) */
.wp-block-button.is-style-btn-dashed .wp-block-button__link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    border: 5px dashed currentColor;
    z-index: 1;
    pointer-events: none;
    transition: all 225ms ease-out;
}

/* Gradient fill layer via ::before */
.wp-block-button.is-style-btn-dashed .wp-block-button__link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(15, 75, 255, 1) 0%,
            rgba(255, 134, 51, 1) 100%);
    z-index: 0;
    opacity: 0;
    transition: opacity 325ms cubic-bezier(0.625, 0.05, 0, 1);
}

.wp-block-button.is-style-btn-dashed .wp-block-button__link:hover {
    color: #fff;
}

.wp-block-button.is-style-btn-dashed .wp-block-button__link:hover::before {
    opacity: 1;
}

.wp-block-button.is-style-btn-dashed .wp-block-button__link:hover::after {
    border-color: transparent;
}

/* Keep text above pseudo-elements (frontend <span> + editor rich-text) */
.wp-block-button.is-style-btn-dashed .wp-block-button__link span,
.wp-block-button.is-style-btn-dashed .wp-block-button__link .rich-text,
.wp-block-button.is-style-btn-dashed .wp-block-button__link [contenteditable],
.wp-block-button.is-style-btn-dashed .wp-block-button__link [role="textbox"] {
    position: relative;
    z-index: 2;
}

.wp-block-button.is-style-btn-one .wp-block-button__link span,
.wp-block-button.is-style-btn-one .wp-block-button__link .rich-text,
.wp-block-button.is-style-btn-one .wp-block-button__link [contenteditable],
.wp-block-button.is-style-btn-one .wp-block-button__link [role="textbox"] {
    position: relative;
    z-index: 2;
}

/* =========================================================
   WP Color Controls — respect .has-* classes
   ========================================================= */

/* When WP text color is set, use it */
.wp-block-button.is-style-btn-one .wp-block-button__link.has-text-color,
.wp-block-button.is-style-btn-dashed .wp-block-button__link.has-text-color {
    color: inherit;
}

/* When WP background color is set, use it */
.wp-block-button.is-style-btn-one .wp-block-button__link.has-background,
.wp-block-button.is-style-btn-dashed .wp-block-button__link.has-background {
    background: inherit;
}

/* Defaults when no WP color is chosen */
.wp-block-button.is-style-btn-one .wp-block-button__link:not(.has-background) {
    background: #fff;
}

.wp-block-button.is-style-btn-dashed .wp-block-button__link:not(.has-background) {
    background: transparent;
}

/* Override border-radius to 0 even when WP tries to set one */
.wp-block-button.is-style-btn-one .wp-block-button__link[style*="border-radius"],
.wp-block-button.is-style-btn-dashed .wp-block-button__link[style*="border-radius"] {
    border-radius: 0 !important;
}