/* Nav (#top). Prefix: nv- / .nv__ */

.nv {
  --nv-ink: var(--ink);
  --nv-ink-2: var(--g-700);
  --nv-hover: rgba(10, 10, 10, .05);
  --nv-active: rgba(10, 10, 10, .06);
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 200;
  height: var(--nav-h);
  color: var(--nv-ink);
  transition: color var(--t-base) var(--ease-out);
}

/* Two background layers, crossfaded with opacity only: frosted white, and plum for the Bonat zone.
   The blur lives on the layers (never on the header) so the fixed menu sheet is not trapped by it. */
.nv::before,
.nv::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out);
}
.nv::before {
  background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: inset 0 -1px 0 var(--line);
}
.nv::after {
  background: rgba(42, 16, 70, .9);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .1);
}
.nv.is-scrolled::before { opacity: 1; }

html.zone-plum .nv {
  --nv-ink: #fff;
  --nv-ink-2: rgba(255, 255, 255, .74);
  --nv-hover: rgba(255, 255, 255, .08);
  --nv-active: rgba(255, 255, 255, .12);
}
html.zone-plum .nv.is-scrolled::before { opacity: 0; }
html.zone-plum .nv.is-scrolled::after { opacity: 1; }

.nv__bar {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-6);
}

/* Brand */
.nv__brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 0;
  margin-inline-start: -2px;
  border-radius: var(--r-sm);
  color: var(--nv-ink);
}
[dir="rtl"] .nv__brand { padding: 6px 0 6px 8px; }
.nv__mark { width: 30px; height: 30px; flex: none; }
.nv__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -.02em;
  line-height: 1;
  transform: translateY(.04em);
}
:lang(ar) .nv__word { letter-spacing: 0; font-size: 1.4375rem; transform: translateY(-.02em); }

/* Links */
.nv__links {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nv__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--nv-ink-2);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.nv__link:hover { color: var(--nv-ink); background: var(--nv-hover); }
.nv__link.is-active { color: var(--nv-ink); background: var(--nv-active); }
:lang(ar) .nv__link { font-size: 1rem; }

/* Actions */
.nv__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.nv__lang {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 14px 7px 12px;
  border-radius: var(--r-pill);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--nv-ink-2);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
[dir="rtl"] .nv__lang { padding: 7px 12px 7px 14px; }
.nv__lang:hover { color: var(--nv-ink); background: var(--nv-hover); }
.nv__lang .nv__lang-ico { width: 17px; height: 17px; opacity: .8; }
.nv__lang [lang="ar"] { font-family: "IBM Plex Sans Arabic", var(--font-ui); font-weight: 500; font-size: 1rem; line-height: 1; transform: translateY(-.04em); }
.nv__lang [lang="en"] { font-family: "Inter", var(--font-ui); }

.nv__cta { box-shadow: none; }
.nv.is-scrolled .nv__cta { box-shadow: 0 4px 10px -4px rgba(51, 92, 255, .45); }
html.zone-plum .nv__cta { --btn-bg: var(--b-lilac); --btn-ink: var(--b-plum); box-shadow: none; }
html.zone-plum .nv__cta:hover { --btn-bg: #fff; background: #fff; }
html.zone-plum .nv :focus-visible { outline-color: var(--b-lilac); }

/* Menu button (mobile only) */
.nv__menu {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-inline-end: -8px;
  border-radius: var(--r-pill);
  color: var(--nv-ink);
}
.nv__menu:hover { background: var(--nv-hover); }
.nv__burger { position: relative; display: block; width: 20px; height: 10px; }
.nv__burger i {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.nv__burger i:first-child { top: 0; }
.nv__burger i:last-child { bottom: 0; inset-inline-start: 6px; }

/* ---------- Sheet (mobile menu) ---------- */
.nv__sheet {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: var(--page-bg);
  color: var(--page-ink);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nv__sheet[hidden] { display: none; }
.nv__sheet-bar {
  flex: none;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nv__sheet .nv__brand { color: var(--page-ink); }
.nv__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-inline-end: -8px;
  border-radius: var(--r-pill);
}
.nv__close:hover { background: rgba(127, 127, 127, .12); }
.nv__close .ico { width: 22px; height: 22px; }

.nv__sheet-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-10);
  padding-block: clamp(24px, 6vh, 56px) max(28px, env(safe-area-inset-bottom));
}
.nv__sheet-links { display: grid; }
.nv__sheet-links li { border-block-end: 1px solid var(--line); }
html.zone-plum .nv__sheet-links li { border-color: rgba(255, 255, 255, .12); }
.nv__sheet-link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-block: 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.875rem, 1.4rem + 2.2vw, 2.5rem);
  letter-spacing: -.022em;
  line-height: 1.1;
}
:lang(ar) .nv__sheet-link { letter-spacing: 0; line-height: 1.35; padding-block: 14px; }
.nv__idx {
  min-width: 2ch;
  font-family: var(--font-ui);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--page-ink-3);
  transform: translateY(-.4em);
}
.nv__sheet-link.is-active { color: var(--accent); }
.nv__sheet-link.is-active .nv__idx { color: var(--accent); }

.nv__sheet-foot { display: grid; gap: var(--s-3); }
.nv__lang--sheet {
  justify-self: start;
  min-height: 44px;
  padding-inline: 0;
  color: var(--page-ink-2);
}
.nv__lang--sheet:hover { background: none; color: var(--page-ink); }
.nv__sheet-cta { width: 100%; min-height: 54px; font-size: 1.0625rem; }
html.zone-plum .nv__sheet-cta { --btn-bg: var(--b-lilac); --btn-ink: var(--b-plum); box-shadow: none; }

html.nv-locked, html.nv-locked body { overflow: hidden; }

/* ---------- Breakpoints ---------- */
@media (max-width: 1023px) {
  .nv__bar { grid-template-columns: 1fr auto; }
  .nv__links { display: none; }
  .nv__actions > .nv__lang { display: none; }
  .nv__menu { display: grid; }
}
@media (max-width: 479px) {
  .nv__cta { display: none; }
}
@media (min-width: 1024px) {
  .nv__sheet { display: none !important; }
}

.nv__brand .zl { --zl-h: 32px; }