/* ==========================================================================
   NOVA Smart Homes — brand theme
   Loaded ONLY by pages that opt in with `class="nova"` on <body>, after
   style.css. Currently that is the homepage in both languages.

   The design system is entirely token-driven, so re-mapping the custom
   properties under one class re-themes every component at once — cards,
   bands, buttons, the hero, the footer — with no per-component rewriting.

   Palette sampled directly from assets/img/brand/New Logo.png:

     navy ink      #000817  #011528  #021a34  #06233a
     blue rimlight #013c73  #02437b  #014c93          hue 209°
     gold sunburst #fb8401 → #fdd402                  hue  39°

   Navy dominates, the logo's blue carries every interactive accent, and the
   gold is held back to three small moments so it reads as warmth rather than
   as an orange site.
   ========================================================================== */

body.nova {
  /* ---- Blues: the logo's rim-light, opened up into a usable UI scale ----
     #014c93 is the brightest blue in the mark. Used raw it is too dark for a
     hover state to have anywhere to go, so --blue sits a step above it and
     --blue-dark lands near the sampled value. White on --blue measures 6.9:1,
     comfortably past AA and better than the palette it replaces. */
  --blue: #0e5ba6;
  --blue-bright: #4a9ae0;
  --blue-dark: #0a4179;
  --blue-ink: #0b3d73;

  /* ---- Navy: the logo's near-black ink, lifted just enough to read as
     blue rather than as grey under the site's own lighting ---- */
  --navy: #04101f;
  --navy-2: #0a1e38;
  --navy-3: #12304f;

  /* ---- Surfaces, cooled toward the mark ---- */
  --ink: #0b1c30;
  --body: #47586e;
  --muted: #77899f;
  --paper: #f2f6fc;
  --paper-2: #e3ecf8;
  --line: #d4e1f1;

  /* ---- Gold: the warm half of the identity, deliberately muted.
     The raw #fba401 is a hot orange; dropping saturation and lightness gives
     the same hue the quieter, more expensive feel the brand needs. ---- */
  --amber: #d9a441;
  --gold-soft: #e8b85c;
  --gold-line: rgba(217, 164, 65, .55);

  --shadow-blue: 0 12px 30px rgba(14, 91, 166, .30);
}

/* --------------------------------------------------------------------------
   Brand logo
   The NOVA lockup is far squarer than the wordmark it replaces (2.38 : 1
   against 3.0 : 1), so matching the old height would leave it visibly
   smaller. These sizes restore equivalent optical weight in the bar.
   -------------------------------------------------------------------------- */
body.nova .brand img { height: 38px; }
@media (min-width: 1024px) {
  body.nova .brand img { height: 48px; }
}
/* The footer carries the full three-tier lockup, Urdu tagline included, in
   its light-on-navy variant.

   The base rule sits the logo on a white plate with padding — a workaround
   from when the only asset was dark artwork that would have vanished on the
   navy band. There is now a proper light variant, so the plate comes off and
   the mark sits directly on the navy the way the identity intends. */
body.nova .footer-brand img {
  height: 80px;
  width: auto;
  background: none;
  padding: 0;
  border-radius: 0;
}

/* ==========================================================================
   Bilingual chrome
   The page body mirrors for Urdu, but the header does not. Navigation is a
   fixed set of English labels that people scan by position — Home, Services,
   Projects, About Us, Calculator, Blog, Contact — so reversing it in Urdu
   moves familiar targets for no reading benefit. Holding the whole bar LTR
   also keeps the logo, the actions and the language switcher in exactly the
   same place in both languages, which is the point: switching language must
   never move the control you just used.
   ========================================================================== */
body.nova.lang-ur .topbar .container,
body.nova.lang-ur .site-header .nav,
body.nova.lang-ur .mobile-nav { direction: ltr; }

/* Urdu strings inside that LTR bar still need to render right-to-left
   internally — only the ordering of the bar's own children is pinned. */
body.nova.lang-ur .topbar-left { direction: rtl; }

/* --------------------------------------------------------------------------
   English UI furniture on the Urdu page
   Under NOVA the labels, actions and product categories are English, so they
   must drop the Urdu build's Nastaliq face and RTL flow and go back to the
   Latin design system. style-ur.css sets those globally for the Urdu build,
   so each one is restated here at higher specificity.
   -------------------------------------------------------------------------- */
body.nova.lang-ur .btn,
body.nova.lang-ur .link-arrow,
body.nova.lang-ur .hero-eyebrow,
body.nova.lang-ur .kicker,
body.nova.lang-ur .site-footer h4,
body.nova.lang-ur .mnav-group > span,
body.nova.lang-ur .project-tag {
  direction: ltr;
  font-family: var(--display);
}
body.nova.lang-ur .btn {
  letter-spacing: -.01em;
  line-height: 1.2;
  padding: 14px 24px;
}
body.nova.lang-ur .btn-lg { padding: 16px 30px; }
body.nova.lang-ur .nav-actions .btn { padding: 11px 18px; font-size: 14px; }
body.nova.lang-ur .link-arrow { line-height: 1.4; padding-bottom: 0; }
body.nova.lang-ur .kicker {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  line-height: 1;
  padding-block: 0;
}
body.nova.lang-ur .hero-eyebrow { font-size: 12.5px; line-height: 1.2; }
body.nova.lang-ur .project-tag {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 11px;
  line-height: 1.2;
}
body.nova.lang-ur .site-footer h4 { letter-spacing: -.02em; line-height: 1.3; }

/* The section head keeps its English kicker left-aligned above an Urdu
   headline that still reads right-to-left. */
body.nova.lang-ur .sec-head .kicker { align-self: flex-end; }

/* "500+" is a Latin run; inside an RTL line the bidi algorithm moves the plus
   to the front and it reads "+500". Same for "10+". */
body.nova.lang-ur .stat b { direction: ltr; unicode-bidi: isolate; }

/* The drawer slides back in from the right, matching the LTR header. */
body.nova.lang-ur .mobile-nav { transform: translateX(100%); }
body.nova.lang-ur .mobile-nav.open { transform: none; }
body.nova.lang-ur .mobile-nav > a svg,
body.nova.lang-ur .mnav-group a svg { transform: none; }

/* --------------------------------------------------------------------------
   Language switcher — pinned to the extreme top-right
   Small, and identical in both languages so it never resizes or jumps.
   -------------------------------------------------------------------------- */
.lang-switch-top {
  padding: 2px;
  gap: 1px;
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .16);
  margin-left: 4px;
}
.lang-switch-top .ls-item {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  padding: 5px 8px;
  color: #a9c4e0;
}
/* The Urdu side is the two Latin letters "UR" here, not Nastaliq, so it must
   not pick up the Urdu build's font or metrics. */
body.lang-ur .lang-switch-top .ls-item,
body.lang-ur .lang-switch-top .ls-item[lang="ur"] {
  font-family: var(--display);
  font-size: 11px;
  line-height: 1;
  padding: 5px 8px;
  letter-spacing: .04em;
}
.lang-switch-top .ls-active { background: var(--blue); color: #fff; box-shadow: none; }
.lang-switch-top a.ls-item:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* The topbar collapses to a centred strip on phones; the switcher still has
   to sit hard against the right edge there. */
@media (max-width: 767px) {
  body.nova .topbar .container { justify-content: flex-end; gap: 12px; }
  body.nova .topbar-right { gap: 12px; }
}

/* --------------------------------------------------------------------------
   Gold — used in exactly three places
   -------------------------------------------------------------------------- */

/* 1. The section kicker's dot, echoing the sun in the mark. */
body.nova .kicker::before { background: var(--amber); }
body.nova .section-navy .kicker::before { background: var(--gold-soft); }

/* 2. The hero eyebrow's status dot. Green was a leftover from the old
      palette and has no place in this identity. */
body.nova .hero-eyebrow .dot {
  background: var(--gold-soft);
  box-shadow: 0 0 0 4px rgba(232, 184, 92, .20);
}

/* 3. The highlighted word in the hero headline. The logo's whole idea is a
      burst of light over a house — "Brighter Lives" / روشن زندگی picking up
      the sunburst's gold is the one place the warm tone should lead. */
body.nova .hero .hero-title .hl,
body.nova .hero-tagline .hl { color: var(--gold-soft); }

/* A hairline under the hero eyebrow, echoing the gold rules that flank the
   Urdu tagline in the logo. Subtle enough to register as craft, not colour. */
body.nova .hero-eyebrow {
  border-color: rgba(232, 184, 92, .28);
  background: rgba(74, 154, 224, .14);
}

/* --------------------------------------------------------------------------
   Off-brand leftovers from the previous palette
   -------------------------------------------------------------------------- */
/* Green ticks in the calculator promo become brand blue. Green survives only
   where it is semantic — the "Armed" status tile in the phone mockup. */
body.nova .lc-promo-list svg { color: var(--blue); }

/* The mockup's warm tile follows the muted gold rather than the old amber. */
body.nova .hp-ico.amber { color: var(--amber); }

/* --------------------------------------------------------------------------
   Depth
   The navy is darker than before, so the tinted band and the card borders
   need slightly more separation to avoid flattening into it.
   -------------------------------------------------------------------------- */
body.nova .section-navy {
  background: linear-gradient(180deg, var(--navy) 0%, #071729 55%, var(--navy) 100%);
}
body.nova .cta-band {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 55%, #1668b8 100%);
}
body.nova .site-footer { background: var(--navy); }