/* =============================================================
   base.css — Reset locali, body, typography globale
   Precondition: tokens.css caricato prima
   ============================================================= */

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

html,
body {
    margin: 0;
    padding: 0;
}

/* Reset list-style su tutte le UL/OL — i componenti che vogliono bullets
   li dichiarano esplicitamente (es. articolo-editoriale __card ul,ol). */
ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    /* Background uniforme su html — evita "banda bianca" dietro la scrollbar
       verticale (Windows/Chrome) dove l'html default era bianco mentre body
       aveva bg colorato. Allineato al frozen: html, body { background: ... } */
    background: var(--bg-page);
    /* overflow-x clip anche su html: il body{overflow-x:clip} non basta
       perché alcuni browser calcolano lo scrollWidth dell'html in base ai
       descendant box overflow nonostante il body lo clipi. Senza questo,
       body.scrollWidth può eccedere clientWidth e mostrare una banda
       bianca a destra in render iniziale.
       Usiamo `clip` invece di `hidden` perché `hidden` crea un nuovo
       containing block che intrappola gli sticky descendenti (la rail
       sticky delle pagine guide); `clip` ha lo stesso effetto anti-banding
       ma non rompe `position: sticky`. Baseline 2024 (Chrome 90+, Safari
       16+, Firefox 102+). */
    overflow-x: clip;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--text-dark);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* width 100% (non 100vw — 100vw include scrollbar gutter su Win/Chrome,
       causando 17px di banda bianca a destra). */
    width: 100%;
    /* Previene overflow orizzontale accidentale di block alignfull o
       hero-bg (background-size: cover può eccedere viewport). `clip` invece
       di `hidden` per non rompere `position: sticky` descendant (vedi html
       sopra per dettaglio). */
    overflow-x: clip;
}

/* ============================================================
   .alignfull / .alignwide: gestione block Gutenberg edge-to-edge.
   Senza queste regole, i block emessi con classe alignfull
   restano confinati alla larghezza del parent (max-width container)
   creando bordi laterali visibili (banda bianca).
   ============================================================ */
.alignfull {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}
.alignwide {
    max-width: var(--content-max, 1680px);
    margin-left: auto;
    margin-right: auto;
}

/* Sticky footer pattern: main riempie lo spazio rimanente, footer sta in basso */
main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.site-footer {
    flex-shrink: 0;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
}

/* ============================================================
   Gutenberg core/button — brand override
   `has-*-background-color` di WP usa !important: serve !important
   per vincere a prescindere da palette/preset usato in editor.
   ============================================================ */
.wp-block-button__link,
.wp-block-button__link.wp-element-button {
    background-color: var(--blue-header) !important;
    color: var(--white) !important;
    font-weight: 600;
    transition: background-color var(--dur-base) var(--ease-default);
}
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-block-button__link.wp-element-button:hover,
.wp-block-button__link.wp-element-button:focus {
    background-color: var(--blue-hover) !important;
    color: var(--white) !important;
}

/* h3 globale: blu brand (i block che vogliono diversamente
   sovrascrivono con selettore scoped più specifico) */
h3 {
    color: var(--blue-header);
}

/* ============================================================
   Gravity Forms — label/legend bianchi (form su sfondo blu).
   Placeholder + valori input mantengono il default Gravity.
   Gravity carica CSS con specificity alta → !important necessario.
   Coperti: legend, label main, sub-label (Giorno/Mese/Anno),
   inline label (radio choices), required legend + asterisco.
   ============================================================ */
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label,
.gform_wrapper .gform-field-label,
.gform_wrapper .gform_required_legend,
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required_asterisk {
    color: var(--white) !important;
}

/* Focus visibility globale */
button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}