/*
Theme Name: Houzez Child
Theme URI: https://themeforest.net/item/houzez-real-estate-wordpress-theme/15752549
Description: Child theme for Houzez. Site CSS customizations live here so the parent stays update-safe. June 2026 maintenance project.
Author: Systical Agency
Template: houzez
Version: 1.0.1
Text Domain: houzez-child
*/

/* =========================================================================
   SITE CUSTOMIZATIONS (child theme) — Houzez 4.x mobile fixes + full-width
   single-row desktop header. The client's pre-existing Theme Options Custom
   CSS is preserved separately in Theme Options.
   ========================================================================= */
/* ===== MDH MOBILE FIXES — Houzez 4.x ===== */
@media (max-width: 991px) {
  #header-mobile { background:#ffffff !important; border-bottom:1px solid #e6e6e6; box-shadow:0 1px 6px rgba(0,0,0,.06); }
  #header-mobile .toggle-button-left, #header-mobile .toggle-button-right,
  #header-mobile .toggle-button-left i, #header-mobile .toggle-button-right i { color:#222 !important; }
  #header-mobile .toggle-button-left, #header-mobile .toggle-button-right { font-size:22px; }
  #header-mobile .logo-mobile img { max-height:42px !important; width:auto !important; }
  #header-mobile .header-mobile-center { text-align:center; }
  #header-mobile .header-mobile-right { display:flex; align-items:center; }
  #header-mobile .mdh-mobile-call { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:#d31045; color:#fff !important; text-decoration:none; margin-right:8px; }
  #header-mobile .mdh-mobile-call:hover { background:#b00d3a; color:#fff !important; }
  .vc_row.vc_custom_1776877855385 { padding-top:170px !important; padding-bottom:170px !important; background-position:center center !important; }
}
@media (max-width: 767px) {
  .vc_row.vc_custom_1776877855385 { padding-top:110px !important; padding-bottom:110px !important; }
  h1.vc_custom_heading, .vc_custom_heading h1 { font-size:30px !important; line-height:1.25 !important; }
  h2.vc_custom_heading, .vc_custom_heading h2 { font-size:26px !important; line-height:1.3 !important; }
  h3.vc_custom_heading, .vc_custom_heading h3 { font-size:20px !important; line-height:1.35 !important; }
  .vc_column_text, .vc_column_text p { font-size:16px; line-height:1.6; }
  .vc_row .wpb_column > .vc_column-inner { padding-left:14px; padding-right:14px; }
}
@media (max-width: 374px) {
  #header-mobile .logo-mobile img { max-height:34px !important; }
  h2.vc_custom_heading, .vc_custom_heading h2 { font-size:22px !important; }
}

/* ===== MDH DESKTOP HEADER — full-width + single row (Houzez 4.x header-v4) ===== */
@media (min-width: 992px) {
  /* Use the full viewport width instead of the 1170px boxed container */
  .header-main-wrap .top-bar-wrap > .container,
  .header-main-wrap .header-desktop > .container { max-width: 100% !important; padding-left: 40px !important; padding-right: 40px !important; }
}
@media (min-width: 1200px) {
  /* Keep logo + menu on ONE row: logo left, menu right (no wrap to a 2nd line) */
  .header-desktop .navbar { flex-wrap: nowrap !important; }
  .header-desktop .navbar > .logo,
  .header-desktop .navbar > .logo-splash { flex: 0 0 auto !important; margin-right: 32px; }
  .header-desktop .navbar > .main-nav { flex: 1 1 auto !important; min-width: 0; }
  .header-desktop .navbar .main-nav .navbar-nav { justify-content: flex-end !important; width: 100%; margin-left: auto; }
  .header-desktop .navbar > .login-register { flex: 0 0 auto !important; margin-left: 14px; }
  /* tighten menu spacing so all items fit comfortably on the row */
  .header-desktop .main-nav .navbar-nav > li > a { padding-left: 14px !important; padding-right: 14px !important; }
}


/* ===== CLIENT FEEDBACK FIXES (June 18, 2026) ===== */

/* (1) Homepage hero — eliminate the WPBakery stretch_row layout shift (CLS).
   The full_width="stretch_row" hero is boxed on first paint, then WPBakery JS
   stretches it to 100vw — a visible jump. Pre-apply the stretched geometry in
   CSS so the first paint is already full-width (no shift, better Core Web Vitals). */
.vc_row.vc_custom_1776877855385 {
  position: relative;
  left: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  margin-left: 0;
  margin-right: 0;
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  box-sizing: border-box;
}




/* ===== BLOG POSTS CAROUSEL — card design to match the reference ===== */
/* The theme's Slick instance for this carousel is inert (no usable API), so drive it
   as a native horizontal scroll-snap carousel; custom dots (plugin) control it. */
.blog-posts-slider-wrap .slick-list { overflow-x:auto !important; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; -ms-overflow-style:none; scrollbar-width:none; }
.blog-posts-slider-wrap .slick-list::-webkit-scrollbar { display:none; height:0; }
.blog-posts-slider-wrap .slick-track { transform:none !important; width:auto !important; display:flex !important; align-items:flex-start !important; }
.blog-posts-slider-wrap .slick-slide { float:none !important; scroll-snap-align:start; flex:0 0 25% !important; height:auto !important; }
@media (max-width:1199px){ .blog-posts-slider-wrap .slick-slide { flex:0 0 33.333% !important; } }
@media (max-width:991px){ .blog-posts-slider-wrap .slick-slide { flex:0 0 50% !important; } }
@media (max-width:575px){ .blog-posts-slider-wrap .slick-slide { flex:0 0 86% !important; } }
/* stop Slick's equal-height stretch so cards are natural height (like the reference) */

.blog-posts-slider-wrap .blog-post-item {
  background:#ffffff; border-radius:6px; overflow:hidden;
  box-shadow:0 3px 16px rgba(0,0,0,.08);
  margin:12px 10px 22px; height:auto !important;
}
.blog-posts-slider-wrap .blog-post-thumb { height:200px !important; flex:0 0 auto !important; margin:0; overflow:hidden; }
.blog-posts-slider-wrap .blog-post-thumb img { width:100%; height:200px; object-fit:cover; display:block; }
.blog-posts-slider-wrap .blog-post-content-wrap { flex:0 0 auto !important; padding:18px 22px 14px; }
.blog-posts-slider-wrap .blog-post-meta { color:#9aa0a6; }
.blog-posts-slider-wrap .blog-post-meta a { color:#00AEEF; }
.blog-posts-slider-wrap .blog-post-title h3 { font-size:18px; line-height:1.3; font-weight:700; margin:8px 0 10px; }
.blog-posts-slider-wrap .blog-post-title h3 a { color:#222222; }
.blog-posts-slider-wrap .blog-post-title h3 a:hover { color:#00AEEF; }
.blog-posts-slider-wrap .blog-post-body { color:#6b7280; font-size:14px; line-height:1.6; }
.blog-posts-slider-wrap .blog-post-link a { color:#00AEEF; font-weight:600; }
.blog-posts-slider-wrap .blog-post-link a::after { content:"\00A0\25B8"; }
/* native theme author (3rd child of the card) — divider + align with content padding */
.blog-posts-slider-wrap .blog-post-author { margin:0 22px; padding:14px 0 18px; border-top:1px solid #ededed; color:#9aa0a6; font-size:13px; }
.blog-posts-slider-wrap .blog-post-author .houzez-icon { margin-right:5px; }

/* carousel navigation dots (enabled by the companion plugin FIX 6) */
.blog-posts-slider-wrap .slick-dots { position:static !important; display:flex !important; justify-content:center; align-items:center; list-style:none; width:100%; padding:0; margin:24px 0 4px; gap:9px; }
.blog-posts-slider-wrap .slick-dots li { width:auto; height:auto; margin:0; }
.blog-posts-slider-wrap .slick-dots li button { width:11px; height:11px; padding:0; border-radius:50%; background:#cccccc; border:0; line-height:0; font-size:0; text-indent:-9999px; overflow:hidden; cursor:pointer; transition:background .2s; }
.blog-posts-slider-wrap .slick-dots li button:before { display:none !important; content:none !important; }
.blog-posts-slider-wrap .slick-dots li.slick-active button { background:#7a7a7a; }
.blog-posts-slider-wrap .slick-dots li button:hover { background:#9a9a9a; }

/* Homepage town boxes — match the live site exactly:
   no count labels; town name centered in the tile (italic 700 24px white Roboto);
   tile gap and 3-up grid as on midtowndirecthomes.com. */
.taxonomy-grids-module .taxonomy-subtitle { display: none !important; }
.taxonomy-grids-module .taxonomy-text-wrap {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: 12px !important;
}
.taxonomy-grids-module .taxonomy-title {
  font: italic 700 24px/26px "Roboto", sans-serif !important;
  color: #fff !important;
  text-transform: none !important;
  margin: 0 !important;
  letter-spacing: normal !important;
}
.taxonomy-grids-module .taxonomy-grids-module-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 30px !important; } /* 3-up at >=768 like live (theme drops to 2 at tablet) */
@media (max-width: 767px) {
  /* match live mobile: single column of wide short tiles (~360x138) */
  .taxonomy-grids-module .taxonomy-grids-module-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .taxonomy-grids-module .taxonomy-item { padding-bottom: 38% !important; }
  .taxonomy-grids-module .taxonomy-title { font-size: 18px !important; line-height: 1.3 !important; }
}