/* ==========================================================================
   MENU - floating panel opened by the Menu pill (region nav_main).
   Markup: templates/navigation/menu--main.html.twig builds groups:
     top-level links without children -> first group ("EPSA SHIFT")
     top-level items with children      -> one group per parent ("Nos shifts")
   ========================================================================== */
.menu-overlay {
  position: fixed; inset: 0; z-index: 78;
  background: rgba(11, 15, 20, 0.35);
}
.menu-overlay[hidden] { display: none; }
.menu-panel {
  position: fixed;
  top: clamp(92px, 9.6vw, 118px);
  right: max(12px, calc((100vw - 1240px) / 2 + 8px));
  z-index: 81;
  width: min(400px, calc(100vw - 24px));
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  padding: var(--space-5) var(--space-5) var(--space-5);
  background: var(--epsa-navy);
  border: 1px solid rgba(251, 250, 248, 0.14);
  border-radius: var(--epsa-radius-card);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55);
}
.menu-panel[hidden] { display: none; }
body.menu-open { overflow: hidden; }
@media (min-width: 600px) { body.menu-open { overflow: auto; } }

.menu-group__title {
  margin: var(--space-5) 0 var(--space-1);
  font-size: var(--font-size-xs); font-weight: 700; letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: var(--epsa-gold);
}
.menu-group:first-child .menu-group__title { margin-top: 0; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 3rem; padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(251, 250, 248, 0.14);
  font-size: var(--font-size-lg); font-weight: 500; letter-spacing: var(--tracking-tight);
  color: var(--epsa-muted);
}
.menu-list__link::after { content: '→'; color: transparent; font-size: var(--font-size-lg); }
.menu-list__link:hover, .menu-list__link.is-active { color: var(--epsa-ink); }
.menu-list__link.is-active::after { color: var(--epsa-gold); }
.menu-list__link:hover::after { color: var(--epsa-gold); }

/* No-JS fallback: the menu stays reachable as a plain block. */
html:not(.js) .menu-panel[hidden] { display: block; position: static; transform: none; visibility: visible; }
html:not(.js) .menu-toggle { display: none; }