/* =============================================================
   Navdeep Sandhu – REALTOR® | Glassmorphism "Dynamic Light"
   Astra Free Theme Override  |  Surrey & Langley, BC
   Design System: Cinzel (headings) + Josefin Sans (body)
   Palette: Deep Charcoal #1A1A1B | Champagne Gold #C5A059
   ============================================================= */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Josefin+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');

/* ── Design Tokens ── */
:root {
  /* Brand */
  --ns-charcoal:       #1A1A1B;
  --ns-charcoal-80:    rgba(26,26,27,0.80);
  --ns-gold:           #C5A059;
  --ns-gold-light:     #D4B878;
  --ns-gold-dark:      #A07830;
  --ns-gold-10:        rgba(197,160,89,0.10);
  --ns-gold-25:        rgba(197,160,89,0.25);

  /* Glass surface */
  --ns-glass-bg:       rgba(255,255,255,0.85);
  --ns-glass-border:   rgba(197,160,89,0.22);
  --ns-blur:           blur(10px);

  /* Page */
  --ns-page-bg:        #F5F1EB;

  /* Elevation shadows */
  --ns-shadow-sm:      0 2px 12px rgba(26,26,27,0.07);
  --ns-shadow-md:      0 8px 32px rgba(26,26,27,0.12);
  --ns-shadow-lg:      0 20px 60px rgba(26,26,27,0.15);
  --ns-shadow-gold:    0 4px 24px rgba(197,160,89,0.22);

  /* Radius */
  --ns-r-sm:           8px;
  --ns-r-md:           14px;
  --ns-r-lg:           20px;
  --ns-r-pill:         50px;

  /* Typography */
  --ns-font-head:      'Cinzel', 'Georgia', serif;
  --ns-font-body:      'Josefin Sans', 'Helvetica Neue', sans-serif;

  /* Motion */
  --ns-ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --ns-transition:     all 0.28s var(--ns-ease);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--ns-font-body);
  color: var(--ns-charcoal);
  background-color: var(--ns-page-bg);
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(197,160,89,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(197,160,89,0.04) 0%, transparent 50%);
  background-attachment: fixed;
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Selection ── */
::selection { background: var(--ns-gold-25); color: var(--ns-charcoal); }

/* ── Scrollbar ── */
::-webkit-scrollbar              { width: 5px; }
::-webkit-scrollbar-track        { background: var(--ns-page-bg); }
::-webkit-scrollbar-thumb        { background: var(--ns-gold); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: var(--ns-gold-dark); }

/* =============================================================
   TYPOGRAPHY
   ============================================================= */
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title,
.ast-page-title-wrap .entry-title {
  font-family: var(--ns-font-head);
  color: var(--ns-charcoal);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: 0.03em;
}

h1, .entry-title  { font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 400; }
h2                { font-size: clamp(1.5rem, 3.5vw, 2.6rem); }
h3                { font-size: clamp(1.1rem, 2.5vw, 1.8rem); }
h4                { font-size: 1.25rem; }

.gold-accent      { color: var(--ns-gold); font-style: italic; }
.eyebrow          {
  font-family: var(--ns-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ns-gold);
  display: block;
  margin-bottom: 0.75rem;
}

a {
  color: var(--ns-gold-dark);
  text-decoration: none;
  transition: color 0.2s var(--ns-ease);
}
a:hover { color: var(--ns-gold); }

/* =============================================================
   HEADER / NAVIGATION
   ============================================================= */
.site-header,
#masthead,
.ast-site-header-wrap {
  background: rgba(255,255,255,0.90) !important;
  backdrop-filter: var(--ns-blur);
  -webkit-backdrop-filter: var(--ns-blur);
  border-bottom: 1px solid var(--ns-glass-border);
  box-shadow: 0 1px 20px rgba(26,26,27,0.06);
  position: sticky !important;
  top: 0;
  z-index: 1000;
  transition: var(--ns-transition);
}

/* Site title */
.ast-site-identity .site-title a,
.ast-site-identity .site-title {
  font-family: var(--ns-font-head);
  font-weight: 600;
  font-size: 1.45rem;
  color: var(--ns-charcoal) !important;
  letter-spacing: 0.05em;
}

/* Nav items */
.main-navigation a,
.ast-primary-menu > li > a {
  font-family: var(--ns-font-body);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ns-charcoal) !important;
  padding: 0.5rem 0.9rem;
  transition: var(--ns-transition);
  position: relative;
}

.main-navigation a::after,
.ast-primary-menu > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1.5px;
  background: var(--ns-gold);
  transition: var(--ns-transition);
  transform: translateX(-50%);
}

.main-navigation a:hover::after,
.ast-primary-menu > li > a:hover::after,
.ast-primary-menu > li.current-menu-item > a::after,
.ast-primary-menu > li.current-menu-ancestor > a::after { width: 70%; }

.main-navigation a:hover,
.ast-primary-menu > li > a:hover,
.ast-primary-menu > li.current-menu-item > a {
  color: var(--ns-gold) !important;
}

/* Dropdown */
.ast-primary-menu .sub-menu {
  background: rgba(255,255,255,0.96);
  backdrop-filter: var(--ns-blur);
  border: 1px solid var(--ns-glass-border);
  border-radius: var(--ns-r-md);
  box-shadow: var(--ns-shadow-lg);
  padding: 0.5rem 0;
  min-width: 200px;
}

.ast-primary-menu .sub-menu li a {
  font-size: 0.75rem;
  padding: 0.55rem 1.2rem;
}

/* CTA button in nav */
.ast-header-custom-widget .ns-btn,
.header-widget-area .ns-btn {
  padding: 0.55rem 1.4rem;
  font-size: 0.72rem;
}

/* =============================================================
   GLASSMORPHISM CARD MIXIN
   ============================================================= */
.glass,
.glass-card {
  background: var(--ns-glass-bg);
  backdrop-filter: var(--ns-blur);
  -webkit-backdrop-filter: var(--ns-blur);
  border: 1px solid var(--ns-glass-border);
  border-radius: var(--ns-r-lg);
  box-shadow: var(--ns-shadow-md);
}

/* =============================================================
   HERO SECTION
   ============================================================= */
.ast-hero-section,
.wp-block-cover.hero-full,
section.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Hero text panel */
.hero-glass-panel {
  background: var(--ns-glass-bg);
  backdrop-filter: var(--ns-blur);
  -webkit-backdrop-filter: var(--ns-blur);
  border: 1px solid var(--ns-glass-border);
  border-radius: var(--ns-r-lg);
  box-shadow: var(--ns-shadow-lg);
  padding: 3rem 3.5rem;
  max-width: 600px;
  position: relative;
  z-index: 2;
}

.hero-glass-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--ns-gold), transparent);
  border-radius: var(--ns-r-lg) var(--ns-r-lg) 0 0;
}

/* =============================================================
   BUTTONS
   ============================================================= */
.wp-block-button__link,
.ast-button,
button[type="submit"],
input[type="submit"],
.wpcf7-submit,
.ns-btn,
a.ns-btn {
  background: linear-gradient(135deg, var(--ns-gold) 0%, var(--ns-gold-dark) 100%);
  color: #FFFFFF !important;
  border: none;
  border-radius: var(--ns-r-pill);
  padding: 0.85rem 2.2rem;
  font-family: var(--ns-font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--ns-transition);
  box-shadow: var(--ns-shadow-gold);
  text-decoration: none;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.wp-block-button__link::after,
.ns-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background 0.2s var(--ns-ease);
}

.wp-block-button__link:hover,
.ns-btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(197,160,89,0.42);
  color: #FFFFFF !important;
}

.ns-btn-ghost {
  background: transparent;
  border: 1.5px solid var(--ns-gold);
  color: var(--ns-gold) !important;
  border-radius: var(--ns-r-pill);
  padding: 0.8rem 2rem;
  font-family: var(--ns-font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--ns-transition);
  text-decoration: none;
  display: inline-block;
}

.ns-btn-ghost:hover {
  background: var(--ns-gold);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: var(--ns-shadow-gold);
}

/* =============================================================
   PROPERTY / LISTING CARDS
   ============================================================= */
.property-card,
.ns-listing-card,
.ast-container .hentry {
  background: var(--ns-glass-bg);
  backdrop-filter: var(--ns-blur);
  -webkit-backdrop-filter: var(--ns-blur);
  border: 1px solid var(--ns-glass-border);
  border-radius: var(--ns-r-lg);
  box-shadow: var(--ns-shadow-md);
  overflow: hidden;
  transition: transform 0.28s var(--ns-ease),
              box-shadow 0.28s var(--ns-ease),
              border-color 0.28s var(--ns-ease);
}

.property-card:hover,
.ns-listing-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ns-shadow-lg), var(--ns-shadow-gold);
  border-color: var(--ns-gold);
}

.property-card .price-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: linear-gradient(135deg, var(--ns-gold), var(--ns-gold-dark));
  color: #fff;
  font-family: var(--ns-font-head);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.3rem 0.85rem;
  border-radius: var(--ns-r-sm);
  letter-spacing: 0.04em;
}

.property-card .card-body { padding: 1.5rem; }

.property-card .property-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #777;
  margin-top: 0.5rem;
}

/* =============================================================
   STATS BLOCKS
   ============================================================= */
.ns-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.25rem;
}

.ns-stat {
  text-align: center;
  padding: 1.75rem 1rem;
  background: var(--ns-glass-bg);
  backdrop-filter: var(--ns-blur);
  -webkit-backdrop-filter: var(--ns-blur);
  border: 1px solid var(--ns-glass-border);
  border-radius: var(--ns-r-md);
  box-shadow: var(--ns-shadow-sm);
  transition: var(--ns-transition);
}

.ns-stat:hover {
  border-color: var(--ns-gold);
  box-shadow: var(--ns-shadow-md), var(--ns-shadow-gold);
}

.ns-stat-number {
  font-family: var(--ns-font-head);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
  color: var(--ns-gold);
  line-height: 1;
  display: block;
}

.ns-stat-label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #777;
  margin-top: 0.4rem;
  display: block;
}

/* =============================================================
   NEIGHBORHOOD CARDS
   ============================================================= */
.neighborhood-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.neighborhood-card {
  position: relative;
  border-radius: var(--ns-r-md);
  overflow: hidden;
  min-height: 220px;
  cursor: pointer;
  transition: transform 0.28s var(--ns-ease), box-shadow 0.28s var(--ns-ease);
  background: var(--ns-charcoal);
}

.neighborhood-card:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: var(--ns-shadow-lg);
}

.neighborhood-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition: transform 0.6s var(--ns-ease);
}

.neighborhood-card:hover img { transform: scale(1.06); }

.neighborhood-card .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,26,27,0.82) 0%, rgba(26,26,27,0.1) 60%);
}

.neighborhood-card .neighborhood-label {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 2;
}

.neighborhood-card .neighborhood-label h3 {
  font-family: var(--ns-font-head);
  font-size: 1.2rem;
  color: #fff;
  margin: 0;
  font-weight: 400;
}

.neighborhood-card .neighborhood-label small {
  font-family: var(--ns-font-body);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ns-gold-light);
  margin-top: 0.2rem;
  display: block;
}

/* =============================================================
   TESTIMONIALS
   ============================================================= */
.testimonial-glass {
  background: var(--ns-glass-bg);
  backdrop-filter: var(--ns-blur);
  -webkit-backdrop-filter: var(--ns-blur);
  border: 1px solid var(--ns-glass-border);
  border-left: 3px solid var(--ns-gold);
  border-radius: 0 var(--ns-r-md) var(--ns-r-md) 0;
  padding: 1.75rem 2rem;
  box-shadow: var(--ns-shadow-sm);
}

.testimonial-glass blockquote {
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;
  margin: 0 0 1rem;
  border: none;
  padding: 0;
}

.testimonial-glass cite {
  display: block;
  font-style: normal;
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--ns-gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Star rating ── */
.star-rating { color: var(--ns-gold); letter-spacing: 2px; font-size: 0.85rem; }

/* =============================================================
   BLOG / POSTS
   ============================================================= */
.ast-article-post,
.type-post,
.ns-post-card {
  background: var(--ns-glass-bg);
  backdrop-filter: var(--ns-blur);
  -webkit-backdrop-filter: var(--ns-blur);
  border: 1px solid var(--ns-glass-border);
  border-radius: var(--ns-r-lg);
  box-shadow: var(--ns-shadow-md);
  overflow: hidden;
  transition: var(--ns-transition);
  margin-bottom: 2rem;
}

.ast-article-post:hover,
.ns-post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ns-shadow-lg);
  border-color: var(--ns-gold);
}

.entry-header .entry-title a {
  font-family: var(--ns-font-head);
  color: var(--ns-charcoal);
  text-decoration: none;
  transition: color 0.2s var(--ns-ease);
}

.entry-header .entry-title a:hover { color: var(--ns-gold); }

.ast-blog-single-element.category a,
.cat-links a {
  background: linear-gradient(135deg, var(--ns-gold), var(--ns-gold-dark));
  color: #fff !important;
  padding: 0.2rem 0.75rem;
  border-radius: 20px;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
}

.entry-meta { font-size: 0.78rem; color: #999; letter-spacing: 0.04em; }

/* =============================================================
   CONTACT FORM
   ============================================================= */
.contact-glass,
.wpcf7 {
  background: var(--ns-glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--ns-glass-border);
  border-radius: var(--ns-r-lg);
  box-shadow: var(--ns-shadow-md);
  padding: 2.5rem;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select,
.contact-glass input,
.contact-glass textarea,
.contact-glass select {
  width: 100%;
  background: rgba(255,255,255,0.65);
  border: 1.5px solid rgba(197,160,89,0.28);
  border-radius: var(--ns-r-sm);
  padding: 0.85rem 1rem;
  font-family: var(--ns-font-body);
  font-size: 0.9rem;
  color: var(--ns-charcoal);
  transition: var(--ns-transition);
  outline: none;
  display: block;
  margin-bottom: 1rem;
  min-height: 44px; /* touch target */
}

.wpcf7-form input:focus,
.contact-glass input:focus,
.contact-glass textarea:focus {
  border-color: var(--ns-gold);
  box-shadow: 0 0 0 3px rgba(197,160,89,0.14);
  background: rgba(255,255,255,0.95);
}

.wpcf7-form label,
.contact-glass label {
  font-family: var(--ns-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ns-charcoal);
  display: block;
  margin-bottom: 0.3rem;
}

/* =============================================================
   GOLD DIVIDER
   ============================================================= */
.gold-divider, hr.gold {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--ns-gold) 30%, var(--ns-gold) 70%, transparent 100%);
  margin: 2.5rem 0;
  opacity: 0.5;
}

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer, #colophon {
  background: var(--ns-charcoal) !important;
  color: rgba(255,255,255,0.72);
  border-top: 2px solid var(--ns-gold);
  font-size: 0.85rem;
}

.site-footer a, #colophon a {
  color: var(--ns-gold-light) !important;
  transition: color 0.2s var(--ns-ease);
}

.site-footer a:hover, #colophon a:hover { color: var(--ns-gold) !important; }

.footer-license {
  display: inline-block;
  border: 1px solid rgba(197,160,89,0.35);
  border-radius: var(--ns-r-sm);
  padding: 0.2rem 0.65rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ns-gold-light);
}

.footer-heading {
  font-family: var(--ns-font-head);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  margin-bottom: 1rem;
}

/* =============================================================
   UTILITY CLASSES
   ============================================================= */
.text-gold         { color: var(--ns-gold); }
.text-charcoal     { color: var(--ns-charcoal); }
.text-center       { text-align: center; }
.font-serif        { font-family: var(--ns-font-head); }
.font-sans         { font-family: var(--ns-font-body); }
.uppercase         { text-transform: uppercase; letter-spacing: 0.1em; }
.mt-auto           { margin-top: auto; }
.w-full            { width: 100%; }

/* =============================================================
   ACCESSIBILITY
   ============================================================= */
:focus-visible {
  outline: 2px solid var(--ns-gold);
  outline-offset: 3px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1024px) {
  .hero-glass-panel { padding: 2.5rem 2.5rem; }
}

@media (max-width: 768px) {
  :root { --ns-blur: blur(8px); }
  .hero-glass-panel         { padding: 2rem 1.5rem; }
  .contact-glass            { padding: 1.5rem; }
  .neighborhood-grid        { grid-template-columns: 1fr 1fr; }
  .ns-stat-grid             { grid-template-columns: 1fr 1fr; }
  h1, .entry-title          { font-size: clamp(1.8rem, 8vw, 2.8rem); }
}

@media (max-width: 480px) {
  .neighborhood-grid  { grid-template-columns: 1fr; }
  .ns-stat-grid       { grid-template-columns: 1fr 1fr; }
  .hero-glass-panel   { margin: 1rem; }
}

/* =============================================================
   ASTRA OVERRIDES — remove default shadows that conflict
   ============================================================= */
.ast-container               { max-width: 1200px; }
.ast-page-builder-template   { padding: 0; }
.site-content-above-header   { display: none; }
.ast-breadcrumbs-wrap        { background: rgba(255,255,255,0.6); backdrop-filter: blur(6px); }

/* Astra widget area glass */
.widget, .wp-block-widget-group {
  background: var(--ns-glass-bg);
  backdrop-filter: var(--ns-blur);
  border: 1px solid var(--ns-glass-border);
  border-radius: var(--ns-r-md);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--ns-shadow-sm);
}

.widget-title, .wp-block-heading {
  font-family: var(--ns-font-head);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ns-gold);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ns-glass-border);
  margin-bottom: 1rem;
}