/* =========================================================
   NORTHSTONE GROUP — SITE-WIDE LIGHT THEME
   ---------------------------------------------------------
   The whole site is built on CSS custom properties (900+
   var(--...) usages), so redefining the root tokens here
   re-skins the large majority of the site automatically:
   body backgrounds, cards, panels, footer, forms, borders,
   buttons, popups, the mobile drawer, etc.

   Load this AFTER css/site.css on every page. It does two
   things:
     1. Flips the root color tokens from dark to light.
     2. Patches the handful of components that hardcoded a
        dark color instead of using a variable (nav glass on
        scroll, the old drawer submenu, the enquiry popup) —
        and pins "text sitting on top of a photo" elements
        back to white, since those still sit over a dark
        gradient overlay regardless of the page's theme.
   ========================================================= */

:root {
  --bg-deep:        #FBF6EF;
  --bg-surface:     #F3E9D9;
  --bg-elevated:    #FFFFFF;
  --bg-glass:       rgba(255, 250, 242, 0.82);

  --gold:           #A9714A;
  --gold-champagne: #8F5D3A;
  --gold-light:     #C08A54;
  --gold-dim:       #7A5636;
  --gold-glow:      rgba(169, 113, 74, 0.20);

  --cream:          #2B2019;
  --cream-soft:     #5A4A3D;
  --muted:          #7A6A5C;
  --muted-dim:      #AE9C8B;

  --hairline:       rgba(169, 113, 74, 0.30);
  --hairline-soft:  rgba(43, 32, 25, 0.10);
  --divider:        #E6D8C4;
}

body { background: linear-gradient(180deg, #FBF6EF 0%, #F6EDE0 100%) fixed; }

/* ---------- Global image-fallback placeholder ---------- */
img.img-fallback { object-fit: contain !important; background: #FBF6EF; padding: 6%; box-sizing: border-box; }

/* ---------- Full-bleed hero images sit behind overlaid text
   (page-hero-media / hero-bg / why-hero-media / invest-img / ph-hero-media).
   The placeholder graphic is a bordered card meant for content
   thumbnails — if a hero image fails to load, hide the card
   instead of stretching it behind the heading, and let the
   hero's own dark gradient overlay stand on a solid backdrop. ---------- */
.page-hero-media img.img-fallback,
.hero-bg img.img-fallback,
.why-hero-media img.img-fallback,
.invest-img img.img-fallback,
.ph-hero-media img.img-fallback {
  opacity: 0;
}
.page-hero-media, .hero-bg, .why-hero-media, .invest-img, .ph-hero-media {
  background: #2B2019;
}



/* ---------- Nav glass on scroll: light instead of dark ---------- */
.nav.scrolled {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom-color: var(--hairline-soft);
}
.nav.scrolled .nav-brand-name,
.nav.scrolled .nav-link { color: var(--cream); }

/* ---------- Old dark drawer submenu -> light ---------- */
.nav-submenu { background: rgba(255, 255, 255, 0.98) !important; box-shadow: 0 18px 50px rgba(20,18,10,0.14); }
.nav-submenu a { color: var(--cream); }

/* ---------- Enquiry popup: was a hardcoded dark gradient ---------- */
.popup {
  background: linear-gradient(160deg, #FFFFFF 0%, #FBF7F0 100%) !important;
}

/* ---------- Text that sits on a photo overlay stays light,
   regardless of the theme flip above ---------- */
.page-hero-title,
.page-hero-title .italic,
.hero-title,
.hero-eyebrow,
.hero-meta p,
.breadcrumb,
.breadcrumb a,
.city-block-media-num,
.project-card-content,
.project-card-title,
.project-card-loc,
.project-card-meta,
.listing-status,
.property-tile-content,
.property-tile-title,
.property-tile-desc,
.property-tile-meta,
.portfolio-hero h1,
.portfolio-hero .hero-eyebrow,
.portfolio-hero .hero-sub,
.portfolio-hero .hero-scroll,
.tile-title,
.tile-meta,
.tile-count,
.preloader,
.preloader-mark-name,
.preloader-mark-group,
.preloader-tagline {
  color: #F7F5F2;
}
.hero-meta p { color: rgba(247,245,242,0.82); }

/* ---------- Shared "page-hero" component (Villas/Apartments/Plots/Land/
   Properties/Testimonials/About/Contact) — same rounded, soft-fading
   treatment as the Homepage hero, so every page's top banner matches. ---------- */
.page-hero { overflow: visible; }
.page-hero-media {
  inset: 18px 18px 90px 18px;
  border-radius: 0 0 140px 140px;
  overflow: hidden;
}
.page-hero-media::after {
  background: linear-gradient(180deg, rgba(20,16,10,0.38) 0%, rgba(20,16,10,0.25) 45%, rgba(20,16,10,0.82) 100%) !important;
}
.page-hero-media::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 200px; z-index: 2;
  background: linear-gradient(180deg, transparent 0%, #FBF6EF 92%);
  pointer-events: none;
}
.page-hero-inner { padding-bottom: 40px; }

/* ---------- explore-properties.html portfolio hero — same treatment ---------- */
.portfolio-hero { overflow: visible !important; }
.hero-bg { inset: 18px 18px 90px 18px !important; border-radius: 0 0 140px 140px; overflow: hidden; }
.hero-bg::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 200px; z-index: 2;
  background: linear-gradient(180deg, transparent 0%, #FBF6EF 92%);
  pointer-events: none;
}

/* Preloader stays on the dark ground it was designed for */
.preloader { background: #0B0B0C; }