/* menu-fix.css — corecții pentru meniul <nav id="menu"> */

/* -------------------- DESKTOP & TABLET -------------------- */
/* Afișăm #menu doar de la 640px în sus: pe mobil rămâne burger-ul */
@media (min-width: 640px){
  /* Bara de meniu */
  #menu{
    display:flex !important;
    justify-content:center !important;
    width:100%;
  }

  /* Containerul interior care ține item-urile */
  #menu > div{
    display:flex !important;
    align-items:center;
    justify-content:center !important;
    flex-wrap:wrap !important;    /* wrap pe tablete mai înguste */
    gap:1rem;                      /* spațiu de bază între item-uri */
    width:100%;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
  }

  /* Neutralizează marginile moștenite (ex. sm:space-x-6) și orice float */
  #menu > div > div{
    margin-left:0 !important;
    float:none !important;
    flex:0 0 auto;                 /* fiecare item își păstrează lățimea proprie */
  }

  /* Link-urile: pe un rând, hit-area compactă și stabilă */
  #menu > div > div > a{
    display:inline-block;
    white-space:nowrap;
    padding:.25rem .25rem;
  }

  /* Iconul săgeată lângă „Produse universale” ocupă mai puțin spațiu */
  #menu .leading-none{ display:flex; align-items:center; }
  #menu .leading-none + button,
  #menu .leading-none button{
    margin-left:.25rem !important; /* override la ml-2 */
  }
}

/* La >=1024px ținem meniul pe UN SINGUR RÂND, cu spacing strâns */
@media (min-width: 1024px){
  #menu > div{
    flex-wrap:nowrap !important;
    gap:.9rem !important;
  }
}

/* În zona 1200–1400px comprimăm puțin ca să încapă totul fără rupere */
@media (min-width: 1200px) and (max-width: 1400px){
  #menu > div{ gap:.7rem !important; }
  #menu{ font-size:.93rem !important; }   /* puțin sub text-sm */
}

/* -------------------- MOBIL (<640px) -------------------- */
/* Ascundem complet #menu; rămâne meniul burger al temei */
@media (max-width: 639.98px){
  #menu{ display:none !important; }
}

/* (Opțional) Fallback pentru unele teme: asigură text vizibil în overlay
   — adaugă/editează clasele dacă overlay-ul tău poartă alt nume. */
@media (max-width: 639.98px){
  .offcanvas, .drawer, .mobile-menu{ background:#fff !important; }
  .offcanvas a, .drawer a, .mobile-menu a{ color:#111 !important; }
}
/* --- Clean-up pentru meniul mobil: ascunde elementele cu ancore fără text --- */
@media (max-width: 639.98px){
  /* dacă browserul suportă :has() */
  .pb-6.mt-3.space-y-3 > div:has(> .bg-primary > a:empty){
    display: none !important;
  }

  /* fallback: ascunde doar ancora goală; de obicei „bara” dispare pentru că rămâne fără conținut */
  .pb-6.mt-3.space-y-3 .bg-primary > a:empty{
    display: none !important;
  }
}