/*
Theme Name: Houzez Child
Theme URI: http://www.favethemes.com/
Author: Favethemes
Author URI: http://www.favethemes.com/
Description: Houzez is a premium WordPress theme for real estate agents where modern aesthetics are combined with tasteful simplicity, and where the ease of use is achieved without compromise in your ability to customise the design. Whether you are a real estate agent looking to build a website for your company or a web developer seeking a perfect WordPress theme for your next project, you are certain to appreciate the numerous features and benefits that our theme provides.
Version: 1.0
Tags: white, right-sidebar, left-sidebar, custom-colors, custom-menu, featured-images, post-formats, theme-options, translation-ready
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: houzez
Template: houzez
*/


@import url("../houzez/style.css");

/* Your CSS code goes here
-------------------------------------- */

/* ==========================================================================
   PropXpert brand: Navy/Sand palette + Fraunces/Inter, ported from the
   old propxpert-child-theme (Hello Elementor) homepage. Houzez's own
   theme CSS (imported above) already styles property cards, search,
   header/footer - this only covers the custom homepage sections
   (front-page.php) that Houzez has no native equivalent for.

   Production-only, like front-page.php - staging's copy of this file is
   still the stock Favethemes stub. Deliberate, see functions.php.
   ========================================================================== */

:root {
  --px-navy: #2C4A63;
  --px-sand: #F7F5F1;
  --px-sand-deep: #EFE9DF;
  --px-text: #1E2A38;
  --px-accent: #4A7196;
  --px-font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --px-font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
}

.px-hero h1,
.px-why h2,
.px-featured h2,
.px-areas h2,
.px-agent-info h2,
.px-reviews h2,
.px-contact h2 {
  font-family: var(--px-font-heading);
  font-weight: 600;
}

.px-section-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Hero */
.px-hero {
  position: relative;
  background: linear-gradient(150deg, var(--px-navy) 0%, var(--px-text) 100%);
  color: #fff;
  padding: 90px 24px 110px;
  text-align: center;
  overflow: hidden;
}
.px-hero-glow {
  position: absolute;
  top: -180px;
  right: -120px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(74, 113, 150, 0.45) 0%, rgba(74, 113, 150, 0) 70%);
  pointer-events: none;
}
.px-hero-inner {
  position: relative;
  z-index: 1;
}
.px-hero h1 {
  font-size: clamp(30px, 5vw, 48px);
  margin: 0 0 14px;
  color: #fff;
  letter-spacing: -0.01em;
}
.px-hero p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.82);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}
.px-hero-cta {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.px-btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.px-btn-primary {
  background: #fff;
  color: var(--px-navy);
}
.px-btn-primary:hover {
  transform: translateY(-2px);
  background: var(--px-sand);
}
.px-btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.px-btn-ghost:hover {
  transform: translateY(-2px);
  border-color: #fff;
}

/* Search panel - floats over the hero's bottom edge. Houzez's own
   [hz-advance-search] shortcode brings its own field/button styling
   from houzez/style.css - this just gives it the floating card frame. */
.px-search-wrap {
  max-width: 960px;
  margin: -56px auto 0;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}
.px-search-wrap .hz-advance-search-wrap,
.px-search-wrap .advance-search-wrap {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(30, 42, 56, 0.18);
}

/* Why PropXpert */
.px-why {
  background: #fff;
  padding: 84px 0;
}
.px-why h2 {
  font-size: 28px;
  color: var(--px-text);
  text-align: center;
  margin: 0 0 40px;
}
.px-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.px-why-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px 24px;
  box-shadow: 0 2px 12px rgba(30, 42, 56, 0.07);
  border: 1px solid #eef0f2;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.px-why-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(30, 42, 56, 0.1);
}
.px-why-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--px-sand);
  color: var(--px-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.px-why-icon svg {
  width: 22px;
  height: 22px;
}
.px-why-card h3 {
  font-size: 16px;
  color: var(--px-navy);
  margin: 0 0 10px;
  font-family: var(--px-font-body);
  font-weight: 600;
}
.px-why-card p {
  font-size: 13.5px;
  color: #55606f;
  line-height: 1.6;
  margin: 0;
}

/* Featured listings section - the cards themselves reuse Houzez's own
   template-parts/listing/item-v1.php + houzez/style.css, only this
   section chrome (heading, background band) is brand-specific. */
.px-featured {
  background: var(--px-sand);
  padding: 84px 0 70px;
}
.px-featured h2 {
  font-size: 28px;
  color: var(--px-text);
  text-align: center;
  margin: 0 0 8px;
}
.px-featured .px-sub {
  text-align: center;
  color: #6b7787;
  margin: 0 0 36px;
}
.px-last-updated {
  color: #9aa4b2;
  font-size: 12px;
}

/* Areas We Cover */
.px-areas {
  background: #fff;
  padding: 84px 0;
}
.px-areas h2 {
  font-size: 28px;
  color: var(--px-text);
  text-align: center;
  margin: 0 0 8px;
}
.px-areas .px-sub {
  text-align: center;
  color: #6b7787;
  margin: 0 0 30px;
}
.px-areas-subheading {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--px-navy);
  margin: 24px 0 12px;
}
.px-area-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.px-chip {
  background: var(--px-sand);
  color: var(--px-text);
  font-size: 12.5px;
  padding: 6px 14px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
.px-chip:hover {
  background: var(--px-navy);
  color: #fff;
}
.px-area-chips-popular {
  margin-bottom: 8px;
}
.px-chip-popular {
  background: var(--px-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.px-chip-popular:hover {
  background: var(--px-accent);
}
.px-chip-count {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
}
.px-areas-toggle {
  margin-top: 28px;
}
.px-areas-toggle summary {
  cursor: pointer;
  color: var(--px-accent);
  font-size: 13.5px;
  font-weight: 600;
  list-style: none;
}
.px-areas-toggle summary::-webkit-details-marker {
  display: none;
}
.px-areas-toggle summary::before {
  content: "+ ";
}
.px-areas-toggle[open] summary::before {
  content: "- ";
}
.px-areas-toggle summary:hover {
  color: var(--px-navy);
}

/* Agent credibility strip */
.px-agent {
  background: #fff;
  padding: 0 0 84px;
}
.px-agent-card {
  position: relative;
  background: linear-gradient(150deg, var(--px-navy) 0%, var(--px-text) 100%);
  border-radius: 16px;
  padding: 40px 36px;
  color: #fff;
  overflow: hidden;
}
.px-agent-monogram {
  position: absolute;
  right: -10px;
  bottom: -30px;
  font-family: var(--px-font-heading);
  font-size: 140px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.06);
  line-height: 1;
  pointer-events: none;
}
.px-agent-info {
  position: relative;
  z-index: 1;
}
.px-agent-info h2 {
  margin: 0 0 4px;
  font-size: 24px;
  color: #fff;
}
.px-agent-title {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--px-sand);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.px-agent-bio {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 640px;
}
.px-agent-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}
.px-agent-stat {
  display: flex;
  flex-direction: column;
}
.px-agent-stat-num {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.px-agent-stat-label {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 2px;
}

/* Google Reviews (Elfsight) */
.px-reviews {
  background: var(--px-sand);
  padding: 84px 0 70px;
}
.px-reviews h2 {
  font-size: 28px;
  color: var(--px-text);
  text-align: center;
  margin: 0 0 30px;
}

/* Contact */
.px-contact {
  background: #fff;
  padding: 84px 0;
}
.px-contact h2 {
  font-size: 28px;
  color: var(--px-text);
  text-align: center;
  margin: 0 0 40px;
}
.px-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.px-contact-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px 24px;
  box-shadow: 0 2px 12px rgba(30, 42, 56, 0.07);
  border: 1px solid #eef0f2;
}
.px-contact-card h3 {
  font-size: 16px;
  color: var(--px-navy);
  margin: 0 0 16px;
  font-family: var(--px-font-body);
  font-weight: 600;
}
.px-contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--px-text);
  text-decoration: none;
}
.px-contact-row:last-child {
  margin-bottom: 0;
}
.px-contact-row:hover {
  color: var(--px-navy);
}
.px-contact-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--px-sand);
  color: var(--px-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.px-contact-icon svg {
  width: 18px;
  height: 18px;
}
.px-contact-company p {
  color: #6b7787;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px;
}
.px-contact-link {
  color: var(--px-navy);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.px-contact-link:hover {
  text-decoration: underline;
}

/* Compliance disclosure footer (required by Malaysian real estate advertising rules) */
.px-compliance-footer {
  text-align: center;
  font-size: 12px;
  color: #8a94a3;
  padding: 16px 20px 28px;
  background: var(--px-sand);
}
.px-compliance-footer a {
  color: #8a94a3;
  text-decoration: underline;
}
.px-compliance-footer a:hover {
  color: var(--px-navy);
}