/* ==========================================================
   NAV.CSS — Navigation Bar & Mega Menu Styles
   ========================================================== */

/* ── Navigation Bar ── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: 72px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem; background: transparent;
  transition: background .35s, box-shadow .35s;
}
#nav.scrolled {
  background: rgba(0,9,38,.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(15,82,186,.15);
}

/* ── Hamburger ── */
.nav-ham {
  width: 44px; height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  color: var(--white); z-index: 1100; flex-shrink: 0;
}
.nav-ham span {
  display: block; width: 22px; height: 1.5px; background: currentColor;
  transition: transform .3s, opacity .3s, width .3s; border-radius: 1px;
}
.nav-ham.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg) }
.nav-ham.open span:nth-child(2) { opacity: 0; width: 0 }
.nav-ham.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg) }

/* ── Logo ── */
.nav-logo {
  position: absolute; left: 50%; transform: translateX(-50%);
  z-index: 1100; display: flex; align-items: center;
}
.nav-logo img {
  height: 80px; width: auto;
  filter: brightness(0) invert(1);
  transition: filter .2s;
}
#nav.scrolled .nav-logo img {
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(15,82,186,.4));
}

/* ── Nav Right (CSS defined, not rendered in HTML) ── */
.nav-right {
  display: flex; align-items: center; gap: 1.5rem;
  font-size: 13px; color: var(--white); z-index: 1100;
}
.nav-right a { color: var(--white); opacity: .75; transition: opacity .2s; letter-spacing: .01em }
.nav-right a:hover { opacity: 1 }
.nav-sep { opacity: .3; font-weight: 300 }

/* ── Mega Menu Overlay ── */
#mega {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 900; display: flex;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
#mega.open { opacity: 1; pointer-events: all }

/* ── Mega Menu Sidebar ── */
.mm-side {
  width: 320px; flex-shrink: 0; background: var(--navy);
  padding: 80px 0 3rem; display: flex; flex-direction: column; overflow-y: auto;
}
.mm-side-logo {
  padding: 1.25rem 2.5rem 1.5rem;
  border-bottom: 1px solid var(--dborder); margin-bottom: .5rem;
}
.mm-side-logo img { height: 64px; width: auto; filter: brightness(0) invert(1) }

/* ── Sidebar Menu Items ── */
.mm-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 2.5rem; font-size: 1rem; font-weight: 400;
  color: rgba(255,255,255,.65); cursor: pointer;
  border-left: 3px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
}
.mm-item:hover, .mm-item.active {
  color: var(--white); border-left-color: var(--accent);
  background: rgba(255,255,255,.04);
}
.mm-item svg {
  width: 14px; height: 14px; stroke: currentColor; stroke-width: 2;
  fill: none; flex-shrink: 0;
}

/* ── Sidebar Bottom Links ── */
.mm-bottom {
  margin-top: auto; padding: 2rem 2.5rem;
  border-top: 1px solid var(--dborder);
  display: flex; flex-direction: column; gap: .75rem;
}
.mm-bottom a {
  font-size: .82rem; color: rgba(255,255,255,.38);
  display: flex; align-items: center; gap: .5rem;
  transition: color .15s;
}
.mm-bottom a:hover { color: var(--white) }

/* ── Content Panels ── */
.mm-content {
  flex: 1; background: var(--white);
  padding: 80px 3.5rem 3rem; overflow-y: auto; display: none;
}
.mm-content.active { display: block }
.mm-title {
  font-size: 1.4rem; font-family: var(--serif); font-weight: 400;
  color: var(--navy); margin-bottom: 2rem;
  display: flex; align-items: center; gap: .75rem;
}
.mm-title a { color: var(--accent2); font-size: 1rem; display: inline-flex; align-items: center }
.mm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem }
.mm-link {
  display: block; padding: .55rem 0; font-size: .9rem; color: #333;
  border-bottom: 1px solid #f0ede8;
  transition: color .15s, padding .15s;
}
.mm-link:hover { color: var(--accent2); padding-left: .5rem }

/* ── Featured Panel ── */
.mm-feat {
  width: 280px; flex-shrink: 0; background: var(--off);
  padding: 80px 2rem 3rem; overflow-y: auto; display: none;
}
.mm-feat.active { display: block }
.mm-feat-hd {
  font-size: 10px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--grey); margin-bottom: 1.5rem;
}
.mm-feat-item {
  margin-bottom: 2rem; padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}
.mm-feat-item:last-child { border-bottom: none }
.mm-feat-title {
  font-family: var(--serif); font-size: .95rem; font-weight: 400;
  color: var(--navy); margin-bottom: .5rem; line-height: 1.4;
}
.mm-feat-desc { font-size: .78rem; line-height: 1.6; color: var(--grey); font-weight: 300 }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .mm-feat { display: none !important }
}
@media (max-width: 700px) {
  .mm-side { width: 100% }
  .nav-right { display: none }
}