/*
 * Main Menu Styles - Alternativ@ Child Theme
 * Estratto da style.css per modularità
 */

/* ================================
   NAVIGATION MENU E WIDGET TITLE 
   ================================ */
.main-navigation{
    position:fixed;
    width: 100%;
    top: var(--main-nav-top);
    left: 0;
    right: 0;
    z-index: 9999;
}

body.admin-bar .main-navigation{
    top: calc(var(--main-nav-top) + var(--admin-bar-heigth));
}

@media (max-width: 1024px) {
    .main-navigation{
        top: var(--main-nav-1024-top);
    }
    body.admin-bar .main-navigation{
        top:calc(var(--main-nav-1024-top) + var(--admin-bar-heigth));
    }
}

.main-navigation ul li a,
.widget-title {
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(0,0.5vw,14pt)  ;
    border-radius: 4%;
    text-shadow: var(--alternativa-shadow) 0.5px 0.5px 0.5px;
    padding-left: 0.8vw !important;
    padding-right: 0.8vw !important;
}

#primary-menu ul li.current-menu-item > a {
    color: var(--alternativa-title) !important;
    background-color: var(--alternativa-title-background) !important;
}

#primary-menu .dropdown-menu-toggle {
    padding: 0;
}

.widget-title {
    padding: 1rem;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    color: var(--alternativa-title);
    background: var(--alternativa-title-background);
}

.main-navigation ul li a:hover,
.widget-title:hover {
    color: var(--alternativa-title-over) !important;
    background-color: var(--alternativa-title-background-over) !important;
}

.main-navigation .inside-navigation {
    flex-direction: column;
}   

/* ================================
   MENU MEDIA QUERIES RESPONSIVE
   ================================ */

/* Orientamento portrait su mobile */
@media screen and (max-width: 768px) {
    .main-navigation ul li a {
        font-size: clamp(10px, 4vmin, 20px);
        line-height: 2em !important;
    }
    
    .menu-toggle {
        line-height: 2em !important;
    }
}

/* ================================
   LANDSCAPE ≤ 1024px
   Replica il comportamento del menu mobile (≤ 768px portrait).
   
   NOTA sul cascade:
   Le regole con !important in un foglio di stile vincono anche
   sugli stili inline impostati da GeneratePress via JS (es.
   element.style.display = 'flex'), perché gli inline styles
   senza !important hanno priorità inferiore agli !important
   del foglio autore. Il JS landscape-menu.js rimuove comunque
   eventuali style inline al resize/orientationchange come
   misura di sicurezza aggiuntiva.
   ================================ */
@media screen and (max-width: 1024px) and (orientation: landscape) {

    /* --- Variabili: altezza nav ridotta come su mobile --- */
    :root {
        --nav-height: 2em; /* Uguale al breakpoint ≤ 768px */
    }

    /* --- Hamburger: mostra pulsante e wrapper mobile --- */
    .menu-toggle,
    .mobile-menu-control-wrapper {
        display: flex !important;
    }

    /* --- Nav desktop: nasconde la lista quando il menu è chiuso --- */
    .main-navigation:not(.toggled) .main-nav > ul {
        display: none !important;
    }

    /* --- Link menu: dimensione e interlinea mobile --- */
    .main-navigation ul li a {
        font-size: clamp(10px, 4vmin, 20px) !important;
        line-height: 2em !important;
        /* Padding proporzionale al viewport stretto in landscape */
        padding-left: 4vw !important;
        padding-right: 4vw !important;
    }

    .menu-toggle {
        line-height: 2em !important;
    }

    /* --- Header: impilato in colonna come su mobile --- */
    .inside-header {
        flex-direction: column;
        text-align: center;
    }

    .site-header .header-widget {
        margin-top: 1.5em;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    /* --- Layout contenuto: colonna singola --- */
    .site-content {
        flex-direction: column;
    }

    .container .site-content .content-area {
        width: auto;
    }

    .is-left-sidebar.sidebar,
    .is-right-sidebar.sidebar {
        width: auto;
        order: initial;
    }

    .both-right .inside-left-sidebar,
    .both-left .inside-left-sidebar,
    .both-right .inside-right-sidebar,
    .both-left .inside-right-sidebar {
        margin-right: 0;
        margin-left: 0;
    }

    #main {
        margin-left: 0;
        margin-right: 0;
    }

    /* --- Visibilità: nasconde elementi "desktop-only" --- */
    .hide-on-mobile {
        display: none !important;
    }
}