/* =============================================================================
   UniNeuromed — Barra informativa, barra utenze, header, mega menu, menu mobile
   ========================================================================== */

/* --- 1. Barra informativa (scadenze e comunicazioni) ----------------------
   Sta in cima a tutto, sopra un'intestazione chiara: usa il blu primario, così
   il colore del brand è la prima cosa che si vede. */
.infobar {
  position: relative;
  background: var(--surface-brand);
  color: rgba(255, 255, 255, .94);
  font-size: var(--fs-xs);
}
.infobar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 38px;
  padding-block: .35rem;
}
.infobar__track { flex: 1 1 auto; min-width: 0; position: relative; }
.infobar__item {
  display: none;
  align-items: center;
  gap: .55rem;
  animation: fadeInUp var(--dur-slow) var(--ease-out);
}
.infobar__item.is-active { display: flex; }
.infobar__tag {
  flex: none;
  padding: .1rem .5rem;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
  color: var(--color-ink);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
}
.infobar__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.infobar a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); }
.infobar a:hover { color: var(--color-sky); }
.infobar__close {
  flex: none;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, .6);
  padding: .25rem;
  border-radius: var(--radius-xs);
  line-height: 0;
}
.infobar__close:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.infobar[hidden] { display: none; }
@media (max-width: 767px) {
  .infobar__inner { align-items: flex-start; }
  .infobar__item { align-items: flex-start; }
  .infobar__text { white-space: normal; overflow: visible; line-height: 1.5; }
  .infobar__tag { margin-top: .12rem; }
}

/* --- 2. Barra utenze (Futuri studenti / Iscritti / Docenti) --------------- */
.userbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-xs);
}
.userbar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-5);
  min-height: 36px;
}
.userbar__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: var(--fw-medium);
  padding-block: .4rem;
}
.userbar__link:hover { color: var(--color-primary-dark); }
.userbar__link svg { width: 14px; height: 14px; flex: none; }
@media (max-width: 899px) { .userbar { display: none; } }

/* --- 3. Header ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-h);
}

/* Variante trasparente sopra la hero.
   Il margine negativo toglie l'header dal flusso verticale: la hero inizia
   sotto di esso, ma l'header resta sticky e non copre le barre superiori.
   `--overlay` è per hero scure (testo bianco), `--overlay-light` per hero
   chiare: quest'ultima eredita i colori scuri di default. */
.site-header--overlay,
.site-header--overlay-light {
  background: transparent;
  border-bottom-color: transparent;
  margin-bottom: calc(-1 * var(--header-h));
}
.site-header--overlay .nav__link { color: rgba(255, 255, 255, .92); }
.site-header--overlay .nav__link:hover { color: #fff; }
.site-header--overlay .burger { color: #fff; }
.site-header--overlay .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .5); }
.site-header--overlay .btn--ghost:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }

/* Stato solido dopo lo scroll (o con mega menu aperto) */
.site-header.is-solid,
.site-header.is-menu-open {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}
.site-header.is-solid .nav__link,
.site-header.is-menu-open .nav__link { color: var(--color-ink); }
.site-header.is-solid .burger,
.site-header.is-menu-open .burger { color: var(--color-ink); }
.site-header.is-solid .btn--ghost,
.site-header.is-menu-open .btn--ghost { color: var(--color-primary-dark); border-color: var(--color-border-strong); }

/* --- 4. Lockup del logo --------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  flex: none;
}
/* Il lockup ufficiale è un'immagine. Nel markup ce ne sono quattro,
   sovrapposte, e il foglio di stile ne mostra una sola. Le combinazioni
   nascono da due scelte indipendenti:

     tinta    a colori sui fondi chiari, bianca sui fondi scuri
     misura   lockup lungo con il claim, oppure compatto senza

   Le due scelte sono tenute da due coppie di variabili. La tinta viene
   decisa dallo stato dell'intestazione, la misura dalla larghezza dello
   schermo: solo l'immagine per cui entrambe valgono "block" compare.
   Così non serve JavaScript e non si ripetono le regole di stato. */
.brand {
  --tint-color: block;
  --tint-white: none;
  /* schermo largo: vale il lockup con il claim */
  --claim-color: var(--tint-color);
  --claim-white: var(--tint-white);
  --mini-color: none;
  --mini-white: none;
}

/* Sotto i 640 px la riga del claim scenderebbe sotto i quattro pixel di
   altezza e diventerebbe una macchia illeggibile: alla larghezza del
   telefono l'intestazione usa il lockup compatto, senza claim. */
@media (max-width: 640px) {
  .brand {
    --claim-color: none;
    --claim-white: none;
    --mini-color: var(--tint-color);
    --mini-white: var(--tint-white);
  }
}

/* Fondo scuro: intestazione ancora trasparente sopra una hero, cioè non
   resa opaca dallo scorrimento e senza menu aperto. */
.site-header--overlay:not(.is-solid):not(.is-menu-open) .brand {
  --tint-color: none;
  --tint-white: block;
}

.brand__logo { display: none; width: auto; height: 48px; flex: none; }
.brand__logo--claim.brand__logo--color { display: var(--claim-color); }
.brand__logo--claim.brand__logo--white { display: var(--claim-white); }
.brand__logo--mini.brand__logo--color  { display: var(--mini-color); }
.brand__logo--mini.brand__logo--white  { display: var(--mini-white); }

@media (max-width: 900px) { .brand__logo { height: 42px; } }
@media (max-width: 640px) { .brand__logo { height: 32px; } }
@media (max-width: 380px) { .brand__logo { height: 26px; } }

/* --- 5. Navigazione desktop ---------------------------------------------- */
.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: .15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__item { margin: 0; position: static; }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .5rem .5rem;
  border-radius: var(--radius-sm);
  /* Il menu usa il carattere del corpo del testo, non quello dei titoli. */
  font-family: var(--font-sans);
  font-size: .845rem;
  font-weight: var(--fw-semibold);
  /* Le voci principali restano in maiuscolo. Le maiuscole di Mukta Mahee sono
     più strette di quelle di STAKO: serve un filo di spaziatura in più,
     altrimenti alle dimensioni del menu si toccherebbero. */
  text-transform: uppercase;
  letter-spacing: .045em;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: 0;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nav__link:hover { background: rgba(0, 2, 171, .08); }
.nav__link[aria-expanded="true"] { background: rgba(0, 2, 171, .1); color: var(--color-primary-dark); }
.nav__link .chev { width: 10px; height: 10px; opacity: .65; transition: transform var(--dur) var(--ease-out); }
.nav__link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav__item--current > .nav__link { color: var(--color-primary-dark); }
.nav__item--current > .nav__link::after {
  content: "";
  position: absolute;
  left: 50%; bottom: .1rem;
  transform: translateX(-50%);
  width: 16px; height: 2px;
  border-radius: 2px;
  background: var(--gradient-brand);
}
.nav__actions { display: flex; align-items: center; gap: .45rem; margin-left: .35rem; }
.nav__actions .btn { padding-inline: .85rem; }

/* Sotto i 1600px resta una sola call to action, per non comprimere il menu */
@media (max-width: 1699px) { .nav__actions .btn--ghost { display: none; } }
@media (max-width: 1399px) {
  .nav__list { gap: .05rem; }
  .nav__link { font-size: .81rem; padding-inline: .4rem; }
  .nav__actions .btn { font-size: .78rem; padding-inline: .7rem; }
}
@media (min-width: 1700px) { .nav__link { font-size: .875rem; padding-inline: .62rem; } }
@media (max-width: 1179px) { .nav, .nav__actions { display: none; } }

/* --- 6. Mega menu --------------------------------------------------------- */
.megamenu {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  z-index: var(--z-megamenu);
  background: #fff;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
}
.megamenu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.megamenu__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  padding-block: var(--space-7);
}
.megamenu__cols {
  display: grid;
  /* Il tetto massimo evita che un menu con un solo gruppo si allarghi
     per tutta la riga lasciando un vuoto sproporzionato. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 300px));
  justify-content: start;
  gap: var(--space-5) var(--space-6);
  align-content: start;
}
.megamenu__group { min-width: 0; }
.megamenu__title {
  margin: 0 0 .6rem;
  font-family: var(--font-sans);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-primary-dark);
}
.megamenu__list { margin: 0; padding: 0; list-style: none; }
.megamenu__list li { margin: 0; }
.megamenu__list a {
  display: block;
  font-family: var(--font-sans);
  /* Con Mukta Mahee il peso normale è già leggero e ben leggibile: il 300
     usato prima serviva solo a evitare il Bold di STAKO. */
  font-weight: var(--fw-regular);
  padding: .28rem 0;
  font-size: var(--fs-sm);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-xs);
}
.megamenu__list a:hover { color: var(--color-primary-dark); }
.megamenu__promo {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.megamenu__promo-title { font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--color-primary); margin: 0 0 .5rem; letter-spacing: var(--ls-tight); }
.megamenu__promo p { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); }
/* La colonna promozionale esiste solo se il menu ha davvero un riquadro
   promo: altrimenti resterebbe uno spazio bianco a destra. */
@media (min-width: 1380px) {
  .megamenu__inner:has(.megamenu__promo) { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 1379px) { .megamenu__promo { display: none; } }
/* Sotto la soglia desktop il mega menu non è utilizzato: si usa il drawer */
@media (max-width: 1179px) { .megamenu { display: none; } }

/* --- 7. Burger e menu mobile --------------------------------------------- */
.burger {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: .45rem;
  padding: .5rem .7rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.burger__bars { position: relative; width: 17px; height: 12px; flex: none; }
.burger__bars span {
  position: absolute; left: 0;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.burger__bars span:nth-child(1) { top: 0; }
.burger__bars span:nth-child(2) { top: 5px; }
.burger__bars span:nth-child(3) { top: 10px; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 1179px) { .burger { display: inline-flex; } }
@media (max-width: 479px) {
  .burger { padding: .5rem .55rem; gap: 0; }
  .burger__label {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .burger__bars { width: 19px; height: 13px; }
  .burger__bars span:nth-child(2) { top: 5.5px; }
  .burger__bars span:nth-child(3) { top: 11px; }
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: none;
}
.drawer.is-open { display: block; }
.drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(5, 50, 94, .5);
  animation: fadeIn var(--dur) var(--ease-out);
}
.drawer__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(420px, 100%);
  background: #fff;
  display: flex;
  flex-direction: column;
  animation: slideInRight var(--dur) var(--ease-out);
}
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--gutter);
  border-bottom: 1px solid var(--color-border);
  flex: none;
}
.drawer__close svg { width: 15px; height: 15px; flex: none; }
.drawer__close {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .7rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: var(--fs-sm);
}
.drawer__body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-4) var(--gutter) var(--space-8); overscroll-behavior: contain; }
.drawer__foot {
  flex: none;
  display: grid; gap: .6rem;
  padding: var(--space-4) var(--gutter);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
.drawer__utils { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--space-5); }
.drawer__utils a {
  flex: 1 1 auto;
  text-align: center;
  padding: .5rem .6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-surface);
}

.mnav { list-style: none; margin: 0; padding: 0; font-family: var(--font-sans); }
/* Anche nel menu del telefono le voci dei sottomenu usano il peso normale */
.mnav__group ul a { font-weight: var(--fw-regular); }
.mnav > li { margin: 0; border-bottom: 1px solid var(--color-border); }
.mnav__row { display: flex; align-items: stretch; }
.mnav__row > a {
  flex: 1 1 auto;
  padding: .95rem 0;
  font-size: 1.02rem;
  font-weight: var(--fw-semibold);
  /* Come nel menu desktop: voci principali in maiuscolo, con la spaziatura
     rinforzata che chiedono le maiuscole di Mukta Mahee */
  text-transform: uppercase;
  letter-spacing: .045em;
  color: var(--color-ink);
  text-decoration: none;
}
.mnav__toggle {
  flex: none;
  width: 46px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
}
.mnav__toggle svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease-out); }
.mnav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mnav__toggle[aria-expanded="true"] { color: var(--color-primary-dark); }
.mnav__panel { display: none; padding: 0 0 var(--space-4) var(--space-3); }
.mnav__panel.is-open { display: block; animation: fadeInUp var(--dur) var(--ease-out); }
.mnav__group { margin-bottom: var(--space-4); }
.mnav__group-title {
  margin: 0 0 .35rem;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-primary-dark);
}
.mnav__group ul { list-style: none; margin: 0; padding: 0; }
.mnav__group li { margin: 0; }
.mnav__group a {
  display: block;
  padding: .42rem 0;
  font-size: var(--fs-sm);
  color: var(--color-text);
  text-decoration: none;
}