/* css/header-mobile-menu.css
   Menu hamburger dell'header, visibile SOLO sotto i 600px (smartphone).
   Soglia scelta riusando lo stesso breakpoint già stabilito per la welcome
   page (vedi css/welcome.css), con ampio margine di sicurezza sotto la
   larghezza minima riscontrata su tablet Android di fascia bassa (800px
   in verticale). Sopra i 600px questo file non ha alcun effetto: il
   bottone hamburger resta nascosto e il pannello resta permanentemente
   "hidden", quindi l'header desktop/tablet non viene toccato in alcun modo.

   Menu completo: bottone + pannello con i bottoni proxy (Guida,
   Aiutaci a migliorare, Vuoi supportarci, Salva nel cloud, Classifica
   Generale, Titoli), con sincronizzazione della disponibilità basata
   sullo stato logico reale — vedi js/ui/headerMobileMenu.js.
*/

.header-mobile-menu-toggle {
    display: none;
}

@media (max-width: 599px) {
    /* Ancora il pannello a comparsa all'header, senza spostare né
       ridimensionare nulla: position:relative non ha alcun effetto
       visivo finché non c'è un discendente posizionato in modo assoluto,
       quindi è sicuro anche se qualche altro stile di header dovesse
       cambiare in futuro sopra i 600px (questa regola non si applica lì). */
    header {
        position: relative;
    }

    .header-mobile-menu-toggle {
        display: block;
        position: absolute;
        top: 0.6rem;
        left: 1rem;
        width: auto;
        background-color: #34495e;
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 1.3rem;
        line-height: 1;
        padding: 0.4rem 0.7rem;
        cursor: pointer;
        z-index: 20;
    }

    .header-mobile-menu-toggle:hover {
        background-color: #2c3e50;
    }

    .header-mobile-menu-panel {
        position: absolute;
        top: 100%;
        left: 1rem;
        right: 1rem;
        background-color: #2c3e50;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        padding: 0.6rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        max-height: calc(100vh - 4rem);
        overflow-y: auto;
        z-index: 20;
    }

    .header-mobile-menu-panel[hidden] {
        display: none;
    }

    /* Bottoni proxy: aspetto coerente con i bottoni reali dell'header
       (stesso font-weight/border-radius), ma il colore di sfondo viene
       impostato dinamicamente via JS copiandolo dal bottone reale
       corrispondente — questo è solo un fallback prima che lo script
       giri, e per eventuali proxy senza colore inline (Classifica
       Generale usa .classifica-btn invece di uno style inline: qui il
       fallback resta il rosso di base .header-button, coerente con
       l'header disteso). */
    .header-mobile-menu-item {
        display: block;
        width: 100%;
        border: none;
        border-radius: 6px;
        padding: 0.7rem 0.9rem;
        font-size: 0.95rem;
        font-weight: 700;
        color: white;
        background-color: #e74c3c;
        cursor: pointer;
        text-align: center;
    }

    .header-mobile-menu-item[hidden] {
        display: none;
    }

    /* ────────────────────────────────────────────────────────────
       I bottoni che confluiscono nel menu hamburger spariscono dalla
       loro posizione originale sotto i 600px, indipendentemente dallo
       stato che la logica per-vista esistente (applyHeaderViewConfig()
       in navigation.js) imposta su di loro: quella logica decide SE
       un'azione ha senso nella vista corrente (query invariata, non
       toccata), questa regola decide SOLO dove va visualizzata
       quell'azione quando è già ammessa (nell'header disteso su
       desktop/tablet, oppure dentro il pannello hamburger su
       smartphone, dove i bottoni proxy replicano testo/colore/
       disponibilità — vedi js/ui/headerMobileMenu.js).
       !important necessario per prevalere sullo style inline che
       aggiornaHeaderModalita()/applyHeaderViewConfig() possono impostare
       quando il bottone è ammesso nella vista corrente (style.display
       = '' , che altrimenti lascerebbe span le regole di default).
       Bottone Home (header-i-miei-tornei) volutamente ESCLUSO da questo
       elenco: resta sempre visibile nella sua riga, come richiesto. */
    #btn-quick-guide,
    #btn-feedback,
    #btn-supporta,
    #btn-salva-cloud,
    #header-classifica-generale,
    #header-gestione-titoli {
        display: none !important;
    }
}