/* ============================================================
 * mc-nav.css — Barra istituzionale a 9 voci con tendine.
 * Una sola struttura DOM (ul > li > ul) usata da:
 *   - desktop (>=1240px): dropdown su hover + toggle da tastiera
 *   - mobile/tablet (<1240px): pannello a discesa con accordion
 * Caricato DOPO theme/assets/css/header.css (wp_enqueue_scripts p.20),
 * quindi puo' neutralizzare le vecchie regole .mc-nav senza !important
 * a tappeto. NON tocca .mc-header-wrap / .mc-header-row / .mc-logo-link
 * se non per lo stato "menu aperto".
 * ============================================================ */

:root {
  --mc-nav-bp: 1240px;                 /* documentazione: soglia desktop */
  --mc-nav-viola: #4F2D7F;
  --mc-nav-ink: #1F1633;
  --mc-nav-arancio: #E97E3A;
  --mc-nav-crema: #FBF5EE;
  --mc-nav-panel: #FFFBF4;
}

/* --- reset lista ------------------------------------------------ */
.mc-nav2,
.mc-nav2 ul,
.mc-nav2 li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mc-nav2 li::marker { content: none; }

.mc-nav2 a {
  text-decoration: none;
  font-family: 'DM Sans', 'Avenir Next', Arial, Roboto, sans-serif;
}

/* focus visibile ovunque (requisito a11y) */
.mc-nav2 a:focus-visible,
.mc-nav2 button:focus-visible,
.mc-hamburger:focus-visible,
.mc-header-cta .mc-btn-primary-inline:focus-visible {
  outline: 3px solid var(--mc-nav-arancio);
  outline-offset: 2px;
  border-radius: 10px;
}

/* --- riga primo livello ------------------------------------------ */
.mc-nav2-l1 {
  display: flex;
  align-items: center;
}
.mc-nav2-item { position: relative; }

.mc-nav2-link {
  display: inline-flex;
  align-items: center;
  color: var(--mc-nav-ink);
  font-weight: 500;
  font-size: 0.855rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  padding: 9px 8px;
  border-radius: 9px;
  transition: background 180ms ease, color 180ms ease;
  white-space: nowrap;
}
.mc-nav2-link:hover { color: var(--mc-nav-viola); background: rgba(74, 43, 122, 0.08); }

/* bottone che apre la tendina: separato dal link, cosi' il link porta
   davvero alla pagina padre e il bottone e' un vero disclosure ARIA */
.mc-nav2-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  padding: 0;
}
.mc-nav2-chev {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  transition: transform 220ms ease;
}
.mc-nav2-toggle[aria-expanded="true"] .mc-nav2-chev { transform: rotate(180deg); }

/* --- secondo livello (comune) ------------------------------------ */
.mc-nav2-l2 a {
  display: block;
  color: var(--mc-nav-ink);
  font-size: 0.94rem;
  line-height: 1.35;
  transition: background 160ms ease, color 160ms ease;
}
.mc-nav2-l2 a:hover { color: var(--mc-nav-viola); }

/* etichetta "vai alla pagina" dentro la tendina */
.mc-nav2-all { font-weight: 600; color: var(--mc-nav-viola) !important; }

.mc-nav2-sronly {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ================================================================
 * DESKTOP  (>= 1240px)
 * ================================================================ */
@media (min-width: 1240px) {

  .mc-nav2 {
    display: flex;
    align-items: center;
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    background: transparent;
    max-height: none;
    overflow: visible;
    box-shadow: none;
  }
  .mc-nav2-l1 { gap: 0; flex-wrap: nowrap; }

  .mc-header-row { gap: 16px; }
  .mc-nav2-link { font-size: 0.815rem; padding: 8px 7px; }
  .mc-nav2-item.has-sub > .mc-nav2-link { padding-right: 2px; }
  .mc-nav2-chev { width: 10px; height: 10px; }
  .mc-nav2-toggle { padding: 8px 6px 8px 1px; border-radius: 9px; }
  .mc-nav2-toggle:hover { color: var(--mc-nav-viola); }

  .mc-nav2-l2 {
    position: absolute;
    top: calc(100% - 4px);
    left: 0;
    min-width: 246px;
    max-width: 320px;
    background: var(--mc-nav-panel);
    border: 1px solid rgba(79, 45, 127, 0.10);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(31, 22, 51, 0.16);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    /* visibility NON interpolata: in apertura scatta subito (cosi' i link sono
       focusabili nello stesso tick), in chiusura aspetta la fine del fade */
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  }
  /* le ultime voci si aprono allineate a destra: niente overflow orizzontale */
  .mc-nav2-l1 > .mc-nav2-item:nth-last-child(-n+3) > .mc-nav2-l2 { left: auto; right: 0; }

  .mc-nav2-item:hover > .mc-nav2-l2,
  .mc-nav2-item.is-open > .mc-nav2-l2 {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
  }

  .mc-nav2-l2 a { padding: 9px 12px; border-radius: 10px; }
  .mc-nav2-l2 a:hover { background: rgba(74, 43, 122, 0.08); }
  .mc-nav2-l2 .mc-nav2-all { border-bottom: 1px solid rgba(79, 45, 127, 0.10); border-radius: 10px 10px 0 0; margin-bottom: 4px; }

  .mc-hamburger { display: none !important; }
}

/* header su hero scura: testo bianco anche per la nuova nav */
@media (min-width: 1240px) {
  .mc-header-wrap.on-dark .mc-nav2-link,
  .mc-header-wrap.on-dark .mc-nav2-toggle { color: #fff; }
  .mc-header-wrap.on-dark .mc-nav2-link:hover { color: #fff; background: rgba(255, 255, 255, 0.16); }
  /* dentro la tendina il fondo e' chiaro: testo scuro sempre */
  .mc-header-wrap.on-dark .mc-nav2-l2 a { color: var(--mc-nav-ink); }
  .mc-header-wrap.on-dark .mc-nav2-l2 .mc-nav2-all { color: var(--mc-nav-viola) !important; }
}

/* ================================================================
 * MOBILE / TABLET  (< 1240px)  — pannello + accordion
 * ================================================================ */
@media (max-width: 1239px) {

  .mc-hamburger { display: block !important; }

  .mc-nav2 {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--mc-nav-crema);
    border-top: 1px solid rgba(79, 45, 127, 0.10);
    box-shadow: 0 24px 48px rgba(31, 22, 51, 0.22);
    padding: 10px clamp(16px, 4vw, 28px) 28px;
    /* JS aggiorna --mc-navmax con lo spazio reale sotto l'header */
    max-height: var(--mc-navmax, calc(100dvh - 84px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    /* stesso principio del desktop: visibility a gradino, mai interpolata */
    transition: opacity 220ms ease, transform 260ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 260ms;
  }
  .mc-nav2.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 220ms ease, transform 260ms cubic-bezier(.4, 0, .2, 1), visibility 0s;
  }

  .mc-nav2-l1 { display: block; }
  .mc-nav2-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid rgba(79, 45, 127, 0.10);
  }
  .mc-nav2-item:last-child { border-bottom: 0; }

  .mc-nav2-link {
    flex: 1 1 auto;
    font-family: 'Young Serif', 'Iowan Old Style', Georgia, 'Noto Serif', serif;
    font-size: 1.14rem;
    font-weight: 400;
    padding: 15px 6px;
    border-radius: 10px;
    white-space: normal;
  }
  .mc-nav2-toggle {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    color: var(--mc-nav-viola);
    background: rgba(79, 45, 127, 0.07);
  }
  .mc-nav2-chev { width: 14px; height: 14px; }

  /* accordion: chiuso di default, niente scroll infinito */
  .mc-nav2-l2 {
    flex: 1 0 100%;
    display: none;
    padding: 2px 0 12px 10px;
    border-left: 2px solid rgba(233, 126, 58, 0.35);
    margin: 0 0 10px 6px;
  }
  .mc-nav2-item.is-open > .mc-nav2-l2 { display: block; }
  .mc-nav2-l2 a { padding: 11px 10px; border-radius: 10px; font-size: 1rem; }
  .mc-nav2-l2 a:active { background: rgba(74, 43, 122, 0.08); }

  /* header opaco mentre il pannello e' aperto (anche sopra le hero scure) */
  .mc-header-wrap.mc-menu-open { background: var(--mc-nav-crema) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .mc-header-wrap.mc-menu-open.on-dark .mc-logo-link img { filter: none !important; }
  .mc-header-wrap.mc-menu-open .mc-hamburger span { background: var(--mc-nav-ink) !important; }

  body.mc-no-scroll { overflow: hidden; }
}

/* ================================================================
 * FALLBACK SENZA JAVASCRIPT  (< 1240px, quindi anche a zoom 200%)
 * Sotto la soglia desktop il pannello e' nascosto e si apre solo col
 * JS: se lo script non gira, nessuna voce sarebbe raggiungibile.
 * Lo script inline in cima all'header aggiunge .mc-js su <html>;
 * finche' quella classe non c'e', la navigazione resta aperta, in
 * colonna, sotto l'header (che smette di essere sticky per non
 * mangiarsi lo schermo). Il desktop non serve: li' le tendine si
 * aprono in hover, quindi funziona gia' senza JS.
 * ================================================================ */
@media (max-width: 1239px) {

  html:not(.mc-js) .mc-header-wrap {
    position: static !important;
    background: var(--mc-nav-crema) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html:not(.mc-js) .mc-header-row { flex-wrap: wrap; }

  html:not(.mc-js) .mc-nav2 {
    position: static;
    flex: 1 0 100%;
    width: 100%;
    /* la lista va a capo SOTTO logo e "Dona ora", non prima di loro */
    order: 1;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: none;
    overflow: visible;
    box-shadow: none;
    transition: none;
  }
  /* accordion inutile senza JS: tutti i sottomenu gia' aperti */
  html:not(.mc-js) .mc-nav2-l2 { display: block; }
  html:not(.mc-js) .mc-nav2-toggle { display: none; }
  html:not(.mc-js) .mc-hamburger { display: none !important; }
  /* .on-dark la mette il JS: senza JS il fondo e' crema, testo scuro */
  html:not(.mc-js) .mc-nav2-link,
  html:not(.mc-js) .mc-nav2-l2 a { color: var(--mc-nav-ink); }
  html:not(.mc-js) .mc-nav2-l2 .mc-nav2-all { color: var(--mc-nav-viola) !important; }
}

/* "Dona ora" sempre visibile accanto all'hamburger, anche da telefono */
@media (max-width: 420px) {
  .mc-header-cta .mc-btn-primary-inline { padding: 9px 14px; font-size: 0.84rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mc-nav2, .mc-nav2-l2, .mc-nav2-chev { transition: none !important; }
}