/* Shared mobile nav toggle — used by aboutus.html, checkout.html,
   esim-country-list.html, esim-faq.html, esim-install-guide.html,
   esim-pricing.html, esim-support.html, payment-success.html,
   index.html, terms.html, privacy.html, refund.html,
   accountdeleterequest.html.
   Single source of truth for the hide/show breakpoint, so it's
   consistent across pages regardless of each page's own older nav CSS.
   Two header markups exist across the site (.siteHeader vs bare
   .header), so every rule below targets both. Loaded after those, so
   it wins on equal-specificity selectors; the default (closed) state
   also uses !important to guarantee it overrides any earlier rule at
   a different breakpoint. Desktop (>940px) is untouched: .navToggle
   stays display:none there, same as before this file existed. */

.navToggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  border: 1px solid #dde3ea;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.navToggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: #16232f;
  margin: 0 auto;
  border-radius: 1px;
}
html[data-theme="dark"] .navToggle {
  background: var(--surface);
  border-color: var(--border);
}
html[data-theme="dark"] .navToggle span {
  background: var(--text);
}

@media (max-width: 940px) {
  .navToggle {
    display: flex;
  }
  /* .navToggle is the last flex child (after .navRight where present) so it
     sits at the far right, next to the store buttons, instead of the
     3-way split that plain space-between would otherwise produce. */
  .siteHeader .headerInner,
  .header .headerInner {
    justify-content: flex-start;
  }
  .siteHeader .brand,
  .header .brand {
    margin-right: auto;
  }
  .siteHeader .nav,
  .header .nav {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    padding: 8px 16px 16px;
    border-bottom: 1px solid #e7ecf1;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
    z-index: 200;
  }
  html[data-theme="dark"] .siteHeader .nav,
  html[data-theme="dark"] .header .nav {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .siteHeader .nav.navOpen,
  .header .nav.navOpen {
    display: flex !important;
  }
  .siteHeader .nav a,
  .header .nav a {
    padding: 12px 10px;
  }
}