/**
 * Shared button behavior — single source of truth for the WhatsApp CTA
 * identity + hover reaction across header, footer, and page templates.
 *
 * Brand color lives in css/tokens.css (--cjw-color-wa / --cjw-color-wa-dark).
 * This file unifies how every WhatsApp pill *reacts* so the button feels
 * identical wherever it appears: header/footer plus the editorial page CTA
 * (.cjw-btn--whatsapp, shared across corporate-gifting, how-it-works,
 * sell-your-watch, and contact).
 *
 * Canonical WhatsApp hover = darken to --cjw-color-wa-dark + a 1px lift.
 *
 * Sizing (padding, height, gap, font) stays contextual in each component sheet;
 * only the brand color + interaction are centralized here. Loaded globally right
 * after base.css, before component/page sheets — those sheets must NOT redeclare
 * WhatsApp background/hover (they don't, by design) so this file stays authoritative.
 *
 * The floating WhatsApp FAB (.cjw-wa-float, css/custom-footer.css) keeps its own
 * circular shape + pulse but already follows the same darken-on-hover rule.
 */

.cjw-header__wa,
.cjw-footer__wa-btn,
.cjw-btn--whatsapp {
    background: var(--cjw-color-wa, #25D366);
    border-color: var(--cjw-color-wa, #25D366);
    color: #fff;
    text-decoration: none;
    transition: background var(--cjw-transition-fast),
                border-color var(--cjw-transition-fast),
                transform var(--cjw-transition-fast);
}

.cjw-header__wa:hover,
.cjw-header__wa:focus-visible,
.cjw-footer__wa-btn:hover,
.cjw-footer__wa-btn:focus-visible,
.cjw-btn--whatsapp:hover,
.cjw-btn--whatsapp:focus-visible {
    background: var(--cjw-color-wa-dark, #1DA851);
    border-color: var(--cjw-color-wa-dark, #1DA851);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .cjw-header__wa,
    .cjw-footer__wa-btn,
    .cjw-btn--whatsapp {
        transition: background var(--cjw-transition-fast),
                    border-color var(--cjw-transition-fast);
    }
    .cjw-header__wa:hover,
    .cjw-footer__wa-btn:hover,
    .cjw-btn--whatsapp:hover {
        transform: none;
    }
}