/* ========================================================
   REALTOR ENGINE — MAIN STYLESHEET
   Luxury Real Estate Design System
   ======================================================== */

/* Listing Cards Wrapper — ensures cards from generated HTML display correctly */
.listings-grid .listing-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(0,0,0,0.06);
}

.listings-grid .listing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

/* Nav link active state */
.nav-link.active {
  color: var(--color-accent) !important;
}

/* Focus rings using accent color */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  ring-color: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(203, 161, 53, 0.15);
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Prevent content jumping under sticky nav */
body {
  overflow-x: hidden;
}

/* Lazy loading image fade-in */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.4s ease;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 3px;
}

/* Selection color */
::selection {
  background: var(--color-accent);
  color: var(--color-primary);
}

/* Utility: visually-hidden */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* Hero fallback background when image missing */
section.hero-fallback {
  background: linear-gradient(135deg, var(--color-primary) 0%, #1e3a5f 100%);
}