/* =============================================================================
   LAYOUT — header, footer, navigation shells
   ============================================================================= */

/* ---------- HEADER (singola barra di menu, da Figma node 1:545) ---------- */

.cp-site-header {
    background-color: var(--cp-bg);
    padding-block: var(--cp-sp-5);
    position: sticky;
    top: 0;
    z-index: var(--cp-z-header);
}
/* Header senza gutter laterale su desktop (logo/menu allineati al bordo del
   contenuto). Su mobile teniamo il gutter così non toccano i bordi schermo. */
.cp-site-header > .cp-container {
    padding-inline: 0;
}
@media (max-width: 900px) {
    .cp-site-header > .cp-container {
        padding-inline: var(--cp-gutter-mobile);
    }
}
.cp-site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cp-sp-5);
    flex-wrap: wrap;
}
.cp-site-header__brand {
    display: inline-flex;
    align-items: center;
    font-family: var(--cp-font);
    font-weight: var(--cp-fw-xbold);
    font-size: 18px;
    letter-spacing: -0.4px;
    text-transform: uppercase;
    color: var(--cp-black);
    line-height: 0;
}
.cp-site-header__brand img,
.cp-site-header__brand svg {
    display: block;
    width: auto;
    height: auto;
}
/* Logo esteso (wordmark) di default; il compatto è nascosto su desktop. */
.cp-site-header__brand .cp-logo--extended { height: 28px; }
.cp-site-header__brand .cp-logo--compact  { display: none; }

@media (max-width: 900px) {
    .cp-site-header__brand .cp-logo--extended { display: none; }
    .cp-site-header__brand .cp-logo--compact  { display: block; height: 40px; }
}
.cp-site-header__nav .cp-menu {
    display: flex;
    align-items: center;
    gap: var(--cp-sp-8);
    margin: 0;
    padding: 0;
    list-style: none;
}
.cp-site-header__nav .cp-menu > li > a {
    font-family: var(--cp-font);
    font-weight: var(--cp-fw-medium);
    font-size: var(--cp-fs-ui);
    letter-spacing: var(--cp-tracking-ui);
    color: var(--cp-black);
    line-height: 1;
    transition: color var(--cp-t-fast);
}
/* Hover/focus delle voci normali (la CTA ha il proprio stato qui sotto). */
.cp-site-header__nav .cp-menu > li:not(.cp-btn) > a:hover,
.cp-site-header__nav .cp-menu > li:not(.cp-btn) > a:focus-visible {
    color: var(--cp-accent);
}

/* Voce ATTIVA (pagina corrente) evidenziata in accento. WordPress aggiunge da
   solo queste classi alla voce della pagina su cui ci si trova (e ai suoi
   antenati per le sottopagine). La CTA è esclusa: resta bottone. */
.cp-site-header__nav .cp-menu > li:not(.cp-btn):is(
    .current-menu-item,
    .current_page_item,
    .current-menu-ancestor,
    .current-menu-parent,
    .current_page_parent,
    .current_page_ancestor
) > a {
    color: var(--cp-accent);
}

/* Voce di menu marcata come CTA: stesso aspetto del BOTTONE PRIMARIO e pilotata
   dalle stesse variabili del pannello (--cp-btn-*), con fallback ai default.
   Si attiva con la classe CSS `cp-btn` sulla voce di menu (assegnata a mano o
   automaticamente alla voce "Contatti", vedi inc/menus.php). */
.cp-site-header__nav .cp-menu > li.cp-btn,
.cp-site-header__nav .cp-menu > li.menu-item.cp-btn {
    list-style: none;
    /* Il <li> NON deve essere un bottone: la classe `cp-btn` qui serve solo a
       marcare la voce. Annulliamo l'aspetto-bottone che la regola base `.cp-btn`
       applicherebbe al <li> (sfondo + padding + hover nero) → altrimenti il <li>,
       più grande dell'<a>, mostra una cornice scura attorno al bottone in hover.
       Il vero bottone è l'<a> qui sotto. */
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}
.cp-site-header__nav .cp-menu > li.cp-btn > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--cp-btn-pad-y, var(--cp-sp-2)) var(--cp-btn-pad-x, var(--cp-sp-3));
    background-color: var(--cp-btn-bg, var(--cp-accent));
    color: var(--cp-btn-text, var(--cp-white));
    border: 1px solid var(--cp-btn-bg, var(--cp-accent));
    border-radius: var(--cp-btn-radius, var(--cp-radius-md));
    font-family: var(--cp-font);
    /* Dimensione/peso/spaziatura del testo = identici alle altre voci del menu
       (NON la dimensione del bottone del pannello), così la CTA è coerente. */
    font-size: var(--cp-fs-ui);
    font-weight: var(--cp-fw-medium);
    letter-spacing: var(--cp-tracking-ui);
    line-height: var(--cp-lh-button);
    transition: background-color var(--cp-t-fast), color var(--cp-t-fast), border-color var(--cp-t-fast);
}
.cp-site-header__nav .cp-menu > li.cp-btn > a:hover,
.cp-site-header__nav .cp-menu > li.cp-btn > a: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-menu-empty {
    font-family: var(--cp-font);
    font-size: var(--cp-fs-ui);
    color: var(--cp-muted);
    font-style: italic;
}

/* ---------- MOBILE NAV (toggle) ---------- */
.cp-nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    cursor: pointer;
}
@media (max-width: 900px) {
    .cp-nav-toggle {
        display: inline-flex;
        flex-direction: column;
        gap: 5px;
        padding: var(--cp-sp-2);
    }
    .cp-nav-toggle span {
        display: block;
        width: 28px;
        height: 2px;
        background: var(--cp-black);
    }
    .cp-site-header__nav {
        display: none;
        width: 100%;
    }
    .cp-site-header__nav .cp-menu {
        flex-direction: column;
        gap: var(--cp-sp-3);
        align-items: flex-start;
    }
    .cp-site-header[data-nav-open="true"] .cp-site-header__nav {
        display: block;
    }
}

/* ---------- FOOTER REVEAL ----------
   Effetto "il contenuto scorre SOPRA il footer": il footer resta agganciato
   in fondo alla viewport (position: sticky) su un layer inferiore, mentre il
   contenuto — opaco e su un layer superiore — gli scivola sopra scoprendolo
   man mano che si arriva a fine pagina (come una tendina dietro al foglio).

   Meccanica (nessun margine negativo, nessun JS):
   1. .site-main: layer superiore opaco (z-index 1) → copre il footer;
   2. .cp-footer: sticky bottom:0, layer inferiore (z-index 0) → resta pinnato
      dietro e viene rivelato quando il contenuto scorre via.
   Requisito: nessun antenato del footer con overflow:hidden/auto/scroll
   (verificato: html/body non lo hanno) altrimenti lo sticky si rompe. */
.site-main {
    position: relative;
    z-index: 1;
    background-color: var(--cp-bg);
}

/* ---------- FOOTER ---------- */

.cp-footer {
    position: sticky;
    bottom: 0;
    z-index: 0;
    background-color: var(--cp-slate);
    color: var(--cp-text-on-dark);
    padding-block: var(--cp-sp-12) var(--cp-sp-8);
    /* niente margin-top: il reveal deve partire pulito dal bordo del contenuto;
       lo spazio interno è già dato dal padding-block superiore. */
}
.cp-footer__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--cp-sp-8);
    margin-bottom: var(--cp-sp-12);
}
@media (max-width: 900px) {
    .cp-footer__cols {
        grid-template-columns: 1fr;
        gap: var(--cp-sp-6);
    }
}
/* Più widget nella stessa colonna: spazio verticale tra loro. */
.cp-footer__widget { margin-bottom: var(--cp-sp-6); }
.cp-footer__widget:last-child { margin-bottom: 0; }

.cp-footer__col h4,
.cp-footer__widget-title {
    font-family: var(--cp-font);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.88px;
    text-transform: uppercase;
    margin-bottom: var(--cp-sp-3);
    color: var(--cp-text-on-dark);
}
/* liste: lista custom, menu WP (widget "Menu di navigazione"), liste generiche */
.cp-footer__col ul,
.cp-footer__col .cp-footer__list,
.cp-footer__col .menu {
    display: flex;
    flex-direction: column;
    gap: var(--cp-sp-2);
    list-style: none;
    margin: 0;
    padding: 0;
}
.cp-footer__col a {
    color: var(--cp-text-on-dark);
    font-family: var(--cp-font);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.88px;
    text-transform: uppercase;
}
.cp-footer__col a:hover { color: var(--cp-accent); }
/* testo libero dei widget (es. widget "Testo") leggibile su sfondo scuro */
.cp-footer__col p { color: var(--cp-text-on-dark); }
.cp-footer__hint { margin-top: var(--cp-sp-3); }
.cp-footer__hint a { font-size: var(--cp-fs-small); text-transform: none; letter-spacing: 0; opacity: .7; }
.cp-footer__wordmark {
    margin-block: var(--cp-sp-8);
    color: var(--cp-text-on-dark);
    line-height: 0;
}
.cp-footer__wordmark svg {
    display: block;
    width: 100%;
    max-width: var(--cp-content);
    height: auto;
    margin: 0 auto;
}
.cp-footer__legal {
    display: flex;
    justify-content: space-between;
    gap: var(--cp-sp-5);
    font-family: var(--cp-font);
    font-weight: 600;
    font-size: var(--cp-fs-small);
    letter-spacing: var(--cp-tracking-small);
    text-transform: uppercase;
}
@media (max-width: 900px) {
    .cp-footer__legal {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--cp-sp-3);
    }
}
.cp-footer__legal a:hover { color: var(--cp-accent); }

/* ---------- FOOTER: estensioni per pannello (intro, legal-info, credits) ---------- */
.cp-footer__intro {
    font-family: var(--cp-font);
    font-size: var(--cp-fs-h3);
    letter-spacing: var(--cp-tracking-h3);
    line-height: var(--cp-lh-tight);
    margin-bottom: var(--cp-sp-10);
    max-width: 720px;
}

.cp-footer__legal-info {
    margin-top: var(--cp-sp-5);
    color: var(--cp-muted-on-dark);
    font-family: var(--cp-font);
    font-size: var(--cp-fs-small);
    text-align: center;
}
.cp-footer__legal-info p { margin: 2px 0; }

.cp-footer__credits {
    margin-top: var(--cp-sp-5);
    color: var(--cp-muted-on-dark);
    font-family: var(--cp-font);
    font-size: var(--cp-fs-small);
    text-align: center;
}

/* =============================================================================
   UTILITY ELEMENTOR — larghezza dipendente dal pannello
   Gli elementi atomici V4 non hanno il toggle "Boxed": per cappare un elemento
   alla "Larghezza contenuti boxed" del pannello, applicagli in Elementor la
   classe CSS `cp-boxed` (campo classi CSS dell'elemento). Pesca `--cp-content`
   (default 1140px, sovrascritto dal pannello via cp-dynamic-style) e centra.
   `!important` per battere l'eventuale max-width inline emessa dal widget atomico.
   `cp-boxed-pad` aggiunge anche il gutter laterale (utile su elementi full-bleed).
   ============================================================================= */
.cp-boxed {
    max-width: var(--cp-content) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.cp-boxed-pad {
    padding-inline: var(--cp-gutter);
}
@media (max-width: 900px) {
    .cp-boxed-pad { padding-inline: var(--cp-gutter-mobile); }
}