/* hotfix-nav.css - hamburger icon (avoid double-bars)
   Handles two markup patterns:
   A) <button class="nav-toggle"><span></span><span></span><span></span></button>
   B) <button class="nav-toggle"><span></span></button>  (single span -> use ::before/::after)
*/

.nav-toggle{ position: relative !important; -webkit-tap-highlight-color: transparent; }

/* Pattern A: multiple spans -> use them as 3 bars */
.nav-toggle span:not(:only-child),
.nav-toggle .bar{
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  margin: 4px auto !important;
  background: rgba(255,255,255,0.95) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* If there are multiple spans, DO NOT generate pseudo bars */
.nav-toggle span:not(:only-child)::before,
.nav-toggle span:not(:only-child)::after{
  content: none !important;
}

/* Pattern B: single span -> generate 3 bars via pseudo-elements */
.nav-toggle span:only-child{
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  margin: 0 auto !important;
  background: rgba(255,255,255,0.95) !important;
  border-radius: 2px !important;
  position: relative !important;
}
.nav-toggle span:only-child::before,
.nav-toggle span:only-child::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: rgba(255,255,255,0.95) !important;
  border-radius: 2px !important;
}
.nav-toggle span:only-child::before{ top: -6px !important; }
.nav-toggle span:only-child::after{ top: 6px !important; }