/* ============================================================
   VERA ESTATES — "Midnight Noir" alternate template (theme -1)
   Deep charcoal-navy + champagne gold, geometric grotesk type.
   Loaded AFTER styles.css on *-1 pages; overrides the ivory
   editorial system with a dark, cinematic one.

   NOTE: the *-1 pages ALSO swap the Tailwind palette (ink is now
   near-white text, ivory is now the dark background), so utilities
   like .text-ink / .bg-ivory are already inverted. This sheet pins
   everything that must stay visually dark or light regardless.
   ============================================================ */

/* ---------- Palette ---------- */
.theme-noir {
  --ivory: #0d1117;        /* dark background */
  --ivory-2: #0f141c;
  --paper: #0d1117;
  --ink: #f0f2f5;          /* near-white text */
  --ink-2: #e6c07a;
  --accent: #e6c07a;       /* champagne gold */
  --gold: #e6c07a;
  --line: rgba(230, 192, 122, 0.28);
  --line-soft: rgba(255, 255, 255, 0.09);
  --line-light: rgba(230, 192, 122, 0.5);
}

/* ---------- Base ---------- */
.theme-noir body,
body.theme-noir {
  background: #0d1117;
  color: #f0f2f5;
}
.theme-noir ::selection { background: #e6c07a; color: #0d1117; }
.theme-noir ::-webkit-scrollbar-track { background: #0d1117; }
.theme-noir ::-webkit-scrollbar-thumb { background: #3a4250; }

/* ---------- Typography ---------- */
.theme-noir h1,
.theme-noir h2,
.theme-noir h3,
.theme-noir h4,
.theme-noir .font-serif {
  font-family: "Space Grotesk", "Archivo", system-ui, sans-serif !important;
}
.theme-noir .eyebrow {
  font-family: "Archivo", system-ui, sans-serif !important;
  letter-spacing: 0.32em;
  font-weight: 600;
}

/* ---------- Ink/ivory text tokens ----------
   On the noir pages every surface is dark, so any element carrying
   ivory-based text (photos, heroes, footer, chips) must be light. */
.theme-noir .text-ink { color: #f0f2f5 !important; }
.theme-noir .text-ink\/35,
.theme-noir .text-ink\/40,
.theme-noir .text-ink\/45,
.theme-noir .text-ink\/50,
.theme-noir .text-ink\/55,
.theme-noir .text-ink\/60,
.theme-noir .text-ink\/65,
.theme-noir .text-ink\/70 { color: rgba(240, 242, 245, 0.72) !important; }
.theme-noir .text-ivory { color: #f0f2f5 !important; }
.theme-noir .text-ivory\/35 { color: rgba(240, 242, 245, 0.4) !important; }
.theme-noir .text-ivory\/40 { color: rgba(240, 242, 245, 0.45) !important; }
.theme-noir .text-ivory\/45 { color: rgba(240, 242, 245, 0.5) !important; }
.theme-noir .text-ivory\/50 { color: rgba(240, 242, 245, 0.55) !important; }
.theme-noir .text-ivory\/55 { color: rgba(240, 242, 245, 0.6) !important; }
.theme-noir .text-ivory\/60 { color: rgba(240, 242, 245, 0.65) !important; }
.theme-noir .text-ivory\/70 { color: rgba(240, 242, 245, 0.72) !important; }
.theme-noir .text-ivory\/75 { color: rgba(240, 242, 245, 0.78) !important; }
.theme-noir .text-ivory\/80 { color: rgba(240, 242, 245, 0.85) !important; }
.theme-noir .text-accent,
.theme-noir .text-gold { color: #e6c07a !important; }

/* ---------- Buttons ---------- */
.theme-noir .btn-dark { background: #e6c07a; color: #0d1117; }
.theme-noir .btn-dark:hover { background: #f4d799; }
.theme-noir .btn-light { background: #f0f2f5; color: #0d1117; }
.theme-noir .btn-light:hover { background: #ffffff; }
.theme-noir .btn-outline-dark { border-color: rgba(230, 192, 122, 0.55); color: #e6c07a; }
.theme-noir .btn-outline-dark:hover { background: #e6c07a; color: #0d1117; }
.theme-noir .btn-outline-light { border-color: rgba(240, 242, 245, 0.4); color: #f0f2f5; }
.theme-noir .btn-outline-light:hover { background: #e6c07a; color: #0d1117; border-color: #e6c07a; }
.theme-noir .view-link { color: #e6c07a; }

/* ---------- Header (dark, gold current, subtle line) ---------- */
.theme-noir #site-header { border-bottom-color: rgba(255, 255, 255, 0.07); }
.theme-noir #site-header .logo,
.theme-noir #site-header .header-actions,
.theme-noir #site-header .btn-header { color: #f0f2f5; }
.theme-noir #site-header .nav-link { color: rgba(240, 242, 245, 0.85); }
.theme-noir #site-header .nav-link.is-current { color: #e6c07a; }
.theme-noir #site-header .nav-link.is-current::after { background: #e6c07a; }
.theme-noir #site-header .icon-btn:hover { background: rgba(230, 192, 122, 0.16); }
.theme-noir #site-header.is-solid {
  background: rgba(13, 17, 23, 0.86);
  border-bottom-color: rgba(230, 192, 122, 0.2);
}
.theme-noir #site-header.is-solid .logo,
.theme-noir #site-header.is-solid .nav-link,
.theme-noir #site-header.is-solid .header-actions,
.theme-noir #site-header.is-solid .btn-header { color: #f0f2f5; }
.theme-noir #site-header.is-solid .nav-link.is-current { color: #e6c07a; }
html.theme-noir.menu-open #site-header .logo {
  background: rgba(240, 242, 245, 0.08);
  border-color: rgba(240, 242, 245, 0.2);
  color: #f0f2f5;
}
html.theme-noir.menu-open #site-header .header-actions,
html.theme-noir.menu-open #site-header .btn-header { color: #f0f2f5; }

/* ---------- Dropdown nav (noir: glass charcoal + champagne gold) ---------- */
.theme-noir #site-header .dropdown {
  background: rgba(15, 20, 28, 0.94);
  border-color: rgba(230, 192, 122, 0.18);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.7);
}
.theme-noir #site-header .dropdown a { color: rgba(240, 242, 245, 0.82); }
.theme-noir #site-header .dropdown a:hover,
.theme-noir #site-header .dropdown a:focus-visible,
.theme-noir #site-header .dropdown a.is-current {
  color: #e6c07a;
  background: rgba(230, 192, 122, 0.07);
}
.theme-noir #site-header .dd-label {
  color: rgba(230, 192, 122, 0.55);
  border-bottom-color: rgba(230, 192, 122, 0.14);
}
.theme-noir #site-header .dd-tag {
  color: rgba(230, 192, 122, 0.5);
  border-color: rgba(230, 192, 122, 0.28);
}
.theme-noir #site-header .dropdown a:hover .dd-tag,
.theme-noir #site-header .dropdown a.is-current .dd-tag {
  color: #e6c07a;
  border-color: rgba(230, 192, 122, 0.55);
}
.theme-noir #site-header.is-solid .nav-item > .dropdown { border-color: rgba(230, 192, 122, 0.18); }

/* ---------- Mobile menu ---------- */
.theme-noir #mobile-menu { background: rgba(10, 13, 18, 0.98); }
.theme-noir #mobile-menu .mobile-link { color: #f0f2f5; }
.theme-noir #mobile-menu .mobile-link small { color: #e6c07a; }
.theme-noir #mobile-menu .mobile-link:hover { color: #e6c07a; }
.theme-noir #mobile-menu .mobile-group-head .mobile-toggle {
  border-color: rgba(230, 192, 122, 0.35);
  color: #e6c07a;
}
.theme-noir #mobile-menu .mobile-group.is-open .mobile-toggle {
  background: rgba(230, 192, 122, 0.14);
}
.theme-noir #mobile-menu .mobile-group { border-top-color: rgba(240, 242, 245, 0.1); }
.theme-noir #mobile-menu .mobile-sub a { color: rgba(240, 242, 245, 0.68); }
.theme-noir #mobile-menu .mobile-sub a .dd-tag {
  color: rgba(230, 192, 122, 0.5);
  border-color: rgba(230, 192, 122, 0.28);
}
.theme-noir #mobile-menu .mobile-sub a:hover,
.theme-noir #mobile-menu .mobile-sub a:focus-visible { color: #e6c07a; }
.theme-noir #mobile-menu .mobile-sub a .dd-arr { color: #e6c07a; }

/* ---------- Generic light surfaces -> noir panels ---------- */
.theme-noir #search,
.theme-noir #locations,
.theme-noir #insights,
.theme-noir #why,
.theme-noir #testimonials,
.theme-noir #categories,
.theme-noir .bg-ivory2,
.theme-noir .bg-ivory {
  background-color: #0d1117 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.theme-noir .bg-white { background-color: #10151d !important; }
.theme-noir .hz-media { background-color: #141a24; }

/* Hairlines & borders that were ink-based become light hairlines */
.theme-noir .border-ink\/5,
.theme-noir .border-ink\/10,
.theme-noir .border-ink\/15,
.theme-noir .border-ink\/20 { border-color: rgba(255, 255, 255, 0.12) !important; }

/* ---------- Sections that were ALREADY dark (bg-ink + image/bands) ---------- */
.theme-noir section.bg-ink {
  background-color: #0b0e14 !important;
}
/* Dark scrims that used bg-ink/70 (now would be a light veil) */
.theme-noir .bg-ink\/70 { background-color: rgba(11, 14, 20, 0.72) !important; }

/* ---------- Over-image chips / labels ---------- */
.theme-noir .hz .hz-media > span {
  background: rgba(11, 14, 20, 0.62) !important;
  border-color: rgba(240, 242, 245, 0.35) !important;
  color: #f0f2f5 !important;
}
.theme-noir .category-tile .tile-caption span {
  border-color: rgba(240, 242, 245, 0.4) !important;
  color: #f0f2f5 !important;
}

/* ---------- Location rows ---------- */
.theme-noir .loc-row { color: #f0f2f5; border-color: rgba(255, 255, 255, 0.1); }
.theme-noir .loc-row .loc-name { color: #f0f2f5; }
.theme-noir .loc-row:hover .loc-name,
.theme-noir .loc-row.is-active .loc-name { color: #e6c07a; }
.theme-noir .loc-row .loc-arrow { color: #e6c07a; }

/* ---------- Testimonials ---------- */
.theme-noir #t-prev,
.theme-noir #t-next {
  border-color: rgba(255, 255, 255, 0.22);
  color: #f0f2f5;
}
.theme-noir #t-prev:hover,
.theme-noir #t-next:hover { background: #e6c07a; color: #0d1117; border-color: #e6c07a; }

/* ---------- Forms ---------- */
.theme-noir .field {
  border-bottom-color: rgba(255, 255, 255, 0.2);
  color: #f0f2f5;
}
.theme-noir .field-label { color: rgba(240, 242, 245, 0.62); }
.theme-noir .field:focus { border-color: #e6c07a; }
.theme-noir input[type="email"] { color: #f0f2f5; border-color: rgba(240, 242, 245, 0.25); }
.theme-noir select.field option { background: #0d1117; color: #f0f2f5; }

/* ---------- Footer (always dark) ---------- */
.theme-noir #footer {
  background-color: #0a0d12 !important;
  color: #f0f2f5 !important;
}
.theme-noir #footer .logo { color: #f0f2f5 !important; }
.theme-noir #footer .footer-link { color: rgba(240, 242, 245, 0.7); }
.theme-noir #footer .footer-link:hover { color: #e6c07a; padding-left: 4px; }
.theme-noir #footer .border-ivory\/10,
.theme-noir #footer .border-ivory\/20 { border-color: rgba(240, 242, 245, 0.14) !important; }
.theme-noir #footer .icon-btn {
  border-color: rgba(240, 242, 245, 0.22);
  color: rgba(240, 242, 245, 0.85);
}
.theme-noir #footer .icon-btn:hover { background: #e6c07a; color: #0d1117; }

/* ---------- Page overlay / cursor ---------- */
.theme-noir #page-overlay { background: #0d1117; }
.theme-noir #page-overlay span { color: #f0f2f5; }
.theme-noir .cursor-dot { background: #e6c07a; }
.theme-noir .cursor-ring { border-color: rgba(230, 192, 122, 0.6); }
.theme-noir .cursor-ring.is-hover { border-color: rgba(230, 192, 122, 0.3); }

/* ---------- Subtle image frame ---------- */
.theme-noir .frame,
.theme-noir .hz-media { box-shadow: inset 0 0 0 1px rgba(230, 192, 122, 0.06); }

/* ---------- Hero text shadow (keeps white text readable over photos) ---------- */
.theme-noir section#hero .container-x,
.theme-noir main section:first-child .container-x { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); }