/* =========================================================================
   Sottomenu "Ortopedia" — usabilità e spaziatura.
   Scoped a .menu-ortopedia (classe sul <li> top) → nessun impatto sugli altri
   menu. Specificità .header__menu .menu-ortopedia … (+ !important dove il tema
   lo usa) per vincere sulle regole compilate in style.css. Comportamento
   click-to-open invariato.
   ========================================================================= */

/* ---------- DESKTOP (> 768px) ---------- */
@media (min-width: 769px) {

    /* Dropdown di 2° livello: più largo, con scroll se lungo */
    .header__menu .menu-ortopedia>.sub-menu {
        min-width: 280px;
        max-height: 78vh;
        overflow-y: auto;
        padding: 0.5rem 0;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
    }

    /* Voci di 2° livello: reset margini stretti del tema, item pieni e cliccabili */
    .header__menu .menu-ortopedia>.sub-menu>li {
        margin: 0 !important;
        padding: 0 !important;
        display: block;
    }

    .header__menu .menu-ortopedia>.sub-menu>li>a {
        display: block;
        padding: 9px 1.4rem !important;
        font-size: 0.95rem !important;
        line-height: 1.3;
        color: #30487f !important;
        font-weight: 500;
    }

    /* Intestazioni di gruppo (voci con figli) evidenziate */
    .header__menu .menu-ortopedia>.sub-menu>li.menu-item-has-children>a {
        text-transform: uppercase;
        letter-spacing: .02em;
        font-size: 0.82rem !important;
        color: #1f2d54 !important;
        border-top: 1px solid #eef1f7;
        margin-top: 2px;
    }

    .header__menu .menu-ortopedia>.sub-menu>li:first-child>a {
        border-top: 0;
    }

    /* Hover: affordance chiara */
    .header__menu .menu-ortopedia .sub-menu li a:hover {
        background: #eef1f7;
        color: #25396a !important;
    }

    /* 3° livello: leggibile e cliccabile (override del 0.75rem/1.6px del tema) */
    .header__menu .menu-ortopedia .sub-menu .sub-menu {
        position: static;
        margin: 0.15rem 0 0.5rem 1.1rem;
        padding: 0.2rem 0 0.3rem 0.9rem;
        background: #f7f8fb;
        border-left: 3px solid #30487f;
        border-top: 0;
    }

    .header__menu .menu-ortopedia .sub-menu .sub-menu li {
        margin: 0 !important;
        padding: 0 !important;
    }

    .header__menu .menu-ortopedia .sub-menu .sub-menu li a {
        padding: 7px 1rem !important;
        font-size: 0.88rem !important;
        line-height: 1.3;
        opacity: 1 !important;
        color: #3a4a70 !important;
        text-transform: none;
        font-weight: 400;
    }
}

/* ---------- MOBILE (<= 768px) ---------- */
@media (max-width: 768px) {

    /* 2° livello più arioso */
    .header__menu .menu-ortopedia .sub-menu li {
        margin: 0.35rem 1rem !important;
    }

    /* 3° livello leggibile (il tema lo porta a 0.75rem/opacity .75) */
    .header__menu .menu-ortopedia .sub-menu .sub-menu {
        padding-left: 1.25rem;
        border-left: 2px solid rgba(255, 255, 255, .3);
        margin: 0.2rem 0 0.6rem;
    }

    .header__menu .menu-ortopedia .sub-menu .sub-menu a {
        font-size: 1rem !important;
        opacity: 1 !important;
        margin-bottom: 0.4rem !important;
    }
}