/**
 * Lane S — DP-HOMEPAGE-CLS-INVESTIGATION (Chairman R-D 2026-05-23)
 *
 * Diagnosis (Lighthouse mobile, 2nd run, 2026-05-23):
 *   Single homepage layout shift, score 0.1386, on Elementor container
 *   .elementor-element-56791ccc — the hero Houzez search form (location
 *   autocomplete + MLS# + Search button). The container hydrates with
 *   Google Maps autocomplete JS attached to .location-search; its rendered
 *   height grows after JS runs.
 *
 * Fix: reserve min-height on the search-form container BEFORE JS hydrates.
 *   Measured rendered height on mobile is ~62-70px (single form row).
 *   We reserve 72px on viewport <=768px and 64px on >=769px.
 *
 * Reversibility: delete this file + remove enqueue from functions.php.
 * Author: Lane S (Substrate) — AI Documentation Mandate v1.1
 */

/* Homepage hero search container — reserve vertical space pre-hydrate */
.elementor-element-56791ccc {
    min-height: 72px;
}
.elementor-element-56791ccc .houzez-search-builder-wrapper {
    min-height: 64px;
}
.elementor-element-56791ccc .houzez-ele-search-form-wrapper {
    min-height: 56px;
}

@media (min-width: 769px) {
    .elementor-element-56791ccc {
        min-height: 64px;
    }
}

/* Defensive: keep the hero search-form children from collapsing during
 * the autocomplete-init micro-task that triggers the CLS regression. */
.elementor-element-56791ccc .location-search {
    min-height: 40px;
}

/* ROOT CAUSE PIN (post-investigation): Lighthouse subItems revealed the
 * actual layout shift is caused by the header logo IMG (wp-image-9402809,
 * "MBB_WebHeader" 1024x381) collapsing before its srcset resolves, which
 * pushes the hero search container down by ~187px on first paint.
 *
 * The IMG has width/height attributes but srcset="" — empty srcset prevents
 * Chromium from auto-deriving aspect-ratio. Force it via CSS. */
img.wp-image-9402809,
header img.attachment-large.size-large {
    aspect-ratio: 1024 / 381;
    height: auto;
}

/* Header logo reservation: the parent <a>/<div> chain in the header sets
 * the slot — give the logo container an explicit min-height equal to its
 * rendered height on mobile (~83px). */
header .elementor-widget-image,
header .elementor-widget-theme-site-logo {
    min-height: 83px;
}