/* =====================================================
   DESKTOP MEDIO
===================================================== */

@media (max-width: 1260px) {
    .header-container {
        gap: 14px;
    }

    .main-menu {
        gap: 18px;
    }

    .main-menu a,
    .news-menu-toggle {
        font-size: 14px;
    }

    .site-logo {
        padding-inline: 9px;
    }

    .site-logo img {
        height: 49px;
        max-width: 168px;
    }

    .header-live-button {
        padding-inline: 12px;
    }
}

/* =====================================================
   MENU MOBILE / TABLET
===================================================== */

@media (max-width: 1040px) {
    .site-header,
    .header-container {
        min-height: 78px;
    }

    .header-container {
        width: 96%;
        justify-content: flex-start;
        gap: 10px;
    }

    .site-logo {
        padding: 5px 8px;
        border-radius: 12px;
    }

    .site-logo img {
        height: 46px;
        max-width: 162px;
    }

    .header-live-actions {
        margin-right: auto;
    }

    .menu-toggle {
        display: flex;
        order: 4;
        flex: 0 0 auto;
    }

    .main-navigation {
        position: fixed;
        top: 78px;
        right: 0;
        bottom: 0;
        width: min(90%, 410px);
        padding: 22px 24px 34px;
        display: block;
        overflow-y: auto;
        background: rgba(7, 17, 31, 0.99);
        border-left: 1px solid var(--color-border);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        transform: translateX(105%);
        visibility: hidden;
        transition: transform 0.3s ease, visibility 0.3s ease;
    }

    .main-navigation.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    .main-menu {
        display: block;
    }

    .main-menu > li {
        border-bottom: 1px solid var(--color-border);
    }

    .main-menu > li > a,
    .news-menu-toggle {
        width: 100%;
        justify-content: space-between;
        padding: 18px 4px;
        font-size: 17px;
        text-align: left;
    }

    .main-menu > li > a::after,
    .news-menu-toggle::after {
        display: none;
    }

    .news-submenu {
        position: static;
        width: 100%;
        max-height: 0;
        padding: 0;
        display: grid;
        gap: 7px;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: max-height 0.28s ease, padding 0.28s ease;
    }

    .news-menu-item:hover .news-submenu,
    .news-menu-item:focus-within .news-submenu {
        transform: none;
    }

    .news-menu-item.is-open .news-submenu {
        max-height: 420px;
        padding: 0 0 14px;
    }

    .news-submenu a {
        min-height: 58px;
        grid-template-columns: 102px minmax(0, 1fr);
        padding: 7px;
        background: rgba(255, 255, 255, 0.05);
    }

    .header-actions {
        margin-left: 0;
    }
}

/* =====================================================
   SMARTPHONE
===================================================== */

@media (max-width: 700px) {
    .site-header,
    .header-container {
        min-height: 72px;
    }

    .header-container {
        width: 96%;
        gap: 7px;
    }

    .main-navigation {
        top: 72px;
    }

    .site-logo {
        padding: 4px 6px;
    }

    .site-logo img {
        height: 39px;
        max-width: 120px;
    }

    .header-live-actions {
        gap: 5px;
    }

    .header-live-button {
        min-height: 38px;
        padding: 0 10px;
        gap: 6px;
        font-size: 11px;
    }

    .header-live-label-desktop {
        display: none;
    }

    .header-live-label-mobile {
        display: inline;
    }

    .header-live-radio-icon {
        font-size: 14px;
    }

    .header-live-dot {
        width: 7px;
        height: 7px;
    }

    .search-link {
        display: none;
    }

    .menu-toggle {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }
}

/* =====================================================
   SMARTPHONE PICCOLI
===================================================== */

@media (max-width: 430px) {
    .header-container {
        width: 98%;
        gap: 4px;
    }

    .site-logo {
        padding: 3px 4px;
        border-radius: 9px;
    }

    .site-logo img {
        width: 82px;
        height: 34px;
    }

    .header-live-button {
        min-height: 36px;
        padding-inline: 8px;
        font-size: 10px;
    }

    .header-live-radio-icon {
        display: none;
    }

    .menu-toggle {
        width: 37px;
        height: 37px;
    }

    .menu-toggle span {
        width: 19px;
    }
}

@media (max-width: 360px) {
    .site-logo img {
        width: 70px;
    }

    .header-live-button {
        padding-inline: 6px;
    }

    .header-live-dot {
        display: none;
    }
}


/* =====================================================
   v0.6.0b — LOGO PIENO E PULSANTI LIVE NEON
===================================================== */

@media (max-width: 1260px) and (min-width: 1041px) {
    .site-logo {
        width: 250px;
        height: 102px;
        flex-basis: 250px;
    }

    .site-logo img {
        width: 100%;
        height: 100%;
        max-width: none;
    }

    .header-live-button {
        min-width: 168px;
        min-height: 70px;
        padding-inline: 15px;
    }

    .header-live-title {
        font-size: 17px;
    }
}

@media (max-width: 1040px) {
    .site-header,
    .header-container {
        min-height: 92px;
    }

    .main-navigation {
        top: 92px;
    }

    .site-logo {
        width: 190px;
        height: 76px;
        flex: 0 0 190px;
        padding: 6px 8px;
        border-radius: 15px;
    }

    .site-logo img {
        width: 100%;
        height: 100%;
        max-width: none;
    }

    .header-live-button {
        min-width: 150px;
        min-height: 64px;
        padding: 8px 12px;
        border-radius: 15px;
    }

    .header-live-title {
        font-size: 15px;
    }

    .header-live-subtitle {
        margin-top: 5px;
        font-size: 8px;
    }

    .header-live-play {
        font-size: 19px;
    }
}

@media (max-width: 760px) {
    .site-header,
    .header-container {
        min-height: 78px;
    }

    .main-navigation {
        top: 78px;
    }

    .header-container {
        flex-wrap: nowrap;
    }

    .site-logo {
        width: 118px;
        height: 58px;
        flex: 0 0 118px;
        padding: 4px 5px;
        border-radius: 12px;
    }

    .site-logo img {
        width: 100%;
        height: 100%;
    }

    .header-live-actions {
        gap: 5px;
    }

    .header-live-button {
        min-width: 0;
        min-height: 52px;
        padding: 6px 9px;
        gap: 7px;
        border-radius: 13px;
    }

    .header-live-title {
        font-size: 12px;
    }

    .header-live-subtitle {
        display: none;
    }

    .header-live-play {
        display: none;
    }

    .header-live-radio-icon {
        font-size: 14px;
    }

    .menu-toggle {
        margin-left: auto;
    }
}

@media (max-width: 430px) {
    .site-logo {
        width: 92px;
        height: 50px;
        flex-basis: 92px;
    }

    .header-live-button {
        min-height: 46px;
        padding-inline: 7px;
    }

    .header-live-title {
        font-size: 10px;
    }

    .header-live-dot {
        width: 6px;
        height: 6px;
    }

    .header-live-radio-icon {
        display: none;
    }
}

@media (max-width: 360px) {
    .site-logo {
        width: 78px;
        flex-basis: 78px;
    }

    .header-live-button {
        padding-inline: 5px;
    }

    .header-live-title {
        font-size: 9px;
    }
}


/* =====================================================
   v0.6.0e — FIX DEFINITIVO MENU MOBILE
   Usa posizione assoluta sotto l'header per evitare
   il taglio causato dal backdrop-filter del contenitore.
===================================================== */

@media (max-width: 1040px) {
    .site-header {
        overflow: visible !important;
    }

    .main-navigation {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;

        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: calc(100dvh - 78px) !important;

        padding: 18px 22px 34px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;

        background: rgba(7, 17, 31, 0.995) !important;
        border-top: 1px solid var(--color-border) !important;
        border-left: 0 !important;
        box-shadow: 0 22px 45px rgba(0, 0, 0, 0.55) !important;

        transform: translateY(-8px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transition:
            transform 0.24s ease,
            opacity 0.24s ease,
            visibility 0.24s ease !important;

        z-index: 2000 !important;
    }

    .main-navigation.is-open {
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .main-menu {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 24px !important;
    }

    .main-menu > li {
        width: 100% !important;
    }

    .main-menu > li:first-child > a {
        padding-top: 16px !important;
    }

    .main-menu > li > a,
    .news-menu-toggle {
        min-height: 54px !important;
        padding: 15px 4px !important;
    }
}

@media (max-width: 700px) {
    .main-navigation {
        max-height: calc(100dvh - 72px) !important;
    }
}