
/* ====== Base — default ====== */
.dropdown-menu {
    display: none;
}

#menu-icon {
    margin-right: 5px;
    margin-left: 5px;
    display: none;
}

/* ====== <= 1530px — Card grids ====== */
@media screen and (max-width:1530px) {

    .card-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .card-grid-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* ====== <= 992px — Navbar/Menu (part 1) ====== */
@media screen and (max-width:992px) {
    .nav-links a {
        display: none;
    }

    #menu-icon {
        margin-right: 5px;
        margin-left: 5px;
        display: block;
    }
}

/* ====== <= 1120px — Cards + Sections + Dropdown ====== */
@media screen and (max-width:1120px) {

    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 45px;
    }

    .section-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .dropdown a {
        padding: 14px 1px;
    }


}

/* ====== <= 992px — Navbar/Menu (part 2) ====== */
@media screen and (max-width:992px) {
    #reservedAerea-display {
        display: block;
        padding: 10px 20px;
        cursor: pointer;
    }

    #reservedAerea-display:hover {
        color: #004377;

    }

    .nav-links a {
        display: none;
    }

    a.mediaT {
        display: block;
    }
}


/* ====== <= 985px — Footer ====== */
@media screen and (max-width: 985px) {
    .footer-div {
        display: block;
    }

    .footer-div-map {
        display: block;
        margin-top: 20px;
    }

}

/* ====== 345–736px — Layout mobile ====== */
@media screen and (min-width: 345px) and (max-width: 736px) {
    .search-container-result {
        padding-left: 10px;
        left: -1px;
        top: 37px;
        white-space: nowrap;
    }

    .tabposition {
        display: block;
    }

    .tabposition .icon-wrapper {
        margin: auto;
        width: auto;
        justify-content: center;

    }

    .section-container .section-container-container .icon-wrapper {
        gap: 50px;
    }

    .textCME {
        display: none;
    }

    .mtop500 {
        margin-top: 9rem;
    }

    /*______________________________________________ Cookie Popup */
    #cookie-popup {
        max-width: max-content;
        width: 100vw;
        padding: 16px 14px;
        height: 20vh;
        bottom: 0;

    }

    .informazioni {
        text-align: center;
        min-height: 15vh;
    }

    .card-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 15px;
        padding: 20px 10px;
        max-width: 200%;
    }

    .section-container {
        grid-template-columns: repeat(1, 1fr);
        gap: 5px;

    }

    .search-container {
        width: 100%;
        margin-bottom: 1rem;

    }

    .search-container input {
        width: 100%;
        padding: 10px;
        font-size: 1em;
        border-radius: 5px;
        border: 1px solid #ccc;
        text-align: center;
    }

    .search-container .icon {
        position: absolute;
        right: 10px;
        top: 72%;
        transform: translateY(-78%);
    }

    .informazioni .info1 {
        border-radius: 10px;
        box-shadow: 0 0 10px #000000;
        margin-top: 20px;

    }

    .dropdown-voice,
    .dropdown-voice-area-riservata,
    .dropdown-voice-sub {
        width: 95%;
        min-height: 40px;
    }

    .dropdown-voice a,
    .dropdown-voice-area-riservata a,
    .dropdown-voice-sub a {
        padding: 8px 10px;
        font-size: 0.9rem;
    }

    .dropdown-dropdown a {
        padding: 10px 12px;
        font-size: 0.85rem;
        min-height: 40px;
    }

    .dropdown-dropdown-sub {
        margin-left: 20px;
    }

    .dropdown-dropdown-sub a {
        padding: 8px 10px;
        margin-left: 5px;
        font-size: 0.8rem;
        min-height: 38px;
    }

    .scroll {
        display: none;
    }

    footer {
        display: block;
    }

    .immagine {
        display: none;
    }

    .logo-name {
        font-size: 1.2em;
    }

    .nav-links a {
        display: none;
    }

    #menu-icon {
        margin-right: 5px;
        margin-left: 5px;
        display: block;
    }

    .dropdown-menu {
        width: 100%;
        left: auto;
        top: 65px;
        margin-top: 5px;
        text-align: right;
        font-size: 1em;
        padding: 0;
    }

    .dropdown-menu a {
        padding: 14px 18px;
    }

    .body-card {
        text-align: center;
    }

    .card {
        margin-top: 700px;
        text-align: center;
        align-items: center;
        margin-top: 20px;
        max-width: 100%;
        height: auto;
        padding: 16px 8px;
        margin-left: 0;
    }

    .cardc {
        margin-top: 70px;
    }

    .card-grid {
        grid-template-columns: repeat(1, 1fr);

        padding: 20px 10px;
        max-width: 100%;
        justify-items: center;
        align-items: center;
        margin-top: -60px;
    }

    .newsscroll-containerLogo {
        background-color: var(--white);
        border-radius: 10px;
    }

    /* ___________________________ currentBtn */
    .toggle-buttons {
        max-width: 69%;
        gap: 40px;
        margin: 2px;
        left: 50%;
        transform: translateX(-50%);
    }

    .toggle-buttons::before {
        width: calc(100% / 3);
    }

    #sezioneBtn p {
        padding-top: 10px;
    }
}

/* ====== <= 650px — Header/Menu ====== */
@media screen and (max-width: 650px) {
    .head {
        height: 50px;
        padding: 0 10px;
    }


    .logo {
        width: 45px;
    }

    .cnce {
        width: 300px;
        height: auto;
    }

    .iiple {
        width: 400px;
        height: 100px;
    }

    .ance {
        width: 400px;
        height: auto;
    }

    .logo-name {
        font-size: 1em;
    }

    .nav-links a {
        display: none;
    }

    #menu-icon {
        margin-right: 5px;
        margin-left: 5px;
        display: block;
    }

    .dropdown-menu {
        width: 98vw;
        right: 1vw;
        left: auto;
        top: 47px;
        margin-top: 3px;
        font-size: 0.9em;
        max-height: calc(100vh - 55px);
    }

    .dropdown-menu a {
        padding: 12px 10px;
        font-size: 0.9em;
    }

    .dropdown-voice,
    .dropdown-voice-area-riservata,
    .dropdown-voice-sub {
        min-height: 38px;
    }

    .dropdown-dropdown a {
        min-height: 36px;
        padding: 8px 10px;
    }

    .dropdown-menu a:active {
        background: var(--linear);
        transition: all 0.5s linear;
    }

    .card-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        padding: 20px 10px;
        max-width: 100%;
        justify-items: center;
        align-items: center;
        margin-top: -10px;
    }

}

/* ====== <= 500px — Toggle buttons (gap) ====== */
@media screen and (max-width: 500px) {
    .toggle-buttons {
        gap: 2rem;

    }
}

/* ====== <= 550px — Toggle buttons (width) ====== */
@media screen and (max-width: 550px) {
    .toggle-buttons {
        max-width: none;
        gap: 38px;

    }
}

@media screen and (max-width: 992px) {

    /* Contatti (layout base) */
    .contatti {
        padding: 20px !important;
        margin: 15px 0 !important;

    }

    .left,
    .right {
        flex: 1;
    }

    .left .informazioni,
    .right .informazioni {
        margin: 0 5px;
    }
}

/* ====== <= 768px — Contatti (impilato) ====== */
@media screen and (max-width: 768px) {
    .contatti {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 20px 15px !important;
        margin: 10px 0 !important;
        background: transparent;
    }

    .left,
    .right {
        flex: none !important;
        width: 100% !important;
    }

    .left .informazioni,
    .right .informazioni {
        width: 100% !important;
        margin: 10px 0 !important;
    }

    .left .informazioni .info1,
    .right .informazioni .info1 {
        margin-bottom: 15px;
    }
}

/* ====== <= 480px — Contatti (tipografia) ====== */
@media screen and (max-width: 480px) {
    .contatti {
        margin: 10px 0 !important;
        padding: 15px 10px !important;
        border-radius: 8px !important;
        background: transparent;


    }

    .left .informazioni .info1,
    .right .informazioni .info1 {
        font-size: 0.95em;
        padding: 15px;
        margin-bottom: 10px;
    }

    .left .informazioni .info1 h3,
    .right .informazioni .info1 h3 {
        font-size: 1.1em;
        margin-bottom: 8px;
    }
}



/* ====== h 200–800px — Altezza ridotta ====== */
@media screen and (min-height: 200px) and (max-height: 800px) {
    .mtop500 {
        margin-top: 270px;
    }

    .dropdown-menu {
        max-height: 300px;
    }
}

/* ====== 992–1180px — Mid‑desktop tweaks ====== */
@media (min-width: 992px) and (max-width: 1180px) {
    #contenuto {
        margin-top: 130px;
    }

    .newsscroll-container {
        margin-top: 30px;
    }

    .head {
        height: 86px;
    }

    .nav-links {
        font-size: 0.813rem;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }

    .nav-links .dropdown {
        padding: 0;
        margin: 0;
    }

    .dropdown-menu1 .dropdown .dropdown-menu1 {
        left: 50%;
        top: 2rem;
        margin-left: 6px;
        min-width: 100px;
    }
}

/* ====== Stili responsive per sottomenu annidati ====== */
@media screen and (max-width: 650px) {
    .dropdown-dropdown-sub {
        margin-left: 10px;
    }

    .dropdown-dropdown-sub a {
        padding: 4px 10px;
        margin-left: 5px;
        font-size: 0.8rem;
    }

    .dropdown-voice-sub .finger {
        padding-right: 10px;
    }
}

@media screen and (max-width: 480px) {
    .dropdown-menu {
        font-size: 0.85em;
        max-height: calc(100vh - 50px);
    }

    .dropdown-voice,
    .dropdown-voice-area-riservata,
    .dropdown-voice-sub {
        min-height: 36px;
        padding: 4px 0;
    }

    .dropdown-voice a,
    .dropdown-voice-area-riservata a,
    .dropdown-voice-sub a {
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    .dropdown-dropdown a {
        min-height: 34px;
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    .dropdown-dropdown-sub {
        margin-left: 15px;
    }

    .dropdown-dropdown-sub a {
        padding: 6px 8px;
        margin-left: 3px;
        font-size: 0.75rem;
        min-height: 32px;
    }

    .finger i {
        font-size: 1.1rem !important;
    }
}