/**
 * Stile componente del blocco `bricks/cta`.
 *
 * Caricato in front solo sulle pagine che contengono il blocco (vedi
 * `render_block` in block.php). Non passa per la build Tailwind del tema
 * cliente: è CSS componente del core, enqueuato come `assets/frontend/header.css`.
 *
 * SCHEMA DI VARIABILI — matrice + cascata di rimappatura
 * ------------------------------------------------------
 * Due livelli di CSS variables:
 *
 * 1) Token PUBBLICI del core (`tailwind/preset.css`):
 *    - geometria: --bricks-cta-radius / --bricks-cta-padding-x / --bricks-cta-padding-y
 *    - MATRICE colori: --bricks-cta-{stile}-{colore}-{ruolo}, un gruppo per
 *      ogni combinazione stile (primary/secondary/ghost) × colore
 *      (brand/accent/text). Es. --bricks-cta-secondary-accent-bg-hover.
 *    Sovrascrivibili dal tema cliente nel proprio @theme; i default sono
 *    agganciati alla palette semantica (--color-*).
 *
 * 2) Variabili "ruolo" INTERNE al componente (questo file):
 *    --bricks-cta--text / --bricks-cta--bg / --bricks-cta--border
 *    --bricks-cta--text-hover / --bricks-cta--bg-hover
 *    --bricks-cta--color-base / --bricks-cta--color-contrast
 *
 * Le proprietà CSS effettive di `.bricks-cta` puntano SEMPRE alle variabili
 * "ruolo". Per i tre colori canonici, i selettori COMBO
 * `.bricks-cta--{stile}.bricks-cta--{colore}` (specificity 0,2,0) mappano i
 * ruoli sui token della matrice. Per gli assi SENZA matrice — `custom`
 * (color picker) e gli slug aggiunti via filtro `bricks/cta/color_choices` —
 * valgono i modifier di stile `.bricks-cta--{stile}` (0,1,0), che DERIVANO
 * i ruoli da --bricks-cta--color-base / --color-contrast.
 *
 * SEMVER — selettori CSS pubblici (vedi conventions.md §6):
 * - .bricks-cta
 * - .bricks-cta--primary / .bricks-cta--secondary / .bricks-cta--ghost
 * - .bricks-cta--brand / .bricks-cta--accent / .bricks-cta--text
 * - .bricks-cta.is-disabled
 * Rinominarli è MAJOR. Idem i token della matrice.
 */

/* ---- Base ---------------------------------------------------------------- */
/* Default "colore" = brand (sovrascrivibile dai modifier colore). color-base/
   color-contrast servono a: outline di :focus-visible, derivazione per gli
   assi custom/filtro. */
.bricks-cta {
    --bricks-cta--bg: transparent;
    --bricks-cta--bg-hover: transparent;
    --bricks-cta--border: transparent;
    --bricks-cta--color-base: var(--color-brand);
    --bricks-cta--color-contrast: var(--color-brand-contrast);
    --bricks-cta--text: var(--bricks-cta--color-base);
    --bricks-cta--text-hover: var(--bricks-cta--color-base);

    background-color: var(--bricks-cta--bg);
    border: 1px solid var(--bricks-cta--border);
    border-radius: var(--bricks-cta-radius);
    color: var(--bricks-cta--text);
    cursor: pointer;
    display: inline-block;
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    padding: var(--bricks-cta-padding-y) var(--bricks-cta-padding-x);
    text-align: center;
    text-decoration: none;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.bricks-cta:hover,
.bricks-cta:focus-visible {
    background-color: var(--bricks-cta--bg-hover);
    border-color: var(--bricks-cta--bg-hover);
    color: var(--bricks-cta--text-hover);
}

/* Focus visible esplicito: il browser default è spesso un outline tenue
   sul `<a>`, su un bg pieno può confondersi. Usiamo lo stesso pattern di
   `hover` + outline ring per evitare WCAG 2.4.7. */
.bricks-cta:focus-visible {
    outline: 2px solid var(--bricks-cta--color-base);
    outline-offset: 2px;
}

/* ---- Asse colore: brand (default) / accent / text ----------------------- */
/* I modifier rimappano SOLO color-base / color-contrast: servono all'outline
   di focus e alla derivazione degli stili per gli assi senza matrice. I
   colori effettivi delle 9 combinazioni canoniche vengono dai selettori
   combo più sotto. */
.bricks-cta--accent {
    --bricks-cta--color-base: var(--color-accent);
    --bricks-cta--color-contrast: var(--color-brand-contrast);
}

.bricks-cta--text {
    --bricks-cta--color-base: var(--color-text);
    --bricks-cta--color-contrast: var(--color-brand-contrast);
}

/* ---- Asse colore: custom (color picker) ---------------------------------- */
/* Il colore viene iniettato inline come --bricks-cta-custom-color dal
   template PHP. --bricks-cta--color-contrast non è sovrascrivibile via picker:
   resta quello del tema (brand-contrast). Nessun token in matrice: i ruoli
   derivano dai modifier di stile qui sotto. */
.bricks-cta--custom {
    --bricks-cta--color-base: var(--bricks-cta-custom-color, currentColor);
}

/* ---- Asse stile: derivazione da color-base (custom + slug via filtro) ---- */
/* Questi modifier (0,1,0) definiscono il comportamento di ciascuno stile in
   funzione del solo colore base + contrasto. Valgono per `custom` e per gli
   slug aggiunti via `bricks/cta/color_choices` (che impostano color-base
   nella propria classe BEM). Per brand/accent/text vengono scavalcati dai
   selettori combo (0,2,0). */
.bricks-cta--primary {
    --bricks-cta--bg: var(--bricks-cta--color-base);
    --bricks-cta--bg-hover: var(--color-text);
    --bricks-cta--border: var(--bricks-cta--color-base);
    --bricks-cta--text: var(--bricks-cta--color-contrast);
    --bricks-cta--text-hover: var(--bricks-cta--color-contrast);
}

.bricks-cta--secondary {
    --bricks-cta--bg: transparent;
    --bricks-cta--bg-hover: var(--bricks-cta--color-base);
    --bricks-cta--border: var(--bricks-cta--color-base);
    --bricks-cta--text: var(--bricks-cta--color-base);
    --bricks-cta--text-hover: var(--bricks-cta--color-contrast);
}

/* Ghost: il bg resta trasparente anche in hover; cambia solo il colore del
   testo, scurito dal colore base via relative color syntax (funziona anche
   con l'hex inline dell'asse custom). */
.bricks-cta--ghost {
    --bricks-cta--bg: transparent;
    --bricks-cta--bg-hover: transparent;
    --bricks-cta--border: transparent;
    --bricks-cta--text: var(--bricks-cta--color-base);
    --bricks-cta--text-hover: oklch(from var(--bricks-cta--color-base) calc(l - 0.1) c h);
}

/* ---- Matrice: primary × {brand, accent, text} ----------------------------- */
.bricks-cta--primary.bricks-cta--brand {
    --bricks-cta--bg: var(--bricks-cta-primary-brand-bg);
    --bricks-cta--bg-hover: var(--bricks-cta-primary-brand-bg-hover);
    --bricks-cta--border: var(--bricks-cta-primary-brand-bg);
    --bricks-cta--text: var(--bricks-cta-primary-brand-text);
    --bricks-cta--text-hover: var(--bricks-cta-primary-brand-text-hover);
}

.bricks-cta--primary.bricks-cta--accent {
    --bricks-cta--bg: var(--bricks-cta-primary-accent-bg);
    --bricks-cta--bg-hover: var(--bricks-cta-primary-accent-bg-hover);
    --bricks-cta--border: var(--bricks-cta-primary-accent-bg);
    --bricks-cta--text: var(--bricks-cta-primary-accent-text);
    --bricks-cta--text-hover: var(--bricks-cta-primary-accent-text-hover);
}

/* primary × text: i default dei token realizzano lo "scambio" bg ↔ testo in
   hover (bg base già scuro → hover chiaro con testo scuro). Non serve più un
   selettore-eccezione: è solo il default di due token, sovrascrivibile dal
   tema come qualsiasi altra cella della matrice. */
.bricks-cta--primary.bricks-cta--text {
    --bricks-cta--bg: var(--bricks-cta-primary-text-bg);
    --bricks-cta--bg-hover: var(--bricks-cta-primary-text-bg-hover);
    --bricks-cta--border: var(--bricks-cta-primary-text-bg);
    --bricks-cta--text: var(--bricks-cta-primary-text-text);
    --bricks-cta--text-hover: var(--bricks-cta-primary-text-text-hover);
}

/* ---- Matrice: secondary × {brand, accent, text} --------------------------- */
/* Il bordo base usa il token *-text (outline dello stesso colore del testo). */
.bricks-cta--secondary.bricks-cta--brand {
    --bricks-cta--bg: transparent;
    --bricks-cta--bg-hover: var(--bricks-cta-secondary-brand-bg-hover);
    --bricks-cta--border: var(--bricks-cta-secondary-brand-text);
    --bricks-cta--text: var(--bricks-cta-secondary-brand-text);
    --bricks-cta--text-hover: var(--bricks-cta-secondary-brand-text-hover);
}

.bricks-cta--secondary.bricks-cta--accent {
    --bricks-cta--bg: transparent;
    --bricks-cta--bg-hover: var(--bricks-cta-secondary-accent-bg-hover);
    --bricks-cta--border: var(--bricks-cta-secondary-accent-text);
    --bricks-cta--text: var(--bricks-cta-secondary-accent-text);
    --bricks-cta--text-hover: var(--bricks-cta-secondary-accent-text-hover);
}

.bricks-cta--secondary.bricks-cta--text {
    --bricks-cta--bg: transparent;
    --bricks-cta--bg-hover: var(--bricks-cta-secondary-text-bg-hover);
    --bricks-cta--border: var(--bricks-cta-secondary-text-text);
    --bricks-cta--text: var(--bricks-cta-secondary-text-text);
    --bricks-cta--text-hover: var(--bricks-cta-secondary-text-text-hover);
}

/* ---- Matrice: ghost × {brand, accent, text} ------------------------------- */
.bricks-cta--ghost.bricks-cta--brand {
    --bricks-cta--bg: transparent;
    --bricks-cta--bg-hover: var(--bricks-cta-ghost-brand-bg-hover);
    --bricks-cta--border: transparent;
    --bricks-cta--text: var(--bricks-cta-ghost-brand-text);
    --bricks-cta--text-hover: var(--bricks-cta-ghost-brand-text-hover);
}

.bricks-cta--ghost.bricks-cta--accent {
    --bricks-cta--bg: transparent;
    --bricks-cta--bg-hover: var(--bricks-cta-ghost-accent-bg-hover);
    --bricks-cta--border: transparent;
    --bricks-cta--text: var(--bricks-cta-ghost-accent-text);
    --bricks-cta--text-hover: var(--bricks-cta-ghost-accent-text-hover);
}

.bricks-cta--ghost.bricks-cta--text {
    --bricks-cta--bg: transparent;
    --bricks-cta--bg-hover: var(--bricks-cta-ghost-text-bg-hover);
    --bricks-cta--border: transparent;
    --bricks-cta--text: var(--bricks-cta-ghost-text-text);
    --bricks-cta--text-hover: var(--bricks-cta-ghost-text-text-hover);
}

/* ---- Stato disabilitato -------------------------------------------------- */
/* Emesso dal template quando il campo `cta_disabled` è ON: classe
   `is-disabled` + attributo `aria-disabled="true"` + `tabindex="-1"`. Il
   link resta nel DOM ma diventa non-interagibile a tastiera/mouse.
   `pointer-events: none` rimuove il :hover; opacity comunica lo stato. */
.bricks-cta.is-disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}