/*
 * Header Styles - Alternativ@ Child Theme
 * v4.7.12
 */
/* ================================
   HEADER FISSO
   ================================ */
.site-header {
    /* position: relative; */
    position: fixed;

    height: var(--head-max-height);
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: white;
    opacity: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Regola in base all'altezza di header e menu */
body {
    padding-top: var(--content-top);
}

/* body.admin-bar {
    padding-top: calc(var(--content-top) + var(--admin-bar-heigth));
} */

/* Admin bar WordPress */
body.admin-bar .site-header {
    top: var(--admin-bar-heigth);
}

/* Responsive */
@media (max-width: 782px) {
    body { padding-top:var(--content-1024-top);}
    body.admin-bar { 
        padding-top: var(--content-1024-top + var(--admin-bar-heigth));
    }
}

@media (max-width: 480px) {
    body { padding-top: 50px; }
    body.admin-bar { padding-top: calc(50px + var(--admin-bar-heigth)); }
}


/* ================================
   HEADER CHE SCOMPARE ALLO SCROLL
   ================================ */

/* Transizioni per header */
.site-header {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transform: translateY(0);
    opacity: 1;
}

/* Header nascosto allo scroll */
.site-header.header-hidden {
    transform: translateY(-100%);
    opacity: 0;
}

/* Menu rimane sempre visibile */
.main-navigation {
    transition: top 0.3s ease-in-out;
}

/* Quando l'header è nascosto, il menu si sposta in alto */
body.header-scrolled .main-navigation {
    top: var(--admin-bar-heigth);
}

body.admin-bar.header-scrolled .main-navigation {
    top: var(--admin-bar-heigth);
}

body.header-scrolled .main-navigation {
    top: 0px;
}

body.header-scrolled {
    padding-top: var(--admin-bar-heigth); /* Solo altezza menu */
}

/* ================================
   RESPONSIVE PER SCROLL BEHAVIOR
   ================================ */

@media (max-width: 1024px) {
    body.header-scrolled .main-navigation {
        top: 0;
    }
    
    body.header-scrolled {
        padding-top: calc(var(--main-nav-1024-top) - var(--head-1024-height));
    }
}

@media (max-width: 782px) {
    body.header-scrolled {
        padding-top: 35px;
    }
}

@media (max-width: 480px) {
    body.header-scrolled {
        padding-top: 30px;
    }
}

/* ================================
   EFFETTI AGGIUNTIVI OPZIONALI
   ================================ */

/* Menu con sfondo più pronunciato quando header è nascosto */
body.header-scrolled .main-navigation {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

/* Transizione più morbida per il contenuto */
.container {
    transition: padding-top 0.3s ease-in-out;
}

/* ================================
   HEADER PERSONALIZZAZIONI PRECEDENTI
   ================================ */
@media (max-width: 1024px) {
    .site-header {
        height: var(--head-1024-height);
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    body { padding-top: var(--content-1024-top);}
    
    body.admin-bar { 
        padding-top: var(--content-1024-top + var(--admin-bar-heigth));
    }
}

.site-branding-container {
    height: 100%;
    width: var(--head-max-width);
    margin: auto;
    position: relative;
}

.inside-header {
    padding: 5px;
    height: 100%;
}

.site-logo {
    height: 100%;
    width: 100%;
    position: absolute;
    margin: auto;
}

.site-logo img {
    height: 100% !important;
    width: 100% !important;
}   

.site-branding {
    position: absolute;
    margin: auto;
    top: 80%;
    height: 20%;
    width: 90%;
    padding: 0.8%;
}

.site-description {
    z-index: 2;
    color: var(--alternativa-accent) !important;
    background: transparent;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    font-size: clamp(5pt,2vw,16pt);
    font-weight: bold;
    font-style: italic;
    text-align: center;
}

.site-title {
    display: none;
}

/* Mobile grande */
@media screen and (max-width: 480px) {
    .site-description {
        padding: 4px 8px;
        font-weight: 600;
    }
    
    /* Correzione per dispositivi con notch */
    .site-header {
        padding-top: env(safe-area-inset-top, 0);
    }
}

/* Orientamento portrait su mobile */
@media screen and (max-width: 782px) {
    .site-description {
        font-size: 2.8vw;
        line-height: 2.8vw;
    }
    
    .site-branding-container,
    .site-branding {
        width: 100%;
    }
}

/* Ottimizzazione per stampa */
@media print {
    .site-header {
        height: auto;
        position: static;
    }
    
    .site-description {
        position: static;
        transform: none;
        color: black !important;
        text-shadow: none;
        background: white;
    }
}