/*
 * Canonical button styles for every Aksyva Blocks button (hero,
 * cta-band, image-text, contact-form) — one shared visual system instead
 * of each block keeping its own near-duplicate copy. Hover changes only
 * background/border/text color, nothing else (no "bump"/translateY) —
 * every button behaves identically regardless of which block it's in.
 * Each block's own render.php still sets the --aksyva-btn-* custom
 * properties per-instance (via the shared aksyva_button_style_vars() PHP
 * helper), so actual colors/sizing can still differ per block — only the
 * CSS *rules* are shared.
 */
.aksyva-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: var(--aksyva-btn-pad, 14px 28px);
    font-size: var(--aksyva-btn-fs, 0.95rem);
    font-weight: 700;
    border-radius: var(--aksyva-btn-radius, 10px);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s;
}
/* Type-qualified (`a.aksyva-btn`, not just `.aksyva-btn`) so this
   reliably beats the theme's own global `a:hover { text-decoration:
   underline; }` — equal-specificity rules fall back to stylesheet load
   order, which isn't guaranteed between a separately-enqueued theme
   stylesheet and this one. A type qualifier bumps specificity so it wins
   regardless of load order — same principle as the heading-color fix
   documented in BLOCK-SCAFFOLD.md. */
a.aksyva-btn,
a.aksyva-btn:hover,
a.aksyva-btn:focus {
    text-decoration: none;
}
.aksyva-btn--solid {
    background: var(--aksyva-btn-bg, #fff);
    color: var(--aksyva-btn-color, var(--aksyva-accent, #2563eb));
    border-color: var(--aksyva-btn-bg, #fff);
}
.aksyva-btn--solid:hover {
    background: var(--aksyva-btn-bg-hover, color-mix(in srgb, var(--aksyva-btn-bg, #fff) 85%, black));
    color: var(--aksyva-btn-color-hover, var(--aksyva-btn-color, var(--aksyva-accent, #2563eb)));
    border-color: var(--aksyva-btn-bg-hover, color-mix(in srgb, var(--aksyva-btn-bg, #fff) 85%, black));
}
.aksyva-btn--ghost {
    background: var(--aksyva-btn-bg, transparent);
    color: var(--aksyva-btn-color, #fff);
    border-color: var(--aksyva-btn-color, #fff);
}
.aksyva-btn--ghost:hover {
    background: var(--aksyva-btn-bg-hover, #fff);
    color: var(--aksyva-btn-color-hover, var(--aksyva-accent, #2563eb));
    border-color: var(--aksyva-btn-bg-hover, #fff);
}
/* Filled with the block's own accent color rather than white — for a
   button on a plain white background (contact-form's submit) where
   --solid's white-on-white default would be invisible. */
.aksyva-btn--accent {
    background: var(--aksyva-btn-bg, var(--aksyva-accent, #2563eb));
    color: var(--aksyva-btn-color, #fff);
    border-color: var(--aksyva-btn-bg, var(--aksyva-accent, #2563eb));
}
.aksyva-btn--accent:hover {
    background: var(--aksyva-btn-bg-hover, color-mix(in srgb, var(--aksyva-btn-bg, var(--aksyva-accent, #2563eb)) 85%, black));
    color: var(--aksyva-btn-color-hover, var(--aksyva-btn-color, #fff));
    border-color: var(--aksyva-btn-bg-hover, color-mix(in srgb, var(--aksyva-btn-bg, var(--aksyva-accent, #2563eb)) 85%, black));
}