/* ============================================================
   HEADER
   ============================================================ */
body.admin-bar header {
    top: 32px; /* altezza reale della admin bar su desktop */
}

@media screen and (max-width: 782px) {
    body.admin-bar header {
        top: 46px; /* sotto i 782px la admin bar è più alta */
    }
}

body.transparent-menu {
    header {
        background: transparent;
    }
}

body.scroll-down{
    header {
        background: #222;
    }
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
    transition: all .3s ease, background .3s ease;
    background: #222;
    .contact-links{
        img{
           max-width: 25px;
        }
    }
}

/* Rete di sicurezza.
   La regola qui sopra è scritta sull'elemento nudo, quindi prende QUALSIASI
   <header> della pagina, non solo quello del sito: uno dentro al contenuto
   si stacca dal flusso e va a incollarsi in cima allo schermo, sopra al
   menu. Succede coi template di WooCommerce, che usano <header> per il
   titolo dell'archivio prodotti e per quello degli indirizzi nell'account;
   quei due sono sovrascritti in woocommerce/ con dei <div>, ma un
   aggiornamento del plugin o un altro plugin possono rimetterne in giro.

   Qui dentro non ci finisce mai l'header del sito: .gr-main e .gr-woo
   avvolgono solo il contenuto, l'header sta prima e fuori. */
.gr-main header,
.gr-woo header {
    position: static;
    width: auto;
    background: none;
    box-shadow: none;
    z-index: auto;
    transition: none;
}

.header-inner {
    margin: 0 auto;
    padding: 0;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
    max-width: 1320px;
}

.site-logo {
    flex-shrink: 0;
}
.site-logo img,
.site-logo .custom-logo {
    height: 20px;
    width: auto;
    display: block;
}
/* Il logo del Green è un marchio quadrato, non una scritta in linea:
   a 20px sparirebbe. L'header è alto 96px, il marchio ne prende 68
   e restano 14px di aria sopra e sotto. */
.site-logo .site-logo__img { height: 68px; }

/* Appena si scorre l'header si stringe e il marchio con lui: in cima resta
   in grande, durante la lettura lascia spazio alla pagina.
   La classe .scrolled la mette menu.js, quindi vale su tutte le pagine. */
.header-inner,
.site-logo .site-logo__img {
    transition: height .32s cubic-bezier(.22, .61, .36, 1);
}
header.scrolled .header-inner { height: 74px; }
header.scrolled .site-logo .site-logo__img { height: 52px; }

/* Al posto del marchio, il nome del sito scritto in grassetto.
   L'header è sempre scuro (#222, o verde nelle pagine Green): testo bianco. */
.site-logo .site-logo__text {
    display: block;
    color: #fff;
    font-family: 'Outfit', 'Montserrat', system-ui, -apple-system, sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    text-decoration: none;
    white-space: nowrap;
    transition: font-size .32s cubic-bezier(.22, .61, .36, 1), color .2s ease;
}
.site-logo .site-logo__text:hover,
.site-logo .site-logo__text:focus-visible { color: #B6D94C; }
header.scrolled .site-logo .site-logo__text { font-size: 1.4rem; }

@media (prefers-reduced-motion: reduce) {
    .header-inner,
    .site-logo .site-logo__img,
    .site-logo .site-logo__text { transition: none; }
}

@media (max-width: 782px) {
    /* Su mobile l'header si accorcia: il logo scende di conseguenza. */
    .header-inner { height: 78px; }
    .site-logo .site-logo__img { height: 54px; }
    .site-logo .site-logo__text { font-size: 1.35rem; }
    header.scrolled .header-inner { height: 64px; }
    header.scrolled .site-logo .site-logo__img { height: 44px; }
    header.scrolled .site-logo .site-logo__text { font-size: 1.25rem; }
}

#main-menu {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 1024px) {
    .header-inner {
        height: 70px;
        padding: 0 20px;
    }
}