/* responsive.css — Navbar/Hamburger responsive + small utilities
   Scope: only cross-cutting rules (component-agnostic).
   Component-specific tweaks should live in their module CSS (e.g. components/navbar.css).
*/

/* ===== NAVBAR (mobile-first via checkbox #nav_toggle) ===== */
@media (max-width: 1199px) {
  nav.navbar { position: relative; z-index: 100; }

  /* Collapse menu */
  nav.navbar .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #000; /* fallback */
    padding: 10px 16px; /* Aumentato padding laterale per visibilità */
    gap: 0.75rem;
    flex-direction: column;
    align-items: flex-end; /* ALLINEA TUTTO A DESTRA */
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    z-index: 1000; /* over content */
    box-sizing: border-box;
    overflow-x: hidden; /* Previene scroll orizzontale */
  }

  /* Show when the hidden checkbox is checked */
  nav.navbar .nav-toggle:checked ~ .nav-center .menu { display: flex; }

  /* Menu links - tutti allineati uguale */
  nav.navbar .menu li {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  nav.navbar .menu a {
    display: block;
    width: 100%;
    padding: 6px 4px; /* Aggiunto padding laterale 4px */
    margin: 0;
    text-align: right; /* ALLINEATO A DESTRA */
    color: #fff;
    font-family: var(--font-ui);
    font-weight: 300;
    font-size: inherit;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-sizing: border-box;
  }

  /* Button dropdown - STESSI stili ma con flex per icona */
  nav.navbar .menu button.nav-dropdown-toggle {
    display: flex !important;
    width: 100% !important;
    padding: 6px 4px !important; /* Stesso padding laterale degli <a> */
    margin: 0 !important;
    justify-content: flex-end !important; /* ALLINEATO A DESTRA */
    align-items: center !important;
    gap: 0.375rem !important; /* Spazio tra testo e icona */
    background: none !important;
    border: none !important;
    color: #fff !important;
    font-family: var(--font-ui) !important;
    font-weight: 300 !important;
    font-size: inherit !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    cursor: pointer;
    box-sizing: border-box !important;
  }

  /* Icona chevron nel button - piccola e allineata */
  nav.navbar .menu button.nav-dropdown-toggle i {
    font-size: 0.7em !important;
    margin-left: 0 !important;
  }

  /* DROPDOWN MOBILE - accordion style */
  nav.navbar .nav-item-dropdown {
    width: 100%;
  }

  nav.navbar .nav-dropdown-menu {
    position: static !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    background: transparent;
    border: none;
    box-shadow: none;
    visibility: visible !important;
  }

  nav.navbar .nav-item-dropdown.dropdown-open .nav-dropdown-menu {
    opacity: 1;
    max-height: 500px;
    overflow-y: auto;
    padding: 0.5rem 0 !important; /* Nessun indent - allineato come gli altri */
    margin: 0.25rem 0;
    background: transparent !important; /* Nessuno sfondo separato */
    border: none !important; /* Nessun bordo laterale */
    box-sizing: border-box;
  }

  nav.navbar .nav-dropdown-item {
    display: block;
    padding: 0.5rem 4px !important; /* Stesso padding degli altri link */
    font-size: 0.85em !important; /* Leggermente più piccolo per distinguerli */
    width: 100%;
    text-align: right !important; /* ALLINEATO A DESTRA */
    box-sizing: border-box;
  }

  /* Hamburger visible on mobile */
  nav.navbar .hamburger {
    display: inline-flex !important; /* ensure override of component default */
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    cursor: pointer;
    user-select: none;
    z-index: 110;
  }
  nav.navbar .hamburger span {
    display: block;
    width: 22px; height: 2px;
    margin: 4px 0;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
  }

  /* Optional tweaks */
  nav.navbar .nav-right { display: inline-flex; align-items: center; gap: .5rem; }
  nav.navbar .lang-switch { margin-right: .25rem; }
  nav.navbar .lang-switch button { font-size: .8125rem; padding: .25rem .5rem; }
  nav.navbar .nav-center { position: static; }
}

@media (min-width: 1200px) {
  /* Desktop layout: menu always visible inline */
  nav.navbar .hamburger { display: none !important; }
  nav.navbar .menu {
    display: flex !important;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    background: transparent;
    padding: 0;
    box-shadow: none;
  }
}

/* ===== LEGACY FALLBACK (if some JS toggles .menu.show) — keeps compatibility */
@media (max-width: 1199px) {
  nav.navbar .menu.show { display: flex; }
}