/* =====================================================================
   KLC Commercial Estates — official brand palette (from design mockup)
   Loaded AFTER theme.css and custome-style.css so it overrides them.
   Colour combination:
     #0D1B2A  Primary Navy   (Trust, Stability)
     #142D4C  Deep Blue      (Professionalism)
     #D4A017  Gold           (Premium, Success)
     #F4F6F8  Light Gray     (Clean Background)
     #1F2937  Charcoal       (Text, Contrast)
     #FFFFFF  White          (Purity, Simplicity)
   ===================================================================== */

:root{
  --klc-navy:#0D1B2A;
  --klc-blue:#142D4C;
  --klc-gold:#D4A017;
  --klc-gold-2:#b8890f;
  --klc-gray:#F4F6F8;
  --klc-charcoal:#1F2937;

  /* Remap the existing theme.css palette so inner pages follow the brand */
  --sand:#F4F6F8;
  --paper:#ffffff;
  --ink:#1F2937;
  --slate:#3b4657;
  --deep:#0D1B2A;
  --teal:#142D4C;
  --teal-2:#0D1B2A;
  --mint:#e6edf5;
  --orange:#D4A017;
  --orange-2:#b8890f;
}

body, body.listing-page{
  background:#0D1B2A !important;   /* Navy — dark body */
  color:#dbe2ee !important;        /* Light text on navy */
}

/* ---------------------------- HERO ---------------------------- */
.hx-hero{
  background:
    linear-gradient(115deg, rgba(13,27,42,0.94) 0%, rgba(20,45,76,0.80) 50%, rgba(13,27,42,0.90) 100%),
    url(https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070) !important;
  background-size:cover !important;
  background-position:center !important;
  height:auto !important;
  min-height:640px !important;
  overflow:visible !important;
  padding-bottom:80px !important;
}

.hx-topbar{
  background:#0D1B2A !important;
  border-bottom:1px solid rgba(212,160,23,0.25) !important;
}

/* Transparent dark-mode logo — no white box, sits right on the navy */
.hx-logo{ background:transparent !important; padding:0 !important; box-shadow:none !important; }
.hx-logo img{ height:66px !important; width:auto !important; display:block; }
.ap-footer-logo{ height:54px !important; width:auto !important; }

.hx-menu a{ color:#f5f7fa !important; font-weight:600 !important; }
.hx-menu a:hover{ color:#D4A017 !important; opacity:1 !important; }

.hx-contact{
  background:transparent !important;
  border:1px solid #D4A017 !important;
  border-radius:999px !important;
}
.hx-contact i{ color:#D4A017 !important; }
.hx-contact span{ color:#ffffff !important; }

.hx-social a{
  background:rgba(255,255,255,0.08) !important;
  color:#D4A017 !important;
  border:1px solid rgba(212,160,23,0.35) !important;
}
.hx-social a:hover{ background:#D4A017 !important; color:#0D1B2A !important; border-color:#D4A017 !important; }

.hx-content{ text-align:left !important; }
.hx-content h1{ color:#ffffff !important; }
.hx-content p{ color:#d5deea !important; }

/* Gold eyebrow */
.hx-eyebrow{
  display:inline-block;
  color:#D4A017;
  font-weight:700;
  letter-spacing:.18em;
  font-size:13px;
  text-transform:uppercase;
  margin-bottom:16px;
}

/* Hero CTA buttons */
.hx-cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; }
.hx-cta{
  display:inline-flex; align-items:center; gap:10px;
  height:52px; padding:0 26px; border-radius:8px;
  font-weight:700; font-size:15px; cursor:pointer;
  border:1px solid transparent; transition:.25s;
}
.hx-cta-gold{ background:#D4A017; color:#0D1B2A; }
.hx-cta-gold:hover{ background:#b8890f; }
.hx-cta-outline{ background:transparent; color:#ffffff; border-color:rgba(255,255,255,0.55); }
.hx-cta-outline:hover{ border-color:#D4A017; color:#D4A017; }

/* Search box + tabs */
.hx-search-box{ background:#ffffff !important; }
.hx-search-btn{ background:#0D1B2A !important; color:#ffffff !important; font-weight:700 !important; }
.hx-search-btn:hover{ background:#142D4C !important; }
.hx-tab.active{ color:#0D1B2A !important; border-bottom:3px solid #D4A017 !important; padding-bottom:6px !important; }
.hxPopularBtn:hover{ border-color:#D4A017 !important; color:#0D1B2A !important; }

/* ----------------------- FEATURE STRIP ----------------------- */
.klc-features{
  max-width:1180px; margin:-40px auto 0; position:relative; z-index:30;
  background:#ffffff; border-radius:14px;
  box-shadow:0 22px 55px -32px rgba(13,27,42,.55);
  display:grid; grid-template-columns:repeat(4,1fr);
  padding:26px 8px;
}
.klc-feature{ display:flex; gap:14px; align-items:flex-start; padding:8px 22px; border-right:1px solid #eef1f5; }
.klc-feature:last-child{ border-right:none; }
.klc-feature .kf-ic{
  flex:0 0 auto; width:42px; height:42px; border-radius:10px;
  background:#0D1B2A; color:#D4A017; display:flex; align-items:center; justify-content:center; font-size:18px;
}
.klc-feature h4{ font-size:15px; color:#0D1B2A; margin:0 0 4px; font-weight:700; }
.klc-feature p{ font-size:12.5px; color:#6b7684; margin:0; line-height:1.45; }
@media(max-width:900px){ .klc-features{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){
  .klc-features{ grid-template-columns:1fr; }
  .klc-feature{ border-right:none; border-bottom:1px solid #eef1f5; }
  .klc-feature:last-child{ border-bottom:none; }
}

/* --------------------- MONTHLY TOP PICKS --------------------- */
.htp-section{ background:#F4F6F8 !important; }
.htp-tab.active img{ border-color:#D4A017 !important; }

/* ------------------------- FOOTER --------------------------- */
.ap-footer{ background:#0D1B2A !important; }
.ap-footer h3{ color:#D4A017 !important; }
.ap-footer-social a:hover{ background:#D4A017 !important; color:#0D1B2A !important; }
.ap-footer a:hover{ color:#D4A017 !important; }
.ap-footer-bottom{ border-top:1px solid rgba(212,160,23,0.2) !important; }

/* -------------- INNER-PAGE ACCENTS (about/contact/guide) -------------- */
.au-btn, button.au-btn, .contact-btn, .contact-form button,
.gp-cta, .btn-primary{
  background:#0D1B2A !important; color:#ffffff !important; border-color:#0D1B2A !important;
}
.au-btn:hover, button.au-btn:hover, .contact-btn:hover, .contact-form button:hover{
  background:#142D4C !important;
}

/* ---------------- INNER-PAGE HERO BANNERS ---------------- */
/* about-us + guide + contact all use .au-hero (contact-hero kept for safety) */
.au-hero, .contact-hero{
  background:
    linear-gradient(115deg, rgba(13,27,42,0.94) 0%, rgba(20,45,76,0.82) 55%, rgba(13,27,42,0.90) 100%),
    url(https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070) !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
.au-hero-content, .au-hero h1, .au-hero p,
.contact-hero, .contact-hero h1, .contact-hero p{ color:#ffffff !important; }
.au-hero p, .contact-hero p{ color:#d5deea !important; }

/* Feature icon chips -> navy square with gold icon */
.au-icon{ background:#0D1B2A !important; }
.au-icon i, .au-icon svg{ color:#D4A017 !important; fill:#D4A017 !important; }
.au-feature h3{ color:#0D1B2A !important; }

/* Headings inside WHITE cards stay navy (au-right, contact card) */
.au-right h2, .contact-left h2, .contact-title{ color:#0D1B2A !important; }

/* ---------------- DARK BODY: light text on the navy body ---------------- */
/* Light-gray sections become transparent so the navy body shows through */
.htp-section{ background:transparent !important; }

/* Main on-body content (about + guide use .au-left) -> light */
.au-left h2, .au-section > .au-container > .au-left h2{ color:#ffffff !important; }
.au-left p, .au-left li{ color:#d3dbe8 !important; }
.au-left strong, .au-left b{ color:#ffffff !important; }

/* Homepage "Monthly top picks" heading + subtitle -> light */
.htp-top h2{ color:#ffffff !important; }
.htp-top p{ color:#c7d0de !important; }

/* =========================================================
   Keep text DARK inside the WHITE cards (they sit on the navy body).
   Placed last so it overrides the light on-body text rules.
   ========================================================= */
.au-feature, .au-feature h2, .au-feature h3, .au-feature h4, .au-feature p, .au-feature li, .au-feature span,
.au-right, .au-right h2, .au-right h3, .au-right h4, .au-right p, .au-right li, .au-right span,
.au-contact-item, .au-contact-item span,
.contact-form-box, .contact-form-box h2, .contact-form-box h3, .contact-form-box p, .contact-form-box label, .contact-form-box span,
.contact-right, .contact-info, .contact-info h2, .contact-info h3, .contact-info p, .contact-info span,
.contact-item, .contact-item span,
.hx-search-box, .hx-search-box h2, .hx-search-box p, .hx-search-box span, .hx-search-box input{
  color:#1F2937 !important;
}
/* Section titles inside white cards -> navy for emphasis */
.au-right h2, .au-right h3, .contact-form-box h2, .contact-info h2{ color:#0D1B2A !important; }
/* Buttons inside cards keep white text (navy buttons) */
.au-btn, button.au-btn, .contact-btn, .contact-form button, .gp-cta, .btn-primary{ color:#ffffff !important; }

/* =========================================================
   Reduce overall content width (narrower, centered) — main pages only.
   Adjust the 1120px value up/down to taste.
   ========================================================= */
.hx-content{ max-width:1120px !important; }
.hx-search-box{ max-width:880px !important; }
.au-container,
.contact-container,
.ap-footer-container,
.klc-features,
.htp-top,
.htp-main,
.page{
  max-width:1120px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}