/* ── RESPONSIVE NAV: Hamburger + Mobile Menu ── */
/* Shared across all pages — link this file in every HTML page */

/* ── Desktop dropdown ── */
.nav-dropdown {
  position: relative;
}
.nav-dropdown > a {
  cursor: default;
}
.nav-dropdown > a::after {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 6px;
  margin-bottom: 2px;
  transition: transform .2s;
}
.nav-dropdown:hover > a::after {
  transform: rotate(-135deg);
}
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 8px;
  min-width: 200px;
  z-index: 110;
}
.nav-dropdown:hover .nav-dropdown-menu {
  display: block;
}
.nav-dropdown-menu ul {
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(4,16,45,.1);
  padding: 8px 0;
  list-style: none;
}
.nav-dropdown-menu a {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--deepnavy);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
}
.nav-dropdown-menu a:hover {
  background: var(--bg, rgb(234,238,242));
  color: var(--blue);
}

/* ── Hamburger ── */
.hamburger {
  display: none; background: none; border: none; cursor: pointer;
  width: 36px; height: 36px; padding: 4px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.hamburger span {
  display: block; width: 22px; height: 2px; background: var(--deepnavy);
  border-radius: 2px; transition: transform .2s, opacity .2s;
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile menu ── */
.mobile-menu {
  display: none; position: fixed; top: 68px; left: 0; right: 0; bottom: 0;
  background: var(--white); z-index: 99; padding: 24px;
  flex-direction: column; gap: 0; overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu a,
.mobile-menu .mobile-group-label {
  text-decoration: none; color: var(--deepnavy); font-size: 17px;
  font-weight: 500; padding: 12px 0; border-bottom: 1px solid var(--stroke);
  display: block;
}
.mobile-menu a:hover { color: var(--blue); }
.mobile-menu .mobile-group-label {
  font-weight: 600; font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text, rgba(76,79,86,0.8));
  padding: 20px 0 8px; border-bottom: none; cursor: default;
}
.mobile-menu .mobile-sub a {
  padding-left: 16px; font-size: 16px;
}
.mobile-menu .btn-nav-mobile {
  background: var(--deepnavy); color: var(--white);
  padding: 14px 20px; border-radius: 8px;
  font-size: 15px; font-weight: 600;
  text-decoration: none; text-align: center;
  margin-top: 16px; border-bottom: none;
}
.mobile-menu .btn-nav-mobile:hover { opacity: .85; color: var(--white); }

/* Lock body scroll when menu is open (works on iOS too) */
body.menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  touch-action: none;
}

@media (max-width: 900px) {
  nav { padding: 0 24px; }
  .nav-links { display: none; }
  .btn-nav { display: none; }
  .hamburger { display: flex; }
}