/*
Theme Name: Houseforyou.pk
Theme URI: https://houseforyou.pk
Author: Houseforyou.pk
Description: Custom real estate / property portal theme for Houseforyou.pk - Layyah City's property portal. Handles property listings (sale/rent/plots/installments), housing societies, property agents, client reviews and blog.
Version: 1.0
Text Domain: houseforyou
*/

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
:root{
  --primary: #0f5132;      /* deep green - trust, real estate */
  --primary-dark: #0a3d25;
  --accent: #e2b93b;       /* warm gold accent */
  --text-dark: #1b1f1d;
  --text-muted: #5f6b66;
  --bg-light: #f6f8f6;
  --border: #e4e8e4;
  --radius: 10px;
  --shadow: 0 4px 14px rgba(15,81,50,0.08);
  --max-width: 1200px;
}
html { scroll-behavior: smooth; }
body{
  margin:0;
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  color: var(--text-dark);
  background: #fff;
  line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.25; }
.container{ max-width: var(--max-width); margin:0 auto; padding:0 20px; }
.btn{
  display:inline-block; padding:12px 24px; border-radius: var(--radius);
  background: var(--primary); color:#fff; font-weight:600; border:none; cursor:pointer;
  transition: background .2s ease, transform .2s ease;
}
.btn:hover{ background: var(--primary-dark); transform: translateY(-1px); }
.btn-outline{ background:transparent; border:2px solid var(--primary); color:var(--primary); }
.btn-outline:hover{ background:var(--primary); color:#fff; }
.btn-accent{ background: var(--accent); color:var(--text-dark); }
.section{ padding: 60px 0; }
.section-title{ font-size: 30px; margin-bottom: 6px; }
.section-sub{ color: var(--text-muted); margin-bottom: 30px; }
.section-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom: 24px; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index: 500; background:#fff;
  border-bottom:1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,.03);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; gap:20px; }
.site-logo{ font-size:24px; font-weight:800; color:var(--primary); }
.site-logo span{ color: var(--accent); }
.main-nav ul{ display:flex; gap:22px; flex-wrap:wrap; }
.main-nav a{ font-weight:600; font-size:14.5px; color:var(--text-dark); }
.main-nav a:hover{ color: var(--primary); }
.header-actions{ display:flex; align-items:center; gap:12px; }
.header-actions .phone-link{ font-weight:700; color:var(--primary); font-size:14px; }
.menu-toggle{ display:none; background:none; border:none; font-size:26px; cursor:pointer; }

@media(max-width: 960px){
  .main-nav{ position:fixed; top:0; right:-100%; height:100vh; width:280px; background:#fff; box-shadow:-4px 0 16px rgba(0,0,0,.1); transition:right .3s ease; padding:80px 24px; z-index:600; }
  .main-nav.open{ right:0; }
  .main-nav ul{ flex-direction:column; gap:18px; }
  .menu-toggle{ display:block; }
  .header-actions .btn{ display:none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  background: linear-gradient(120deg, rgba(15,81,50,.92), rgba(10,61,37,.88)), url('assets/images/hero-bg.jpg') center/cover no-repeat;
  color:#fff; min-height: 480px; display:flex; align-items:center;
}
.hero-inner{ max-width:560px; }
.hero h1{ font-size:42px; font-weight:800; }
.hero p{ font-size:17px; opacity:.9; margin-bottom: 26px; }

.search-box{
  background:#fff; border-radius: var(--radius); padding:18px; box-shadow: var(--shadow);
  display:flex; flex-wrap:wrap; gap:10px; margin-top:10px;
}
.search-box select, .search-box input{
  flex:1; min-width:140px; padding:12px; border:1px solid var(--border); border-radius:8px; font-size:14px; color:var(--text-dark);
}
.search-box button{ flex:0 0 auto; }

@media(max-width:700px){
  .hero h1{ font-size:30px; }
  .search-box{ flex-direction:column; }
}

/* ==========================================================================
   FEATURED TABS
   ========================================================================== */
.tabs{ display:flex; gap:10px; margin-bottom:26px; flex-wrap:wrap; }
.tab-btn{
  padding:10px 22px; border-radius:30px; border:1px solid var(--border); background:#fff;
  font-weight:600; cursor:pointer; font-size:14px;
}
.tab-btn.active{ background:var(--primary); color:#fff; border-color:var(--primary); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* ==========================================================================
   PROPERTY / SOCIETY / AGENT CARDS
   ========================================================================== */
.grid{ display:grid; gap:24px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media(max-width:960px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:600px){ .grid-3, .grid-4{ grid-template-columns: 1fr; } }

.card{
  border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; background:#fff;
  box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; position:relative;
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 10px 24px rgba(15,81,50,.14); }
.card-img{ position:relative; height:190px; overflow:hidden; background:#eee; }
.card-img img{ width:100%; height:100%; object-fit:cover; }
.badge{ position:absolute; top:10px; left:10px; background:var(--accent); color:var(--text-dark); font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; text-transform:uppercase; }
.card-fav{ position:absolute; top:10px; right:10px; background:rgba(255,255,255,.9); border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; }
.card-body{ padding:16px; }
.card-price{ color:var(--primary); font-weight:800; font-size:19px; margin-bottom:4px; }
.card-title{ font-size:16px; font-weight:700; margin-bottom:4px; }
.card-loc{ color:var(--text-muted); font-size:13.5px; margin-bottom:10px; }
.card-feats{ display:flex; gap:14px; font-size:13px; color:var(--text-muted); border-top:1px solid var(--border); padding-top:10px; }
.card-feats span{ display:flex; align-items:center; gap:5px; }
.installment-tag{ margin-top:8px; font-size:12.5px; background: #eef6ef; color: var(--primary-dark); padding:6px 10px; border-radius:6px; font-weight:600; }

/* ==========================================================================
   LISTING PAGE (filters + grid)
   ========================================================================== */
.listing-layout{ display:grid; grid-template-columns: 280px 1fr; gap:30px; align-items:start; }
@media(max-width:900px){ .listing-layout{ grid-template-columns:1fr; } }
.filters{
  background:var(--bg-light); border:1px solid var(--border); border-radius:var(--radius); padding:20px; position:sticky; top:90px;
}
.filters h3{ font-size:16px; margin-bottom:14px; }
.filter-group{ margin-bottom:18px; }
.filter-group label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--text-muted); }
.filter-group select, .filter-group input{ width:100%; padding:10px; border-radius:8px; border:1px solid var(--border); font-size:13.5px; }
.filter-row{ display:flex; gap:8px; }
.listing-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:10px; }
.results-count{ color:var(--text-muted); font-size:14px; }
.pagination{ display:flex; gap:8px; justify-content:center; margin-top:36px; }
.pagination a, .pagination span{ padding:8px 14px; border:1px solid var(--border); border-radius:6px; font-size:14px; }
.pagination .current{ background:var(--primary); color:#fff; border-color:var(--primary); }

/* ==========================================================================
   SINGLE PROPERTY PAGE
   ========================================================================== */
.gallery-main{ border-radius: var(--radius); overflow:hidden; height:420px; background:#eee; margin-bottom:10px; }
.gallery-main img{ width:100%; height:100%; object-fit:cover; }
.gallery-thumbs{ display:flex; gap:8px; overflow-x:auto; }
.gallery-thumbs img{ width:90px; height:65px; object-fit:cover; border-radius:6px; cursor:pointer; border:2px solid transparent; }
.gallery-thumbs img.active{ border-color: var(--primary); }
.property-header{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin: 20px 0; }
.property-price{ font-size:28px; font-weight:800; color:var(--primary); }
.details-table{ width:100%; border-collapse:collapse; margin:20px 0; }
.details-table td{ padding:10px 12px; border:1px solid var(--border); font-size:14px; }
.details-table td:first-child{ background:var(--bg-light); font-weight:600; width:40%; }
.features-list{ display:grid; grid-template-columns: repeat(2,1fr); gap:10px; margin:20px 0; }
.features-list li{ font-size:14px; padding:8px 0; border-bottom:1px dashed var(--border); }
.agent-card{ border:1px solid var(--border); border-radius:var(--radius); padding:20px; text-align:center; box-shadow:var(--shadow); }
.agent-card img{ width:90px; height:90px; border-radius:50%; object-fit:cover; margin:0 auto 12px; }
.inquiry-form{ border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-top:20px; }
.inquiry-form input, .inquiry-form textarea{ width:100%; padding:11px; border:1px solid var(--border); border-radius:8px; margin-bottom:12px; font-size:14px; font-family:inherit; }
.map-embed{ border-radius:var(--radius); overflow:hidden; margin:20px 0; }
.map-embed iframe{ width:100%; height:320px; border:0; }
.sidebar-col{ position:sticky; top:90px; }
.property-layout{ display:grid; grid-template-columns: 1fr 340px; gap:34px; align-items:start; }
@media(max-width:960px){ .property-layout{ grid-template-columns:1fr; } }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonial-track{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type: x mandatory; padding-bottom:10px; }
.testimonial-card{ min-width:320px; scroll-snap-align:start; background:var(--bg-light); border-radius:var(--radius); padding:24px; border:1px solid var(--border); }
.testimonial-card .stars{ color:var(--accent); margin-bottom:8px; }
.testimonial-user{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.testimonial-user img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }

/* ==========================================================================
   TEXT CONTENT MODULE
   ========================================================================== */
.about-module{ background:var(--bg-light); border-radius: var(--radius); padding:40px; }

/* ==========================================================================
   AGENT / SOCIETY CARDS
   ========================================================================== */
.agent-grid-card{ text-align:center; padding:24px; }
.agent-grid-card img{ width:100px; height:100px; border-radius:50%; object-fit:cover; margin:0 auto 14px; }
.agent-grid-card .role{ color:var(--text-muted); font-size:13px; margin-bottom:10px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--primary-dark); color:#e6ede8; padding:50px 0 20px; margin-top:60px; }
.footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap:30px; }
@media(max-width:800px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.site-footer h4{ color:#fff; font-size:15px; margin-bottom:14px; }
.site-footer a{ color:#c9d6cf; font-size:14px; line-height:2.1; }
.site-footer a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:30px; padding-top:18px; font-size:13px; color:#a9bab1; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.social-icons{ display:flex; gap:10px; margin-top:10px; }
.social-icons a{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; }

/* ==========================================================================
   WHATSAPP FLOAT
   ========================================================================== */
.whatsapp-float{
  position:fixed; bottom:22px; right:22px; background:#25D366; width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.25); z-index:800; font-size:28px; color:#fff;
}

/* ==========================================================================
   BLOG
   ========================================================================== */
.blog-card .card-body p{ color:var(--text-muted); font-size:14px; }
.blog-single img{ border-radius: var(--radius); margin-bottom: 20px; }
.blog-single .entry-content{ font-size:16px; line-height:1.8; }

/* ==========================================================================
   MISC
   ========================================================================== */
.breadcrumb{ font-size:13px; color:var(--text-muted); margin: 18px 0; }
.breadcrumb a{ color:var(--primary); }
.empty-state{ text-align:center; padding:60px 20px; color:var(--text-muted); }