/* =========================================================================
   overlay/v1.css — v1/renderings variation
   Loaded after retrograde theme CSS so background-image rules win.

   IMPORTANT: scope rules to specific body classes when needed —
   .hero is shared by Home, About, and Build pages, so a global
   .hero {} rule with !important leaks across pages.
   ========================================================================= */

/* Home hero — only on home page (about + build also use .hero).
   60% from top keeps trees behind the nav (no bright sky, no house) while
   pulling the house + patio composition back up into view. */
body.home .hero {
  background-image: url('/wp-content/uploads/2025/05/priest_river_104_tx_daytime_v01_r.jpg?v=20260522h') !important;
  background-position: center 80% !important;
}

/* Nav underline on current page — HOME / ABOUT / BUILD YOUR RUMMER only.
   Skip .last-menu (CONTACT, already an outlined CTA button).
   text-decoration (vs border-bottom) avoids interacting with the theme's
   sibling-list-item borders that read as an overline. */
.menu > li.current-menu-item:not(.last-menu) > a,
.menu > li.current_page_item:not(.last-menu) > a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Home + About "Interested in Building a Rummer?" CTA bg.
   Live theme hides .cta-wrapper on body.build and body.contact, so this
   only affects home and about (which share the WP-default footercta.jpg).

   The new image is 3:2 (1536x1024), but the theme's section is wide-and-short
   (~2.35:1), so background-size: cover crops most of the house off.
   Force the section's aspect to match the image so the whole house always shows.
   min-height keeps mobile from going too short to fit the heading + button.  */
.cta-wrapper {
  background-image: url('/wp-content/uploads/2025/05/2_250407_Exterior_02_edited_tx_daytime_v01.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  aspect-ratio: 3 / 2;
  min-height: 480px;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}
