/* =============================
   WB Homes — style.css (final)
   Responsive + mobile-nav safety rules
   Replace existing file: assets/css/style.css
   ============================= */

/* -------- Theme variables -------- */
:root{
  --accent: #e53b48;
  --accent-2: #ff7b7b;
  --nav-text: #0f2a36;
  --muted: #6b7680;
  --dark: #0f2a36;
  --bg: #f3f6f8;
  --card-shadow: 0 10px 30px rgba(20,30,40,0.06);
  --radius: 12px;
  --header-height: 72px;
  --container-max: 1200px;
}

/* -------- Reset & Base -------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }
body {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #222; line-height: 1.6; background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* -------- Buttons -------- */
.btn-primary {
  background: linear-gradient(90deg,var(--accent), var(--accent-2));
  color: #fff; padding: 12px 26px; border-radius: 999px; font-weight:700;
  display:inline-flex; align-items:center; gap:10px; border:0; cursor:pointer;
  box-shadow: 0 10px 30px rgba(229,61,76,0.12); transition: transform .14s ease, box-shadow .14s ease;
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 46px rgba(229,61,76,0.12); }
.btn-secondary { background: var(--dark); color:#fff; padding:10px 14px; border-radius:10px; font-weight:600; border:0; }

/* -------- Header (Left logo | Right nav) -------- */
.header {
  position: fixed; left:0; right:0; top:0; z-index:1200;
  background: rgba(255,255,255,0.95); border-bottom:1px solid rgba(12,18,24,0.04);
  box-shadow: 0 8px 28px rgba(10,18,28,0.04); backdrop-filter: blur(4px);
}
.header-inner {
  height: var(--header-height); display:flex; align-items:center; gap:18px;
  padding:8px 20px; max-width:var(--container-max); margin:0 auto; justify-content:flex-start;
}
.header-left { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.header-nav { display:flex; align-items:center; gap:12px; flex:0 1 auto; }
.header-right{ display:flex; align-items:center; gap:12px; margin-left:auto; flex:0 0 auto; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo-mark {
  width:46px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#143a57,#1d4f78); color:#fff; font-weight:800; border-radius:8px;
  box-shadow:0 8px 20px rgba(32,58,96,0.08); font-size:0.98rem;
}
.logo-text { color:var(--nav-text); font-weight:800; font-size:1.02rem; letter-spacing:-0.2px; }
.nav-list { display:flex; gap:22px; align-items:center; margin:0; padding:0; }
.nav-link { color:var(--nav-text); font-weight:600; padding:8px 12px; border-radius:8px; display:inline-block; position:relative; transition: color .12s ease, transform .12s ease, background .12s ease; }
.nav-link:hover { color:var(--accent); transform: translateY(-2px); background: rgba(229,61,76,0.03); }
.nav-link.active { color:var(--accent); }
.nav-link.active::after {
  content:""; position:absolute; left:12%; right:12%; bottom:-12px; height:3px;
  background: linear-gradient(90deg,var(--accent), var(--accent-2)); border-radius:3px;
}
.contact-pill { display:none !important; }

/* hamburger (mobile) */
.hamburger { display:none; width:46px; height:38px; align-items:center; justify-content:center; border:0; background:transparent; cursor:pointer; }
.hamburger .bar { width:22px; height:3px; background:#22313a; border-radius:3px; margin:3px 0; transition: all .18s ease; }
.hamburger.open .bar1 { transform: translateY(6px) rotate(45deg); }
.hamburger.open .bar2 { opacity:0; transform: scaleX(0); }
.hamburger.open .bar3 { transform: translateY(-6px) rotate(-45deg); }

/* avoid header overlap */
main, .hero, .search-section { margin-top: calc(var(--header-height) + 8px); }

/* -------- Hero -------- */
.hero {
  width:100%; min-height:72vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:60px 20px;
  color:#fff; background:
    linear-gradient(180deg, rgba(7,18,30,0.72), rgba(7,18,30,0.82)),
    radial-gradient(1200px 400px at 10% 10%, rgba(255,255,255,0.02), transparent 15%),
    repeating-linear-gradient(to right, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 1px, rgba(255,255,255,0.00) 1px, rgba(255,255,255,0.00) 70px);
  background-color:#071422; border-bottom:1px solid rgba(255,255,255,0.02); box-shadow: inset 0 60px 120px rgba(2,9,18,0.22);
}
.hero-content { max-width:920px; padding:20px; }
.hero h1 { font-size:3rem; font-weight:800; letter-spacing:-0.6px; margin-bottom:14px; color:#fff; text-shadow: 0 6px 24px rgba(2,9,18,0.65); }
.hero p { color: rgba(255,255,255,0.9); font-size:1.05rem; margin-bottom:26px; }

/* -------- Search Section -------- */
.search-section { padding:36px 0; background: linear-gradient(180deg,#f8fbfc,#f3f6f8); }
.search-form {
  background:#fff; padding:18px; border-radius:14px; box-shadow:var(--card-shadow);
  display:grid; grid-template-columns: 1fr 220px 160px 140px; gap:12px; align-items:center;
}
.search-form input, .search-form select { padding:12px; border-radius:10px; border:1px solid #e7eef6; outline:none; font-size:0.95rem; }
.search-form button { justify-self:end; }

/* compact on very small screens */
@media (max-width: 420px) { .search-form { grid-template-columns: 1fr; padding:14px; gap:10px; } }

/* -------- Featured Properties -------- */
.featured { padding:56px 0; }
.section-title { text-align:center; font-size:1.95rem; color:var(--dark); margin-bottom:30px; font-weight:700; }
.property-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.property-card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:var(--card-shadow); position:relative; }
.property-card img { width:100%; height:220px; object-fit:cover; background: linear-gradient(180deg,#e9eef5,#f3f6f8); }
.badge { position:absolute; top:12px; left:12px; background:var(--accent); color:#fff; padding:6px 12px; border-radius:20px; font-size:.86rem; box-shadow:0 8px 22px rgba(229,61,76,0.12); }
.property-info { padding:16px; }
.price { color:var(--accent); font-weight:700; margin:10px 0; font-size:1.08rem; }
.features { display:flex; gap:12px; color:#54626a; font-size:.95rem; flex-wrap:wrap; }

/* footer / why choose styles kept same as before */
.why-choose { background: linear-gradient(180deg,#0f2a36,#09202a); color:#fff; padding:64px 0; text-align:center; }
.why-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:20px; max-width:1100px; margin:20px auto 0; }
.why-item i { color:var(--accent); margin-bottom:10px; font-size:28px; }
.footer { background:#07080a; color:#cfd8dd; padding:44px 0 24px; }
.footer-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; align-items:start; }
.footer a { color:#cfd8dd; display:block; margin:6px 0; }

/* -------- Responsive original breakpoints -------- */
@media (max-width: 1100px) { .property-grid { grid-template-columns: repeat(2,1fr); } .hero h1 { font-size:2.6rem; } }
@media (max-width: 900px) { .nav-list { gap:14px; } .logo-text { font-size:0.98rem; } .hero h1 { font-size:2.2rem; } }

/* show hamburger and setup mobile-nav structure */
@media (max-width: 768px) {
  .header-inner { padding:6px 14px; height:64px; }
  .nav-list { display:none; }
  .hamburger { display:flex; }
  .header-right { margin-left:auto; }
}

/* extra small */
@media (max-width: 420px) { .hero h1 { font-size:1.8rem; } .hero p { font-size:.98rem; } .property-card img { height:160px; } }

/* Accessibility */
a:focus, button:focus { outline: 3px solid rgba(229,61,76,0.12); outline-offset: 2px; border-radius: 8px; }
.sr-only { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ===== Mobile-nav safety & improved responsiveness ===== */

/* Default: keep mobile-nav hidden on all screens (safety) */
.mobile-nav {
  display: none !important;
  right: -100% !important;
  top: 0 !important;
  visibility: hidden !important;
  opacity: 0;
  transition: right .28s cubic-bezier(.22,.9,.34,1), opacity .18s ease;
}

/* enable mobile-nav only on small screens */
@media (max-width: 768px) {
  .mobile-nav {
    display: block !important;
    position: fixed;
    top: calc(var(--header-height));
    right: -100%;
    width: 84%;
    height: calc(100vh - var(--header-height));
    background: #fff;
    z-index: 1400;
    padding: 20px;
    box-shadow: -8px 0 30px rgba(12,20,30,0.08);
    overflow:auto;
    visibility: visible;
    opacity: 1;
  }
  .mobile-nav.show { right: 0 !important; }
  .mobile-nav .nav-link { color: var(--nav-text); font-size: 1.05rem; padding: 12px 6px; border-radius: 8px; display:block; }
}

/* Extra safety: explicitly hide stray .show on wide screens */
@media (min-width: 769px) {
  .mobile-nav.show { right: -100% !important; visibility: hidden !important; display:none !important; opacity:0 !important; }
}

/* Force single column earlier for property grid on medium devices */
@media (max-width: 1000px) { .property-grid { grid-template-columns: repeat(2,1fr); gap:16px; } }
@media (max-width: 680px) { .property-grid { grid-template-columns: 1fr; } }

/* Make hero more adaptive */
.hero { min-height: 56vh; padding: 48px 16px; }
@media (max-width: 680px) { .hero { min-height:48vh; padding:36px 12px; } .hero h1 { font-size:1.8rem; line-height:1.15; } .hero p { font-size:.98rem; } }

/* Search form stacks earlier */
@media (max-width: 760px) { .search-form { grid-template-columns:1fr; gap:10px; padding:12px; } .search-form button { justify-self:stretch; width:100%; } }

/* Card image responsiveness */
.property-card img { height:200px; object-fit:cover; }
@media (max-width:420px) { .property-card img { height:160px; } }

/* small-screen container padding tweak */
@media (max-width:420px) { .container { padding: 0 12px; } }

/* ensure header inner wraps on small screens */
.header-inner { flex-wrap: wrap; }
.header-left { flex: 0 1 auto; }
.header-right { margin-left: auto; }

/* End of file */
/* ===== FINAL: Mobile/nav emergency safety & stray-list remover (end of stylesheet) ===== */

/* Hide any accidental bare lists at top of body by default */
body > ul:first-child,
body > ol:first-child,
body > nav:first-child > ul:first-child {
  display: none !important;
}

/* Keep mobile-nav hidden by default (safety) */
.mobile-nav, #mobileNav {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  right: -100% !important;
  pointer-events: none !important;
}

/* Desktop: always show horizontal nav, hide hamburger */
@media (min-width: 769px) {
  .nav-list { display: flex !important; visibility: visible !important; opacity: 1 !important; }
  .hamburger { display: none !important; }
  .mobile-nav, #mobileNav { display: none !important; visibility: hidden !important; opacity: 0 !important; }
}

/* Mobile: enable mobile nav (CSS controls .show state) */
@media (max-width: 768px) {
  .nav-list { display: none !important; } /* desktop nav hidden on small screens */
  .hamburger { display: flex !important; } /* show hamburger */
  .mobile-nav, #mobileNav {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed;
    top: calc(var(--header-height));
    right: -100%;
    width: 84%;
    height: calc(100vh - var(--header-height));
    background: #fff;
    z-index: 1400;
    padding: 20px;
    box-shadow: -8px 0 30px rgba(12,20,30,0.08);
    overflow:auto;
    transition: right .28s cubic-bezier(.22,.9,.34,1), opacity .18s ease;
    pointer-events: auto !important;
  }
  .mobile-nav.show, #mobileNav.show { right: 0 !important; }
  .mobile-nav ul, #mobileNav ul { padding:0; margin:0; }
  .mobile-nav ul li, #mobileNav ul li { margin:8px 0; }
  .mobile-nav .nav-link, #mobileNav .nav-link { display:block; padding:12px 6px; color:var(--nav-text); font-weight:600; }
}