/**
 * 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 — "cascata di rimappatura"
 * ----------------------------------------------
 * Per non esplodere in 6 selettori (3 stili × 2 colori), il blocco usa due
 * livelli di CSS variables:
 *
 * 1) Token PUBBLICI del core (`tailwind/preset.css`):
 *    --bricks-cta-radius / --bricks-cta-padding-x / --bricks-cta-padding-y
 *    --bricks-cta-primary-text / --bricks-cta-primary-bg-hover / --bricks-cta-primary-text-hover
 *    --bricks-cta-secondary-text / --bricks-cta-secondary-bg-hover / --bricks-cta-secondary-text-hover
 *    Sovrascrivibili dal tema cliente nel proprio @theme.
 *
 * 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 (= colore brand/accent dell'asse colore)
 *    --bricks-cta--color-contrast (= contrasto del colore brand/accent)
 *
 * Le proprietà CSS effettive di `.bricks-cta` puntano SEMPRE alle variabili
 * "ruolo". I modifier `.bricks-cta--{style}` e `.bricks-cta--{color}`
 * riassegnano queste variabili. Risultato: una sola dichiarazione di
 * background/color/border, sei combinazioni visive.
 *
 * 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.
 */

/* ---- Base ---------------------------------------------------------------- */
/* Default "colore" = brand (sovrascrivibile da .bricks-cta--accent). */
.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 --accent e --text rimappano SOLO le variabili "colore base /
   contrasto": tutto il resto (text/bg/border per stato) deriva da queste via
   cascata. Pattern: "il colore scelto diventa la sostanza del CTA, il suo
   contrasto è il testo che ci sta sopra". */
.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). */
.bricks-cta--custom {
    --bricks-cta--color-base: var(--bricks-cta-custom-color, currentColor);
}

/* ---- Asse stile: primary (default) --------------------------------------- */
/* Primary = pieno. Bg = colore base; testo = token core "primary-text"
   (default --color-brand-contrast). In hover bg → token "primary-bg-hover"
   (default --color-text scuro), testo → token "primary-text-hover". */
.bricks-cta--primary {
    --bricks-cta--bg: var(--bricks-cta--color-base);
    --bricks-cta--bg-hover: var(--bricks-cta-primary-bg-hover);
    --bricks-cta--border: var(--bricks-cta--color-base);
    --bricks-cta--text: var(--bricks-cta-primary-text);
    --bricks-cta--text-hover: var(--bricks-cta-primary-text-hover);
}

/* ---- Asse stile: secondary (outline) ------------------------------------- */
/* Secondary = outline. Bg trasparente; bordo + testo = token "secondary-text"
   (default --color-brand). In hover si "riempie" (bg → token "secondary-bg-hover",
   testo → token "secondary-text-hover"). */
.bricks-cta--secondary {
    --bricks-cta--bg: transparent;
    --bricks-cta--bg-hover: var(--bricks-cta-secondary-bg-hover);
    --bricks-cta--border: var(--bricks-cta-secondary-text);
    --bricks-cta--text: var(--bricks-cta-secondary-text);
    --bricks-cta--text-hover: var(--bricks-cta-secondary-text-hover);
}

/* ---- Asse stile: ghost (solo testo) -------------------------------------- */
/* Ghost = solo testo. Nessun bg, nessun bordo nello stato base. Testo = colore
   base brand/accent. In hover compare il bg pieno del colore base, con testo
   in contrasto: stesso pattern visivo di primary, ma "rivelato" all'interazione.
   Niente token dedicati: ghost è la variante "minimale", ricalca primary in
   hover per coerenza visiva. */
.bricks-cta--ghost {
    --bricks-cta--bg: transparent;
    --bricks-cta--bg-hover: var(--bricks-cta--color-base);
    --bricks-cta--border: transparent;
    --bricks-cta--text: var(--bricks-cta--color-base);
    --bricks-cta--text-hover: var(--bricks-cta--color-contrast);
}

/* ---- Combinazione: text + primary — "scambio bg ↔ testo" in hover ------- */
/* Eccezione cosciente: per il colore `text`, la variante `primary` in :hover
   inverte bg e testo invece di passare al token "primary-bg-hover" comune
   (che default a --color-text e darebbe "hover invisibile" — bg già scuro
   diventerebbe... ancora scuro). Lo "scambio" è quello che il redattore si
   aspetta: il CTA scuro su bg chiaro diventa chiaro su bg scuro al passaggio
   del mouse. Resta tutto in cascata: --color-base / --color-contrast sono
   già impostati da `.bricks-cta--text`.
   Specificity 0,2,0 vince su `.bricks-cta--primary` (0,1,0) e sul base. */
.bricks-cta--text.bricks-cta--primary {
    --bricks-cta--bg-hover: var(--bricks-cta--color-contrast);
    --bricks-cta--text-hover: var(--bricks-cta--color-base);
}

/* ---- 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;
}