/*
 * Minimal, explicit patches on top of the self-hosted original CSS/JS.
 * Loaded last so it can override the mirrored CSS where needed.
 *
 * (Previously this file contained CSS-only workarounds for JetElements'
 * Slider Pro and Slick carousel widgets not initializing -- that turned out
 * to be caused by RawLayout.astro double-loading every plugin script, which
 * broke Elementor's `frontend/element_ready` hook dispatch for the whole
 * page. With the duplicate script tags removed, those widgets' own JS
 * initializes correctly, so the workarounds are gone too.)
 *
 * The one widget that's genuinely gone for good is the original "Simple
 * Weather" plugin: it rendered via Vue.js fed by a WordPress REST proxy to
 * a keyed weather API, neither of which exist on a static host. It's
 * replaced in the fragment (see src/fragments/home.html) with a static
 * markup + a small inline script hitting the free, keyless Open-Meteo API
 * directly from the browser. These rules make that replacement match the
 * black top bar's existing icon-list styling instead of using the (now
 * unused) simple-weather plugin CSS.
 */
.simple-weather-static {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: inherit;
  font-family: inherit;
  justify-content: flex-end;
}
.simple-weather-static__temp {
  font-style: normal;
  font-weight: 700;
}

/*
 * Amenities page "Cabana Rentals" row: the source photo is a portrait
 * phone shot (775x1086), but every other amenity row uses a landscape
 * photo, and Elementor's flex columns stretch both halves of a row to
 * equal height. With no crop, the portrait image forced the whole row
 * to be much taller than the short text block next to it, leaving a
 * huge empty gap -- on both desktop and mobile. Cropping to the same
 * landscape ratio the other rows use fixes it everywhere at once, no
 * separate mobile rule needed. The vertical offset is tuned to keep the
 * cabanas themselves (the row's actual subject, roughly the middle third
 * of the frame) in view rather than the sky/rooftop above them or too
 * much pool water below.
 */
.elementor-element-cabanaimgw img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 70%;
  display: block;
}

/*
 * Every other amenity row's heading and text-column on this page carries
 * page-specific Elementor CSS keyed to that widget's own unique ID (e.g.
 * .elementor-element-118110b .elementor-heading-title{font-size:30px...},
 * .elementor-element-20a0abd > .elementor-element-populated{padding:6% 0%
 * 0% 11%}) -- generated when each row was built in the original page
 * builder. New widgets get none of that automatically, so the Cabana
 * heading fell back to a much larger default size and the text column
 * had no left/top padding, closing the gap against the image entirely.
 * Copied the exact values from the other rows' own widget IDs so this
 * row matches them, not approximated ones.
 */
.elementor-element-cabanahead .elementor-heading-title {
  color: #000000;
  font-family: "Pathway Gothic One", Sans-serif;
  font-size: 30px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.1em;
  letter-spacing: -0.6px;
  /* Every sibling row's heading gets this same 40px margin-top from a
     sitewide default, but it's visually hidden there: each of those
     rows is paired with a second amenity, and when the paired column's
     content is taller, the shorter side's image gets vertically
     centered within the extra height, pushing the image down into
     that 40px instead of it showing as a gap. Cabana has no pairing
     partner, so its image starts at the true row top with nothing to
     center into, and the same 40px is fully exposed as a visible gap
     above the heading. Tightened it here since there's no natural fix
     for the underlying cause on an unpaired row. */
  margin-top: 4px !important;
}
.elementor-element-cabanatxtcol > .elementor-element-populated {
  padding: 6% 0% 0% 11% !important;
}
@media (max-width: 1024px) {
  .elementor-element-cabanatxtcol > .elementor-element-populated {
    padding: 30px 0 0 0 !important;
  }
}
@media (max-width: 767px) {
  .elementor-element-cabanatxtcol > .elementor-element-populated {
    padding: 10px 0 0 0 !important;
  }
}

/*
 * A second, separate per-widget rule exists on every other row: the OUTER
 * top-level column (wrapping the whole image+text pair, not just the text
 * sub-column above) also carries its own small side padding, e.g.
 * .elementor-element-0910bfc > .elementor-element-populated{padding:0px
 * 15px 0px 10px} at desktop, widening to 15px both sides at <=1024px. At
 * desktop this only shows up as a few missing px; at mobile, where columns
 * stack to full width, it's the ENTIRE left/right page gutter -- without
 * it the Cabana row's text sat flush against both screen edges while
 * every other row's text had a visible 15px margin.
 */
.elementor-element-cabana0col > .elementor-element-populated {
  padding: 0px 15px 0px 10px !important;
}
@media (max-width: 1024px) {
  .elementor-element-cabana0col > .elementor-element-populated {
    padding: 0px 15px 0px 15px !important;
  }
}

/*
 * Blog post typography: the post title (h1.entry-title.h2-style) and every
 * in-content heading (.entry-content h2/h3.wp-block-heading) inherited the
 * site's Elementor "Pathway Gothic One" condensed display font -- the same
 * loud, all-caps-feeling face used for nav/section headers sitewide. That
 * reads inconsistently against the /windsor-hills-blog/ card grid and the
 * post body copy itself, both already set in Lato. Switch blog post
 * headings to the same Lato / navy (#162541) / coral (#ff4157) theme the
 * card grid uses, so a post reads as one consistent design instead of two.
 *
 * (This block also carries the earlier h2-vs-h3 sizing fix: the sitewide
 * `.elementor-kit-1176 h3` rule set every real h3 to 56px/800/-3px letter-
 * spacing -- bigger than the h2 above it -- regardless of context; fixed
 * with higher-specificity scoped rules here.)
 *
 * Terms of Use (body.page-id-5931) and Privacy Policy (body.page-id-3) are
 * plain WP Pages, not Posts -- their title is h1.page-title and their body
 * wrapper is .page-content rather than .entry-title/.entry-content -- but
 * they have the exact same condensed-font problem, so the same rules are
 * scoped onto them too.
 */
.entry-title.h2-style,
body.page-id-5931 .page-title,
body.page-id-3 .page-title {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  letter-spacing: -2px;
  color: #162541;
  line-height: 1.25;
}
/* Lato is wider per character than the condensed display font this
   replaces, so the unchanged 55px desktop title size wraps to too many
   lines on a phone-width viewport -- scale it down there. */
@media (max-width: 767px) {
  .entry-title.h2-style,
  body.page-id-5931 .page-title,
  body.page-id-3 .page-title {
    font-size: 30px;
  }
}
.entry-content h2.wp-block-heading,
body.page-id-5931 .page-content h2.wp-block-heading,
body.page-id-3 .page-content h2.wp-block-heading {
  font-family: 'Lato', sans-serif;
  font-size: 30px !important;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: capitalize;
  color: #162541;
  line-height: 1.3;
}
.entry-content h3.wp-block-heading,
body.page-id-5931 .page-content h3.wp-block-heading,
body.page-id-3 .page-content h3.wp-block-heading {
  font-family: 'Lato', sans-serif;
  font-size: 22px !important;
  font-weight: 600;
  letter-spacing: normal;
  color: #162541;
  line-height: 1.3;
}

/*
 * Post category badge (e.g. "In Disney World Tips"): used to link to
 * /category/<slug>/, a WordPress archive-page convention this static site
 * never rebuilt as a real route, so every one of these 404'd. Swapped for
 * a plain span sitewide -- this rule keeps the same coral color the site's
 * default link color (`a{color:#ff4157}`) gave it before.
 */
.cat-links__label {
  color: #ff4157;
}

/*
 * Homepage hero slider's new "NEW! Rent A Pool Side Cabana" slide: none of
 * the original 3 slides ever used the widget's button field (all left it
 * empty), so there's no existing JetElements-generated CSS for it to
 * inherit. Sized well below the 120px all-caps headline above it so it
 * reads as a secondary link, not competing with the subtitle.
 */
.jet-slider__more-info-link {
  display: inline-block;
  margin-top: 6px;
  color: #ffffff;
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: underline;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.jet-slider__more-info-link:hover {
  color: #ff4157;
}