/* ── Custom CSS for Real Estate Site ──────────────────────── */

:root {
  --navy:  #0F1B3D;
  --gold:  #C9A961;
  --cream: #F8F5EE;
  --bg:    #F5F5F5;
  --card-shadow: 0 1px 6px rgba(0,0,0,0.08);
  --card-shadow-hover: 0 4px 20px rgba(0,0,0,0.12);
}

/* Fonts via Tailwind config */
body {
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
}

h1, h2, h3, h4, h5, h6,
.font-heading {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

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

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Line clamp utility */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Property gallery transitions */
.gallery-thumb {
  transition: border-color 0.2s ease;
}

/* Card base shadow */
.prop-card {
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.prop-card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
}

/* Hover card lift */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(15,27,61,0.1);
}

/* Gold accent underline for headings */
.heading-underline {
  position: relative;
  display: inline-block;
}
.heading-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 40px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
}

/* Prose styles for blog content */
.prose h2 { font-size: 1.5rem; font-weight: 700; color: var(--navy); margin: 1.5rem 0 0.75rem; }
.prose h3 { font-size: 1.25rem; font-weight: 600; color: var(--navy); margin: 1.25rem 0 0.5rem; }
.prose p  { margin-bottom: 1rem; line-height: 1.75; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose ul li { margin-bottom: 0.25rem; }
.prose ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose a  { color: var(--navy); text-decoration: underline; }
.prose a:hover { color: var(--gold); }
.prose blockquote { border-left: 4px solid var(--gold); padding-left: 1rem; color: #64748b; font-style: italic; margin: 1.5rem 0; }

/* Form focus styles */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(201,169,97,0.15);
}

/* Sticky nav shadow */
nav.sticky-nav { box-shadow: 0 1px 20px rgba(0,0,0,0.06); }

/* Admin sidebar active indicator */
.nav-active-dot {
  width: 4px;
  height: 24px;
  background: var(--gold);
  border-radius: 2px;
  position: absolute;
  right: 0;
}

/* Transitions */
a, button { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }

/* Lazy image load fade */
img[loading="lazy"] { opacity: 0; transition: opacity 0.3s ease; }
img[loading="lazy"].loaded, img:not([loading]) { opacity: 1; }

/* Number font */
.stat-number { font-variant-numeric: tabular-nums; }

/* Ensure uploads directory blocked from direct PHP execution */
/* (configured in .htaccess, this is just a comment) */

/* Mobile adjustments */
@media (max-width: 640px) {
  .hero-title { font-size: 2.5rem; }
  .mobile-pb { padding-bottom: 80px; } /* Space for sticky mobile CTA */
}

/* Hero section background image (optional — upload hero-bg.jpg to assets/images/) */
.hero-bg-img {
  background-image: url('../images/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Hero glass select option override for webkit */
.hero-section select option {
  background: #0F1B3D;
  color: #fff;
}

/* Hide scrollbar utility */
.scrollbar-none { scrollbar-width: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }

/* Mobile horizontal property scroll row */
.prop-scroll-row {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.prop-scroll-row::-webkit-scrollbar { display: none; }
.prop-scroll-row > div { scroll-snap-align: start; }

/* Property card image carousel */
.property-card-img {
  position: absolute;
  inset: 0;
  transition: opacity 0.3s ease;
}

/* Mobile drawer slide-in animation */
.mobile-drawer-panel {
  animation: drawerSlideIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes drawerSlideIn {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* Print */
@media print {
  nav, footer, .sticky, .fixed { display: none !important; }
}