/*
  Brand Overrides — Mountain View Developments
  Override lpds design tokens here per developer.
  This file is the ONLY place to change brand colors/fonts.
  landing-premium.css must be loaded BEFORE this file.
*/

/* ============================================================
   Z-INDEX — single source of truth (:root variables)
   Lower number = further back. Popups < floating dropdowns.
   Toast MUST stay below modals so it never covers forms.
   ============================================================ */
:root {
  --mv-z-scarcity: 990;
  --mv-z-bottom-cta: 992;
  --mv-z-sticky-bar: 993;
  --mv-z-float-wa: 994;
  --mv-z-toast: 997;
  --mv-z-header-sticky: 1000;
  --mv-z-scroll-progress: 10010;
  /* Modals — stacked by purpose (lead last = on top) */
  --mv-z-popup-base: 10020;
  --mv-z-popup-exit: 10022;
  --mv-z-popup-media: 10026;
  --mv-z-popup-contact: 10030;
  --mv-z-popup-lead: 10034;
  /* Phone UI above any modal */
  --mv-z-iti-dropdown: 2147483000;
  --mv-z-country-dropdown: 2147483600;
}

/* Page chrome (fixed) */
.lpds-scarcity-banner { z-index: var(--mv-z-scarcity) !important; }
.lpds-bottom-cta { z-index: var(--mv-z-bottom-cta) !important; }
.lpds-sticky-bar { z-index: var(--mv-z-sticky-bar) !important; }
.lpds-float-wa { z-index: var(--mv-z-float-wa) !important; }

/* Social proof toast — above bars, below header & modals */
#lpds-toast.lpds-social-proof-toast,
.lpds-social-proof-toast { z-index: var(--mv-z-toast) !important; }

/* Preview / site header */
.lpds-preview-header { z-index: var(--mv-z-header-sticky) !important; }
/* Project page: force developer name in header to white */
body.single-mv_project .lpds-preview-header__brand,
body.single-mv_project .lpds-preview-header__brand:visited,
body.single-mv_project .lpds-preview-header__brand:hover,
body.single-mv_project .lpds-preview-header__brand:focus {
  color: #fff !important;
}

/* Scroll progress bar — below modals, above page chrome */
.lpds-scroll-progress { z-index: var(--mv-z-scroll-progress) !important; }

/* Default modal layer (footer generic exit popup, etc.) */
.lpds-popup-overlay { z-index: var(--mv-z-popup-base) !important; }

/* Footer exit intent — below project-page modals */
#lpds-exit-overlay { z-index: var(--mv-z-popup-exit) !important; }

/* Project single — order matters when multiple exist in DOM */
#exitIntentPopup { z-index: var(--mv-z-popup-exit) !important; }
#projectPopup,
#locationImagePopup { z-index: var(--mv-z-popup-media) !important; }
#contactGatePopup { z-index: var(--mv-z-popup-contact) !important; }
#leadFormPopup { z-index: var(--mv-z-popup-lead) !important; }

/* intl-tel-input + custom country list — always above modals */
.iti--container,
.iti__dropdown-content,
.iti__dropdown-container { z-index: var(--mv-z-iti-dropdown) !important; }
.country-dropdown { z-index: var(--mv-z-country-dropdown) !important; }

.lpds-root {
  /* ---- Brand Colors — Mountain View ---- */
  --lpds-color-navy:         #1A365D;
  --lpds-color-navy-soft:    #2A4A7F;
  --lpds-color-accent:       #E67E22;
  --lpds-color-accent-strong:#D35400;

  /* ---- Fonts ---- */
  --lpds-font-display: 'Tajawal', 'Cairo', system-ui, sans-serif;
  --lpds-font-body:    'Tajawal', 'Cairo', system-ui, sans-serif;
}

/* Apply lpds-root to body automatically (WordPress adds classes to body) */
body {
  font-family: var(--lpds-font-body, 'Tajawal', 'Cairo', system-ui, sans-serif);
}

/* ================================================================
   Motion One — pre-animation state
   Elements start visible if JS fails (no-JS fallback).
   Motion.js sets opacity:0 before animating in.
================================================================ */

/* Prevent FOUC: glass cards handled by JS — keep them visible until JS runs */
.js-motion-ready .lpds-glass {
  opacity: 0;
}

/* Keep reveal elements visible until motion.js takes over */
.lpds-reveal {
  will-change: transform, opacity;
}

/* Lazy images fade in after hydration */
img[data-lazy-src],
img[data-lazy-srcset] {
  opacity: 0;
  transition: opacity 220ms ease-out;
}
img[data-mv-lazy-done="1"] {
  opacity: 1;
}

/* Portfolio cards keep a visual shell without loading actual media */
.lpds-project-square img[data-popup-preview-src] {
  background:
    radial-gradient(circle at 20% 18%, rgba(230, 126, 34, 0.32), transparent 42%),
    linear-gradient(140deg, #0F2442 0%, #1A365D 100%);
}

/* Reduce layout shift for hero elements */
.lpds-hero .lpds-h1,
.lpds-hero .lpds-lead,
.lpds-hero .lpds-eyebrow {
  will-change: transform, opacity;
}

/* ================================================================
   Hub Page — Projects Hub
================================================================ */
.lpds-hub-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--lpds-space-4xl, 4rem) + 24px) 0 var(--lpds-space-3xl, 3rem);
  background:
    radial-gradient(circle at top left, rgba(230, 126, 34, 0.28), transparent 34%),
    linear-gradient(145deg, #0F2442 0%, #1A365D 100%);
  color: #fff;
}
.lpds-hub-hero--has-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  z-index: 0;
}
.lpds-hub-hero--has-image .lpds-container {
  position: relative;
  z-index: 1;
}
.lpds-hub-hero .lpds-display,
.lpds-hub-hero .lpds-lead {
  color: #fff;
}
.lpds-hub-hero .lpds-lead {
  opacity: 0.86;
}
.lpds-region-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--lpds-space-sm, .75rem);
  margin-top: var(--lpds-space-xl, 2rem);
}
.lpds-region-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: var(--lpds-radius-pill, 999px);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: .875rem;
  font-weight: 800;
  text-decoration: none;
  transition: background 150ms ease-out, transform 150ms ease-out;
}
.lpds-region-pill:hover {
  background: rgba(230, 126, 34, 0.2);
  transform: translateY(-1px);
  color: #fff;
}
.lpds-hub-section + .lpds-hub-section {
  border-top: 1px solid var(--lpds-color-border, #e2e8f0);
}

/* ---- Hub: Region section background alternation ---- */
@media (max-width: 768px) {
  /* Keep hub page flush with viewport; it has no sticky bar */
  body.home,
  body.front-page,
  body.blog {
    padding-bottom: 0 !important;
  }
  /* Keep project page content clear of sticky action bar */
  body.single-mv_project {
    padding-bottom: 68px;
  }
  .lpds-hub-hero {
    padding: calc(var(--lpds-space-3xl, 3rem) + 28px) 0 var(--lpds-space-xl, 2rem);
  }
}