/* =========================
   NAVBAR.CSS — FINAL (UPDATED)
   Obiettivi:
   - Desktop: MAI a capo (no wrap)
   - Se non ci sta: passa a hamburger PRIMA (<=1180px)
   - Lente SEMPRE a destra, mai sopra EN
   - Spazio tra logo e "Home"
   - Mega menu centrato e responsive
   - Browser dark: icone/hamburger sempre NERI
   - ✅ Lente: dimensione FISSA anche in hamburger
========================= */

:root{ color-scheme: light; }

/* =========================
   HEADER LAYOUT (grid 3 colonne)
   [Logo] [Nav] [Search]
========================= */
header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  color: #000;

  display: grid;
  grid-template-columns: auto 1fr auto; /* logo | nav | search */
  align-items: center;

  column-gap: 24px;
  padding: 1rem 2rem;
  border-bottom: 1px solid #ddd;
}

/* logo */
.logo{
  display:flex;
  align-items:center;
  grid-column: 1;
}
.logo img{ max-height:60px; display:block; }

/* container che riceve il menu via fetch */
#menu-container{
  grid-column: 2;
  min-width: 0;            /* IMPORTANT per non spingere fuori la lente */
  padding-left: 22px;      /* ✅ spazio tra logo e Home */
  display:flex;
  justify-content: center;
  align-items: center;
}

/* =========================
   SEARCH ICON (fissa sempre)
========================= */
.search-icon{
  grid-column: 3;
  justify-self: end;
  cursor: pointer;
  margin-left: 0;

  /* ✅ area cliccabile coerente (desktop + mobile) */
  width: 44px;
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;

  -webkit-tap-highlight-color: transparent;
}
.search-icon svg{
  /* ✅ dimensione FISSA (non cambia con hamburger / resize) */
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px;
  display:block;

  fill: #000 !important;   /* ✅ sempre nero (anche in dark mode) */
}

/* search box */
.search-box{
  display:none;
  position:absolute;
  top: calc(100% + 8px);
  right: 2rem;
  background:#fff;
  padding:0.5rem;
  border:1px solid #ddd;
  border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
  z-index:1001;
}
.search-box.active{ display:block; }
.search-box input{
  padding:0.5rem;
  font-size:1rem;
  width:200px;
}

/* =========================
   NAV DESKTOP (mai a capo)
========================= */
nav{
  display:flex;
  align-items:center;
  justify-content:center;

  /* ✅ NO WRAP */
  flex-wrap: nowrap;
  white-space: nowrap;

  /* spazi “fluidi” ma non casuali */
  gap: clamp(18px, 2.2vw, 46px);
}

/* link navbar */
nav > a,
nav .dropdown > a,
nav .language-switcher > a{
  color:#000;
  text-decoration:none;
  font-weight:500;
  padding: 0.75rem 1rem;
  display:inline-block;
  position:relative;
}

nav > a:hover,
nav > a:focus,
nav .dropdown > a:hover,
nav .dropdown > a:focus,
nav .language-switcher > a:hover,
nav .language-switcher > a:focus{
  text-decoration: underline;
  outline:none;
}

nav > a:focus-visible,
nav .dropdown > a:focus-visible,
nav .language-switcher > a:focus-visible{
  outline:2px solid #000;
  outline-offset:2px;
  background:#f0f0f0;
}

/* ACTIVE */
#navbar a.active,
#navbar a.active:hover,
#navbar a.active:focus,
#navbar a.active:focus-visible{
  background:#000 !important;
  color:#fff !important;
  border-radius:8px;
  text-decoration:none !important;
  font-weight:600;
}
#navbar a.active{ padding:0.35rem 0.65rem; }

/* =========================
   HAMBURGER (sempre nero)
========================= */
.menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  height:60px;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-toggle div{
  width:25px;
  height:3px;
  background:#000 !important; /* ✅ sempre nero */
  margin:4px 0;
  transition:0.4s;
}

/* =========================
   MEGA MENU (DESKTOP)
   centrato rispetto al viewport (mai tagliato)
========================= */
.mega-dropdown{ position: static; }

/* prodotti active */
#productsBtn.active{
  background:#000 !important;
  color:#fff !important;
  border-radius:8px;
  text-decoration:none !important;
  font-weight:600;
  padding:0.35rem 0.65rem;
}
#productsBtn[aria-expanded="true"]{
  background:transparent !important;
  color:#000 !important;
  border-radius:0 !important;
  text-decoration: underline;
  font-weight:600;
  padding:0.75rem 1rem !important;
}

/* box mega menu */
.mega-menu{
  display:none;
  position:absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);

  width: min(1100px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);

  background:#fff;
  border:1px solid #ddd;
  box-shadow:0 10px 28px rgba(0,0,0,0.12);
  border-radius: 14px;
  padding: 1.25rem 1.25rem;
  z-index:1001;

  /* ✅ griglia a spazi fissi */
  gap: 28px 56px;
  align-items:start;

  grid-template-columns: repeat(4, minmax(180px, 1fr));
}
.mega-menu.show{ display:grid; }

.mega-column{ min-width:0; }
.mega-column h4{
  font-size:1.05rem;
  font-weight:700;
  margin:0 0 0.7rem;
  color:#000;
}
.mega-column a{
  display:block;
  padding: 0.35rem 0;
  color:#333;
  text-decoration:none;
}
.mega-column a:hover,
.mega-column a:focus,
.mega-menu a:focus-visible{
  text-decoration: underline;
  background:#f9f9f9;
  outline:2px solid #000;
  outline-offset:2px;
  border-radius:6px;
}

/* Mega menu responsive (solo desktop) */
@media (max-width: 1080px){
  .mega-menu{
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 22px 40px;
  }
}
@media (max-width: 860px){
  .mega-menu{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* =========================
   MOBILE helpers
========================= */
.mobile-only{ display:none; }
.desktop-only{ display:block; }

/* mobile submenu */
.mobile-products-toggle{
  background:none;
  border:none;
  font-size:1rem;
  font-weight:700;
  padding:0.75rem 1rem;
  width:100%;
  text-align:left;
  cursor:pointer;
}
.mobile-products-toggle:hover,
.mobile-products-toggle:focus{
  background:#f0f0f0;
  text-decoration: underline;
  outline:none;
}

#mobile-products-btn.active,
#mobile-products-btn.active:hover,
#mobile-products-btn.active:focus,
#mobile-products-btn.active:focus-visible{
  background:#000 !important;
  color:#fff !important;
  border-radius:8px;
  text-decoration:none !important;
  font-weight:600;
  padding:0.35rem 0.65rem;
}

.mobile-submenu{
  display:none;
  width:100%;
  padding:0.5rem 1rem;
}
.mobile-submenu.show{ display:block; }

.mobile-category{ margin-bottom: 0.5rem; }
.mobile-category summary{
  font-weight:700;
  padding:0.5rem 0.75rem;
  cursor:pointer;
  list-style:none;
}
.mobile-category summary:hover{
  background:#f0f0f0;
  text-decoration: underline;
}
.mobile-category a{
  display:block;
  padding:0.4rem 0 0.4rem 1.5rem;
  font-size:0.95rem;
  color:#333;
  text-decoration:none;
}
.mobile-category a:hover{ text-decoration: underline; }

/* lingua */
.lang-btn{
  font-weight:600;
  text-decoration:none;
  padding:0.5rem 1rem;
  background:transparent;
}
#lang-switch.active,
#lang-switch.active:hover,
#lang-switch.active:focus,
#lang-switch.active:focus-visible{
  background:transparent !important;
  color:#000 !important;
  text-decoration:none !important;
  font-weight:600;
  padding:0.75rem 1rem !important;
  border-radius:0 !important;
}

/* =========================
   MOBILE (<=1180px)
   - passa a hamburger PRIMA (così non va mai a capo)
========================= */
@media (max-width: 1180px){
  .mobile-only{ display:block; width:100%; }
  .desktop-only{ display:none !important; }

  /* su mobile non usare mega menu desktop */
  .mega-menu{ display:none !important; }

  /* hamburger centrato */
  .menu-toggle{
    display:flex;
    position:absolute;
    left:50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-left:0;
    z-index: 3;
  }

  /* ✅ search sempre a destra (ma dimensione NON cambia) */
  .search-icon{
    position:absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;

    /* ribadisco: fissa */
    width: 44px;
    height: 44px;
  }
  .search-icon svg{
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px;
  }

  /* il nav mobile scende sotto */
  nav{
    display:none;
    flex-direction:column;
    align-items:flex-start;
    padding:1rem;
    gap:0.75rem;
    background:#fff;
    width:100%;
    border-top:1px solid #ddd;

    position:absolute;
    top:100%;
    left:0;
    z-index:999;

    white-space: normal; /* qui ok */
  }

  nav.active,
  #navbar.active{ display:flex; }

  /* search box mobile */
  .search-box{
    right: 0.75rem;
    top: calc(100% + 8px);
    width: 90vw;
    max-width: 320px;
  }
  .search-box input{ width:100%; }
}

/* =========================================================
   iOS/Safari FIX — link blu nel menu
   (non altera il resto del sito)
========================================================= */

/* forza sempre nero per i link della navbar (desktop + mobile) */
#navbar a,
#menu-container nav a,
#menu-container .dropdown > a,
#menu-container .language-switcher > a,
#menu-container .mega-menu a,
#menu-container .mobile-category a,
#menu-container .mobile-products-toggle,
#menu-container #productsBtn,
#menu-container #lang-switch {
  color: #000;
  -webkit-text-fill-color: #000; /* Safari fix */
}

/* stati che Safari colora spesso in blu (visited/active/focus) */
#navbar a:visited,
#navbar a:active,
#navbar a:focus,
#navbar a:focus-visible,
#menu-container nav a:visited,
#menu-container nav a:active,
#menu-container nav a:focus,
#menu-container nav a:focus-visible {
  color: #000;
  -webkit-text-fill-color: #000;
}

/* NON rompere lo stato active (bianco su nero) */
#navbar a.active,
#productsBtn.active,
#mobile-products-btn.active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}