/* ═══════════════════════════════════════════════════════════════
   Vista Realty — "Heritage Editorial" theme, ported from
   vista-realty-demo-v2/assets/css/vista-theme-v2.css (the client-
   approved visual direction) with two deliberate client overrides
   applied below: navy stays v1's actual blue (not this design's
   ink-black recolor), and the hero stays v1's photo carousel (the
   video-specific hero-overlay override from the source file is
   dropped accordingly — see vista-style-decision memory).
   Cormorant Garamond replaces Playfair Display (self-hosted via
   fonts.css, not the @import the source file used).

   Load order: vista-tailwind.css -> tw-patch.css -> vista-cards.css
   -> vista-theme.css. Intentionally LAST so its :root overrides and
   its .prop-card/.sim-card overrides win the cascade even on pages
   that also load vista-cards.css.
   ═══════════════════════════════════════════════════════════════ */

/* Small angled line — a distinctive Compass "About" page detail used
   as a section divider instead of the plain horizontal gold rule used
   elsewhere (why-panama.html's centered statement section). */
.diagonal-divider {
  width: 1px;
  height: 2.5rem;
  background: hsl(var(--gold));
  transform: rotate(20deg);
}

/* ── Palette: ivory / gold-hairline, but NAVY BLUE not ink-black ──
   Overrides vista-tailwind.css's compiled :root block. This is the
   ONE deliberate departure from the source vista-theme-v2.css: that
   file recolors --navy/--navy-light/--primary/--accent-foreground to
   near-black ink (0 0% 12%) to remove "navy blocks" entirely. The
   client explicitly asked to keep v1's actual blue at the hero and
   repeated at the end of every section (footer, CTA bands), so those
   four values below are v1's real navy (209 72% 21% / 209 55% 30%),
   not this design's ink recolor. Everything else (ivory background,
   gold) is unchanged from the source file. */
:root {
  --background: 38 41% 95%;        /* #F7F3EC ivory */
  --foreground: 0 0% 10%;          /* #1A1A1A ink-black */
  --card: 38 41% 95%;
  --card-foreground: 0 0% 10%;
  --popover: 38 41% 97%;
  --popover-foreground: 0 0% 10%;
  --primary: 209 72% 21%;          /* v1's navy blue — client override, was ink 0 0% 12% */
  --primary-foreground: 40 30% 95%;
  --secondary: 38 30% 91%;         /* slightly deeper ivory for section bands */
  --secondary-foreground: 0 0% 10%;
  --muted: 38 20% 90%;
  --muted-foreground: 30 8% 40%;
  --accent: 35 49% 58%;
  --accent-foreground: 209 72% 21%; /* v1's navy blue — client override, was ink 0 0% 12% */
  --border: 38 15% 85%;
  --input: 38 15% 85%;
  --ring: 35 49% 58%;
  --gold: 35 49% 58%;
  --gold-light: 35 49% 73%;
  --gold-dark: 35 49% 45%;
  --navy: 209 72% 21%;             /* v1's navy blue — client override, was ink 0 0% 12% */
  --navy-light: 209 55% 30%;       /* v1's navy blue — client override, was ink 0 0% 20% */
  --cream: 38 41% 95%;
  --warm-white: 38 41% 95%;
}

/* ── Type: Cormorant Garamond replaces Playfair Display ── */
.font-serif {
  font-family: var(--wp--preset--font-family--serif, "Cormorant Garamond", Georgia, serif);
}

/* Nav "scrolled" state — was hardcoded to the source file's ink RGB
   literals (rgba(26,26,26,...)); using hsl(var(--navy)) instead so it
   follows the client's navy-blue override above instead of needing a
   second hardcoded color to stay in sync. */
#site-nav.nav-scrolled {
  background: hsl(var(--navy) / 0.95);
}
body.is-home #site-nav.nav-scrolled {
  background: hsl(var(--navy) / 0.78);
}

/* NOT ported: the source file's #hero-slider .bg-gradient-hero-overlay
   override — that radial vignette was tuned specifically for the
   video hero's centered composition. This build keeps v1's rotating
   photo carousel (left-aligned copy), so the original left-heavy
   diagonal scrim from tw-patch.css (tuned for that layout) applies
   unmodified. */

/* ── Restrained hover chrome: heritage/auction-house sites don't do
   dramatic drop-shadows on hover. Applies site-wide to every bordered
   feature/stat box (About stats + "How We Work", Services detail
   alternating sections, property/similar cards handled below). ── */
.hover\:shadow-lg:hover,
.hover\:shadow-md:hover,
.hover\:shadow-xl:hover {
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   Property cards -> unbordered "magazine" layout
   (index.html featured grid, properties.html full grid). Card
   markup/classes come from assets/js/vista-cards.js — see
   assets/css/vista-cards.css for the mechanics this overrides.
   ═══════════════════════════════════════════════════════════════ */
.prop-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.prop-card:hover {
  box-shadow: none;
  border-color: transparent;
  transform: none;
}
.prop-card-img {
  transition: transform 0.7s ease;
}
.prop-card:hover .prop-card-img {
  transform: scale(1.05);
}
/* Featured Properties on the home page sits on a DARK section
   (#properties, bg-gradient-navy -> ink-black in this proposal), but
   vista-cards.js's title/address/specs text uses .text-foreground /
   .text-muted-foreground — ink tones meant for a light background.
   On properties.html (light bg) those are correct and untouched;
   scope this override to the dark home-page band only. */
#properties .prop-card .text-foreground {
  color: hsl(var(--primary-foreground));
}
#properties .prop-card .text-muted-foreground {
  color: hsl(var(--primary-foreground) / .6);
}
#properties .prop-card h3 a:hover {
  color: hsl(var(--gold));
}
#properties .prop-card-cta {
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary-foreground) / .3);
}
#properties .prop-card-cta:hover {
  background: hsl(var(--gold));
  color: hsl(var(--primary));
  border-color: hsl(var(--gold));
}
/* Similar Properties (property-detail.html) — same magazine
   treatment, static markup (not JS-rendered) so targeted directly. */
.sim-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.sim-card:hover {
  box-shadow: none;
  border-color: transparent;
}
/* Loading skeleton cards (properties.html) — flatten to match, in
   case the skeleton is visible for a moment before render. */
#properties-loading > div {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════
   Numbered/lettered list treatment for feature grids
   (Why Panama icon grid, Home "Comprehensive Solutions" services
   preview) — replaces icon-card/photo-card boxes with a flush,
   editorial list. See index.html / why-panama.html for markup.
   ═══════════════════════════════════════════════════════════════ */
.feature-list-item {
  border-top: 1px solid hsl(var(--border));
  padding-top: 1.25rem;
  transition: border-color 0.3s ease;
}
.feature-list-item:hover {
  border-color: hsl(var(--gold) / 0.5);
}
.feature-list-number {
  font-family: var(--wp--preset--font-family--serif, "Cormorant Garamond", Georgia, serif);
  color: hsl(var(--gold));
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}

/* Home "services preview" cards — flush magazine treatment: photo,
   then a numbered eyebrow + title/description/tags as plain text,
   no card border/shadow wrapper. */
.service-preview-card .service-preview-number {
  font-family: var(--wp--preset--font-family--serif, "Cormorant Garamond", Georgia, serif);
  color: hsl(var(--gold));
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* Outlined pill CTAs — property cards ("More Details") and the
   services row list ("Learn More") — matches the oval outline button
   used throughout the real reference sites (Sotheby's/Christie's),
   replacing the plain text-link-with-arrow pattern used in v1/v3.
   inline-flex (not inline-block): this file loads last, so its
   `display` wins the cascade over Tailwind's `.flex` at equal
   specificity — a plain inline-block here silently broke icon+label
   buttons (property-detail.html's Copy Link/Facebook) that add
   `flex items-center gap-*` expecting it to take effect. Baking
   centering + gap in here also means those buttons no longer need
   to repeat the utility classes themselves. */
.prop-card-cta,
.service-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: 1px solid hsl(var(--gold));
  color: hsl(var(--foreground));
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.6rem 1.5rem;
  border-radius: 9999px;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.prop-card-cta:hover,
.service-cta:hover {
  background: hsl(var(--gold));
  color: hsl(var(--primary));
}

/* Underline-only form inputs (no boxed borders) — matches the real
   reference sites' contact-form treatment more closely than the
   bordered-box inputs used in v1/v3. Applied site-wide (not just the
   homepage's inline contact form) so contact.html's standalone form —
   which uses the shared .form-input class — matches too. */
#contact form input,
#contact form textarea,
form input.form-input,
form textarea.form-input {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-radius: 0 !important;
}
#contact form input:focus,
#contact form textarea:focus,
form input.form-input:focus,
form textarea.form-input:focus {
  border-bottom-color: hsl(var(--gold)) !important;
}

@media (prefers-reduced-motion: reduce) {
  .prop-card-img { transition: none; }
}