/* ============================================================================
   Intestazione e pie' di pagina (2026-09-21)
   Stessa impostazione delle pagine Eventi: tipografia netta, UI silenziosa,
   rosa del marchio come accento. Sostituiscono l'intestazione/pie' minimi di
   WordPress (titolo sottolineato e "proudly powered by WordPress").
   ============================================================================ */

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

.mh-skip {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--btn-bg); color: var(--btn-ink); padding: 10px 16px; border-radius: 0 0 8px 0;
}
.mh-skip:focus { left: 0; }

/* ── Intestazione ───────────────────────────────────────────────────────── */
.mh-site-header {
    position: sticky; top: 0; z-index: 30;
    background: var(--header-bg);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--mhh-line);
}
.admin-bar .mh-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .mh-site-header { top: 46px; } }

.mh-site-header__inner {
    max-width: var(--mhh-maxw); margin: 0 auto; padding: 0 24px;
    height: var(--mhh-h);
    display: flex; align-items: center; gap: 28px;
}

.mh-brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
/* WooCommerce applica ".woocommerce-page img { height:auto }": sulle pagine negozio/account
   vincerebbe su una singola classe. Due classi bastano, senza ricorrere a !important. */
.mh-site-header .mh-brand__logo { height: 34px; width: auto; display: block; }
.mh-brand__text { font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; color: var(--mhh-ink); }

.mh-nav { flex: 1 1 auto; }
.mh-nav ul, .mh-nav .mh-menu {
    display: flex; align-items: center; gap: 26px;
    margin: 0; padding: 0; list-style: none;
}
.mh-nav li { position: relative; }
/* La sottolineatura e' sfumata, e un bordo non si puo' sfumare: si disegna come
   sfondo alto due pixel in fondo alla voce, largo zero finche' non serve. Lo
   spazio sotto al testo lo tiene il padding, come faceva prima il bordo. */
.mh-nav a {
    display: inline-block; padding: 6px 0 8px;
    font-size: .95rem; font-weight: 500; color: var(--mhh-ink-2); text-decoration: none;
    background: var(--grad-accento) 0 100% / 0 2px no-repeat;
    transition: color .15s ease, background-size .2s ease;
}
.mh-nav a:hover { color: var(--mhh-ink); }
.mh-nav .current-menu-item > a,
.mh-nav .current_page_item > a { color: var(--mhh-ink); background-size: 100% 2px; }
/* Sei in una pagina che sta SOTTO una voce: si sottolinea anche il titolo che la
   contiene, se no dentro "Su di noi" non si capisce piu' dove si e'. Vale anche
   quando il titolo non e' un collegamento (vedi .mh-nav__label qui sotto). */
.mh-nav .current-menu-ancestor > a,
.mh-nav .current-menu-parent > a,
.mh-nav .current_page_ancestor > a,
.mh-nav .current-menu-ancestor > .mh-nav__label,
.mh-nav .current-menu-parent > .mh-nav__label { color: var(--mhh-ink); background-size: 100% 2px; }

/* ── Voci annidate ──────────────────────────────────────────────────────────
   Una pagina puo' stare sotto un'altra: basta indicare il genitore in
   Aspetto > Menu, qui non c'e' niente da aggiungere. Il pannello si apre col
   mouse e col tab (:focus-within), quindi funziona anche da tastiera e senza
   JavaScript. Il menu e' dichiarato con depth 2 (template-parts/site-header.php):
   un terzo livello non verrebbe stampato. */
/* Una voce che fa solo da titolo (indirizzo "#"): stessa forma di un collegamento,
   ma il cursore non promette un clic che non c'e'. Vedi il filtro in functions.php. */
.mh-nav__label { cursor: default; }
.mh-nav .mh-nav__label {
    display: inline-block; padding: 6px 0 8px; font-size: .95rem; font-weight: 500; color: var(--mhh-ink-2);
    background: var(--grad-accento) 0 100% / 0 2px no-repeat;
    transition: color .15s ease, background-size .2s ease;
}

.mh-nav .menu-item-has-children > a,
.mh-nav .menu-item-has-children > .mh-nav__label { display: inline-flex; align-items: center; gap: 7px; }
.mh-nav .menu-item-has-children > a::after,
.mh-nav .menu-item-has-children > .mh-nav__label::after {
    content: ""; flex: 0 0 auto; width: 6px; height: 6px;
    border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
    transform: translateY(-2px) rotate(45deg); opacity: .5;
    transition: transform .15s ease, opacity .15s ease;
}
.mh-nav .menu-item-has-children:hover > a::after,
.mh-nav .menu-item-has-children:hover > .mh-nav__label::after,
.mh-nav .menu-item-has-children:focus-within > a::after,
.mh-nav .menu-item-has-children:focus-within > .mh-nav__label::after { opacity: 1; }

.mh-nav .sub-menu {
    position: absolute; top: 100%; left: -16px; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 0;
    min-width: 210px; padding: 8px 0;
    background: var(--surface); border: 1px solid var(--mhh-line); border-radius: 12px;
    box-shadow: 0 14px 34px var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(5px);
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.mh-nav .menu-item-has-children:hover > .sub-menu,
.mh-nav .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
/* Il pannello comincia sotto la voce, ma fra le due c'e' il vuoto dell'intestazione:
   senza questo ponte invisibile il mouse "esce" a meta' strada e il menu si richiude. */
.mh-nav .menu-item-has-children::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px;
}
/* Dentro al pannello la voce attiva si distingue col grassetto, senza filo: una
   riga colorata sotto a una voce di un elenco stretto sembrerebbe un separatore. */
.mh-nav .sub-menu a {
    display: block; padding: 9px 16px; white-space: nowrap;
    font-weight: 500; background-image: none;
}
.mh-nav .sub-menu a:hover { color: var(--hover); }
.mh-nav .sub-menu .current-menu-item > a,
.mh-nav .sub-menu .current_page_item > a { color: var(--mhh-ink); font-weight: 600; }

.mh-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; margin-left: auto; }
.mh-actions__link {
    display: inline-flex; align-items: center; height: 38px; padding: 0 18px;
    border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink);
    font-size: .88rem; font-weight: 600; text-decoration: none;
    transition: opacity .15s ease;
}
.mh-actions__link:hover { opacity: .85; color: var(--btn-ink); }
.mh-icon {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 999px; color: var(--mhh-ink-2);
    transition: background .15s ease, color .15s ease;
}
.mh-icon:hover { background: var(--bg-2); color: var(--mhh-ink); }
.mh-icon__badge {
    position: absolute; top: 3px; right: 3px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border: 2px solid var(--bg); border-radius: 999px;
    background: var(--mhh-pink); color: #fff;
    font-size: .62rem; font-weight: 700; line-height: 12px; text-align: center;
}

.mh-burger { display: none; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; padding: 9px 8px; }
.mh-burger span { display: block; height: 2px; border-radius: 2px; background: var(--mhh-ink); transition: transform .2s ease, opacity .2s ease; }
.mh-burger span + span { margin-top: 5px; }
.mh-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mh-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mh-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
    .mh-burger { display: block; order: 3; }
    .mh-nav {
        position: absolute; left: 0; right: 0; top: 100%;
        display: none; background: var(--bg); border-bottom: 1px solid var(--mhh-line);
        box-shadow: 0 12px 24px var(--shadow-2);
    }
    .mh-nav.is-open { display: block; }
    .mh-site-header__inner { gap: 12px; }

    /* Su telefono l'intestazione NON resta fissa: con la sfocatura e l'offset della barra di
       amministrazione iOS la disegnava male, sovrapposta al contenuto. Scorre via come il resto.
       Deve pero' restare "relative", non "static": il pannello del menu e' posizionato con
       top:100% RISPETTO ALL'INTESTAZIONE. Con static l'intestazione non fa piu' da riferimento
       e il pannello finisce in mezzo alla pagina, sopra al contenuto. */
    .mh-site-header { position: relative; top: auto; backdrop-filter: none; background: var(--bg); }
    .admin-bar .mh-site-header { top: auto; }
    .mh-nav ul, .mh-nav .mh-menu { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 16px; }
    .mh-nav li { border-bottom: 1px solid var(--mhh-line); }
    .mh-nav li:last-child { border-bottom: 0; }
    .mh-nav a { padding: 14px 0; font-size: 1rem; }
    .mh-actions__link { display: none; }

    /* Col dito non c'e' il passaggio del mouse: le voci figlie restano aperte,
       rientrate sotto la loro. */
    .mh-nav .sub-menu {
        position: static; opacity: 1; visibility: visible; transform: none;
        min-width: 0; padding: 0 0 8px 16px;
        background: transparent; border: 0; border-radius: 0; box-shadow: none;
    }
    .mh-nav .sub-menu li { border-bottom: 0; }
    .mh-nav .sub-menu a { padding: 9px 0; font-size: .95rem; color: var(--mhh-ink-3); }
    .mh-nav .menu-item-has-children > a::after,
    .mh-nav .menu-item-has-children > .mh-nav__label::after,
    .mh-nav .menu-item-has-children::after { display: none; }
    .mh-nav .mh-nav__label { padding: 14px 0; font-size: 1rem; }
}
@media (max-width: 380px) {
    .mh-site-header__inner { padding: 0 16px; gap: 12px; }
    .mh-icon { width: 34px; height: 34px; }
}

/* ── Pie' di pagina ─────────────────────────────────────────────────────── */
/* Nessun margine sopra: le pagine che finiscono con una fascia colorata (es. l'invito in Chi siamo)
   devono attaccarsi al pie' di pagina, senza una striscia bianca. Lo spazio lo mettono le pagine. */
.mh-site-footer { background: var(--footer-bg); color: var(--footer-ink); }
.mh-site-footer__inner {
    max-width: var(--mhh-maxw); margin: 0 auto; padding: 56px 24px 40px;
    display: grid; gap: 36px;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
}
.mh-site-footer .mh-foot-brand__logo { height: 58px; width: auto; display: block; }
/* Il logo del marchio ha la scritta nera: sul fondo scuro va reso bianco per leggerla.
   Si toglie dal Personalizza se si sceglie un logo gia' adatto allo sfondo scuro. */
.mh-site-footer .mh-foot-brand__logo.is-white { filter: brightness(0) invert(1); opacity: .9; }
.mh-foot-brand__text { font-size: 1.15rem; font-weight: 700; color: #fff; }
.mh-foot-brand__claim { margin: 14px 0 0; max-width: 34ch; font-size: .92rem; line-height: 1.6; color: var(--footer-ink-2); }

.mh-foot-col h2 {
    margin: 0 0 14px; font-size: .72rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--mhh-pink);
}
.mh-foot-col ul { margin: 0; padding: 0; list-style: none; }
.mh-foot-col li { margin: 0 0 10px; }
.mh-foot-col a { color: var(--footer-ink); text-decoration: none; font-size: .94rem; }
.mh-foot-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.mh-foot-contact p { margin: 0 0 10px; font-size: .94rem; }
.mh-foot-note { color: #98959f; font-size: .86rem; line-height: 1.6; }
.mh-foot-addr { color: #98959f; font-size: .9rem; line-height: 1.6; }

.mh-site-footer__bar {
    max-width: var(--mhh-maxw); margin: 0 auto; padding: 18px 24px 30px;
    border-top: 1px solid var(--footer-line);
    display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
}
.mh-site-footer__bar p { margin: 0; font-size: .82rem; color: var(--footer-ink-2); }

@media (max-width: 860px) {
    .mh-site-footer__inner { grid-template-columns: 1fr 1fr; gap: 30px; padding: 44px 24px 32px; }
    .mh-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .mh-site-footer__inner { grid-template-columns: 1fr; }
}

/* ── Torna in cima ──────────────────────────────────────────────────────────
   Compare solo dopo che si e' sceso davvero: prima sarebbe un bottone che dice
   "torna dove sei". Sta in basso a destra, e sul telefono si alza da solo se sotto
   c'e' la barra d'acquisto fissa della pagina evento, se no le finirebbe sopra. */
.mh-top {
    position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 45; display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; padding: 0;
    border: 1px solid var(--mhh-line); border-radius: 50%;
    background: var(--header-bg); backdrop-filter: blur(10px);
    color: var(--mhh-ink); cursor: pointer;
    box-shadow: 0 8px 24px var(--shadow);
    opacity: 0; transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, border-color .15s ease, color .15s ease;
}
.mh-top.is-on { opacity: 1; transform: none; }
.mh-top:hover { border-color: var(--hover); color: var(--hover); }
.mh-top:focus-visible { outline: 2px solid var(--hover); outline-offset: 3px; }

@media (max-width: 720px) {
    .mh-top { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
    /* La barra d'acquisto della pagina evento e' alta una sessantina di pixel. */
    body:has(.mhc-sticky) .mh-top { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
    .mh-top { transition: opacity .2s ease; transform: none; }
}