/* Canonical JebuK header, shared by every page except the homepage.

   The homepage keeps its own inline copy because its #nav is driven by the
   GSAP intro timeline (it starts at translateY(-90px), opacity 0 and is
   revealed as part of the loader sequence). Reproducing that here would hide
   the header on pages that have no intro to reveal it. scripts/sync-nav.js
   asserts the homepage markup still matches the canonical markup, so the two
   cannot drift apart silently.

   Everything below resolves from --n-* variables declared on #nav and #mmenu
   themselves, and never from the host page's tokens. That is deliberate: the
   pages this file lands on do not share a palette. The Cloud Function that
   renders /insights and the locality landings defines its own --gold
   (#c9a96e, not #C9A84C), its own --serif (Cormorant, not Source Serif 4) and
   --sans: Syne. Inheriting those would make the header a different colour and
   a different typeface on exactly the pages this file exists to unify.

   Loaded LAST in <head>, after each page's inline <style>, so that at equal
   specificity these rules win over the older per-page nav CSS. */

#nav, #mmenu, .rera-line {
  --n-gold: #C9A84C;
  --n-gold-hi: #EFD382;
  --n-gold-dim: rgba(201, 168, 76, .70);  /* .42 gave 2.31:1 on the panel background */
  --n-gold-faint: rgba(201, 168, 76, .14);
  --n-ink: #EDE9E0;
  --n-ink-dim: rgba(237, 233, 224, .55);
  --n-mono: 'Space Mono', ui-monospace, monospace;
  --n-serif: 'Source Serif 4', Georgia, serif;
  --n-wordmark: 'Cormorant Garamond', Georgia, serif;
  --n-eo: cubic-bezier(.23, 1, .32, 1);
  --n-eio: cubic-bezier(.77, 0, .175, 1);
}

#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: 78px;
  padding: 0 clamp(20px, 5vw, 72px);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid transparent;
  transition: background .45s, border-color .45s, backdrop-filter .45s;
}
#nav.scrolled {
  background: rgba(5, 6, 10, .7);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom-color: var(--n-gold-faint);
}

/* ---- logo ---- */
#nav .nav-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
#nav .nav-logo img { height: 38px; width: auto; display: block; }
#nav.scrolled .nav-logo img { height: 34px; }
#nav .nav-logo-text {
  font-family: var(--n-wordmark);
  font-weight: 500; font-size: 23px; letter-spacing: .15em;
  color: var(--n-ink); line-height: 1;
}
#nav .nav-logo-text .k { color: var(--n-gold); }

/* ---- links ---- */
#nav .nav-links {
  display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px);
  list-style: none; margin: 0; padding: 0;
}
#nav .nav-link {
  position: relative;
  font-family: var(--n-mono);
  font-size: 12px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase;
  color: var(--n-ink-dim);
  transition: color .25s; padding: 6px 0; text-decoration: none;
}
#nav .nav-link::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--n-gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform .24s var(--n-eo);
}
#nav .nav-link.active { color: var(--n-gold); }
#nav .nav-link.active::after { transform: scaleX(1); transform-origin: left; }

/* ---- call to action ---- */
#nav .nav-cta {
  font-family: var(--n-mono);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: #100C04; background: var(--n-gold);
  padding: 12px 24px; font-weight: 700; text-decoration: none;
  transition: background .2s, transform 130ms var(--n-eo);
}
#nav .nav-cta:active { transform: scale(.97); }

/* Touch devices fire :hover on tap and leave it stuck, so gate the hover
   states rather than the whole rule. */
@media (hover: hover) and (pointer: fine) {
  #nav .nav-link:hover { color: var(--n-gold); }
  #nav .nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
  #nav .nav-cta:hover { background: var(--n-gold-hi); }
}

/* ---- hamburger ---- */
#nav .hamburger {
  display: none; width: 46px; height: 46px;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
#nav .hamburger span {
  display: block; width: 26px; height: 1px;
  background: var(--n-ink);
  transition: transform .3s var(--n-eo), opacity .3s;
}
body.menu-open #nav .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open #nav .hamburger span:nth-child(2) { opacity: 0; }
body.menu-open #nav .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- mobile panel ---- */
#mmenu {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 450;
  background: rgba(4, 5, 9, .97);
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 36px;
  -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0);
  transition: clip-path .55s var(--n-eio);
}
body.menu-open #mmenu { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }
#mmenu a {
  font-family: var(--n-serif);
  font-size: clamp(34px, 9vw, 52px); font-weight: 400;
  padding: 14px 0; border-bottom: 1px solid rgba(201, 168, 76, .1);
  color: var(--n-ink); text-decoration: none;
  display: flex; justify-content: space-between; align-items: center;
}
#mmenu a em {
  font-family: var(--n-mono); font-style: normal;
  font-size: 12px; letter-spacing: .18em;
  color: var(--n-gold-dim);
}
#mmenu .m-cta {
  margin-top: 34px; border: none;
  background: var(--n-gold); color: #100C04;
  font-family: var(--n-mono);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700; justify-content: center; padding: 20px;
}

@media (max-width: 900px) {
  #nav .nav-links { display: none; }
  #nav .hamburger { display: flex; }
  #nav .nav-logo img { height: 34px; }
  #nav .nav-logo-text { font-size: 21px; }
}

/* ---- cream marketplace theme ----
   The locality and listing pages (body.property-market) are a light theme on
   a cream ground. Because the rules above are id-scoped (#nav .nav-link is
   0,1,1,0) they outrank that stylesheet's own 0,0,2,0 nav rules, so the dark
   theme's near-white ink was landing on a near-white bar: links measured
   1.11:1 and the wordmark 1.19:1, i.e. invisible.

   Only the variables change, plus the few places gold is used as text rather
   than as a background. Gold stays the accent, but a darker one: #bd8f3f is
   2.88:1 on cream and cannot carry text, so text-gold is #8a6a2e (4.94) while
   the CTA keeps the brighter gold as a background with dark ink on top. */
body.property-market #nav,
body.property-market #mmenu,
body.property-market .rera-line {
  --n-ink: #16261f;              /* --pm-heading, 15.5:1 on the bar */
  --n-ink-dim: #606d65;          /* --pm-muted,    5.3:1 */
  --n-gold: #8a6a2e;             /* text-safe gold, 4.9:1 */
  --n-gold-hi: #7d5f29;
  --n-gold-dim: #606d65;         /* the 01/02 numerals, 5.1:1 on the panel */
  --n-gold-faint: #e5d8c4;       /* --pm-line */
}
body.property-market #nav.scrolled { background: rgba(255, 253, 248, .94); }
/* The cream stylesheet gives the CTA its own green with color:#fff!important.
   That !important wins over anything here, while the base #nav .nav-cta
   background (id-scoped) outranked their green, so the two rules combined
   into white on gold: 2.93:1. Defer to their pairing instead, which is 7.41:1. */
body.property-market #nav .nav-cta,
body.property-market #mmenu .m-cta { background: #1f604c; color: #fff; }
body.property-market #mmenu { background: rgba(251, 247, 239, .98); }
body.property-market #mmenu a { border-bottom-color: rgba(22, 38, 31, .12); }
@media (hover: hover) and (pointer: fine) {
  body.property-market #nav .nav-cta:hover { background: #17493a; }
}

/* Statutory MahaRERA agent line. Larger than the 11px footer links and
   copyright, per the 08 Apr 2025 order on registration-number prominence. */
.rera-line{font-family:var(--n-mono);font-size:13px;line-height:1.9;letter-spacing:.12em;
  text-transform:uppercase;color:var(--n-ink);width:100%;}
.rera-line strong{color:var(--n-gold);font-weight:700;letter-spacing:.16em;}
.rera-line a{color:var(--n-ink-dim);text-decoration:underline;text-underline-offset:3px;}

/* The cream FOOTER (#f4ead8) is darker than the cream nav bar, where the
   theme gold #8a6a2e measures 4.94:1. Against the footer it is only 4.21:1,
   so the statutory number gets a slightly darker gold of its own: 4.57:1. */
body.property-market .rera-line strong{color:#83652c;}
.rera-line .sep{color:var(--n-ink-dim);margin:0 2px;}
