/* =====================================================
   CUSTOM NAV – Baseline (struttura vincolata ai layout)
   - una sola NAV
   - mobile: logo sx, hamburger centrato, contatto dx
   - desktop: voci centrali + Contattaci a destra (stile pill, ma è un link)
   ===================================================== */

:root{ --nav-h: 72px; }

.manga-topbar{
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--nav-h);
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  color: #111; /* leggibilità funzionale */
}

.manga-topbar__inner{
  height: 100%;
  padding: 0 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 14px;
}

/* Mobile center label ("Contattaci") */
.manga-topbar__center{ margin-left: 20px; }

/* Brand */
.manga-brand{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-bottom: 0;
}
.manga-brand img{
  height: 38px;
  width: auto;
  display: block;
}

/* Desktop nav */
.manga-desktop-nav{
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  justify-content: center;
}
.manga-desktop-nav a{
  text-decoration: none;
  border-bottom: 0;
  color: inherit;
}

/* Actions (desktop right) */
.manga-topbar__actions{
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
}

/* CTA pill: è un link, non un button */
.manga-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0.18);
  text-decoration: none;
  color: inherit;
  line-height: 1;
}


/* Override template button styles (avoid pill background / min-width) */
.manga-burger, .manga-contact{
  min-width: 0 !important;
  height: auto !important;
  line-height: 1 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.manga-burger:hover, .manga-contact:hover{
  background: transparent !important;
}

/* Burger (mobile center) */
.manga-burger{
  display: none; /* shown on mobile */
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  margin-left: auto; /* will be overridden in mobile grid */
}
.manga-burger span{
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
  opacity: 0.9;
}

/* Contact icon (mobile right) */
.manga-contact{
  display: none; /* shown on mobile */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.manga-contact img{
  width: 34px;
  height: 34px;
  display: block;
}

/* Mobile menu */
.manga-mobile-menu{
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: rgba(255,255,255,0.98);
  border-top: 1px solid rgba(0,0,0,0.08);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.manga-mobile-menu.is-open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.manga-mobile-menu .inner{
  max-width: 520px;
  margin: 0 auto;
  padding: 26px 18px 32px;
  display: flex;
  flex-direction: column;
  align-items: center; /* centratura voci */
  gap: 14px;
}
.manga-mobile-menu a{
  text-decoration: none;
  border-bottom: 0;
  color: inherit;
}

/* Contact overlay */
.contact-overlay{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  /* overlay is transparent; backdrop handles dimming */
  background: transparent;
  padding: 18px;
}
.contact-overlay.is-open{ display:block; }

.contact-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}

/* default card position: centered (mobile/tablet) */
.contact-card{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100% - 36px));
  background: #fff;
  border-radius: 14px;
  padding: 16px 18px 18px;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

.contact-close{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.contact-row{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 6px;
}

.contact-svg{
  width: 24px;
  height: 24px;
  display: block;
  flex: 0 0 24px; /* column width */
}

.contact-link{
  text-decoration: none;
  border-bottom: 0;
  color: inherit;
  line-height: 1.2;
}

/* desktop: position near trigger (set by JS), no transform */
.contact-overlay[data-pos="anchored"] .contact-card{
  left: var(--cp-left, 50%);
  top: var(--cp-top, 50%);
  transform: none;
}

/* small tweak: make the primary row visually consistent but still a CTA */
.contact-row-primary .contact-link{
  font-weight: 600;
}


/* Responsive switch */
@media (max-width: 980px){
  .manga-topbar__inner{
    display: grid;
    grid-template-columns: auto 1fr auto; /* logo sx, contattaci centro, burger dx */
    gap: 10px;
  }
  .manga-desktop-nav{ display:none; }
  /* show the centered "Contattaci" label */
  .manga-topbar__actions{
    display:flex;
    justify-content:center;
    align-items:center;
  }

  .manga-brand{ justify-self: start; }

  /* Center column */
  .manga-topbar__actions a{
    border-bottom: none !important; /* remove dotted underline */
    font-size: 20px;
    font-weight: 400;
  }

  /* Burger: a destra, leggibile ma non dominante */
  .manga-burger{
    display:inline-flex;
    justify-self: end;
    margin-left: 0;
    width: 44px;
    height: 44px;
    gap: 6px;
  }
  .manga-burger span{
    width: 24px;
    height: 3px;
    opacity: 1;
    background: #111; /* sempre nero su header chiaro */
  }

  /* Hide extra contact icon on mobile: the text is already clear */
  .manga-contact{ display:none !important; }

  /* Show hamburger on mobile */
  .manga-burger{
    display: inline-flex;
    justify-self: end;
  }
}
@media (min-width: 981px){
  .manga-burger, .manga-contact{ display:none; }
  .manga-desktop-nav{ display:flex; }
  .manga-topbar__actions{ display:flex; }
}


/* Mobile: keep the same centered card as desktop (more readable / less confusing) */
@media (max-width: 980px){
  .contact-overlay{
    align-items: center;
    padding: 16px;
  }
  .contact-card{
    width: min(420px, 92vw);
    border-radius: 18px;
    padding: 18px 16px 14px;
    box-shadow: 0 18px 60px rgba(0,0,0,0.25);
  }

  /* Overlay icons on mobile: a bit bigger + slightly stronger */
  .contact-row{
    gap: 18px;
    padding: 14px 10px;
  }
  .contact-svg{
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    filter:
      drop-shadow(1px 0 0 var(--icon-ink, #111))
      drop-shadow(-1px 0 0 var(--icon-ink, #111))
      drop-shadow(0 1px 0 var(--icon-ink, #111))
      drop-shadow(0 -1px 0 var(--icon-ink, #111));
  }

}

/* --- FIX: link hover should not turn white on light bg --- */
.site-nav a:hover,
.site-nav a:focus {
  color: inherit;
}

/* --- FIX: ensure hamburger lines are visible (black) --- */
.hamburger,
.hamburger::before,
.hamburger::after {
  background: #111 !important;
}
/* LOGO desktop: più grande e più basso */
@media (min-width: 981px){
  .manga-brand img{
    height: 48px;        /* grandezza desktop */
    transform: translateY(6px);  /* abbassamento */
  }
}



/* =====================================================
   FIX LIST / SUBMENU STYLING (desktop + mobile)
   - elimina pallini e "lista nuda"
   - dropdown desktop via hover
   - mobile: sottovoci indentate (no dropdown assoluto)
   ===================================================== */

.manga-desktop-nav .nav-list,
#mangaMobileMenu .nav-list,
.manga-desktop-nav .submenu,
#mangaMobileMenu .submenu{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Desktop: ul in riga */
@media (min-width: 981px){
  .manga-desktop-nav .nav-list{
    display:flex;
    align-items:center;
    gap: 26px;
  }
  .manga-desktop-nav .nav-list > li{
    position: relative;
  }

  /* dropdown */
  .manga-desktop-nav .submenu{
    display:none;
    position:absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 240px;
    background:#fff;
    border:1px solid rgba(0,0,0,0.10);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    padding: 10px 0;
    z-index: 3000;
  }
  .manga-desktop-nav .submenu li{
    position: relative;
  }
  .manga-desktop-nav .submenu a{
    display:block;
    padding: 8px 14px;
    white-space: nowrap;
  }
  .manga-desktop-nav li.has-submenu:hover > .submenu{
    display:block;
  }

  /* dropdown di secondo livello */
  .manga-desktop-nav .submenu li.has-submenu > .submenu{
    top: 0;
    left: calc(100% + 10px);
  }

  /* hover: non sbianca */
  .manga-desktop-nav a:hover,
  .manga-desktop-nav a:focus{
    color: #111;
  }
}

/* Mobile: sottoliste visibili e indentate (niente absolute) */
@media (max-width: 980px){
  #mangaMobileMenu .nav-list > li{
    list-style:none;
  }
  #mangaMobileMenu .submenu{
    display:block !important;
    position: static !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 6px 0 0 18px !important;
    margin: 0 !important;
  }
  #mangaMobileMenu .submenu a{
    display:block;
    padding: 8px 0;
  }
}

/* === FIX dropdown desktop: evita che il submenu "scappi via" === */
.manga-desktop-nav .has-submenu { position: relative; }

/* buffer invisibile tra voce padre e submenu (evita mouseout) */
.manga-desktop-nav .has-submenu::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:14px;
}

/* render del submenu sopra tutto */
.manga-desktop-nav .submenu{
  z-index: 9999;
}

/* mantieni aperto su hover e su focus (clic tastiera / click) */
.manga-desktop-nav .has-submenu:hover > .submenu,
.manga-desktop-nav .has-submenu:focus-within > .submenu{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* =====================================================
   STABILITY HOTFIX (2026-03-03)
   Obiettivo:
   - Contattaci identico alle altre voci (no blu, no bold)
   - Overlay contatti con tipografia "normale" e coerente
   - Nessun impatto sulle parti in blu di "Sedi della scuola"
   ===================================================== */

/* 1) Contattaci: niente stile speciale legato all'href */
.manga-topbar a[href="#contatti"],
.manga-topbar .nav-contact,
.manga-topbar .contact-trigger{
  color: inherit !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  border-bottom: 1px dotted rgba(0,0,0,.35); /* stesso segno discreto degli altri */
}

/* Evita che l'ultimo item "salti" come dimensione/line-height */
.manga-topbar .nav-links a{
  font-size: 0.95rem;
  line-height: 1.2;
}

/* 2) Overlay/pannello contatti: dimensioni e font fissi */
.contact-overlay,
.contact-overlay *{
  font-family: inherit;
  font-weight: 400;
}

.contact-card{
  font-size: 16px;
  line-height: 1.35;
}

.contact-card a,
.contact-card button,
.contact-card input,
.contact-card label{
  font-size: 16px;
  line-height: 1.35;
}

/* Titoli/etichette dentro overlay leggermente più presenti ma eleganti */
.contact-card strong{
  font-weight: 600;
}

/* 3) Dropdown/menu (desktop): blocca font “giganti” ereditati */
.manga-topbar .nav-links .submenu a,
.manga-topbar .nav-links .submenu span{
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  color: inherit !important;
}

/* 4) Mobile: mantieni distanze ai bordi coerenti */
@media (max-width: 900px){
  .manga-topbar .nav-inner{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .manga-topbar .contact-trigger{
    margin-right: 0 !important;
  }
}
/* PATCH: overlay contatti – niente "input giganti" */
.contact-card{
  font-size: 15px !important;
  line-height: 1.25 !important;
  padding: 14px 16px 16px !important;
}

/* se dentro ci sono input/textarea (scatolotti) rendili più sobri */
.contact-card input,
.contact-card textarea,
.contact-card select{
  font-size: 15px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
}

/* label tipo "WhatsApp" */
.contact-card label,
.contact-card .label{
  font-size: 13px !important;
  opacity: .75;
}
/* ===== PATCH overlay Contattaci: più piccolo, elegante, zero "form gigante" ===== */
.contact-card{
  width: 360px !important;          /* era troppo largo */
  max-width: calc(100vw - 32px) !important;
  padding: 12px 14px 14px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
}

/* se sono input (come nel tuo caso), li rendiamo “da overlay”, non da form */
.contact-card input,
.contact-card textarea,
.contact-card select{
  width: 100% !important;
  font-size: 14px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  box-shadow: none !important;
}

/* eventuali label tipo WhatsApp/Iscrizioni */
.contact-card label,
.contact-card .label{
  font-size: 12px !important;
  opacity: .75 !important;
}

/* distanze verticali più compatte */
.contact-card .contact-row{
  padding: 8px 2px !important;
  gap: 10px !important;
}

/* mobile: ancora un filo più compatto */
@media (max-width: 980px){
  .contact-card{
    width: 340px !important;
    font-size: 14px !important;
  }
}
/* ===== NAV FONT RESET DEFINITIVO ===== */

/* evita eredità strane */
.manga-topbar,
.manga-topbar *{
  font-size: inherit;
}

/* dimensione base nav desktop */
@media (min-width: 981px){
  .manga-topbar{
    font-size: 16px !important;
  }

  .manga-topbar a{
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
  }
}

/* dimensione nav mobile */
@media (max-width: 980px){
  .manga-topbar{
    font-size: 15px !important;
  }

  .manga-topbar a{
    font-size: 15px !important;
    font-weight: 400 !important;
  }
}

#nav ul li a {
    line-height: 1;
    display: inline-block;
    padding: 0.2em 0;
    vertical-align: middle;
}

#nav ul li a.contact-link {
    border-bottom: 1px dotted #999;
    padding-bottom: 2px;
    position: relative;
    top: 2px !important;
}