/* ================================
   Brand Color Variables (Mapped)
   ================================ */
:root {
  --white: #ffffff;

  /* Primary */
  --navy-dark: #0a2342;
  --navy-light: #1e3a5f;

  /* Accent (mapped to GOLD classes used in HTML) */
  --gold: #38bdf8;          /* Sky Blue */
  --gold-light: #7dd3fc;

  /* CTA */
  --red-accent: #dc2626;

  /* Neutral */
  --gray-light: #f8f9fa;
  --gray-medium: #e5e7eb;
  --gray-dark: #6b7280;
}

/* ================================
   Global Base
   ================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  line-height: 1.6;
  background-color: var(--white);
  color: #111827;
}

/* ================================
   TEXT UTILITIES (USED IN HTML)
   ================================ */
.text-navy-dark {
  color: var(--navy-dark);
}

.text-gold {
  color: var(--gold);
}
.errorlist {
    color: #dc2626; /* red-600 */
    font-weight: 700;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.errorlist li {
    list-style: none;
}

/* ================================
   BACKGROUND UTILITIES (CRITICAL)
   ================================ */
.bg-navy-dark {
  background-color: var(--navy-dark);
}

.bg-gold {
  background-color: var(--gold);
}

/* ================================
   HOVER UTILITIES (NAV + FOOTER)
   ================================ */
.hover\:text-gold:hover {
  color: var(--navy-dark);
}

.hover\:bg-gold:hover {
  background-color: var(--gold-light);
}

/* Swiper JS Carousel */
.swiper {
  width: 600px;
  height: 300px;
}

/* ================================
   SCROLLBAR (SINGLE SOURCE)
   ================================ */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--gray-light);
}

::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 4px;
}

/* ================================
   PROPERTY CARDS
   ================================ */
.property-card {
  background: var(--white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.property-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.property-price {
  font-size: 24px;
  font-weight: 700;
  color: var(--navy-dark);
}

/* ================================
   FORMS
   ================================ */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--gray-medium);
  border-radius: 6px;
  font-size: 14px;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(56,189,248,0.25);
}
/* ================================
   Corrected Hover Utilities
   ================================ */
.hover\:text-gold:hover {
  color: var(--gold) !important; /* use correct gold */
}

.hover\:bg-gold:hover {
  background-color: var(--navy-dark) !important; /* use navy-dark for contrast */
  color: var(--white) !important; /* ensure text is readable */
}

/* Ensure buttons in mobile menu are styled as links on hover */
#mobile-menu a:hover,
#mobile-menu button:hover {
  background-color: transparent !important;
  color: var(--gold) !important;
}

/* ================================
   BUTTONS (MATCH HTML)
   ================================ */
.btn {
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: var(--gold);
  color: var(--navy-dark);
}

.btn-primary:hover {
  background-color: var(--gold-light);
}

.btn-secondary {
  background-color: var(--navy-dark);
  color: var(--white);
}

.btn-secondary:hover {
  background-color: var(--navy-light);
}

/* ================================
   RESPONSIVE HELPERS
   ================================ */
@media (max-width: 768px) {
  .hidden\.md\:flex {
    display: none;
  }

  .flex-col {
    flex-direction: column;
  }

  .grid-cols-1 {
    grid-template-columns: 1fr;
  }
}