/* ============================================================
   RealEstateData.ae — Homepage Custom Overrides
   - Adds distinct light background colors to emirate cards
   - Adds light colors to Helpful Links cards
   - Fixes homepage font sizes to be properly readable
   - Hover lift effects for all cards
   ============================================================ */

/* ---- Font Size Fixes for Home Page ---- */
.home-page {
  font-size: 17px !important;
  line-height: 1.6 !important;
}

.home-page dd,
.home-page dt,
.home-page li,
.home-page ol,
.home-page p,
.home-page ul {
  font-size: 17px !important;
  line-height: 1.6 !important;
}

.home-page em,
.home-page small,
.home-page strong {
  font-size: inherit !important;
  line-height: inherit !important;
}

.home-page .text-base,
.home-page .text-sm,
.home-page .text-xs {
  font-size: 16px !important;
  line-height: 1.55 !important;
}

/* ---- Heading sizes ---- */
.home-page h1 {
  font-size: clamp(2rem, 5vw, 2.8rem) !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

.home-page h2 {
  font-size: clamp(1.5rem, 3.5vw, 2rem) !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

.home-page h3 {
  font-size: clamp(1.15rem, 2.8vw, 1.45rem) !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
}

/* Card titles — Emirate names & Helpful Link headings */
.home-page [data-slot="card-title"] {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

/* Nav / button font sizes */
.home-page nav {
  font-size: 15px !important;
}

.home-page button,
.home-page .btn,
.home-page .button,
.home-page [role=button],
.home-page [role=tab] {
  font-size: 14px !important;
}

/* Badge font size (the "XX areas" badges) */
.home-page [data-slot="badge"] {
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
}

/* Description text in cards */
.home-page [data-slot="card-content"] p {
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: #4b5563 !important;
}

/* Button / link text in cards — targets a[data-slot="button"] rendered by Next.js */
.home-page [data-slot="card"] [data-slot="button"],
.home-page [data-slot="card"] [data-slot="button"] span,
.home-page [data-slot="card"] a[data-slot="button"],
.home-page [data-slot="card"] [data-slot="card-content"] a[data-slot="button"],
.home-page [data-slot="card"] [data-slot="card-content"] a[data-slot="button"] span,
.home-page [data-slot="card"] [data-slot="card-content"] a,
.home-page [data-slot="card"] [data-slot="card-content"] a span,
.home-page [data-slot="card"] button,
.home-page [data-slot="card"] button a,
.home-page [data-slot="card"] button a span {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

/* Extra-specific for Tailwind class override on card buttons */
.home-page div[data-slot="card"] div[data-slot="card-content"] a.inline-flex {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

/* Also target by Tailwind responsive classes used on buttons */
.home-page [data-slot="card"] .text-sm,
.home-page [data-slot="card"] .text-xs,
.home-page [data-slot="card"] .text-base,
.home-page [data-slot="card"] a.text-sm,
.home-page [data-slot="card"] a.text-xs {
  font-size: 14px !important;
}

/* Arrow icon inside buttons */
.home-page [data-slot="card"] [data-slot="button"] svg,
.home-page [data-slot="card"] a[data-slot="button"] svg,
.home-page [data-slot="card"] a.inline-flex svg,
.home-page [data-slot="card"] button svg {
  width: 14px !important;
  height: 14px !important;
}

/* ---- Hero Section Fix ---- */
.home-page section.bg-gradient-to-br {
  background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 50%, #3b82f6 100%) !important;
}

.home-page section.bg-gradient-to-br h1,
.home-page section.bg-gradient-to-br p,
.home-page section.bg-gradient-to-br span {
  color: #fff !important;
}

.home-page section.bg-gradient-to-br span.text-blue-200 {
  color: #93c5fd !important;
}

/* ---- Section Backgrounds ---- */
/* Explore by Emirate section — class: py-16 */
.home-page section.py-16 {
  background: linear-gradient(180deg, #f0f5ff 0%, #e8eeff 100%) !important;
  padding-top: 3.5rem !important;
  padding-bottom: 3.5rem !important;
}

/* Helpful Links section — class: py-12 bg-white border-t */
.home-page section.py-12.bg-white {
  background: linear-gradient(180deg, #f8f9ff 0%, #f0f2ff 100%) !important;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

/* ---- Emirate Card Colors ---- */
/* Target the grid inside py-16 section */

/* Abu Dhabi — Soft Mint (card 1) */
.home-page section.py-16 .grid>[data-slot="card"]:nth-child(1) {
  background: linear-gradient(135deg, #e8f8f5 0%, #d1f2ea 100%) !important;
  border-color: #86dfcb !important;
  border-width: 1.5px !important;
}

/* Ajman — Soft Lavender (card 2) */
.home-page section.py-16 .grid>[data-slot="card"]:nth-child(2) {
  background: linear-gradient(135deg, #f3eeff 0%, #e8dcff 100%) !important;
  border-color: #c4a3f7 !important;
  border-width: 1.5px !important;
}

/* Dubai — Soft Gold (card 3) */
.home-page section.py-16 .grid>[data-slot="card"]:nth-child(3) {
  background: linear-gradient(135deg, #fffbea 0%, #fef3c7 100%) !important;
  border-color: #f5c830 !important;
  border-width: 1.5px !important;
}

/* Fujairah — Soft Rose (card 4) */
.home-page section.py-16 .grid>[data-slot="card"]:nth-child(4) {
  background: linear-gradient(135deg, #fff0f3 0%, #ffdde5 100%) !important;
  border-color: #f5a0be !important;
  border-width: 1.5px !important;
}

/* Ras Al Khaimah — Soft Sky (card 5) */
.home-page section.py-16 .grid>[data-slot="card"]:nth-child(5) {
  background: linear-gradient(135deg, #e8f4ff 0%, #cce5ff 100%) !important;
  border-color: #7ab8f5 !important;
  border-width: 1.5px !important;
}

/* Sharjah — Soft Sage (card 6) */
.home-page section.py-16 .grid>[data-slot="card"]:nth-child(6) {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
  border-color: #6ee7a0 !important;
  border-width: 1.5px !important;
}

/* Umm Al Quwain — Soft Peach (card 7) */
.home-page section.py-16 .grid>[data-slot="card"]:nth-child(7) {
  background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%) !important;
  border-color: #f5924a !important;
  border-width: 1.5px !important;
}

/* Promotional cards (8-10) — keep existing bg, just add border width */
.home-page section.py-16 .grid>[data-slot="card"]:nth-child(8),
.home-page section.py-16 .grid>[data-slot="card"]:nth-child(9),
.home-page section.py-16 .grid>[data-slot="card"]:nth-child(10) {
  border-width: 1.5px !important;
}

/* ---- Helpful Links Card Colors ---- */
/* Target the grid inside py-12.bg-white section */

/* Blog — Soft Sky Blue (card 1) */
.home-page section.py-12 .grid>[data-slot="card"]:nth-child(1) {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
  border-color: #5dc1f7 !important;
  border-width: 1.5px !important;
}

/* Contact Professionals — Soft Orchid (card 2) */
.home-page section.py-12 .grid>[data-slot="card"]:nth-child(2) {
  background: linear-gradient(135deg, #fdf4ff 0%, #f3e8ff 100%) !important;
  border-color: #c084fc !important;
  border-width: 1.5px !important;
}

/* Get Listed — Soft Emerald (card 3) */
.home-page section.py-12 .grid>[data-slot="card"]:nth-child(3) {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
  border-color: #34d399 !important;
  border-width: 1.5px !important;
}

/* Advertising Tariff — Soft Amber (card 4) */
.home-page section.py-12 .grid>[data-slot="card"]:nth-child(4) {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
  border-color: #fbbf24 !important;
  border-width: 1.5px !important;
}

/* Questions & Answers — Soft Coral (card 5) */
.home-page section.py-12 .grid>[data-slot="card"]:nth-child(5) {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%) !important;
  border-color: #f87171 !important;
  border-width: 1.5px !important;
}

/* Contact Us — Soft Cyan (card 6) */
.home-page section.py-12 .grid>[data-slot="card"]:nth-child(6) {
  background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%) !important;
  border-color: #22d3ee !important;
  border-width: 1.5px !important;
}

/* ---- Card hover lift effect ---- */
.home-page [data-slot="card"] {
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.home-page [data-slot="card"]:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10) !important;
}

/* ---- Helpful Links section heading ---- */
.home-page section.py-12.bg-white h2 {
  font-size: clamp(1.4rem, 3.5vw, 1.8rem) !important;
  font-weight: 700 !important;
}

.home-page section.py-12.bg-white>div>div:first-child>p {
  font-size: 16px !important;
  color: #6b7280 !important;
}

/* ---- Responsive tweaks ---- */
@media (max-width: 768px) {
  .home-page {
    font-size: 15px !important;
  }

  .home-page [data-slot="card-title"] {
    font-size: 1.1rem !important;
  }

  .home-page [data-slot="card-content"] p {
    font-size: 14px !important;
  }
}