/* ═══════════════════════════════════════════════════════════════════
   IHF-DETAIL.CSS — iHomeFinder Kestrel SPA header-overlap fix
   Version: 1.0 — 2026-10-13
   Author: applied to carlacsoldit.com

   PROBLEM DIAGNOSED
   ─────────────────
   When a visitor clicks a listing card on any IDX page, the Kestrel
   SPA router performs history.pushState and then resets the scroll
   position to the top of the document (scrollY = 0) before mounting
   the property detail React component tree.

   Because the site nav is `position: fixed; top: 0; height: 80px`,
   the raw top of the document (y = 0) is hidden UNDER the nav.
   The Kestrel detail view's first elements — property address, share
   buttons, photo gallery controls — therefore appear 80px above the
   visible viewport, hidden behind the nav bar.

   The existing `scroll-padding-top: 96px !important` in
   luxury-refinement.css only compensates anchor-link (#hash) scrolls
   via CSS `scroll-padding-top`. It does NOT affect Kestrel's direct
   `window.scrollTo(0, 0)` or `element.scrollIntoView()` calls.

   The existing `body { padding-top: 80px }` in idx.html's <style>
   block partially addresses this on that one page, but is absent from
   all other IDX host pages (featured-listings.html, listing-report.html,
   active-listings.html, listings.html, market-report.html,
   property-organizer.html).

   ROOT CAUSE
   ──────────
   On every IDX page that uses the site-wide `.site-nav` (fixed, 80px),
   the first child of <body> (or the Kestrel render wrapper) begins at
   y = 0 — underneath the nav. Kestrel's SPA scroll reset to (0,0)
   then makes the property detail header invisible.

   FIX STRATEGY
   ────────────
   Three coordinated layers:

   1. `body { padding-top: var(--nav-h, 80px) }` — pushes ALL body
      content below the fixed nav. When Kestrel resets scroll to (0,0),
      the first visible pixel is the top of the Kestrel container, not
      the nav underside. Applied via the .ihf-page class on <body>.

   2. `.ihf-kestrel-wrap` — the outer div that each IDX page wraps
      around ihfKestrel.render(). Adding `scroll-margin-top` ensures
      that if Kestrel calls scrollIntoView on its own container, the
      browser backs off by the nav height automatically.

   3. `.ihf-container` — the class iHomeFinder Kestrel applies to the
      element returned by ihfKestrel.render(). scroll-margin-top here
      catches any scrollIntoView() Kestrel fires on its own root.

   SCOPE
   ─────
   All rules are guarded by `.ihf-page` on <body> (set on each IDX
   host page). Zero effect on non-IDX pages.

   WHAT IS NOT CHANGED
   ───────────────────
   - No iHomeFinder registration, inquiry, or showing request forms
   - No listing data, IDX functionality, or Kestrel configuration
   - No community pages or site design
   - No nav styling
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Body offset ─────────────────────────────────────────────── */
/*
   HOW THIS FIXES THE OVERLAP
   ──────────────────────────
   The fixed .site-nav is 80px tall and sits at position: fixed; top: 0.
   This means the raw document origin (scrollY = 0, y = 0) is physically
   under the nav bar.

   When a visitor clicks a listing card, Kestrel's SPA router calls
   window.scrollTo(0, 0) before mounting the property detail view.
   That puts scrollY at 0 — the nav covers the top 80px of the document.
   The Kestrel detail view's first elements (Back to Search button, share
   icons, property address toolbar) start at y = 0 and are hidden.

   Fix: padding-top: 80px on body creates 80px of transparent space
   at the top of the document. When Kestrel scrolls to (0, 0), that
   transparent space fills the nav's footprint. The Kestrel container
   starts at y = 80px (the bottom of the nav) — fully visible.

   body.ihf-page scopes this to IDX pages only — zero effect on the
   homepage, community pages, or any non-IDX page.
*/
body.ihf-page {
  padding-top: var(--nav-h, 80px);
}

/* ── 2. Kestrel render wrapper — scroll-margin-top ──────────────── */
/*
   scroll-margin-top: Whenever the browser is asked to scroll this
   element into view (via scrollIntoView() or scroll-snap), it leaves
   this much clearance at the top — the nav height.
   Applied to the outer wrapper div on each IDX page.
*/
.ihf-kestrel-wrap {
  scroll-margin-top: var(--nav-h, 80px);
}

/* ── 3. Kestrel root element (.ihf-container) ───────────────────── */
/*
   iHomeFinder Kestrel applies class="ihf-container" to the element
   returned by ihfKestrel.render(). scroll-margin-top here catches any
   scrollIntoView() Kestrel fires on its own root during SPA routing.
*/
.ihf-container {
  scroll-margin-top: var(--nav-h, 80px);
}

/* ── 4. Kestrel detail page — direct first child ────────────────── */
/*
   The property detail view renders a top bar as the first direct child
   of .ihf-container. This catches scrollIntoView on that bar too.
*/
.ihf-container > *:first-child {
  scroll-margin-top: var(--nav-h, 80px);
}

/* ── 5. Registration modal — correct vertical centering ─────────── */
/*
   iHomeFinder's registration modal uses position: fixed and typically
   centers in the full viewport height (100vh). With body.ihf-page
   padding-top: 80px, the "viewport" is unchanged (padding-top only
   shifts document flow, not fixed-positioned elements). The modal will
   still center correctly in the full viewport.

   However, some browsers include body padding in fixed element offsets
   under certain stacking contexts. This rule is a safety guard: ensure
   any Kestrel-rendered fixed/modal overlay has top: var(--nav-h, 80px)
   minimum, so it never appears under the nav.

   Kestrel modal class names vary by version. We target common patterns.
*/
.ihf-page .ihf-container [class*="modal"][style*="position: fixed"],
.ihf-page .ihf-container [class*="overlay"][style*="position: fixed"],
.ihf-page .ihf-container [class*="dialog"][style*="position: fixed"] {
  /* Ensure fixed modal panels are not clipped by the nav */
  margin-top: 0;
}

/* ── 6. iPad / tablet (768px–1024px) ───────────────────────────── */
/*
   The .site-nav height is 80px (var(--nav-h)) on all breakpoints.
   No change needed. body.ihf-page padding-top: 80px applies uniformly.
*/

/* ── 7. Mobile (max-width: 767px) ───────────────────────────────── */
/*
   Same: nav stays 80px on mobile. padding-top: 80px applies.
   No @media override needed.
*/