/*
Theme Name: ItaliaWP3 Child Theme
Theme URI: http://italiawp.borisamico.it
Author: Boris Amico
Author URI: http://borisamico.it
Description: Tema child di ItaliaWP2 utilizzabile per la customizzazione.
Version: 1.0.0
License: GNU AFFERO GENERAL PUBLIC LICENSE v3 or later
License URI: https://www.gnu.org/licenses/agpl-3.0.en.html
Template: italiawp3
Text Domain: italiawp3-child
*/

/* =========================================================================
   HERO AREA
   Gestita da "Aspetto > Personalizza > Hero". Il testo sta nella fascia alta,
   dove la sfumatura e' piena: serve a garantire il contrasto minimo (WCAG
   1.4.3) anche su foto o video, dove la luminosita' cambia da un fotogramma
   all'altro. Verso il basso la sfumatura si apre e la foto riemerge.
   ========================================================================= */

.cbvo-hero {
    position: relative;
    display: flex;
    align-items: flex-start;   /* il testo sta in alto, dove la sfumatura e' piena */
    min-height: 66vh;
    padding: 2.5rem 0 3rem;
    overflow: hidden;
    background-color: #17324d;   /* colore pieno finche' lo sfondo non carica */
}

.cbvo-hero-sfondo,
.cbvo-hero-sfumatura {
    position: absolute;
    inset: 0;
}

.cbvo-hero-sfondo {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.cbvo-hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cbvo-hero-sfumatura {
    background: var(--cbvo-sfumatura, linear-gradient(180deg, #0066cc 0%, rgba(0, 102, 204, 0) 100%));
}

.cbvo-hero .container {
    position: relative;   /* sopra sfumatura e sfondo */
    z-index: 1;
    padding-bottom: 2rem;
}

/* La hero e' piu' larga del resto del sito: il contenuto testuale resta
   comunque incolonnato al centro, mentre i riquadri sfruttano la larghezza.
   Bootstrap Italia ferma .container a 1320px, qui si arriva a 1560px. */
.cbvo-hero .cbvo-hero-contenitore {
    max-width: 1560px;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Titolo e descrizione centrati nella fascia alta della sfumatura.
   La classe it-text-centered sul contenitore e' quella prevista dal design
   system; questa regola la rafforza sul nostro blocco. */
.cbvo-hero-testata,
.cbvo-hero .it-hero-text-wrapper {
    text-align: center;
}

/* Il design system mette 3rem di spazio sopra il testo della hero: qui il
   titolo sta piu' in alto e la colonna di testo si stringe, cosi' le righe
   restano corte anche su schermi molto larghi. */
.cbvo-hero .it-hero-text-wrapper {
    padding: 1rem 0 0.5rem;
}

@media (min-width: 992px) {
    .cbvo-hero .it-hero-text-wrapper {
        padding: 36px 0;
        max-width: 50vw;
        margin-left: auto;
        margin-right: auto;
    }
}

.cbvo-hero-titolo {
    color: #fff;
    font-size: clamp(1.7rem, 3.4vw, 2.7rem);
    font-weight: 700;
    line-height: 1.2;
    max-width: 60rem;
    margin: 0 auto 1rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.cbvo-hero-testo {
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.55;
    max-width: 54rem;
    margin: 0 auto 1.5rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.cbvo-hero-azioni .btn {
    margin: 0 0.75rem 0.75rem 0;
}

/* Il bottone "outline" del tema e' pensato per fondo chiaro: sulla sfumatura
   non avrebbe contrasto sufficiente, quindi qui diventa bianco. */
.cbvo-hero-azioni .btn-outline-primary {
    color: #fff;
    border-color: #fff;
    background: transparent;
}

.cbvo-hero-azioni .btn-outline-primary:hover,
.cbvo-hero-azioni .btn-outline-primary:focus {
    color: #17324d;
    background: #fff;
    border-color: #fff;
}

/* -------------------------------------------------------------------------
   Riquadri di servizio sotto la descrizione.
   Sono schede bianche con testo scuro: il contrasto non dipende dalla
   fotografia sottostante, quindi restano leggibili anche dove la sfumatura
   si e' gia' aperta.
   ------------------------------------------------------------------------- */

/* Le colonne seguono il numero di riquadri effettivi: togliendone uno la
   griglia si richiude invece di lasciare una casella vuota. */
.cbvo-hero-riquadri {
    display: grid;
    grid-template-columns: repeat(var(--cbvo-riquadri, 5), 1fr);
    gap: 1rem;
    margin-top: 0;
    margin-bottom: 6rem;
}

.cbvo-hero-riquadro {
    border-radius: 6px;
    text-align: center;
    padding: 1rem 1.1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    font-size: 0.9rem;
    line-height: 1.45;
}

.cbvo-hero-riquadro-titolo {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.4rem;
    color: inherit;
}

/* I collegamenti prendono il colore del riquadro e restano sottolineati:
   cosi' il contrasto e' lo stesso del testo (verificato AAA) e si riconoscono
   senza dipendere dal colore, come chiede il criterio WCAG 1.4.1. */
.cbvo-hero-riquadro a {
    color: inherit;
    text-decoration: underline;
}

.cbvo-hero-riquadro a:hover {
    text-decoration: none;
}

.cbvo-hero-riquadro a:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

/* Colori dei riquadri: seguono la posizione, non il contenuto.
   Ogni accostamento e' verificato al livello AAA (rapporto >= 7:1):
   1 bianco   #ffffff / rosso #b40808   7,05
   2 azzurro  #13c5dd / nero            10,06
   3 lilla    #a3a3ff / nero             9,24
   4 verde    #a7b961 / nero             9,76
   5 giallo   #f3e658 / nero            16,27 */
.cbvo-hero-riquadro--1 { background: #fff;    color: #b40808; }
.cbvo-hero-riquadro--2 { background: #13c5dd; color: #000; }
.cbvo-hero-riquadro--3 { background: #a3a3ff; color: #000; }
.cbvo-hero-riquadro--4 { background: #a7b961; color: #000; }
.cbvo-hero-riquadro--5 { background: #f3e658; color: #000; }

.cbvo-hero-riquadro-testo p {
    margin: 0 0 0.4rem;
}

/* Elenco dei servizi dentro un riquadro: resta un <ul> per gli screen reader
   ("elenco di 4 elementi"), ma senza pallini ne' rientro, per non rompere
   l'allineamento centrato del riquadro. */
.cbvo-hero-elenco {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cbvo-hero-elenco li {
    margin-bottom: 0.3rem;
    line-height: 1.35;
}

.cbvo-hero-elenco li:last-child {
    margin-bottom: 0;
}

.cbvo-hero-riquadro-testo p:last-child {
    margin-bottom: 0;
}

@media (max-width: 1199px) {
    .cbvo-hero-riquadri {
        grid-template-columns: repeat(min(var(--cbvo-riquadri, 3), 3), 1fr);
    }
}

@media (max-width: 767px) {
    .cbvo-hero-riquadri {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479px) {
    .cbvo-hero-riquadri {
        grid-template-columns: 1fr;
    }
}

/* Comando per fermare l'animazione: obbligatorio quando lo sfondo si muove
   (WCAG 2.2.2). Sempre visibile e raggiungibile da tastiera. */
.cbvo-hero-pausa {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
    padding: 0.4rem 0.9rem;
    font-size: 0.875rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid #fff;
    border-radius: 4px;
    cursor: pointer;
}

.cbvo-hero-pausa:hover {
    background: #fff;
    color: #17324d;
}

.cbvo-hero-pausa:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Chi ha impostato "riduci animazioni" nel sistema operativo non vede il
   video in movimento: resta l'immagine di anteprima. */
@media (prefers-reduced-motion: reduce) {
    .cbvo-hero-video {
        display: none;
    }
}

@media (max-width: 768px) {
    .cbvo-hero {
        min-height: 45vh;
        padding: 3rem 0;
    }

    .cbvo-hero-testo {
        font-size: 1rem;
    }
}


/* =========================================================================
   SCORRIMENTO ORIZZONTALE (fasce "In evidenza" e "Siti di interesse")
   Comandi comuni: frecce e puntini. La barra di scorrimento nativa e' tolta
   perche' frecce e puntini la sostituiscono in modo piu' visibile; lo
   scorrimento resta possibile con rotellina, gesto e tastiera.
   ========================================================================= */

.cbvo-pista {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 1rem;         /* la scheda col focus non resta tagliata (2.4.11) */
    padding-bottom: 0.25rem;
    scrollbar-width: none;          /* Firefox */
}

.cbvo-pista::-webkit-scrollbar {
    display: none;                  /* Chrome, Safari */
}

.cbvo-pista:focus-visible {
    outline: 3px solid #003882;
    outline-offset: 4px;
}

.cbvo-scorrevole-comandi {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Alternativa a clic singolo al trascinamento (2.5.7), 44px (2.5.8) */
.cbvo-freccia {
    width: 44px;
    height: 44px;
    font-size: 1.6rem;
    line-height: 1;
    color: #003882;
    background: #fff;
    border: 2px solid #003882;      /* 11,12:1 sul bianco */
    border-radius: 50%;
    cursor: pointer;
}

.cbvo-freccia:hover:not(:disabled) {
    background: #003882;
    color: #fff;
}

.cbvo-freccia:focus-visible {
    outline: 3px solid #003882;
    outline-offset: 2px;
}

.cbvo-freccia:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Variante per le fasce a fondo blu */
.cbvo-freccia--chiara {
    color: #fff;
    background: transparent;
    border-color: #fff;
}

.cbvo-freccia--chiara:hover:not(:disabled) {
    background: #fff;
    color: #003882;
}

.cbvo-freccia--chiara:focus-visible {
    outline-color: #fff;
}

/* Puntini: uno per SCHERMATA, generati dal JavaScript. Il corrente si
   distingue per FORMA oltre che per colore (WCAG 1.4.1). L'area cliccabile
   e' 24px anche se il puntino e' piccolo (WCAG 2.5.8). */
.cbvo-puntini {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 0.75rem;
}

.cbvo-puntino {
    width: 24px;
    height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    cursor: pointer;
}

.cbvo-puntino span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #8996a7;            /* 3,01:1 sul bianco */
    transition: width 0.15s;
}

.cbvo-puntino[aria-current="true"] span {
    width: 26px;
    background: #003882;
}

.cbvo-puntino:focus-visible {
    outline: 3px solid #003882;
    outline-offset: 2px;
    border-radius: 4px;
}

.cbvo-puntini--chiari .cbvo-puntino span {
    background: rgba(255, 255, 255, 0.55);
}

.cbvo-puntini--chiari .cbvo-puntino[aria-current="true"] span {
    background: #fff;
}

.cbvo-puntini--chiari .cbvo-puntino:focus-visible {
    outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .cbvo-puntino span {
        transition: none;
    }
    .cbvo-pista {
        scroll-behavior: auto;
    }
}

/* =========================================================================
   FASCIA "IN EVIDENZA"
   Schede blu #003882 con testo e collegamenti bianchi (11,12:1, AAA).
   ========================================================================= */

#cbvo-evidenza {
    padding: 2.5rem 0 0.5rem;
    --cbvo-visibili: 1.15;          /* schede visibili insieme: l'ultima sbircia */
}

.cbvo-evidenza-box {
    flex: 0 0 calc((100% - (var(--cbvo-visibili) - 1) * 1rem) / var(--cbvo-visibili));
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    border: 1px solid #003882;
    border-radius: 6px;
    background: #003882;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
}

.cbvo-evidenza-box:hover,
.cbvo-evidenza-box:focus-visible {
    background: #002a63;
    border-color: #002a63;
    color: #fff;
}

.cbvo-evidenza-box:focus-visible {
    outline: 3px solid #003882;
    outline-offset: 2px;
}

.cbvo-evidenza-foto {
    display: block;
    height: 150px;
    background: #002a63;
}

.cbvo-evidenza-foto img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.cbvo-evidenza-corpo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    padding: 0.9rem 1rem 1rem;
}

.cbvo-evidenza-titolo {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.35;
}

.cbvo-evidenza-azione {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: #fff;
    text-decoration: underline;
}

@media (min-width: 768px) {
    #cbvo-evidenza { --cbvo-visibili: 2.2; }
}

@media (min-width: 1200px) {
    #cbvo-evidenza { --cbvo-visibili: 3.2; }
}

/* =========================================================================
   FASCIA "SITI DI INTERESSE"
   Loghi su fondo bianco con bordo blu, in scorrimento.
   I loghi sono ospitati sul nostro sito, non prelevati dai siti altrui.
   ========================================================================= */

#cbvo-siti {
    background: #fff;
    padding: 2.5rem 0 3rem;
    --cbvo-siti-visibili: 2.2;
}

.cbvo-sito {
    flex: 0 0 calc((100% - (var(--cbvo-siti-visibili) - 1) * 1rem) / var(--cbvo-siti-visibili));
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    padding: 0.75rem 1rem;
    background: #fff;               /* i loghi sono pensati per fondo chiaro */
    border: 2px solid #003882;      /* 11,12:1 sul bianco */
    border-radius: 6px;
}

.cbvo-sito img {
    max-width: 100%;
    max-height: 86px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.cbvo-sito:hover {
    background: #eef3f9;
    border-color: #002a63;
}

.cbvo-sito:focus-visible {
    outline: 3px solid #003882;
    outline-offset: 3px;
}

@media (min-width: 768px) {
    #cbvo-siti { --cbvo-siti-visibili: 3.2; }
}

@media (min-width: 1200px) {
    #cbvo-siti { --cbvo-siti-visibili: 5.2; }
}

/* Il tema fa risalire la fascia notizie di 88px (.mt-88n) perche' si sovrapponga
   alla fascia precedente: con la hero era voluto, ma sopra "In evidenza" la
   faceva finire addosso ai riquadri. Qui la sovrapposizione si annulla. */
#cbvo-evidenza + #home-novita .mt-88n {
    margin-top: 0;
}

#cbvo-evidenza + #home-novita {
    padding-top: 1rem;
}


/* Titoli delle fasce centrati (es. "Ultime news ed eventi"). Il tema li
   allinea a sinistra e assegna il margine inferiore solo a h1 e h3: qui vale
   anche per l'h2 usato nella fascia delle notizie. */
section .titolosezione {
    text-align: center;
}

section .titolosezione h2 {
    margin: 0 0 24px 0;
}


/* =========================================================================
   FASCIA "VIDEO E DOCUMENTARI"
   Fondo blu, anteprime 16:9 con il triangolo di riproduzione: la forma dice
   "video" al primo sguardo e distingue la fascia dalle schede delle notizie.
   Contrasti: bianco su #003882 = 11,12:1 (AAA); pillola chiara con testo
   #17324d = 13,13:1; durata bianca su nero al 78% = oltre 12:1.
   ========================================================================= */

#cbvo-video {
    background: #003882;
    padding: 3rem 0;
}

#cbvo-video .titolosezione h2,
#cbvo-video .cbvo-video-sottotitolo {
    color: #fff;
}

#cbvo-video .titolosezione h2 {
    margin-bottom: 0.5rem;
}

.cbvo-video-sottotitolo {
    margin: 0 0 32px 0;
    font-size: 1.05rem;
}

.cbvo-video-griglia {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem 1.25rem;
}

.cbvo-video-link {
    display: block;
    color: #fff;
    text-decoration: none;
}

.cbvo-video-link:hover,
.cbvo-video-link:focus-visible {
    color: #fff;
}

.cbvo-video-link:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* Anteprima in formato cinematografico: gia' la proporzione distingue
   queste schede da quelle delle notizie */
.cbvo-video-anteprima {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    background: #002a63;
}

.cbvo-video-anteprima img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Triangolo di riproduzione: decorativo, l'informazione sta nel testo */
.cbvo-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.72);
    border: 2px solid #fff;
}

.cbvo-video-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    border-left: 16px solid #fff;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.cbvo-video-link:hover .cbvo-video-play {
    background: #000;
}

.cbvo-video-durata {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
}

.cbvo-video-testo {
    display: block;
    padding-top: 0.65rem;
}

.cbvo-video-tipo {
    display: inline-block;
    margin-bottom: 0.4rem;
    padding: 2px 10px;
    border-radius: 12px;
    background: #e8edf3;
    color: #17324d;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cbvo-video-titolo {
    display: block;
    font-weight: 700;
    font-size: 0.98rem;
    line-height: 1.35;
}

.cbvo-video-guarda {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    text-decoration: underline;
}

@media (max-width: 1199px) {
    .cbvo-video-griglia { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
    .cbvo-video-griglia { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 479px) {
    .cbvo-video-griglia { grid-template-columns: 1fr; }
}

/* La fascia Servizi prende lo stesso fondo della fascia notizie (#ECEFF1,
   definito dal tema per #home-novita). Si imposta solo background-color:
   la scorciatoia "background" cancellerebbe l'ombra che adjustments.css
   applica in cima alla sezione. */
#sezione-servizi {
    background-color: #eceff1;
}

/* Riquadro della certificazione di qualità nel footer.
   Logo a sinistra e testo affiancato a destra; su schermo stretto si impilano. */
.cbvo-certificazione {
    margin-top: 1.5rem;
}

/* Il tema mette un filetto grigio sopra ogni h2 dentro .lista-linkutili:
   qui non serve, il riquadro ha gia' una sua separazione. */
#footer .lista-linkutili .cbvo-certificazione :is(h2, h3, h4) {
    border: 0;
}

.cbvo-certificazione-riga {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.cbvo-certificazione .cbvo-certificazione-logo {
    flex: 0 0 auto;
    width: 140px;
    height: auto;
    background: #fff;          /* il logo è pensato per fondo chiaro */
    padding: 6px;
    border-radius: 4px;
}

.cbvo-certificazione-testo {
    flex: 1 1 auto;
}

.cbvo-certificazione p {
    margin-bottom: 0.5rem;
}

.cbvo-certificazione p:last-child {
    margin-bottom: 0;
}

/* I collegamenti del riquadro restano sottolineati: si riconoscono senza
   dipendere dal colore (WCAG 1.4.1). */
.cbvo-certificazione a {
    text-decoration: underline;
}

@media (max-width: 575px) {
    .cbvo-certificazione-riga {
        flex-direction: column;
    }
}