/* ═══════════════════════════════════════════════════════════════
   Vista Realty — "Heritage Editorial" theme (Propuesta Visual 2 de 3)
   Grounded in Sotheby's / Christie's International Realty: ivory
   background, ink-black type, gold used only as a hairline accent —
   no navy blocks. Cormorant Garamond replaces Playfair Display.

   Load order: index-BEo4h1Yo.css -> tw-patch.css -> vista-tokens.css
   -> vista-cards.css (card-heavy pages only) -> vista-theme-v2.css
   This file is intentionally the LAST stylesheet on every page (not
   simply "right after vista-tokens.css") so its :root overrides and
   its .prop-card/.sim-card overrides win the cascade even on the two
   pages that also load vista-cards.css.
   ═══════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap");

/* 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 / ink-black / gold-hairline ──
   Overrides index-BEo4h1Yo.css's compiled :root block. Gold is left
   unchanged (brand hex #C89B5E, hsl 35 49% 58%). --navy/--navy-light
   and --primary are recolored to near-black ink instead of edited
   out of the markup — this turns every existing "bg-gradient-navy"
   CTA band and every "bg-primary" nav/footer surface into an ink
   anchor with zero HTML changes, satisfying "no navy blocks" while
   keeping the fixed dark top bar this genre expects. */
: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: 0 0% 12%;             /* ink, was navy 209 72% 21% */
  --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: 0 0% 12%;   /* was navy-tinted 220 40% 13% */
  --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: 0 0% 12%;                /* recolored to ink — see note above */
  --navy-light: 0 0% 20%;
  --cream: 38 41% 95%;
  --warm-white: 38 41% 95%;
}

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

/* Nav "scrolled" state — true ink instead of the slate/navy-tinted
   rgba(17,24,39,...) baked into vista-tokens.css's mechanics. */
#site-nav.nav-scrolled {
  background: rgba(26, 26, 26, 0.95);
}
body.is-home #site-nav.nav-scrolled {
  background: rgba(26, 26, 26, 0.78);
}

/* Home hero legibility fix — the shared .bg-gradient-hero-overlay
   (tw-patch.css) is a left-heavy diagonal scrim built for the interior
   pages' bottom-left breadcrumb/title layout; it's LIGHTEST across the
   vertical middle, exactly where this hero's centered headline sits.
   Scoped to #hero-slider only (unique to index.html) so the interior
   headers keep the original scrim untouched. Bright window clusters in
   the night-skyline video need a stronger, center-weighted vignette
   rather than the original's side bias. */
#hero-slider .bg-gradient-hero-overlay {
  background:
    radial-gradient(ellipse 70% 62% at 50% 50%,
      hsl(var(--navy) / 0.72) 0%,
      hsl(var(--navy) / 0.55) 45%,
      hsl(var(--navy) / 0.3) 78%,
      hsl(var(--navy) / 0.12) 100%),
    linear-gradient(to bottom,
      hsl(var(--navy) / 0.55) 0%,
      hsl(var(--navy) / 0.22) 25%,
      hsl(var(--navy) / 0.22) 70%,
      hsl(var(--navy) / 0.6) 100%);
}

/* ── 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);
}
/* Drop the image tint overlay and the type/status badge chrome —
   magazine layout relies on the photo reading clean, with price/
   title/specs as plain text below rather than badges-on-image. */
.prop-card .card-img-overlay,
.prop-card .card-type-badge,
.prop-card > a > div > .absolute.top-4.left-4 {
  display: none;
}

/* 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));
}
.prop-card .p-6 {
  padding: 1.25rem 0 0;
}

/* 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;
}
.sim-card .absolute.top-3.left-3,
.sim-card .absolute.inset-0.bg-primary\/10 {
  display: none;
}
.sim-card .p-5 {
  padding: 1.25rem 0 0;
}

/* 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: "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: "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; }
}