/* MasterBinder 0.1.13f - mobile navigation recovery.
   Scope deliberately limited to the main public navigation. */
@media (max-width: 720px) {
    nav.main-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        grid-auto-rows: minmax(46px, auto) !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        padding: 8px 10px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        white-space: normal !important;
    }

    nav.main-tabs > a.tab {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        inset: auto !important;
        float: none !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 46px !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 9px 8px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        text-align: center !important;
        line-height: 1.16 !important;
        transform: none !important;
    }

    nav.main-tabs > a.tab:nth-child(n) {
        display: flex !important;
        visibility: visible !important;
    }

    nav.main-tabs > a.tab.active,
    nav.main-tabs > a.tab:focus,
    nav.main-tabs > a.tab:focus-visible {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        transform: none !important;
    }
}

/* Anche sui telefoni molto stretti restano due colonne: i titoli possono andare a capo
   senza trasformare il menu in una lista verticale eccessivamente lunga. */
@media (max-width: 340px) {
    nav.main-tabs {
        gap: 6px !important;
        padding-inline: 7px !important;
    }
    nav.main-tabs > a.tab {
        min-height: 44px !important;
        padding: 8px 6px !important;
        font-size: .82rem !important;
    }
}