/* 
 * ========================================================
 * Modulo: Blocca Header
 * ========================================================
 */

:root {
    /* Valore di fallback per l'offset dell'ancora */
    --header-sticky-height: 0px; 
}

/* Applica l'offset a tutti gli elementi con un ID (le ancore) 
   Questo risolve il problema dei salti coperti dall'header sticky
   sia su link interni che da pagine esterne. */
[id] {
    scroll-margin-top: var(--header-sticky-height);
}


/* NEI TEMI A BLOCCHI (FSE) COME TWENTY TWENTY-FIVE, L'OVERFLOW NASCOSTO 
   SUI CONTENITORI GENITORI DISABILITA IL COMPORTAMENTO FIX.
   Ripristiniamo l'overflow visible sui wrapper principali */
html, body {
    overflow-x: visible !important;
}

.wp-site-blocks {
    overflow: visible !important;
    overflow-x: visible !important;
}

/* IMPORTANTE: Disabilitiamo il comportamento "sticky" che il tema FSE 
   potrebbe forzare sul contenitore dell'header. In questo modo permettiamo
   alla prima riga dell'header di scorrere naturalmente in alto e sparire, 
   lasciando solo il nostro blocco fisso. */
header:has(.bloccaheader),
.wp-block-template-part:has(.bloccaheader) {
    position: relative !important;
    top: auto !important;
}

/* Transizione fluida per l'elemento */
.bloccaheader {
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, padding 0.3s ease-in-out;
}

/* Stile applicato dinamicamente via JS (esc-is-sticky) per trasformare il menu in FIXED */
.bloccaheader.esc-is-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 99999 !important;
    width: 100% !important;
    margin-top: 0 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    background-color: var(--wp--preset--color--base, #ffffff); /* Fallback su bianco se variabile mancante */
}

/* Compensazione per la barra di amministrazione di WordPress quando l'utente è loggato */
body.admin-bar .bloccaheader.esc-is-sticky {
    top: 32px !important;
}

/* Su mobile la admin-bar di WordPress ha altezza 46px */
@media screen and (max-width: 782px) {
    body.admin-bar .bloccaheader.esc-is-sticky {
        top: 46px !important;
    }
}

html {
    scroll-behavior: smooth;
}
