/* =============================================================================
   BASE — reset minimale + tipografia base (Inter ovunque)
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    font-family: var(--cp-font);
    font-size: var(--cp-fs-body);
    line-height: var(--cp-lh-normal);
    letter-spacing: var(--cp-tracking-body);
    color: var(--cp-text);
    background-color: var(--cp-bg);
    font-weight: var(--cp-fw-body);
}

img, video, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--cp-t-fast);
}
a:hover { color: var(--cp-accent); }

/* Link "immersi nel testo": colore/stile pilotabili dal pannello "Stile".
   Scope: link dentro paragrafi/liste/heading del contenuto; esclude i bottoni.
   Default = comportamento attuale (eredita colore, hover accento). */
main :is(p, li, h1, h2, h3, h4, h5, h6) a:not([class*="cp-btn"]),
article :is(p, li, h1, h2, h3, h4, h5, h6) a:not([class*="cp-btn"]),
.cp-block-freeform__content a:not([class*="cp-btn"]) {
    color:           var(--cp-link-color, inherit);
    font-weight:     var(--cp-link-fw, inherit);
    font-style:      var(--cp-link-fst, inherit);
    text-decoration: var(--cp-link-td, none);
}
main :is(p, li, h1, h2, h3, h4, h5, h6) a:not([class*="cp-btn"]):hover,
article :is(p, li, h1, h2, h3, h4, h5, h6) a:not([class*="cp-btn"]):hover,
.cp-block-freeform__content a:not([class*="cp-btn"]):hover {
    color: var(--cp-link-color-hover, var(--cp-accent));
}

button {
    font: inherit;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
}

h1, h2, h3, h4, h5, h6, p, ul, ol {
    margin: 0;
    padding: 0;
}

ul, ol { list-style: none; }

/* ---------- TIPOGRAFIA BASE PER ELEMENTO (pilotata dal pannello "Stile") ----------
   Ogni proprietà legge una variabile --cp-{el}-* impostabile dal pannello, con
   fallback al comportamento attuale:
     - font-size  → token di scala del tema (default sensato anche per heading "nudi");
     - peso/interlinea/spaziatura → 'inherit'/'normal' = nessuna regressione se il
       pannello è vuoto (i titoli/card con stile dedicato restano identici).
   Le classi brandizzate (.cp-display/.cp-h2/.cp-h3/.cp-claim/.cp-body) qui sotto
   leggono le STESSE variabili, così il pannello pilota anche hero/claim/titoli. */
h1 {
    font-family:     var(--cp-h1-ff, var(--cp-font));
    font-size:       var(--cp-h1-fs, var(--cp-fs-display));
    font-weight:     var(--cp-h1-fw, inherit);
    font-style:      var(--cp-h1-fst, normal);
    text-decoration: var(--cp-h1-td, none);
    line-height:     var(--cp-h1-lh, inherit);
    letter-spacing:  var(--cp-h1-ls, inherit);
    word-spacing:    var(--cp-h1-ws, normal);
}
h2 {
    font-family:     var(--cp-h2-ff, var(--cp-font));
    font-size:       var(--cp-h2-fs, var(--cp-fs-claim));
    font-weight:     var(--cp-h2-fw, inherit);
    font-style:      var(--cp-h2-fst, normal);
    text-decoration: var(--cp-h2-td, none);
    line-height:     var(--cp-h2-lh, inherit);
    letter-spacing:  var(--cp-h2-ls, inherit);
    word-spacing:    var(--cp-h2-ws, normal);
}
h3 {
    font-family:     var(--cp-h3-ff, var(--cp-font));
    font-size:       var(--cp-h3-fs, var(--cp-fs-h3));
    font-weight:     var(--cp-h3-fw, inherit);
    font-style:      var(--cp-h3-fst, normal);
    text-decoration: var(--cp-h3-td, none);
    line-height:     var(--cp-h3-lh, inherit);
    letter-spacing:  var(--cp-h3-ls, inherit);
    word-spacing:    var(--cp-h3-ws, normal);
}
h4 {
    font-family:     var(--cp-h4-ff, var(--cp-font));
    font-size:       var(--cp-h4-fs, 20px);
    font-weight:     var(--cp-h4-fw, inherit);
    font-style:      var(--cp-h4-fst, normal);
    text-decoration: var(--cp-h4-td, none);
    line-height:     var(--cp-h4-lh, inherit);
    letter-spacing:  var(--cp-h4-ls, inherit);
    word-spacing:    var(--cp-h4-ws, normal);
}
h5 {
    font-family:     var(--cp-h5-ff, var(--cp-font));
    font-size:       var(--cp-h5-fs, 17px);
    font-weight:     var(--cp-h5-fw, inherit);
    font-style:      var(--cp-h5-fst, normal);
    text-decoration: var(--cp-h5-td, none);
    line-height:     var(--cp-h5-lh, inherit);
    letter-spacing:  var(--cp-h5-ls, inherit);
    word-spacing:    var(--cp-h5-ws, normal);
}
h6 {
    font-family:     var(--cp-h6-ff, var(--cp-font));
    font-size:       var(--cp-h6-fs, 15px);
    font-weight:     var(--cp-h6-fw, inherit);
    font-style:      var(--cp-h6-fst, normal);
    text-decoration: var(--cp-h6-td, none);
    line-height:     var(--cp-h6-lh, inherit);
    letter-spacing:  var(--cp-h6-ls, inherit);
    word-spacing:    var(--cp-h6-ws, normal);
}
p {
    font-family:     var(--cp-p-ff, var(--cp-font));
    font-size:       var(--cp-p-fs, var(--cp-fs-body));
    font-weight:     var(--cp-p-fw, inherit);
    font-style:      var(--cp-p-fst, normal);
    text-decoration: var(--cp-p-td, none);
    line-height:     var(--cp-p-lh, inherit);
    letter-spacing:  var(--cp-p-ls, inherit);
    word-spacing:    var(--cp-p-ws, normal);
}

/* ---------- KEYWORD ARANCIONE: <strong> dentro contenuto editoriale ----------
   Regola globale: ogni <strong> dentro <main> o <article> usa l'accent
   + peso XBold. Esclude header/footer/admin (i loro strong restano neutri).
   Override possibile col modifier .cp-keyword-off su un blocco specifico. */
main strong,
article strong,
.cp-block-hero__paragraph strong,
.cp-block-cta__text strong,
.cp-block-banner__text strong,
.cp-block-img-text__content strong,
.cp-block-freeform__content strong {
    color: var(--cp-strong-color, var(--cp-accent));
    font-weight: var(--cp-strong-fw, var(--cp-fw-xbold));
    font-style: var(--cp-strong-fst, inherit);
    text-decoration: var(--cp-strong-td, none);
}
.cp-keyword-off strong {
    color: inherit;
    font-weight: var(--cp-fw-bold);
}

/* La keyword arancione NON deve sovrascrivere un colore scelto a mano.
   Se il blocco (o un suo antenato) ha un COLORE DI TESTO esplicito
   (classe has-text-color — es. card con testo bianco su sfondo arancione),
   il grassetto eredita quel colore invece di forzare l'accento.
   Se invece NON è stato scelto alcun colore, resta la keyword arancione.
   Posto DOPO la regola keyword così vince a parità di specificità. */
.has-text-color strong {
    color: inherit;
}

/* ---------- TYPOGRAPHY CLASSES ---------- */

/* Le classi brandizzate leggono le variabili del pannello (--cp-{el}-*) con
   fallback ai token attuali: a pannello vuoto rendono ESATTAMENTE come prima.
   .cp-display→H1, .cp-h2 e .cp-claim→H2, .cp-h3→H3, .cp-body→Paragrafo. */
.cp-display,
h1.cp-display {
    font-family:     var(--cp-h1-ff, var(--cp-font));
    font-weight:     var(--cp-h1-fw, var(--cp-fw-xbold));
    font-size:       var(--cp-h1-fs, var(--cp-fs-display));
    font-style:      var(--cp-h1-fst, normal);
    text-decoration: var(--cp-h1-td, none);
    letter-spacing:  var(--cp-h1-ls, var(--cp-tracking-display));
    line-height:     var(--cp-h1-lh, var(--cp-lh-tight));
    word-spacing:    var(--cp-h1-ws, normal);
}

.cp-h2 {
    font-family:     var(--cp-h2-ff, var(--cp-font));
    font-weight:     var(--cp-h2-fw, var(--cp-fw-xbold));
    font-size:       var(--cp-h2-fs, var(--cp-fs-claim));
    font-style:      var(--cp-h2-fst, normal);
    text-decoration: var(--cp-h2-td, none);
    letter-spacing:  var(--cp-h2-ls, var(--cp-tracking-claim));
    line-height:     var(--cp-h2-lh, var(--cp-lh-tight));
    word-spacing:    var(--cp-h2-ws, normal);
}

.cp-h3 {
    font-family:     var(--cp-h3-ff, var(--cp-font));
    font-weight:     var(--cp-h3-fw, var(--cp-fw-bold));
    font-size:       var(--cp-h3-fs, var(--cp-fs-h3));
    font-style:      var(--cp-h3-fst, normal);
    text-decoration: var(--cp-h3-td, none);
    letter-spacing:  var(--cp-h3-ls, var(--cp-tracking-h3));
    line-height:     var(--cp-h3-lh, var(--cp-lh-tight));
    word-spacing:    var(--cp-h3-ws, normal);
}

.cp-claim {
    font-family:     var(--cp-h2-ff, var(--cp-font));
    font-weight:     var(--cp-h2-fw, var(--cp-fw-xbold));
    font-size:       var(--cp-h2-fs, var(--cp-fs-claim));
    font-style:      var(--cp-h2-fst, normal);
    text-decoration: var(--cp-h2-td, none);
    letter-spacing:  var(--cp-h2-ls, var(--cp-tracking-claim));
    line-height:     var(--cp-h2-lh, var(--cp-lh-tight));
    word-spacing:    var(--cp-h2-ws, normal);
}
.cp-claim .cp-muted,
.cp-claim em { color: var(--cp-muted); font-style: normal; }

.cp-body {
    font-family:     var(--cp-p-ff, var(--cp-font));
    font-weight:     var(--cp-p-fw, var(--cp-fw-medium));
    font-size:       var(--cp-p-fs, var(--cp-fs-body));
    font-style:      var(--cp-p-fst, normal);
    text-decoration: var(--cp-p-td, none);
    line-height:     var(--cp-p-lh, var(--cp-lh-normal));
    letter-spacing:  var(--cp-p-ls, var(--cp-tracking-body));
    word-spacing:    var(--cp-p-ws, normal);
}

.cp-ui {
    font-family: var(--cp-font);
    font-weight: var(--cp-fw-medium);
    font-size: var(--cp-fs-ui);
    letter-spacing: var(--cp-tracking-ui);
}

.cp-keyword {
    color: var(--cp-accent);
    font-weight: var(--cp-fw-xbold);
}

/* ---------- LAYOUT ---------- */

.cp-container {
    width: 100%;
    max-width: var(--cp-content);
    margin: 0 auto;
    padding-inline: var(--cp-gutter);
}
@media (max-width: 900px) {
    .cp-container {
        padding-inline: var(--cp-gutter-mobile);
    }
}

.cp-section {
    padding-block: var(--cp-sp-12);
}
@media (max-width: 900px) {
    .cp-section {
        padding-block: var(--cp-sp-8);
    }
}

/* ---------- BUTTONS (radius 5px da Figma v2) ---------- */

/* Le variabili --cp-btn-* / --cp-btn2-* sono pilotabili dal pannello "Stile";
   se vuote restano gli stessi valori di prima (zero regressione). */
.cp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cp-sp-2);
    padding: var(--cp-btn-pad-y, var(--cp-sp-2)) var(--cp-btn-pad-x, var(--cp-sp-3));
    font-family: var(--cp-font);
    font-weight: var(--cp-btn-fw, var(--cp-fw-medium));
    font-size: var(--cp-btn-fs, var(--cp-fs-ui));
    letter-spacing: var(--cp-tracking-ui);
    line-height: var(--cp-lh-button);
    color: var(--cp-btn-text, var(--cp-cta-text));
    background-color: var(--cp-btn-bg, var(--cp-cta-bg));
    border: 1px solid var(--cp-btn-bg, var(--cp-cta-bg));
    border-radius: var(--cp-btn-radius, var(--cp-radius-md));
    text-align: center;
    transition: background-color var(--cp-t-fast), color var(--cp-t-fast), transform var(--cp-t-fast);
}
.cp-btn:hover,
.cp-btn:focus-visible {
    background-color: var(--cp-btn-bg-hover, var(--cp-black));
    color: var(--cp-btn-text-hover, var(--cp-white));
    border-color: var(--cp-btn-bg-hover, var(--cp-black));
}
.cp-btn:disabled,
.cp-btn[disabled],
.cp-btn.is-disabled {
    /* default = come lo stato normale (oggi i bottoni disabilitati non hanno stile dedicato) */
    background-color: var(--cp-btn-bg-disabled, var(--cp-btn-bg, var(--cp-cta-bg)));
    color: var(--cp-btn-text-disabled, var(--cp-btn-text, var(--cp-cta-text)));
    border-color: var(--cp-btn-bg-disabled, var(--cp-btn-bg, var(--cp-cta-bg)));
    cursor: not-allowed;
}

.cp-btn--dark {
    background-color: var(--cp-btn2-bg, var(--cp-black));
    color: var(--cp-btn2-text, var(--cp-white));
    border-color: var(--cp-btn2-bg, var(--cp-black));
}
.cp-btn--dark:hover { background-color: var(--cp-btn2-bg-hover, var(--cp-accent)); color: var(--cp-btn2-text-hover, var(--cp-white)); border-color: var(--cp-btn2-bg-hover, var(--cp-accent)); }
.cp-btn--dark:disabled,
.cp-btn--dark[disabled],
.cp-btn--dark.is-disabled {
    background-color: var(--cp-btn2-bg-disabled, var(--cp-btn2-bg, var(--cp-black)));
    color: var(--cp-btn2-text-disabled, var(--cp-btn2-text, var(--cp-white)));
    border-color: var(--cp-btn2-bg-disabled, var(--cp-btn2-bg, var(--cp-black)));
    cursor: not-allowed;
}

.cp-btn--light {
    background-color: var(--cp-white);
    color: var(--cp-accent);
    border-color: var(--cp-white);
}

.cp-btn--outline-accent {
    background-color: transparent;
    color: var(--cp-accent);
    border-color: var(--cp-accent);
}
.cp-btn--outline-accent:hover { background-color: var(--cp-accent); color: var(--cp-white); }

/* ---------- ACCESSIBILITY ---------- */

:focus-visible {
    outline: 2px solid var(--cp-accent);
    outline-offset: 3px;
}

.cp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cp-skip-link {
    position: absolute;
    left: var(--cp-sp-3);
    top: var(--cp-sp-3);
    padding: var(--cp-sp-2) var(--cp-sp-3);
    background: var(--cp-black);
    color: var(--cp-white);
    transform: translateY(-200%);
    z-index: var(--cp-z-modal);
}
.cp-skip-link:focus { transform: translateY(0); }