/*--------------------------------------------------------------
# Navbar (mobile-first)
--------------------------------------------------------------*/

/* Make the header sticky and hideable on mobile */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10000;
  will-change: transform;
  transition: transform 0.25s ease;
}
.site-header.--hide {
  transform: translateY(-100%);
}

/* Bar */
.navbar {
  background: #fff;
  height: 50px; /* mobile */
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.navbar-inner {
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--mobile-padding);
  gap: 0.75rem;
}

/* Left group */
.nav-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
}
.brand-text {
  font-weight: 600;
}
.custom-logo {
  max-height: 28px;
  height: auto;
  width: auto;
}

/* Buttons */
.nav-cta {
  font-size: 0.9rem;
  padding: 0.35rem 0.75rem;
  display: none;
}

/* Hamburger */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.hamburger-svg {
  width: 20px;
  height: 20px;
  fill: var(--color-heading);
}
/* Toggle icons: show bars by default, X when menu is open */
.menu-toggle .icon-close { display: none; }
.navbar.is-open .menu-toggle .icon-bars { display: none; }
.navbar.is-open .menu-toggle .icon-close { display: inline; }

/* Right group (menu) */
.nav-right {
  display: none; /* hidden on mobile, becomes drawer when open */
}
.main-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-menu > .menu-item > a,
.main-menu > .menu-item > button.mega-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.25rem;
  color: var(--color-heading);
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
}
.main-menu > .menu-item-has-mega {
  position: relative;
}

/* Reset default list bullet from base.css for navbar lists */
.navbar ul li::before,
.navbar .mega-list li::before {
  content: none !important;
}
.navbar ul li { position: static; }

/* Megamenu base */
.mega-panel {
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 0.5rem 0;
}
.mega-panel[hidden] { display: none !important; }
.mega-list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
}
.mega-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem 1rem 0;
  color: inherit;
  text-decoration: none;
}
.mega-link:hover {
  background: rgba(0,0,0,0.04);
}

/* Sprite icons (3x3, 120x120, icons 40x40) */
.type-icon {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  flex: 0 0 40px;
  background-image: url('../img/9tipimap.png');
  background-size: 120px 120px;
  background-repeat: no-repeat;
}
.icon-type-1 { background-position:   0    0; }
.icon-type-2 { background-position: -40px  0; }
.icon-type-3 { background-position: -80px  0; }
.icon-type-4 { background-position:   0  -40px; }
.icon-type-5 { background-position: -40px -40px; }
.icon-type-6 { background-position: -80px -40px; }
.icon-type-7 { background-position:   0  -80px; }
.icon-type-8 { background-position: -40px -80px; }
.icon-type-9 { background-position: -80px -80px; }
.type-title { font-weight: 600; }

/* Mobile drawer behavior */
@media (max-width: 768px) {
  .navbar.is-open .nav-right {
    display: block;
  }
  .nav-right {
    position: fixed;
    top: 50px; /* under navbar */
    height: calc(100vh - 50px);
    right: 0;
    left: auto;
    width: 90vw; /* requested width */
    background: #fff;
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
    border-left: 1px solid rgba(0,0,0,0.06);
    max-height: calc(100vh - 50px);
    overflow: auto;
    padding: 0.5rem 0;
    z-index: 1000;
  }

  .main-menu { display: block; text-align: center; }
  .main-menu > .menu-item > a,
  .main-menu > .menu-item > button.mega-toggle {
    width: 100%;
    justify-content: center;
  }
  .main-menu > .menu-item { border-bottom: 1px solid rgba(0,0,0,0.06); }
  .main-menu > .menu-item:last-child { border-bottom: 0; }

  .mega-panel {
    position: static;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }
  .mega-list .mega-link {
    justify-content: center;
    padding: 0.25rem 0.5rem 0.5rem 0;
  }
}

/* Desktop layout */
@media (min-width: 769px) {
  .navbar { height: 60px; }
  .custom-logo { max-height: 36px; }
  .menu-toggle { display: none; }
  .nav-right { display: block; }
  .nav-cta { display: inline-flex; }
  .main-menu {
    display: flex;
    gap: var(--space-md);
    align-items: center;
  }

  /* Dropdown panel position; visibility handled via [hidden] removed/added by JS */
  .menu-item-has-mega .mega-panel {
    position: absolute;
    top: 100%; /* flush to navbar without gap */
    right: 0;  /* right edge aligned with toggle end */
    width: 260px;
    display: block;
  }
}

/* Chevron indicator */
.chevron {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 0.25rem;
}

/* Visually hidden utility */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Mobile menu overlay (appears when drawer is open) */
#nav-overlay {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  height: calc(100vh - 50px);
  background: rgba(0,0,0,0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 998; /* below drawer (1000), above page */
}
#nav-overlay.active { opacity: 1; pointer-events: auto; }
@media (min-width: 769px) {
  #nav-overlay { display: none; }
}

/*--------------------------------------------------------------
# Mobile Sticky Footer Banner (50px height)
--------------------------------------------------------------*/
.info-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  transform: translateY(0);
  transition: transform 0.25s ease;
}
.info-sticky.--hide {
  transform: translateY(100%);
}
.msf-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.msf-left {
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
}
.msf-btn {
  background: #fff;
  color: var(--color-primary);
}

/* Hide the mobile sticky footer on desktop */
@media (min-width: 769px) {
  .info-sticky { display: none; }
  .navbar-inner { padding: 0 var(--space-lg); }
}
@media (min-width: 1200px) {
  .navbar-inner { padding: 0; }
}