/* RE.NUEVO — small overrides on top of Tailwind CDN */

/* The static Tailwind build only shipped sm:/md: display variants. The nav
   now carries six items, so it switches to the hamburger below lg (1024px).
   These `lg:` display utilities aren't in vendor/tailwind.css, so define them
   here (loaded after tailwind.css → wins over `.hidden` at lg+). */
@media (min-width: 1024px) {
  .lg\:flex { display: flex; }
  .lg\:inline-flex { display: inline-flex; }
  .lg\:hidden { display: none; }
}

html, body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: #F5F3EC; color: #1a1a1a; }
.font-serif { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; font-variation-settings: "SOFT" 50, "WONK" 0; }

/* soft shadow utility */
.shadow-soft { box-shadow: 0 2px 8px rgba(17,87,76,0.06), 0 8px 24px rgba(17,87,76,0.04); }

/* Brand wordmark logo in the nav + footer. Sized here (not via Tailwind
   h-8/w-auto) because the purged vendor build is missing `w-auto`, which let
   the img's width="429" attribute stretch the logo horizontally. */
.brand-logo { display: block; height: 2rem; width: auto; max-width: 100%; }
.brand-logo--footer { height: 2.25rem; }

/* ── RE.NUEVO brand decoration ──────────────────────────────────────────
   vendor/tailwind.css is a *purged* build, so arbitrary new utility classes
   (opacity-10, w-[28rem], bg-electric/15, rotate-6 …) don't exist. These
   hand-written classes give the hero the poster's soft green→cream→pink wash
   + a faint flower mark without depending on Tailwind's purge output.       */
.hero-glow { position: absolute; border-radius: 9999px; filter: blur(64px); pointer-events: none; }
.hero-glow--green { top: -3rem;  left: -3rem;  width: 28rem; height: 28rem; background: rgba(17,87,76,0.10); }
.hero-glow--pink  { bottom: -4rem; right: -2rem; width: 30rem; height: 30rem; background: rgba(241,140,186,0.16); }
.hero-flower {
  position: absolute; top: 1.5rem; right: 1rem;
  width: 13rem; max-width: 42vw; opacity: 0.08;
  transform: rotate(-6deg); pointer-events: none; user-select: none;
}
@media (min-width: 1024px) { .hero-flower { right: 3rem; width: 17rem; } }

/* Faint flower accent on the buyer "Save a search" header (sits behind the
   title; the white filter card below covers the rest). */
.buyer-flower {
  position: absolute; top: -0.75rem; right: 0; width: 11rem;
  opacity: 0.09; transform: rotate(8deg); pointer-events: none; user-select: none;
}

/* scrollbar polish */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d6d2c2; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #b8b3a0; }

/* tooltip */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: #11574C; color: white; font-size: 12px; padding: 6px 10px; border-radius: 6px;
  white-space: normal; width: max-content; max-width: 240px; z-index: 50;
}

/* i18n: hide translatable content until I18n.init() applies the dictionary,
   so users in non-EN languages don't see English flash before translation. */
body.i18n-pending [data-i18n],
body.i18n-pending [data-i18n-html] { visibility: hidden; }