/**
 * Navbar Component Styles - ASDVolley
 * Stile identico a page/squadre.html
 */

/* ===== PALETTE NAVBAR (tematizzabile) ===== */
:root {
  --nav-accent: #0066FF;        /* blu PGS */
  --nav-accent-2: #00D2FF;      /* ciano PGS */
  --nav-accent-strong: #0052CC;
  --nav-accent-2-strong: #00B3CC;
  --nav-accent-08: rgba(0, 102, 255, 0.08);
  --nav-accent-10: rgba(0, 102, 255, 0.1);
  --nav-accent-12: rgba(0, 102, 255, 0.12);
  --nav-accent-15: rgba(0, 102, 255, 0.15);
  --nav-accent-30: rgba(0, 102, 255, 0.3);
  --nav-accent-40: rgba(0, 102, 255, 0.4);
  --nav-accent-60: rgba(0, 102, 255, 0.6);
  --nav-accent-2-60: rgba(0, 210, 255, 0.6);
}

/* Tema BCV: stesso componente, palette arancione storica */
#main-navbar.navbar--bcv {
  --nav-accent: #FF7518;
  --nav-accent-2: #FFA33C;
  --nav-accent-strong: #E85D00;
  --nav-accent-2-strong: #F08A1E;
  --nav-accent-08: rgba(255, 117, 24, 0.08);
  --nav-accent-10: rgba(255, 117, 24, 0.1);
  --nav-accent-12: rgba(255, 117, 24, 0.12);
  --nav-accent-15: rgba(255, 117, 24, 0.15);
  --nav-accent-30: rgba(255, 117, 24, 0.3);
  --nav-accent-40: rgba(255, 117, 24, 0.4);
  --nav-accent-60: rgba(255, 117, 24, 0.6);
  --nav-accent-2-60: rgba(255, 163, 60, 0.6);
}

/* ===== HEADER PRINCIPALE (sovrapposto al contenuto) ===== */
#main-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stato iniziale: barra attaccata al top, tutta rettangolare */
#main-navbar .navbar-shell {
  position: relative;
  z-index: 60;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

#main-navbar .navbar-bar {
  position: relative;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  padding: 0.75rem 1rem;
  transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 640px) {
  #main-navbar .navbar-bar {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Dopo il primo scroll: la barra si stacca e diventa pill stondata */
#main-navbar.navbar-detached .navbar-shell {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.75rem 1rem;
}

@media (min-width: 640px) {
  #main-navbar.navbar-detached .navbar-shell {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

#main-navbar.navbar-detached .navbar-bar {
  border-radius: 1rem;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  border-right: 1px solid rgba(255, 255, 255, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.navbar-container {
  max-width: 80rem; /* max-w-7xl */
  margin: 0 auto;
}

/* Glass header style from squadre.html */
.glass-header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ===== BRAND/LOGO ===== */
header a.flex.items-center.gap-3 {
  text-decoration: none;
  color: inherit;
}

header a.flex.items-center.gap-3 > div:first-child {
  width: 2.5rem; /* w-10 */
  height: 2.5rem; /* h-10 */
  border-radius: 0.75rem; /* rounded-xl */
  background: linear-gradient(135deg, var(--nav-accent) 0%, var(--nav-accent-2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem; /* text-xl */
  box-shadow: 0 4px 6px -1px var(--nav-accent-40);
  transition: transform 200ms;
}

header a.flex.items-center.gap-3:hover > div:first-child {
  transform: scale(1.05);
}

header .font-extrabold.text-navy-900 {
  font-size: 1.125rem; /* text-lg */
  line-height: 1.25;
  color: #0F172A;
}

header .text-\[9px\].font-bold.text-slate-400 {
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94A3B8;
}

/* ===== DESKTOP NAVIGATION ===== */
#desktop-nav {
  display: none;
  align-items: center;
  gap: 0.25rem; /* space-x-1 */
  min-width: 0;
}

@media (min-width: 1024px) {
  #desktop-nav {
    display: flex;
  }
}

#desktop-nav a,
#desktop-nav button.navbar-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem; /* px-3 py-1.5 */
  border-radius: 9999px; /* rounded-full */
  font-size: 0.875rem; /* text-sm */
  font-weight: 600;
  color: #475569; /* text-slate-600 */
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 150ms;
  white-space: nowrap;
}

#desktop-nav a:hover,
#desktop-nav button.navbar-dropdown-trigger:hover {
  color: var(--nav-accent); /* text-brand-blue */
  background: var(--nav-accent-08); /* hover:bg-slate-100 */
}

#desktop-nav a.text-brand-blue.bg-slate-100 {
  color: var(--nav-accent);
  background: var(--nav-accent-12);
}

#desktop-nav button.navbar-dropdown-trigger.text-brand-blue.font-bold {
  color: var(--nav-accent);
  font-weight: 700;
}

#desktop-nav button.navbar-dropdown-trigger.text-brand-blue.font-bold:hover {
  background: var(--nav-accent-15);
}

#desktop-nav button.navbar-dropdown-trigger i {
  font-size: 0.625rem; /* text-xs */
  transition: transform 150ms;
}

/* ===== DESKTOP DROPDOWN (verticale) ===== */
.navbar-dropdown {
  position: relative;
}

#desktop-nav .nav-drop {
  position: relative;
  flex-shrink: 0;
}

#desktop-nav .nav-panel {
  display: block;
  text-align: left;
  white-space: normal;
}

#desktop-nav .nav-panel a {
  display: block;
  width: 100%;
}

/* Fallback apertura dropdown anche senza group-hover di Tailwind */
#desktop-nav .nav-drop:hover .nav-panel,
#desktop-nav .nav-drop:focus-within .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#desktop-nav .relative.group > div.absolute {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem; /* mt-2 */
  width: 14rem; /* w-56 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 200ms;
  z-index: 50;
}

#desktop-nav .relative.group > div.absolute.w-64 {
  width: 16rem; /* w-64 */
  max-height: 70vh;
  overflow-y: auto;
}

#desktop-nav .relative.group:hover > div.absolute {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#desktop-nav .navbar-dropdown-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 1rem; /* rounded-2xl */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 0.5rem; /* py-2 */
}

#desktop-nav .navbar-dropdown-panel a {
  display: block;
  padding: 0.5rem 1rem; /* px-4 py-2 */
  font-size: 0.875rem; /* text-sm */
  color: #334155;
  text-decoration: none;
  transition: all 150ms;
  border-radius: 0.5rem;
}

#desktop-nav .navbar-dropdown-panel a:hover {
  background: rgba(148, 163, 184, 0.1);
  color: var(--nav-accent);
}

#desktop-nav .navbar-dropdown-panel a.font-semibold {
  font-weight: 600;
  color: var(--nav-accent);
}

#desktop-nav .navbar-dropdown-category {
  padding: 0.25rem 0;
}

#desktop-nav .navbar-dropdown-category:not(:first-child) {
  border-top: 1px solid rgba(148, 163, 184, 0.1);
  margin-top: 0.25rem;
  padding-top: 0.5rem;
}

#desktop-nav .navbar-dropdown-category-title {
  display: block;
  padding: 0.375rem 1rem;
  font-size: 0.625rem; /* text-[10px] */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nav-accent);
}

/* ===== CTA BUTTON ===== */
#desktop-nav a.bg-brand-blue {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1.25rem; /* px-5 py-2.5 */
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--nav-accent) 0%, var(--nav-accent-2) 100%);
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 6px -1px var(--nav-accent-40);
  transition: all 150ms;
}

#desktop-nav a.bg-brand-blue:hover {
  background: linear-gradient(135deg, var(--nav-accent-strong) 0%, var(--nav-accent-2-strong) 100%);
  box-shadow: 0 10px 15px -3px var(--nav-accent-40);
  transform: translateY(-1px);
}

#desktop-nav a.bg-brand-blue:active {
  transform: scale(0.95);
}

/* ===== MOBILE TOGGLE ===== */
#mobile-menu-btn {
  position: relative;
  z-index: 70; /* sempre cliccabile sopra al menu aperto */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; /* 44px touch target */
  height: 2.75rem; /* 44px touch target */
  padding: 0.5rem; /* p-2 */
  border: none;
  background: transparent;
  border-radius: 0.5rem; /* rounded-lg */
  color: #374151; /* text-slate-700 */
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

#mobile-menu-btn:hover {
  background: rgba(148, 163, 184, 0.15);
  color: #0F172A;
}

#mobile-menu-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--nav-accent-30);
}

@media (min-width: 1024px) {
  #mobile-menu-btn {
    display: none;
  }
}

/* Icona hamburger: 3 linee che, con un'animazione, diventano una X */
.hamburger {
  position: relative;
  display: block;
  width: 24px;
  height: 18px;
  pointer-events: none;
}

.hamburger-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 9999px;
  background: currentColor;
  transition:
    top 320ms cubic-bezier(0.68, -0.35, 0.27, 1.4),
    transform 320ms cubic-bezier(0.68, -0.35, 0.27, 1.4),
    opacity 160ms ease;
}

.hamburger-line:nth-child(1) { top: 0; }
.hamburger-line:nth-child(2) { top: 8px; }
.hamburger-line:nth-child(3) { top: 16px; }

#mobile-menu-btn.is-active .hamburger-line:nth-child(1) {
  top: 8px;
  transform: rotate(45deg);
}

/* La linea centrale sparisce mentre le altre due ruotano */
#mobile-menu-btn.is-active .hamburger-line:nth-child(2) {
  top: 8px;
  opacity: 0;
  transform: scaleX(0.1);
}

#mobile-menu-btn.is-active .hamburger-line:nth-child(3) {
  top: 8px;
  transform: rotate(-45deg);
}

/* ===== MOBILE MENU: overlay a tutto schermo ===== */
#mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 40;
  margin: 0;
  padding: 0;
  max-width: none;
  max-height: none;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 55%, #eef2f7 100%);
  background-color: #ffffff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Il menu scorre internamente, ma la barra di scorrimento non deve
     rubare spazio al pannello: aprendo un gruppo il contenuto cresce,
     la barra comparirebbe e lo sfondo (bianco) si "restringerebbe" di
     ~8-15px sul lato destro. La nascondiamo: lo scroll resta attivo. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  opacity: 0;
  visibility: hidden;
  /* Solo scivolamento + dissolvenza: nessun scale, così il pannello non
     appare mai più stretto dello schermo durante l'apertura. */
  transform: translateY(16px);
  transform-origin: top center;
  transition:
    opacity 260ms ease,
    transform 340ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 340ms;
}

#mobile-menu:focus {
  outline: none;
}

/* Nessuna barra visibile: lo sfondo resta a tutto schermo */
#mobile-menu::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#mobile-menu.mobile-menu--open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 260ms ease,
    transform 340ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
}

#mobile-menu .mobile-menu-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding:
    calc(var(--navbar-h, 68px) + 1rem)
    1.25rem
    calc(2rem + env(safe-area-inset-bottom, 0px));
}

.mobile-menu-eyebrow {
  margin: 0 0 0.75rem;
  padding-left: 0.9rem;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nav-accent);
}

#mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

#mobile-menu nav > li {
  list-style: none;
  width: 100%;
}

/* Voci del menu: entrano in sequenza all'apertura */
#mobile-menu nav > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 300ms ease, transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

#mobile-menu.mobile-menu--open nav > * {
  opacity: 1;
  transform: none;
}

#mobile-menu.mobile-menu--open nav > *:nth-child(1) { transition-delay: 40ms; }
#mobile-menu.mobile-menu--open nav > *:nth-child(2) { transition-delay: 80ms; }
#mobile-menu.mobile-menu--open nav > *:nth-child(3) { transition-delay: 120ms; }
#mobile-menu.mobile-menu--open nav > *:nth-child(4) { transition-delay: 160ms; }
#mobile-menu.mobile-menu--open nav > *:nth-child(5) { transition-delay: 200ms; }
#mobile-menu.mobile-menu--open nav > *:nth-child(6) { transition-delay: 240ms; }
#mobile-menu.mobile-menu--open nav > *:nth-child(7) { transition-delay: 280ms; }
#mobile-menu.mobile-menu--open nav > *:nth-child(8) { transition-delay: 320ms; }
#mobile-menu.mobile-menu--open nav > *:nth-child(9) { transition-delay: 360ms; }

#mobile-menu .mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem;
  border-radius: 0.85rem;
  color: #374151; /* text-slate-700 */
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 160ms ease,
    color 160ms ease,
    opacity 300ms ease,
    transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

#mobile-menu .mobile-link:hover {
  background: rgba(148, 163, 184, 0.1);
  color: var(--nav-accent);
}

#mobile-menu .mobile-link.font-bold {
  font-weight: 700;
  color: var(--nav-accent);
  background: var(--nav-accent-10);
}

#mobile-menu .mobile-link.bg-brand-blue {
  margin-top: 1rem;
  background: linear-gradient(135deg, var(--nav-accent) 0%, var(--nav-accent-2) 100%);
  color: white;
  box-shadow: 0 10px 20px -8px var(--nav-accent-60);
}

#mobile-menu .mobile-link.mobile-link--cta {
  justify-content: center;
}

#mobile-menu .mobile-link.bg-brand-blue:hover {
  background: linear-gradient(135deg, var(--nav-accent-strong) 0%, var(--nav-accent-2-strong) 100%);
}

#mobile-menu .mobile-menu-footer {
  margin-top: auto;
  padding-top: 2rem;
  font-size: 0.75rem;
  color: #94A3B8;
}

/* Mobile dropdown accordion */
.mobile-dropdown-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.9rem; /* stesso respiro dei link */
  border: none;
  background: transparent;
  color: #374151;
  font-size: 1.0625rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  border-radius: 0.85rem;
  transition:
    background 160ms ease,
    color 160ms ease,
    opacity 300ms ease,
    transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Il tocco sul gruppo non colora il pulsante: si apre/chiude e basta.
   La freccia che ruota e' gia' il feedback visivo. Il blu resta solo per
   la sezione che contiene la pagina corrente. */
.mobile-dropdown-btn:hover,
.mobile-dropdown-btn:focus,
.mobile-dropdown-btn:active {
  background: transparent;
  color: #374151;
}

.mobile-dropdown-btn.text-brand-blue.font-bold {
  color: var(--nav-accent);
  font-weight: 700;
  background: var(--nav-accent-10);
}

.mobile-dropdown-btn i {
  font-size: 0.625rem;
  color: #94A3B8;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Freccia: ">" chiuso, ruota verso il basso quando il gruppo e' aperto */
.mobile-dropdown-btn[aria-expanded="true"] i {
  transform: rotate(90deg);
}

.navbar-mobile-dropdown {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1rem; /* pl-4 */
  border-left: 2px solid var(--nav-accent-15);
  overflow: hidden;
  box-sizing: border-box;
  /* L'apertura e' animata via JS (altezza 0 -> contenuto), cosi' il
     pannello scende morbido invece di comparire di scatto. */
  transition: height 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Spaziatura sopra/sotto dentro la lista: cosi' l'altezza animata
   corrisponde esattamente al contenuto, senza scalini. */
.navbar-mobile-dropdown > li:first-child {
  padding-top: 0.25rem;
}

.navbar-mobile-dropdown > li:last-child {
  padding-bottom: 0.5rem;
}

/* Le voci del gruppo entrano una dopo l'altra, senza scatti */
@keyframes pgsNavItemIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.navbar-mobile-dropdown.is-revealing > li {
  opacity: 0;
  animation: pgsNavItemIn 360ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.navbar-mobile-dropdown.is-revealing > li:nth-child(1) { animation-delay: 30ms; }
.navbar-mobile-dropdown.is-revealing > li:nth-child(2) { animation-delay: 70ms; }
.navbar-mobile-dropdown.is-revealing > li:nth-child(3) { animation-delay: 110ms; }
.navbar-mobile-dropdown.is-revealing > li:nth-child(4) { animation-delay: 150ms; }
.navbar-mobile-dropdown.is-revealing > li:nth-child(5) { animation-delay: 190ms; }
.navbar-mobile-dropdown.is-revealing > li:nth-child(6) { animation-delay: 230ms; }
.navbar-mobile-dropdown.is-revealing > li:nth-child(7) { animation-delay: 270ms; }
.navbar-mobile-dropdown.is-revealing > li:nth-child(n + 8) { animation-delay: 300ms; }

.navbar-mobile-dropdown[hidden] {
  display: none;
}

.navbar-mobile-dropdown-link {
  display: block;
  padding: 0.5rem 0.75rem; /* py-2 px-3 */
  color: #475569;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0.375rem;
  transition: all 150ms;
  margin: 0.125rem 0;
}

.navbar-mobile-dropdown-link:hover {
  background: var(--nav-accent-08);
  color: var(--nav-accent);
}

.navbar-mobile-dropdown-link.font-semibold {
  font-weight: 600;
  color: var(--nav-accent);
}

/* Sottosezione corrente: l'utente sa dove si trova */
.navbar-mobile-dropdown-link.is-active {
  color: var(--nav-accent);
  background: var(--nav-accent-12);
  font-weight: 700;
}

.navbar-mobile-dropdown-category {
  margin: 0.5rem 0;
}

.navbar-mobile-dropdown-category-title {
  display: block;
  padding: 0.5rem 0.75rem 0.125rem;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nav-accent);
}

/* Mobile separators */
#mobile-menu .border-t.border-slate-200 {
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}

/* Blocca lo scroll della pagina mentre il menu e' aperto */
body.mobile-menu-open {
  overflow: hidden;
}

/* ===== SCROLL EFFECT (gestito via .navbar-detached) ===== */

/* ===== SCROLL PROGRESS BAR sotto la navbar ===== */
.navbar-progress-track {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: -2px;
  height: 3px;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.navbar-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--nav-accent), var(--nav-accent-2));
  border-radius: 9999px;
  box-shadow: 0 0 8px var(--nav-accent-2-60);
  transition: width 100ms linear;
}

#main-navbar.navbar-detached .navbar-progress-track {
  opacity: 1;
}

/* ===== ACCESSIBILITÀ ===== */
@media (prefers-reduced-motion: reduce) {
  .glass-header,
  .navbar-dropdown-panel,
  #mobile-menu,
  #mobile-menu nav > *,
  .navbar-mobile-dropdown,
  .hamburger-line,
  .mobile-dropdown-btn i {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .navbar-mobile-dropdown.is-revealing > li {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

#desktop-nav a:focus-visible,
#desktop-nav button:focus-visible,
#mobile-menu-btn:focus-visible,
#mobile-menu .mobile-link:focus-visible,
.mobile-dropdown-btn:focus-visible,
.navbar-dropdown-panel a:focus-visible,
.navbar-mobile-dropdown-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--nav-accent-30);
}

/* High contrast */
@media (prefers-contrast: high) {
  .glass-header {
    border-width: 2px;
  }
  .navbar-dropdown-panel {
    border-width: 2px;
  }
}