/* ============================================================
   Menu principale — desktop (megamenu) e mobile.
   Alimentati entrambi da includes/menu-registry.php.

   Caricato su tutte le pagine: il menu c'è ovunque.
   Nessun JavaScript proprio: i dropdown sono il componente
   navbar di UIkit, gli accordion mobile sono <details>.
   ============================================================ */


/* --- Barra ---------------------------------------------------- */

.mc-menu > li > a {
    display: flex;
    align-items: center;
    gap: 5px;
}

.mc-menu__freccia {
    width: 13px;
    height: 13px;
    flex: none;
    transition: transform .2s ease;
}

.mc-menu__ha-figli:hover > a .mc-menu__freccia,
.mc-menu__ha-figli:focus-within > a .mc-menu__freccia {
    transform: rotate(180deg);
}

/* La voce Contatti è l'azione, non una voce come le altre. */
.mc-menu__cta > a {
    background: #007df9;
    color: #fff !important;
    border-radius: 999px;
    padding: 0 20px !important;
    margin-left: 10px;
    height: 40px;
    align-self: center;
    transition: background .2s ease;
}

.mc-menu__cta > a:hover {
    background: #0a5cd0;
    color: #fff !important;
}


/* --- Megamenu ------------------------------------------------- */

.mc-mega {
    padding: 0;
    max-width: none;

    /* Larghezza esplicita, non 'auto': le tracce 1fr 1fr 2fr della griglia
       devono avere una larghezza su cui calcolarsi. */
    width: min(1080px, calc(100vw - 40px));
}

/* Il pannello va centrato sulla barra, non appeso alla voce «Servizi».
   UIkit lo posiziona sotto la voce con left/top inline: da lì un pannello
   largo mille pixel esce dallo schermo a destra, ed è quello che si vedeva.
   Il riferimento è .uk-navbar, che UIkit tiene già in position:relative. */
@media (min-width: 960px) {

    .mc-mega {
        left: 50% !important;
        right: auto !important;
        top: 100% !important;
        transform: translateX(-50%);
    }
}

.mc-mega__griglia {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 0;
    padding: 26px 30px 30px;
}

/* Una famiglia con molte voci (l'AI) dispone i servizi su due colonnine:
   il pannello resta compatto in altezza invece di diventare una lista
   chilometrica. Lo spazio in più glielo dà già la terza traccia della
   griglia, che è larga 2fr: qui NON ci va nessun grid-column span,
   altrimenti servirebbero quattro tracce e la colonna andrebbe a capo. */
.mc-mega__voci--doppie {
    columns: 2;
    column-gap: 24px;
}

.mc-mega__voci--doppie > li {
    break-inside: avoid;
    margin-top: 0;
}

.mc-mega__voci--doppie > li + li {
    margin-top: 2px;
}

/* I separatori fra le colonne. Sta prima della media query perché la
   media query deve poterlo annullare: a parità di ordine vincerebbe
   questa regola, che ha specificità più alta. */
.mc-mega__colonna + .mc-mega__colonna {
    border-left: 1px solid #e8eef5;
    padding-left: 26px;
    margin-left: 26px;
}

/* Sotto i 1200px il pannello non ci sta in tre colonne larghe: le prime
   due restano affiancate e la famiglia larga scende sotto, a tutta riga. */
@media (max-width: 1199px) {

    .mc-mega__griglia {
        grid-template-columns: 1fr 1fr;
        max-width: 780px;
    }

    .mc-mega__colonna--larga {
        grid-column: span 2;
    }

    .mc-mega__colonna + .mc-mega__colonna--larga {
        border-left: 0;
        padding-left: 0;
        margin-left: 0;
        margin-top: 22px;
        padding-top: 20px;
        border-top: 1px solid #e8eef5;
    }
}

.mc-mega__famiglia {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #007df9 !important;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8eef5;
}

.mc-mega__famiglia:hover { text-decoration: none; }
.mc-mega__famiglia--statica { color: #7b8794 !important; }

.mc-menu__icona,
.mc-mega__famiglia svg {
    width: 17px;
    height: 17px;
    flex: none;
}

.mc-mega__voci {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mc-mega__voci > li + li {
    margin-top: 2px;
}

.mc-mega__voci a {
    display: block;
    padding: 9px 10px;
    margin: 0 -10px;
    border-radius: 8px;
    color: #333 !important;
    transition: background .15s ease;
}

.mc-mega__voci a:hover,
.mc-mega__voci a:focus {
    background: #f4f9ff;
    text-decoration: none;
}

.mc-mega__voce-testo {
    display: block;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.3;
}

/* Il peso è dichiarato, non ereditato. UIkit mette un font-weight:bold su
   .uk-navbar-dropdown-nav > li > a: finché quella classe resta sul markup
   (o se un domani ci ritorna), la descrizione la eredita dal link e diventa
   grassetta. Scrivendo 400 qui il problema non si ripresenta comunque. */
.mc-mega__voce-desc {
    display: block;
    font-weight: 400;
    font-size: .82rem;
    line-height: 1.4;
    color: #6b7787;
    margin-top: 2px;
}

.mc-mega__voce--evidenza a {
    color: #007df9 !important;
    font-weight: 700;
}

.mc-mega__voce--evidenza .mc-mega__voce-testo::after {
    content: ' →';
}


/* --- Dropdown semplice ----------------------------------------
   Le misure sono le stesse del megamenu: aperti uno dopo l'altro
   nella stessa barra, due pannelli con respiro diverso si notano
   subito. Il riferimento è .mc-mega__griglia, che ha 26px sopra e
   30px ai lati — qui prima erano 14px in croce.
   ------------------------------------------------------------- */

.mc-drop {
    /* 360 e non 330: con il padding nuovo la colonna di testo resta
       larga come prima invece di stringersi di trenta pixel. */
    width: 360px;
    padding: 26px 30px 30px;
}

/* I divisori fra le voci restano — sono una scelta di Mirko, il megamenu
   non ne ha perché lì a separare ci pensano le colonne. Quello che
   cambia è l'aria intorno: prima il testo ci stava appiccicato sopra
   e sotto. */
.mc-drop__voci > li + li {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e8eef5;
}

.mc-drop__voci > li > a {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    /* Stesso passo del megamenu, negativo ai lati incluso: così lo
       sfondo dell'hover deborda fino al bordo del pannello invece di
       restare una targhetta stretta in mezzo. */
    padding: 9px 10px;
    margin: 0 -10px;
    border-radius: 8px;
    color: #333 !important;
    transition: background .15s ease;
}

.mc-drop__voci > li > a:hover {
    background: #f4f9ff;
    text-decoration: none;
}

.mc-drop__voci .mc-menu__icona {
    margin-top: 3px;
    color: #007df9;
}

.mc-drop__titolo {
    display: block;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.3;
}

/* Le due liste — quella del megamenu e quella del dropdown semplice —
   devono leggersi identiche. Il dropdown ereditava da .uk-navbar-dropdown-nav
   un font-size di .875rem e un colore #999 sui link: adesso quelle classi
   non ci sono più e le misure si dichiarano qui, una volta per entrambe. */
.mc-drop__voci,
.mc-mega__voci {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1rem;
}

.mc-drop__desc {
    display: block;
    font-weight: 400;
    font-size: .82rem;
    line-height: 1.4;
    color: #6b7787;
    margin-top: 2px;
}


/* --- Menu mobile ---------------------------------------------- */

.mc-mmenu {
    width: 100%;

    /* Il contenitore del pannello ha padding-top zero: senza questo la
       prima sezione resta incollata al logo e al pulsante di chiusura.
       Erano i 32px che il vecchio menu dava a ogni .menu-section. */
    margin-top: 32px;
}

/* La foto in cima alla sezione «Chi sono». */
.mc-mmenu__profilo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;

    /* È un link ma non deve sembrare un link di testo: niente sottolineatura,
       né ferma né al passaggio del dito. Il segnale che si può toccare lo dà
       la foto, non una riga sotto le parole. */
    color: inherit;
    text-decoration: none;
}

.mc-mmenu__profilo:hover,
.mc-mmenu__profilo:focus {
    text-decoration: none;
}

.mc-mmenu__profilo:hover .mc-mmenu__foto {
    box-shadow: 0 0 0 3px rgba(0, 125, 249, .18);
}

.mc-mmenu__profilo:focus-visible {
    outline: 2px solid #007df9;
    outline-offset: 4px;
    border-radius: 12px;
}

.mc-mmenu__foto {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: block;
    transition: box-shadow .2s ease;
}

.mc-mmenu__profilo-testo {
    display: block;
    margin: 0;
    font-size: .95rem;
    line-height: 1.35;
    color: #55606b;
}

.mc-mmenu__profilo-testo strong {
    display: block;
    color: #0a2540;
}

.mc-mmenu__sezione + .mc-mmenu__sezione {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid #e8eef5;
}

.mc-mmenu__titolo {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a95a3;
    margin-bottom: 8px;
}

.mc-mmenu__voce {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 0;
    font-size: 1.02rem;
    font-weight: 500;
    color: #222 !important;
}

.mc-mmenu__voce--cta {
    background: #007df9;
    color: #fff !important;
    border-radius: 999px;
    justify-content: center;
    padding: 14px;
    font-weight: 600;
    margin-top: 6px;
}

/* Accordion in <details>: funziona anche senza JavaScript. */
.mc-mmenu__gruppo {
    border-bottom: 1px solid #e8eef5;
}

/* L'ultimo accordion di una sezione perde il suo bordo: subito sotto c'è già
   quello che separa le sezioni, e si vedevano due righe una sull'altra. */
.mc-mmenu__gruppo:last-child {
    border-bottom: 0;
}

.mc-mmenu__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 0;
    cursor: pointer;
    font-size: 1.02rem;
    font-weight: 600;
    color: #222;
    list-style: none;
}

/* nasconde il triangolino di default di <summary> */
.mc-mmenu__toggle::-webkit-details-marker { display: none; }
.mc-mmenu__toggle::marker { content: ''; }

.mc-mmenu__toggle-testo {
    display: flex;
    align-items: center;
    gap: 11px;
}

.mc-mmenu__freccia {
    width: 17px;
    height: 17px;
    flex: none;
    color: #8a95a3;
    transition: transform .2s ease;
}

.mc-mmenu__gruppo[open] .mc-mmenu__freccia {
    transform: rotate(180deg);
}

.mc-mmenu__sotto {
    padding: 0 0 10px 28px;
}

.mc-mmenu__sottovoce {
    display: block;
    padding: 9px 0;
    font-size: .95rem;
    color: #4a5563 !important;
}

.mc-mmenu__sottovoce--evidenza {
    color: #007df9 !important;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {

    .mc-menu__freccia,
    .mc-mmenu__freccia,
    .mc-menu__cta > a,
    .mc-mega__voci a {
        transition: none;
    }
}


/* --- Ultime letture (solo mobile) ----------------------------- */

.mc-mmenu__letture {
    margin: 4px 0 14px;
}

.mc-mmenu__letture-titolo {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #8a95a3;
    margin-bottom: 9px;
}

.mc-mmenu__letture-lista {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.mc-mmenu__libro {
    flex: none;
    scroll-snap-align: start;
}

.mc-mmenu__libro img {
    width: 62px;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
    display: block;
}