/* Mobile menu: a labelled pill button and a full-screen storm-navy sheet.
   nav.js plays the open/close sequence with GSAP; without it the sheet
   simply appears. The sheet sits under the sticky nav (z-index 100), so the
   button stays on top to close it. */
.nav__burger {
  display: none;
  align-items: center;
  gap: 10px;
  height: var(--nav-pill-h, 48px);
  padding: 0 16px 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--nav-pill-bg);
  box-shadow: var(--nav-pill-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: #fff;
  font: 600 0.875rem/1 'Vazirmatn', sans-serif;
  cursor: pointer;
  flex-shrink: 0;
  margin-inline-start: auto;
  transition: background 0.3s ease;
}

.nav__burger-lines {
  position: relative;
  display: block;
  width: 20px;
  height: 12px;
}

/* Two lines of unequal length, aligned to the reading start. */
.nav__burger-lines i {
  position: absolute;
  inset-inline-start: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1), width 0.45s cubic-bezier(0.65, 0, 0.35, 1), top 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.nav__burger-lines i:first-child { top: 0; width: 20px; }
.nav__burger-lines i:last-child { top: 10px; width: 12px; }

.nav__burger.is-open .nav__burger-lines i { top: 5px; width: 20px; }
.nav__burger.is-open .nav__burger-lines i:first-child { transform: rotate(45deg); }
.nav__burger.is-open .nav__burger-lines i:last-child { transform: rotate(-45deg); }

/* 1px lift puts the label's ink level with the lines beside it. */
.nav__burger-label { min-width: 2.25em; text-align: start; transform: translateY(-1px); }

.nav__burger:focus-visible { outline: 2px solid var(--brand-turquoise, #33b5b6); outline-offset: 3px; }

/* Sheet */
.mnav {
  --mnav-bg: #152d43;
  --mnav-ink: #eef7f7;
  --mnav-muted: rgb(199 225 228 / 72%);
  --mnav-line: rgb(199 225 228 / 22%);
  --mnav-accent: #33b5b6;
  --mnav-sun: #faa831;
  position: fixed;
  inset: 0;
  z-index: 99;
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--mnav-bg);
  color: var(--mnav-ink);
}

:root[data-theme="light"] .mnav { --mnav-bg: #2c4569; }

/* The site's dotted texture, faint. */
.mnav::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgb(199 225 228 / 14%) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
}

.mnav.is-open { visibility: visible; }

.mnav__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: calc(18px + var(--nav-pill-h, 48px) + 40px) 28px calc(28px + env(safe-area-inset-bottom));
}

.mnav__links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each item masks its link so it can rise into view. */
.mnav__links li { overflow: hidden; }

.mnav__links a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-block: 4px;
  color: var(--mnav-muted);
  font-family: 'Lalezar', 'Vazirmatn', sans-serif;
  font-size: clamp(1.75rem, 8.5vw, 2.375rem);
  line-height: 1.55;
  transition: color 0.2s ease;
}

.mnav__links a:hover,
.mnav__links a:active { color: var(--mnav-ink); }

/* Current page: full-strength text and the amber sun beside it. */
.mnav__links a.is-active { color: var(--mnav-ink); }

.mnav__links a.is-active::after {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 50%;
  background: var(--mnav-sun);
  box-shadow: 0 0 16px 4px rgb(250 168 49 / 35%);
}

.mnav__links a:focus-visible { outline: 2px solid var(--mnav-accent); outline-offset: 2px; border-radius: 6px; }

/* Horizon: turquoise run at the reading start, mist for the rest. */
.mnav__horizon {
  display: block;
  height: 3px;
  margin-block: 32px 24px;
  background: linear-gradient(to left, var(--mnav-accent) 0 72px, var(--mnav-line) 72px);
  transform-origin: right center;
}

.mnav__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.mnav__account {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 10px 20px;
  border-radius: 14px;
  background: var(--mnav-accent);
  color: #10263a;
  font-size: 0.9375rem;
  font-weight: 700;
}

.mnav__account--outline {
  border: 1px solid var(--mnav-line);
  background: transparent;
  color: var(--mnav-ink);
}

.mnav__theme {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--mnav-line);
  border-radius: 14px;
  background: transparent;
  color: var(--mnav-ink);
  cursor: pointer;
}

.mnav__theme svg { width: 20px; height: 20px; }
.mnav__theme .nav__theme-icon--sun { display: none; }
:root[data-theme="dark"] .mnav__theme .nav__theme-icon--sun { display: block; }
:root[data-theme="dark"] .mnav__theme .nav__theme-icon--moon { display: none; }

.mnav__account:focus-visible,
.mnav__theme:focus-visible { outline: 2px solid var(--mnav-ink); outline-offset: 3px; }

@media (max-width: 768px) {
  .nav__burger { display: inline-flex; }
  .mnav__panel { padding-inline: 24px; }

  /* Slimmer pills on phones: the desktop 48px logo/menu pair crowds a
     narrow screen. */
  .nav { --nav-pill-h: 40px; padding-top: 12px; }
  .nav__brand { padding-inline: 16px; font-size: 19px; }
  .nav__burger { gap: 8px; padding: 0 12px 0 14px; font-size: 0.8125rem; }
  .nav__burger-lines { transform: scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .nav__burger-lines i { transition: none; }
}