/**
 * ME FREE — header.css
 *
 * Tre stati, governati solo da variabili:
 *  1. Pagina con hero, in cima  → trasparente, testo/logo bianchi  (body.has-hero)
 *  2. Scrollato / pagina senza hero → bianco traslucido + blur, testo scuro
 *  3. Menu mobile aperto        → sempre solido
 *
 * Il file sostituisce le due versioni duplicate (main.css + header.css).
 */

/* =========================================================
   1. STATI
   ========================================================= */

#masthead.site-header {
    /* stato 2 (default) */
    --hdr-fg     : var(--me-ink);
    --hdr-bg     : rgba(255, 255, 255, .88);
    --hdr-line   : var(--me-line);
    --hdr-blur   : blur(14px) saturate(1.4);
    --logo-white : 0;
    --logo-blue  : 1;
    --me-header-h: 88px;
    --me-logo    : 64px;

    position: fixed;
    inset   : 0 0 auto 0;
    z-index : 1000;
    width   : 100%;

    background             : var(--hdr-bg);
    color                  : var(--hdr-fg);
    border-bottom          : 1px solid var(--hdr-line);
    box-shadow             : none;
    -webkit-backdrop-filter: var(--hdr-blur);
    backdrop-filter        : var(--hdr-blur);
    transition             :
        background-color .6s var(--me-ease),
        border-color .6s var(--me-ease),
        color .6s var(--me-ease);
}

/* stato 1 */
body.has-hero:not(.is-scrolled) #masthead.site-header {
    --hdr-fg    : #fff;
    --hdr-bg    : transparent;
    --hdr-line  : transparent;
    --hdr-blur  : none;
    --logo-white: 1;
    --logo-blue : 0;
}

/* header compatto dopo lo scroll */
body.is-scrolled #masthead.site-header {
    --me-header-h: 72px;
    --me-logo    : 52px;
}

/* stato 3 (menu mobile aperto) — dopo lo stato 1 per vincere a parità di specificità */
body:has(.main-navigation.toggled) #masthead.site-header {
    --hdr-fg    : var(--me-ink);
    --hdr-bg    : #fff;
    --hdr-line  : var(--me-line);
    --hdr-blur  : none;
    --logo-white: 0;
    --logo-blue : 1;
}

/* Blocca lo scroll con menu aperto (senza JS) */
body:has(.main-navigation.toggled) {
    overflow: hidden;
}

/* Barra admin di WordPress */
body.admin-bar #masthead.site-header {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar #masthead.site-header {
        top: 46px;
    }
}

/* Pagine senza hero: il contenuto parte sotto l'header */
body:not(.has-hero) #page {
    padding-top: var(--me-header-offset);
}


/* =========================================================
   2. LAYOUT — allineato al container delle sezioni
   ========================================================= */

#masthead .inside-header {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 2rem;
    width          : 100%;
    max-width      : calc(var(--me-container) + var(--me-gutter) * 2);
    min-height     : var(--me-header-h);
    margin-inline  : auto;
    padding        : 0 var(--me-gutter);
    transition     : min-height .6s var(--me-ease);
}

#masthead .main-navigation,
#masthead .inside-navigation {
    background: transparent;
}

#masthead .main-navigation {
    flex: 0 0 auto;
}


/* =========================================================
   3. LOGO — crossfade bianco → blu
   ========================================================= */

#masthead .site-logo {
    flex  : 0 0 auto;
    margin: 0;
}

#masthead .site-logo a {
    position: relative;
    display : block;
    width   : var(--me-logo);
    height  : var(--me-logo);
    transition:
        width .6s var(--me-ease),
        height .6s var(--me-ease);
}

#masthead .site-logo img {
    position  : absolute;
    inset     : 0;
    width     : 100%;
    height    : 100%;
    max-width : none;
    object-fit: contain;
    transition: opacity .6s var(--me-ease);
}

#masthead .site-logo .logo-white {
    opacity: var(--logo-white);
}

#masthead .site-logo .logo-blue {
    opacity: var(--logo-blue);
}


/* =========================================================
   4. NAVIGAZIONE DESKTOP
   ========================================================= */

@media (min-width: 769px) {

    #masthead .main-nav>ul {
        display    : flex;
        align-items: center;
        gap        : clamp(1.5rem, 3vw, 3rem);
        margin     : 0;
    }
}

#masthead .main-nav>ul>li {
    margin : 0;
    padding: 0;
}

#masthead .main-nav>ul>li>a {
    position      : relative;
    display       : inline-flex;
    align-items   : center;
    padding       : .75rem 0;
    background    : none;
    color         : var(--hdr-fg);
    font-family   : var(--me-font-sans);
    font-size     : .78rem;
    font-weight   : 500;
    line-height   : 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space   : nowrap;
    transition    : color .6s var(--me-ease), opacity .3s ease;
}

/* neutralizza gli stati hover/focus/attivo del tema padre */
#masthead .main-nav>ul>li:is(:hover, :focus-within, .sfHover, [class*="current-menu-"])>a {
    background: none;
    color     : var(--hdr-fg);
}

/* sottolineatura: entra da sinistra, esce a destra */
#masthead .main-nav>ul>li>a::after {
    content         : "";
    position        : absolute;
    inset           : auto 0 .35rem 0;
    height          : 1px;
    background      : currentColor;
    transform       : scaleX(0);
    transform-origin: right center;
    transition      : transform .6s var(--me-ease);
}

#masthead .main-nav>ul>li:is(:hover, :focus-within)>a::after,
#masthead .main-nav>ul>li[class*="current-menu-"]>a::after {
    transform       : scaleX(1);
    transform-origin: left center;
}


/* =========================================================
   5. MOBILE (breakpoint = quello di GeneratePress: 768px)
      Verifica: Customizer → Layout → Primary Navigation →
      "Mobile Menu Breakpoint" = 768
   ========================================================= */

@media (max-width: 768px) {

    #masthead.site-header {
        --me-header-h: 72px;
        --me-logo    : 52px;
    }

    body.is-scrolled #masthead.site-header {
        --me-header-h: 64px;
        --me-logo    : 46px;
    }

    #masthead .menu-toggle {
        padding    : .5rem 0;
        background : transparent;
        color      : var(--hdr-fg);
        line-height: 1;
        transition : color .6s var(--me-ease);
    }

    #masthead .menu-toggle:is(:hover, :focus) {
        background: transparent;
        color     : var(--hdr-fg);
    }

    /* pannello a tutto schermo */
    #masthead .main-navigation.toggled .main-nav {
        position  : fixed;
        /* ok     : con menu aperto il backdrop-filter è disattivato */
        inset     : var(--me-header-h) 0 0 0;
        padding   : 2rem var(--me-gutter) 3rem;
        overflow-y: auto;
        background: #fff;
        animation : me-menu-in .5s var(--me-ease) both;
    }

    #masthead .main-navigation.toggled .main-nav>ul {
        display       : flex;
        flex-direction: column;
        gap           : 0;
    }

    #masthead .main-navigation.toggled .main-nav>ul>li>a {
        display       : flex;
        width         : 100%;
        padding       : 1.1rem 0;
        border-bottom : 1px solid var(--me-line);
        color         : var(--me-ink);
        font-family   : var(--me-font-serif);
        font-size     : clamp(1.6rem, 7vw, 2.1rem);
        font-weight   : 400;
        letter-spacing: -.01em;
        text-transform: none;
        white-space   : normal;
    }

    #masthead .main-navigation.toggled .main-nav>ul>li>a::after {
        display: none;
    }
}

@keyframes me-menu-in {
    from {
        opacity  : 0;
        transform: translate3d(0, -8px, 0);
    }

    to {
        opacity  : 1;
        transform: none;
    }
}

/* =========================================================
   SELETTORE LINGUA
   Desktop: logo · menu · IT|EN      Mobile: logo · IT|EN · ☰
   ========================================================= */

#masthead .mefree-lang {
    flex       : 0 0 auto;
    order      : 3;
    margin-left: clamp(1.25rem, 2.5vw, 2.5rem);
    color      : var(--hdr-fg);
    transition : color .6s var(--me-ease);
}

#masthead .mefree-lang ul {
    display    : flex;
    align-items: center;
    margin     : 0;
    padding    : 0;
    list-style : none;
}

#masthead .mefree-lang li {
    position: relative;
    margin  : 0;
    padding : 0;
}

/* separatore sottile tra le lingue */
#masthead .mefree-lang li+li::before {
    content   : "";
    position  : absolute;
    left      : 0;
    top       : 50%;
    width     : 1px;
    height    : .9em;
    background: currentColor;
    opacity   : .25;
    transform : translateY(-50%);
}

#masthead .mefree-lang a {
    position       : relative;
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    min-width      : 2.75rem;
    /* touch target ≥ 44px */
    min-height     : 2.75rem;
    background     : none;
    color          : inherit;
    font-size      : .72rem;
    font-weight    : 600;
    line-height    : 1;
    letter-spacing : .14em;
    text-decoration: none;
    opacity        : .6;
    transition     : opacity .4s var(--me-ease);
}

#masthead .mefree-lang a:is(:hover, :focus-visible),
#masthead .mefree-lang a[aria-current="true"] {
    opacity: 1;
}

/* lingua attiva: stessa sottolineatura del menu */
#masthead .mefree-lang a::after {
    content         : "";
    position        : absolute;
    inset           : auto .6rem .7rem;
    height          : 1px;
    background      : currentColor;
    transform       : scaleX(0);
    transform-origin: left center;
    transition      : transform .6s var(--me-ease);
}

#masthead .mefree-lang a[aria-current="true"]::after {
    transform: scaleX(1);
}

/* — Ordine degli elementi nell'header — */
@media (min-width: 769px) {

    #masthead #site-navigation {
        order      : 2;
        margin-left: auto;
    }
}

@media (max-width: 768px) {

    #masthead .inside-header {
        gap: 0;
    }

    #masthead .site-branding-container,
    #masthead .inside-header>.site-logo {
        order: 1;
    }

    #masthead .mefree-lang {
        order      : 2;
        margin-left: auto;
    }

    #masthead #mobile-menu-control-wrapper {
        order      : 3;
        margin-left: .5rem;
    }

    #masthead #site-navigation {
        order: 4;
    }
}