/*
Theme Name: Kiddin Child
Template:   kiddin
Theme URI: https://1.envato.market/kiddin-wp
Description: Kiddin Child Theme
Author: AwaikenThemes
Author URI: https://awaikenthemes.com/
Version: 1.0.3
Text Domain: kiddin-child
*/

/* Mobile menu font size */
@media only screen and (max-width: 1024px) {
    .elementor-29 .elementor-element.elementor-element-e9018f4 .elementskit-navbar-nav > li > a {
        font-size: 18px !important;
    }
    .elementor-29 .elementor-element.elementor-element-e9018f4 .elementskit-navbar-nav .elementskit-submenu-panel > li > a {
        font-size: 18px !important;
    }
}

/* ── Document Library Lite – pagina /documenti ────────────────────────────── */
/* Il plugin NON aggiunge un wrapper custom: usa table.document-library-table
   (classe del plugin) e .dataTables_wrapper (aggiunto da DataTables). */

/* Barra di ricerca */
.dataTables_wrapper .dataTables_filter input {
    border: 1.5px solid #101828;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #FF7350;
}

/* Intestazione tabella */
table.document-library-table thead th {
    background-color: #101828;
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: none;
    padding: 12px 16px;
}

/* Righe alternate */
table.document-library-table tbody tr:nth-child(even) {
    background-color: #FEF7EC;
}
table.document-library-table tbody tr:nth-child(odd) {
    background-color: #FFFFFF;
}
table.document-library-table tbody tr:hover {
    background-color: #EDFEFC;
}

/* Celle */
table.document-library-table tbody td {
    padding: 12px 16px;
    vertical-align: middle;
    border-bottom: 1px solid #e8e8e8;
    font-size: 15px;
}

/* Titolo documento */
table.document-library-table .col-title {
    font-weight: 600;
    color: #101828;
}

/* Badge categoria */
table.document-library-table .col-doc_categories a {
    display: inline-block;
    background-color: #125875;
    color: #FFFFFF !important;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none !important;
    margin: 2px 2px;
}
table.document-library-table .col-doc_categories a:hover {
    background-color: #FF7350;
}

/* Colonna link: cella standard — i pulsanti inline-flex si affiancano da soli.
   NON usare display:flex sulla td: bloccherebbe il responsive di DataTables
   che la nasconde con display:none su schermi piccoli. */
table.document-library-table td.col-link {
    white-space: nowrap;
    vertical-align: middle;
    padding: 10px 12px;
}

/* Pulsante base: inline-flex sovrascrive display:flex!important del plugin
   (flex è block-level; inline-flex mantiene i pulsanti sulla stessa riga) */
table.document-library-table .dll-download-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background-color 0.2s, transform 0.1s;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

/* Scarica — arancione */
table.document-library-table .dll-download-button:not(.dll-apri-button) {
    background-color: #FF7350;
    color: #FFFFFF !important;
}
table.document-library-table .dll-download-button:not(.dll-apri-button):hover {
    background-color: #101828;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

/* Apri — teal outline */
table.document-library-table .dll-apri-button {
    background-color: transparent !important;
    color: #125875 !important;
    border: 2px solid #125875 !important;
    padding: 6px 16px !important;
}
table.document-library-table .dll-apri-button:hover {
    background-color: #125875 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

/* Info risultati e paginazione */
.dataTables_wrapper .dataTables_info {
    font-size: 13px;
    color: #4E535E;
    margin-top: 8px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 14px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #FF7350 !important;
    color: #FFFFFF !important;
    border-color: #FF7350 !important;
}

/* ── Bottoni filtro categoria ─────────────────────────────────────────────── */

#dll-filtri-categorie {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.dll-filtro-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 100px;
    font-family: "TikTok Sans", sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, transform 0.1s;
    white-space: nowrap;
    /* stile default: outline teal */
    background-color: transparent;
    color: #125875;
    border: 2px solid #125875;
}

.dll-filtro-btn:hover {
    background-color: #125875;
    color: #FFFFFF;
    transform: translateY(-1px);
}

/* Bottone attivo: pieno arancione */
.dll-filtro-btn.attivo {
    background-color: #FF7350;
    color: #FFFFFF;
    border-color: #FF7350;
}

.dll-filtro-btn.attivo:hover {
    background-color: #d95e39;
    border-color: #d95e39;
    transform: translateY(-1px);
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

/* Tablet (≤900px): filtri su 2 righe, font tabella più compatta */
@media (max-width: 900px) {
    table.document-library-table thead th {
        font-size: 12px;
        padding: 10px 10px;
    }
    table.document-library-table tbody td {
        padding: 10px 10px;
        font-size: 14px;
    }
    table.document-library-table .dll-download-button {
        padding: 7px 14px !important;
        font-size: 12px;
    }
}

/* Mobile (≤600px): bottoni filtro full-width, pulsanti più compatti */
@media (max-width: 600px) {
    #dll-filtri-categorie {
        gap: 6px;
    }
    .dll-filtro-btn {
        flex: 1 1 calc(50% - 6px);  /* 2 per riga */
        font-size: 12px;
        padding: 8px 10px;
        justify-content: center;
    }
    table.document-library-table .dll-download-button {
        padding: 6px 10px !important;
        font-size: 11px;
    }
    .dataTables_wrapper .dataTables_filter input {
        font-size: 14px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITÀ & UI — interventi del 07/09/2026
   Ogni blocco è autonomo: per annullare un intervento basta rimuoverlo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A1. Focus visibile da tastiera (WCAG 2.4.7 AA) ──────────────────────────
   Il tema padre azzera l'outline con `outline:none` su .btn-default e su
   .ekit-wid-con a/button/input/textarea:focus-visible: navigando con Tab non
   si capisce dove sia il focus. Ripristiniamo un anello a doppio tono (scuro
   + alone bianco) che resta visibile sia su fondo chiaro sia su fondo scuro. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.ekit-wid-con a:focus-visible,
.ekit-wid-con button:focus-visible,
.ekit-wid-con input:focus-visible,
.ekit-wid-con textarea:focus-visible,
.btn-default:focus-visible,
.ekit_creative_button:focus-visible,
.dll-download-button:focus-visible,
.dll-filtro-btn:focus-visible,
.dataTables_wrapper .dataTables_filter input:focus-visible {
    outline: 3px solid #101828 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.95) !important;
}

/* ── A2. Contrasto testo sui bottoni arancioni (WCAG 1.4.3 AA) ───────────────
   Bianco su #FF7350 = 2,69:1 — sotto la soglia 4,5:1 e anche sotto il 3:1
   consentito al testo grande. Il colore del brand resta identico: cambia solo
   il testo, che diventa blu notte #101828 → 6,61:1. È la stessa combinazione
   già usata dal tema nello stato :hover del bottone, quindi coerente. */
.btn-default {
    color: #101828;
}
.btn-default:hover,
.btn-default:focus-visible {
    color: #FFFFFF;   /* su :hover lo sfondo diventa #101828 → 17,75:1 */
}

.ekit-wid-con .ekit_creative_button:not(.ekit_tamaya) > .ekit_creative_button_text,
.ekit-wid-con .ekit_creative_button:not(.ekit_tamaya) > .ekit_creative_button_icon,
.ekit-wid-con .ekit_creative_button i,
.ekit-wid-con .ekit_creative_button.ekit_tamaya::before,
.ekit-wid-con .ekit_creative_button.ekit_tamaya::after {
    color: #101828 !important;
}
.ekit-wid-con .ekit_creative_button svg path {
    stroke: #101828 !important;
    fill: #101828 !important;
}
/* Lo stato :hover ha già testo scuro su fondo chiaro: non va toccato. */
.ekit-wid-con .ekit_creative_button:hover > .ekit_creative_button_text,
.ekit-wid-con .ekit_creative_button:hover i {
    color: var(--e-global-color-primary) !important;
}

/* Bottone "Scarica" della tabella Documenti: stesso problema, stessa soluzione */
table.document-library-table .dll-download-button:not(.dll-apri-button) {
    color: #101828 !important;
}
table.document-library-table .dll-download-button:not(.dll-apri-button):hover {
    color: #FFFFFF !important;   /* hover: fondo #101828 */
}

/* Pulsante "Invia Messaggio" del form contatti.
   Misurato con Chrome headless il 07/09/2026: era rimasto bianco su #FF7350,
   cioe' 2,69:1 — la regola `.btn-default{color:#101828}` qui sopra non lo
   raggiunge mai. Il markup e' <input class="wpcf7-submit btn-default">, ma
   Elementor genera per il widget del form:
     .elementor-1006 .elementor-element-be41f32 .ekit-form form input[type=submit]
     { color: var(--e-global-color-white) }
   specificita' (0,3,1) contro (0,1,0) di `.btn-default`. Serve !important.
   Selettori per TIPO di widget, non per ID pagina/elemento: la regola resta
   valida se il form viene spostato o duplicato su un'altra pagina. */
.ekit-form form input[type="submit"],
.wpcf7-form input[type="submit"].wpcf7-submit {
    color: #101828 !important;
}
/* :hover porta lo sfondo a --e-global-color-primary (#101828): il testo
   torna bianco, 17,75:1 */
.ekit-form form input[type="submit"]:hover,
.ekit-form form input[type="submit"]:focus-visible,
.wpcf7-form input[type="submit"].wpcf7-submit:hover,
.wpcf7-form input[type="submit"].wpcf7-submit:focus-visible {
    color: #FFFFFF !important;
}

/* Filtro categoria attivo e paginazione DataTables */
.dll-filtro-btn.attivo {
    color: #101828;
}
.dll-filtro-btn.attivo:hover {
    color: #FFFFFF;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: #101828 !important;
}

/* ── A3. Bottoni azzurri di Asilo Nido e Scuola dell'Infanzia ────────────────
   Testo #FFE8E8 su fondo #7EC2F7 = 1,92:1 — praticamente illeggibile.
   Blu notte sullo stesso azzurro = 9,25:1. */
.ekit-wid-con .ekit_creative_button_text,
.ekit-wid-con .ekit_creative_button i {
    /* fallback: nessun effetto se il colore è già scuro */
}
.elementor-element-1048237 .ekit_creative_button_text,
.elementor-element-13e4ef0 .ekit_creative_button_text,
.elementor-element-1730e38 .ekit_creative_button_text,
.elementor-element-1048237 .ekit_creative_button i,
.elementor-element-13e4ef0 .ekit_creative_button i,
.elementor-element-1730e38 .ekit_creative_button i,
.elementor-element-1048237 .ekit_creative_button.ekit_tamaya::before,
.elementor-element-1048237 .ekit_creative_button.ekit_tamaya::after,
.elementor-element-13e4ef0 .ekit_creative_button.ekit_tamaya::before,
.elementor-element-13e4ef0 .ekit_creative_button.ekit_tamaya::after,
.elementor-element-1730e38 .ekit_creative_button.ekit_tamaya::before,
.elementor-element-1730e38 .ekit_creative_button.ekit_tamaya::after {
    color: #101828 !important;
}

/* ── A4. Stabilità del layout con width/height sulle immagini ────────────────
   functions.php ora aggiunge width/height ai tag <img> di Elementor per
   eliminare il layout shift (CLS). Questa regola garantisce che gli attributi
   non alterino le proporzioni impostate dal CSS. */
.elementor img,
.ekit-wid-con img,
img.swiper-slide-image {
    height: auto;
}

/* ── A5. Touch target minimi su mobile (WCAG 2.5.8) ──────────────────────────
   I bottoni Scarica/Apri della tabella Documenti scendevano a ~24px di altezza
   sotto i 600px, ben sotto i 44px raccomandati per il tocco.

   ATTENZIONE ALLA SPECIFICITA' (verificato con Chrome headless il 07/09/2026):
   il foglio di Document Library Lite e' accodato DOPO quello del child, e la
   sua regola `table.document-library-table .document-library-button` imposta
   `height:fit-content; min-height:2em; padding:0 18px !important`.
   Ha specificita' (0,2,1), identica a quella che avevamo qui: a parita' vince
   l'ultimo caricato, cioe' il plugin. Risultato misurato: 28px, non 44px.
   Si sale a (0,3,3) passando per `td.col-link` e per il tipo `a` — la
   struttura reale del DOM, gia' documentata in CLAUDE.md — e si mette
   `!important` anche su min-height, che prima ne era sprovvisto. */
@media (max-width: 600px) {
    table.document-library-table td.col-link a.dll-download-button {
        padding: 11px 14px !important;
        font-size: 12px;
        min-height: 44px !important;
        height: auto !important;   /* il plugin forza height:2em */
    }
    table.document-library-table td.col-link a.dll-apri-button {
        padding: 9px 12px !important;
    }
    .dll-filtro-btn {
        min-height: 44px;
    }
}

/* ── A6. Annunci scorrevoli nell'header: contrasto garantito ─────────────────
   I due widget content-ticker (id 2198877 mobile, 3c2f45f desktop) usavano i
   colori di default della demo: link #125875 e descrizione #4E535E. L'header
   è in position:absolute sopra l'immagine hero di ogni pagina, con un velo
   bianco al 10% (--e-global-color-darkdivider): lo sfondo effettivo sotto il
   ticker cambia da quasi nero a khaki chiaro nell'arco della stessa barra, e
   cambia di nuovo su ogni pagina perché ogni hero ha una foto diversa.

   Contrasti misurati sulla Home (foto header_2.jpg + gradiente #101828E6):
       zona sinistra  #125875 -> 1,39:1   #4E535E -> 1,41:1
       zona centrale  #125875 -> 2,37:1   #4E535E -> 2,33:1   <- il grigio su grigio
       zona destra    #125875 -> 5,41:1   #4E535E -> 5,33:1
   Nessun colore di testo può funzionare su un fondo così variabile: il testo
   bianco andrebbe a 10,90:1 a sinistra ma a 1,45:1 a destra.

   Soluzione: ogni annuncio ha il proprio fondo opaco (pill blu notte), quindi
   il contrasto non dipende più dalla foto sottostante -> 17,75:1 ovunque. */
.ekit-content-ticker-wrapper .ekit-content-items .ekit-marquee .ekit-marquee-item {
    background-color: rgba(16, 24, 40, 0.92);
    border-radius: 100px;
}
.ekit-content-ticker-wrapper .ekit-content-items .ekit-marquee .ekit-marquee-item a,
.ekit-content-ticker-wrapper .ekit-content-items .ekit-marquee .ekit-marquee-item .ticker-description,
.ekit-content-ticker-wrapper .ekit-content-items .ekit-marquee .ekit-marquee-item .ekit-title-and-description {
    color: #FFFFFF !important;
}
.ekit-content-ticker-wrapper .ekit-content-items .ekit-marquee .ekit-marquee-item a:hover,
.ekit-content-ticker-wrapper .ekit-content-items .ekit-marquee .ekit-marquee-item a:focus-visible {
    color: #FF7350 !important;   /* arancione del brand su blu notte = 6,61:1 */
}

/* ── A7. Header desktop: il menu andava a capo su "Contatti" ─────────────────
   L'header divide la riga in tre colonne a percentuale fissa: logo 20%,
   menu 60%, bottone 20% (container abd2e87 / 75392a8 / 6d18b5e dell'Header 29).

   Misurato con il font reale (TikTok Sans SemiBold 16px, padding 12/10 per
   voce, imagettfbbox su TikTokSans-SemiBold.ttf), il menu a 8 voci richiede
   984px, ma la sua colonna al 60% ne offre al massimo 900px: l'ultima voce
   ("Contatti") finiva a capo a QUALSIASI larghezza desktop.

   Lo spazio però c'è: logo 150 + menu 984 + bottone 183 = 1317px su 1500px
   di container, cioè 183px di margine. Il problema è solo la ripartizione.
   Qui le colonne laterali vengono dimensionate sul contenuto e il menu si
   prende il resto. Elementor pilota la larghezza dei container con la
   custom property --width, quindi si sovrascrive quella.

   Attenzione: i selettori usano gli ID degli elementi Elementor. Se l'header
   viene ricostruito in editor gli ID cambiano e questa regola smette di
   applicarsi senza errori visibili. */
@media (min-width: 1025px) {
    .elementor-29 .elementor-element.elementor-element-abd2e87 {   /* logo */
        --width: 170px;
        flex-grow: 0;
        flex-shrink: 0;
    }
    .elementor-29 .elementor-element.elementor-element-6d18b5e {   /* bottone CTA */
        --width: 200px;
        flex-grow: 0;
        flex-shrink: 0;
    }
    .elementor-29 .elementor-element.elementor-element-75392a8 {   /* menu + ticker */
        --width: auto;
        /* flex-basis 0, NON auto: con `auto` la colonna cresce fino alla
           larghezza intrinseca del contenuto piu' largo, che in modalita'
           marquee e' il ticker con il suo clone affiancato (migliaia di px).
           La riga andava in overflow e il container flex-wrap mandava a capo
           la colonna del bottone "Contattaci". Con basis 0 la colonna prende
           esattamente lo spazio residuo. */
        flex: 1 1 0%;
        min-width: 0;
    }
    /* il ticker non deve poter allargare la colonna che lo contiene */
    .elementor-29 .elementor-element.elementor-element-3c2f45f,
    .elementor-29 .elementor-element.elementor-element-2198877 {
        min-width: 0;
        max-width: 100%;
    }
    /* nessuna voce deve spezzarsi al proprio interno */
    .elementor-29 .elementskit-navbar-nav > li > a {
        white-space: nowrap;
    }
}

/* Sotto i 1500px si recuperano altri 32px stringendo il padding delle voci
   da 10px a 8px per lato: la differenza non si nota, ma sposta la soglia di
   wrapping da ~1520px a ~1340px di viewport. */
@media (min-width: 1025px) and (max-width: 1500px) {
    .elementor-29 .elementor-element.elementor-element-e9018f4 .elementskit-navbar-nav > li > a {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ── A8. Marquee del ticker: pausa e rispetto di prefers-reduced-motion ──────
   Dal 07/09/2026 i due ticker usano Effect = Marquee (scorrimento continuo,
   indipendente dal numero di annunci). La modalità marquee però scorre senza
   sosta: i link diventano bersagli in movimento e si ricade in WCAG 2.2.2
   (contenuto animato oltre i 5 secondi deve poter essere fermato).

   Il widget ha un controllo "Hover Paused" ma è disattivato di default e
   copre solo il mouse. Qui si copre anche la tastiera con :focus-within, e
   si rispetta la preferenza di sistema per la riduzione delle animazioni. */
.ekit-content-ticker-wrapper .ekit-content-items .ticker:hover .marquee-wrapper,
.ekit-content-ticker-wrapper .ekit-content-items .ticker:focus-within .marquee-wrapper {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .ekit-content-ticker-wrapper .ekit-content-items .ticker .marquee-wrapper {
        animation: none !important;
        transform: none !important;
        /* Ferma l'animazione, gli annunci devono restare tutti leggibili.
           NON con overflow-x:auto: metteva una barra di scorrimento dentro
           l'header, brutta e poco scopribile. Meglio farli andare a capo:
           il wrapper e' inline-flex con white-space:nowrap, quindi vanno
           sbloccati entrambi. */
        display: flex;
        flex-wrap: wrap;
        white-space: normal;
        width: 100%;
    }
    /* la JS (del plugin e la nostra B5) clona il wrapper per il loop continuo:
       senza animazione i cloni sarebbero solo doppioni visibili */
    .ekit-content-ticker-wrapper .ekit-content-items .ticker .marquee-wrapper ~ .marquee-wrapper {
        display: none;
    }
}


/* ── A9. Ticker: nessuna barra di scorrimento, in nessuno stato ─────────────
   Elementor genera `overflow:auto` sui due widget ticker. Con lo swiper non
   si notava; in marquee il contenuto eccede il contenitore per definizione,
   quindi compariva una scrollbar orizzontale sotto gli annunci — sia sul
   desktop sia, restringendo la finestra, sul ticker mobile.

   Un marquee deve ritagliare, non scrollare. Qui si copre l'intera catena
   (widget -> wrapper -> items -> ticker) e si usa la classe del TIPO di
   widget invece degli ID degli elementi Elementor: cosi' la regola resta
   valida anche se l'header viene ricostruito in editor o se si aggiunge un
   terzo ticker. */
/* Sull'elemento widget serve !important: la regola generata da Elementor e'
   `.elementor-29 .elementor-element.elementor-element-<id>{overflow:auto}`
   (specificita' 0,3,0) e batterebbe una classe di tipo da sola (0,1,0).
   Usare !important qui e' preferibile a rincorrere la specificita' con gli
   ID degli elementi, che cambiano se l'header viene ricostruito. */
.elementor-widget-elementskit-content-ticker {
    overflow: hidden !important;
}
/* Sui discendenti bastano specificita' pari e ordine di cascata: il CSS del
   child e' caricato dopo quello del plugin e dopo post-29.css. */
.elementor-widget-elementskit-content-ticker .ekit-wid-con,
.elementor-widget-elementskit-content-ticker .ekit-content-ticker-wrapper,
.elementor-widget-elementskit-content-ticker .ekit-content-items,
.elementor-widget-elementskit-content-ticker .ekit-content-items .ticker {
    overflow: hidden;
}


/* ── A10. Spazio riservato quando il ticker va a capo ────────────────────────
   Misurato con Chrome headless il 07/09/2026 a 375x812.

   L'header (container b114b0c) e' `position:absolute` a TUTTE le larghezze:
   non spinge giu' niente, si limita a sovrapporsi. Con le animazioni attive
   l'altezza e' costante — 152px su mobile/tablet/laptop, 170px su desktop —
   e sotto c'e' sempre spazio (il margine piu' stretto misurato e' 30px, su
   Chi siamo a 1440px).

   Sotto `prefers-reduced-motion: reduce` pero' il blocco A8 manda gli annunci
   a capo, e a 375px i due annunci occupano tre righe di pill: l'header passa
   da 152px a 219px e copre di 29px il titolo della pagina. Verificato su 7
   pagine su 8 (la Home si salva per 13px). Il ticker mobile 2198877 misura
   264px di larghezza utile contro 689px di contenuto, quindi il capo a capo
   e' garantito, non un caso limite.

   Qui si restituisce lo spazio mancante alle due sole strutture di pagina che
   esistono sul sito: l'hero delle pagine Elementor e il .page-header del tema
   (Annunci e Documenti, che usano il template WP standard).

   ATTENZIONE: 80px coprono tre righe di pill, cioe' fino a 2-3 annunci
   pubblicati. Pubblicandone di piu' va rimisurato — script in
   scratchpad/measure.mjs, `node measure.mjs --reduced-motion`. */
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {

    /* pagine Elementor: il primo container della PAGINA, non dell'header.
       `data-elementor-type` distingue le due cose senza agganciarsi a un ID:
       la pagina e' "wp-page", i template di header/footer sono "wp-post". */
    [data-elementor-type="wp-page"] > .e-con.e-parent:first-child {
        padding-top: 80px;
    }

    /* pagine con il template standard del tema (Annunci, Documenti) */
    .page-header {
        padding-top: 250px;   /* 170px del tema + 80px */
    }
}