/*
 * CEM — quello che il vecchio tema non aveva: l'avviso dei cookie (al posto
 * del plugin ct-ultimate-gdpr, con lo stesso aspetto nero), la paginazione
 * delle opere e delle news, i moduli che ora inviano al CMS.
 */

[hidden] { display: none !important; }

/* ─── Avviso cookie ─────────────────────────────────────────── */
.cem-cookie {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
    background: #000; color: #fff;
    padding: 24px 5%;
    display: flex; gap: 24px; align-items: center; justify-content: space-between;
    font-family: 'Neue Haas Grotesk Display Pro', sans-serif; font-size: 15px; line-height: 1.5;
}
.cem-cookie a { color: #fff; text-decoration: underline; }
.cem-cookie-bottoni { display: flex; gap: 12px; flex-shrink: 0; }
.cem-cookie button,
.cem-cookie-scheda button {
    border: 1px solid #fff; border-radius: 30px; padding: 10px 26px;
    font: inherit; cursor: pointer;
}
.cem-cookie .cem-cookie-si, .cem-cookie-scheda .cem-cookie-si { background: #fff; color: #000; }
.cem-cookie .cem-cookie-no, .cem-cookie-scheda .cem-cookie-no { background: transparent; color: #fff; }
@media (max-width: 767px) {
    .cem-cookie { flex-direction: column; align-items: flex-start; }
}

/* ─── Paginazione (nascosta: la usa lo scorrimento infinito) ── */
.works-pagination, .section-blog-wrapper .navigation { display: none; }

/* ─── Moduli ────────────────────────────────────────────────── */
.contact-form-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cem-esito {
    padding: 14px 18px; margin-bottom: 20px; border: 1px solid currentColor;
    font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
}
/* I moduli stanno su fondo bordeaux: l'esito va in chiaro, col colore
   solo sul bordo (il verde scuro di prima lì non si leggeva). */
.cem-esito-ok { color: #fff; border-color: #4caf7a; background: rgba(76,175,122,.12); }
.cem-esito-errore { color: #fff; border-color: #ff6b5b; background: rgba(255,46,23,.12); }

/* I colori del sito per le pagine del CMS che non sono del tema
   (grazie.php dopo un invio): senza, il bottone «Riprova» non ha fondo. */
:root {
    --color-primary: #FF2E17;
    --color-secondary: #390910;
    --font-titoli: 'Eurostile', sans-serif;
}

/* ─── Testata della pagina News ─────────────────────────────── */
/* La pagina News comincia su bianco: la testata trasparente lasciava il
   logo bianco invisibile finché non si scorreva. Lì nasce già scura. */
body.cem-testata-scura .header_main_wrapper { background: #390910; }

/* ─── Titoli dentro articoli, opere e video ─────────────────── */
/* Il testo scritto nell'editor non aveva un carattere suo: i titoli
   uscivano nel carattere di sistema a 35px, più grandi del titolo della
   pagina. Prendono quello del sito, con misure in scala. */
.single-content-wrapper h2,
.single-content-wrapper h3,
.single-content-wrapper h4,
.single-content-wrapper h5,
.single-content-wrapper h6 {
    font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
    font-weight: bold;
    line-height: 1.2;
    margin-top: 1.4em;
    margin-bottom: 0.5em;
}
.single-content-wrapper h2 { font-size: 26px; }
.single-content-wrapper h3 { font-size: 22px; }
.single-content-wrapper h4,
.single-content-wrapper h5,
.single-content-wrapper h6 { font-size: 19px; }

/* ─── Menu a tutto schermo ──────────────────────────────────── */
/* Undici voci a 37px con 30px fra l'una e l'altra non ci stavano in una
   finestra normale, e il menu scorreva. Il corpo scende e si regola
   sull'altezza della finestra; il pannello finisce al bordo inferiore
   (era alto 100vh partendo sotto la testata, quindi usciva dallo schermo). */
div#header-submenu {
    height: auto;
    bottom: 0;
    padding: 40px 0;
}
.header-submenu-content-wrapper a {
    font-size: min(26px, 3.4vh);
    margin-bottom: min(18px, 2.2vh);
}
@media (max-width: 1024px) {
    /* Sul telefono descrizione e social stanno sotto le voci: serve meno spazio. */
    div#header-submenu { padding: 28px 0; }
    .header-submenu-content-wrapper a {
        font-size: min(22px, 2.9vh);
        margin-bottom: min(14px, 1.7vh);
    }
    .header-submenu-grid { gap: 20px; }
    .header-submenu-grid .footer-social-wrapper { margin-top: 16px; }
}

/* ─── Pagine legali (privacy, cookie, termini, segnalazioni) ── */
/* Il testo viene dall'editor di WordPress e il tema non gli dava margini:
   ogni titolo stava attaccato al paragrafo di sopra e a quello di sotto. */
.template-page h1,
.template-page h2,
.template-page h3,
.template-page h4,
.template-page h5,
.template-page h6 {
    line-height: 1.2;
    margin: 1.6em 0 0.6em;
}
.template-page h1 { margin-top: 0; }
.template-page h2 { font-size: 28px; }
.template-page h3 { font-size: 22px; }
.template-page h4,
.template-page h5,
.template-page h6 { font-size: 18px; }
.template-page p { line-height: 1.6; margin: 0 0 1em; }
.template-page ul,
.template-page ol { margin: 0 0 1em 1.4em; line-height: 1.6; }

/* ─── Preferenze cookie ─────────────────────────────────────── */
.cem-cookie-pannello {
    /* sopra la testata del tema, che sta a 99999 */
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.cem-cookie-scheda {
    background: #000; color: #fff; max-width: 560px; width: 100%;
    max-height: calc(100vh - 32px); overflow-y: auto;
    padding: 32px; border: 1px solid #333;
    font-family: 'Neue Haas Grotesk Display Pro', sans-serif; font-size: 15px; line-height: 1.5;
}
.cem-cookie-scheda h2 { font-family: 'Eurostile', sans-serif; font-size: 26px; line-height: 1.2; margin: 0 0 10px; color: #fff; }
.cem-cookie-scheda p { margin: 0 0 20px; color: #ccc; }
.cem-cookie-voce { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid #333; cursor: pointer; }
.cem-cookie-voce input { margin-top: 4px; width: 18px; height: 18px; flex-shrink: 0; accent-color: #FF2E17; }
.cem-cookie-voce strong { color: #fff; }
.cem-cookie-scheda .cem-cookie-bottoni { margin-top: 20px; flex-wrap: wrap; }
@media (max-width: 767px) {
    .cem-cookie-bottoni { flex-wrap: wrap; }
    .cem-cookie-scheda { padding: 22px; }
}

/* ─── Video YouTube in attesa di consenso ──────────────────── */
.cem-yt {
    position: relative; aspect-ratio: 16 / 9; width: 100%;
    background: #1a0a0c center / cover no-repeat;
}
.cem-yt-velo {
    position: absolute; inset: 0; background: rgba(0,0,0,.65); color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 20px; text-align: center;
    font-family: 'Neue Haas Grotesk Display Pro', sans-serif; font-size: 15px; line-height: 1.4;
}
.cem-yt-velo p { margin: 0; }
.cem-yt-attiva {
    background: #FF2E17; color: #fff; border: 0; border-radius: 30px;
    padding: 10px 24px; font: inherit; cursor: pointer;
}
.cem-yt-velo a { color: #fff; text-decoration: underline; font-size: 14px; }
.cem-yt-iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; display: block; }

/* ─── Il titolo comincia sotto la testata ───────────────────── */
/* La testata è fissa (111px al computer, 91 sul telefono) e le prime
   sezioni avevano un margine pensato per una testata più bassa: il titolo
   finiva in parte sotto il logo. Misurato pagina per pagina: qui si porta
   l'inizio del titolo ~40px sotto la testata. */
/* Selettori con .section davanti: quelli del tema sono scritti così, e a
   pari specificità vincerebbero comunque per ordine solo se questo foglio
   venisse dopo — meglio non dipenderne. */
.section.section-about-hero,
.section.section-contact-page,
.section_page.template-page { padding-top: 160px; }
@media (min-width: 1025px) {
    .section-single-post { padding-top: 150px; }
}

@media (max-width: 1024px) {
    .section.section-about-hero,
    .section.section-page-header,
    .section.section-contact-page,
    .section-single-post { padding-top: 130px; }
}

/* ─── News: i box partono sotto la testata, con aria ─────────────── */
.section.section-blog-wrapper { padding-top: 170px; }
@media (max-width: 1024px) {
    .section.section-blog-wrapper { padding-top: 135px; }
}

/* ─── Segnalazioni: i file da scaricare ──────────────────────────────
   Il blocco file di WordPress metteva nome lungo e pulsante sulla stessa
   riga: il pulsante, alto 44px, si accavallava al nome della riga dopo.
   Qui ogni file è un blocco suo, nome sopra e pulsante piccolo sotto. */
.wp-block-file {
    display: block;
    margin: 0 0 22px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.wp-block-file > a:first-child { display: block; margin-bottom: 8px; }
.wp-block-file a.wp-block-file__button.wp-element-button {
    background: #fff;
    color: #EC1D26;
    border-radius: 4px;
    display: inline-block;
    margin: 0;
    padding: 6px 14px;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: .02em;
}

/* ─── Contatti: testo bianco, sedi in chiaro ─────────────────────── */
.section-contact-page .page-header-paragraph,
.section-contact-page .page-header-paragraph p,
.section-contact-page .page-header-paragraph a,
.section-contact-page .wpcf7-form,
.section-contact-page .wpcf7-form p,
.section-contact-page .wpcf7-form label,
.section-contact-page .wpcf7-form a { color: #fff; }
.section-contact-page .wpcf7-form-control:not([type=submit]) {
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
}
.section-contact-page .wpcf7-form-control::placeholder { color: rgba(255, 255, 255, .7); opacity: 1; }
.section-contact-page .wpcf7-form-control:focus { border-color: #fff; outline: none; }

/* La lista sedi non è più una fisarmonica: nome e indirizzo sempre visibili. */
.contact-list-title h3 { color: #fff; }
.contact-places-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 28px 40px;
}
.contact-places-list .accordion-container,
.contact-places-list .set { margin: 0; padding: 0; border: 0; background: none; }
.contact-places-list .set > a {
    display: block;
    padding: 0 0 6px;
    border: 0;
    background: none;
    pointer-events: none;
    cursor: default;
}
.contact-places-list .set > a span { color: #fff; font-size: 20px; padding: 0; }
.contact-places-list .set > a i { display: none; }
.contact-places-list .set .content {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible;
    padding: 0;
    border: 0;
    background: none;
}
.contact-places-list .set .content p {
    margin: 0;
    color: rgba(255, 255, 255, .8);
    text-transform: none;
}

/* Il pulsante verso la piattaforma delle segnalazioni, in fondo alla
   pagina: era una pillola grigia larga quanto la colonna. */
.wp-block-button { margin: 8px 0 22px; }
.wp-block-button a.wp-block-button__link.wp-element-button {
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 1.45;
    border-radius: 4px;
    background: #fff;
    color: #EC1D26;
    overflow-wrap: anywhere;
}
.wp-block-button a.wp-block-button__link.wp-element-button:hover { background: #EC1D26; color: #fff; }

.wp-block-file a.wp-block-file__button.wp-element-button:hover { background: #EC1D26; color: #fff; }