/* ===========================================================================
   Park Hill Estate — global responsive hardening (phx-responsive)
   Loaded site-wide. Goal: zero horizontal scroll + legible layout down to 320px.
   Scoped defensively so it only tightens mobile; desktop is untouched.
   =========================================================================== */

/* ---- 1. Universal overflow guard ----
   NOTE: never use overflow-x:hidden on html/body — it silently breaks the
   sticky header (position:sticky fails inside an overflow!=visible ancestor).
   overflow-x:clip contains horizontal scroll WITHOUT creating a scroll
   container, so the sticky nav keeps working. */
html { max-width: 100%; }
body { max-width: 100%; overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }

/* media never forces the page wider than the viewport */
img, svg, video, iframe, picture, .elementor-widget-image img {
  max-width: 100%;
}
img:not([class*="logo"]):not([class*="crest"]) { height: auto; }

/* Elementor / JupiterX containers cannot exceed the viewport */
.elementor-section .elementor-container,
.e-con, .e-con-inner,
.elementor-widget-wrap { max-width: 100%; }

/* iOS: background-attachment:fixed causes jank + zoom misfires on touch */
@media (max-width: 1024px) {
  .elementor-1013,
  [class*="elementor-element-"],
  .phx-rates { background-attachment: scroll !important; }
}

/* ---- 2. Revolution slider (home hero) — keep it inside the viewport ---- */
#rev_slider_1_1_wrapper,
.rev_slider_wrapper,
rs-module-wrap,
rs-module { max-width: 100% !important; }
@media (max-width: 767px) {
  #rev_slider_1_1_wrapper { margin-left: 0 !important; margin-right: 0 !important; }
}

/* ---- 3. Home textured sections: comfortable mobile padding + legible type ---- */
@media (max-width: 991px) {
  .elementor-1013 .elementor-element-8e39dd0,
  .elementor-1013 .elementor-element-118ec0c,
  .elementor-1013 .elementor-element-85b14a4 {
    padding-left: 20px !important;
    padding-right: 20px !important;
    background-size: cover !important;
  }
}
@media (max-width: 767px) {
  /* stack any side-by-side columns full width */
  .elementor-1013 .elementor-column,
  .elementor-1013 .elementor-top-column { width: 100% !important; }
  /* headings/long words must wrap, never overflow */
  .elementor-heading-title,
  .elementor-widget-text-editor { overflow-wrap: break-word; word-break: break-word; }
  /* tame oversized Deco letter-spacing on narrow screens */
  .elementor-1013 .elementor-heading-title { letter-spacing: .04em !important; }
  /* center the intro logo nicely */
  .elementor-1013 .elementor-element-b0cbf53 img { width: 130px !important; height: auto !important; }
}

/* ---- 4. Header / nav logo scales on phones ---- */
@media (max-width: 767px) {
  .raven-site-logo img,
  .jupiterx-header img,
  .elementor-location-header img { max-height: 92px !important; width: auto !important; }
}

/* ---- 5. Bespoke "Tariff" page (rates/index.html .phx-rates) ----
   The deco frame must stay INSIDE the panel: .phx-panel has overflow:hidden,
   so a negative inset just clips the frame invisible while its geometry
   still pokes past the viewport. Inner frame = original desktop look. */
@media (max-width: 600px) {
  .phx-rates { padding-left: 12px !important; padding-right: 12px !important; }
  .phx-panel { padding-left: 16px !important; padding-right: 16px !important; }
  .phx-frame { inset: 8px !important; border-width: 2px !important; border-radius: 14px !important; }
  /* suite names: nowrap squeezes the dotted leader + price off the row at 320px */
  .phx-rates .phx-name { white-space: normal !important; }
}
/* fine-print notes scale with .phx-name's clamp() and bottomed out at 8.7px */
.phx-rates .phx-note { font-size: max(.62em, 11px) !important; }

/* ---- 6. Footer: keep columns + the copyright readable, never clipped ---- */
@media (max-width: 767px) {
  .jupiterx-footer .elementor-column,
  .jupiterx-footer .elementor-top-column { width: 100% !important; }
  .jupiterx-footer { background-size: cover !important; }
}

/* ---- 6b. WP [gallery] grid: contain the 15px item gutter (was +5px overflow) ---- */
.row.gallery, .gallery { max-width: 100% !important; overflow-x: hidden; }
.gallery-item { box-sizing: border-box !important; }
@media (max-width: 767px) {
  .row.gallery .gallery-item, .gallery .gallery-item { padding-right: 0 !important; }
}

/* ---- 6c. Third-party reCAPTCHA badge: never let it cause horizontal scroll ---- */
.grecaptcha-badge { right: 0 !important; left: auto !important; }
@media (max-width: 360px) { .grecaptcha-badge { display: none !important; } }

/* ===========================================================================
   NAV — match the dark gold-Deco brand (mobile dropdown was white/illegible)
   =========================================================================== */

/* Desktop + tablet top-bar items: crisp cream, gold on hover/active */
.jupiterx-header .elementor-nav-menu .elementor-item,
.jupiterx-header .raven-nav-menu-main .raven-menu-item {
  color: #efe3c8 !important;
}
.jupiterx-header .elementor-nav-menu .elementor-item:hover,
.jupiterx-header .raven-nav-menu-main .raven-menu-item:hover,
.jupiterx-header .elementor-item-active,
.jupiterx-header .raven-menu-item-active { color: #c9a227 !important; }

/* Hamburger + close icon → gold (was near-invisible dark icon) */
.raven-nav-menu-toggle-button,
.raven-nav-menu-toggle-button .fa,
.raven-nav-menu-toggle-button svg,
.elementor-menu-toggle,
.elementor-menu-toggle i { color: #c9a227 !important; fill: #c9a227 !important; }
.raven-nav-menu-toggle-button .hamburger-inner,
.raven-nav-menu-toggle-button .hamburger-inner::after,
.raven-nav-menu-toggle-button .hamburger-inner::before { background-color: #c9a227 !important; }

/* ---- Mobile dropdown (raven) — dark panel, gold-cream items ---- */
.raven-nav-menu-mobile {
  background: #120a08 !important;
  border: 1px solid rgba(201,162,39,.45) !important;
  box-shadow: 0 26px 64px -22px rgba(0,0,0,.92) !important;
  padding: 0 !important;
}
.raven-nav-menu-mobile .raven-nav-menu li > a,
.raven-nav-menu-mobile .raven-menu-item {
  background: transparent !important;
  color: #efe3c8 !important;
  font-family: "Barlow Condensed","Barlow",sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  padding: 15px 24px !important;
}
.raven-nav-menu-mobile .raven-nav-menu li:not(:last-child) {
  border-bottom: 1px solid rgba(201,162,39,.20) !important;
}
.raven-nav-menu-mobile .raven-nav-menu li > a:hover,
.raven-nav-menu-mobile .raven-menu-item:hover,
.raven-nav-menu-mobile .raven-menu-item-active {
  background: rgba(201,162,39,.12) !important;
  color: #f6e6ad !important;
}

/* ---- Tablet dropdown (elementor burger) — same dark treatment ---- */
.elementor-nav-menu--dropdown {
  background: #120a08 !important;
  border: 1px solid rgba(201,162,39,.4) !important;
}
.elementor-nav-menu--dropdown a.elementor-item,
.elementor-nav-menu--dropdown a.elementor-sub-item {
  color: #efe3c8 !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(201,162,39,.18) !important;
}
.elementor-nav-menu--dropdown a.elementor-item:hover,
.elementor-nav-menu--dropdown a.elementor-sub-item:hover {
  background: rgba(201,162,39,.12) !important;
  color: #f6e6ad !important;
}

/* ---- 7. Forms / buttons fit the screen ---- */
@media (max-width: 767px) {
  input, select, textarea, .elementor-field { max-width: 100% !important; }
  .elementor-button { white-space: normal !important; }
  /* iOS Safari zooms the page when a focused field is under 16px */
  input, select, textarea { font-size: 16px !important; }
}

/* ===========================================================================
   PHX-R2 (2026-06-12) — full-site mobile hardening, driven by the
   tools/responsive-audit.cjs findings (24 page×viewport checks).
   =========================================================================== */

/* R2-1: plaque heading images (the ::before art on suite/section headings)
   carry fixed widths (284-352px) capped only by 92vw — which ignores the
   section's own padding, producing real document overflow on the-estate
   at phone widths. Cap to the heading box itself. */
[class*="elementor-element-"] .elementor-heading-title::before {
  max-width: 100% !important;
}

/* R2-2: hamburger was a 21×24px tap target (minimum is 44px). Pad the hit
   area; the negative margin keeps the icon visually in place. */
.raven-nav-menu-toggle .raven-nav-menu-toggle-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 12px !important;
  margin: -12px !important;
  box-sizing: border-box !important;
}

/* R2-3: villas hero (rev_slider_3_1) — the 39px script "Welcome to..." line
   clipped mid-word at the right edge on phones. Stylesheet !important beats
   the slider's inline sizing. (layer-7 is a backdrop scrim shape that bleeds
   past the edges BY DESIGN — the slider clips it; leave it alone.) */
@media (max-width: 767px) {
  #slider-3-slide-12-layer-1 { font-size: 28px !important; line-height: 1.15 !important; }
}

/* R2-4: Elementor gallery tiles — the export lost the grid item clip, so the
   "shrink-contained" hover animation's 1.17× resting scale spilled 21px past
   both viewport edges at tablet. overflow:hidden is stock Elementor behavior. */
.e-gallery-item.elementor-gallery-item { overflow: hidden !important; }

/* R2-5: tablet (768-1024) nav logo — the override's height:178px !important
   only got capped on phones; cap tablets too (max-height beats height).
   min-width keeps this from out-cascading the 64px phone cap in §4. */
@media (min-width: 768px) and (max-width: 1024px) {
  .raven-site-logo img,
  .jupiterx-header img,
  .elementor-location-header img { max-height: 96px !important; width: auto !important; }
}

/* R2-6: contact links ("Email us", phone, Vacatella) in icon lists — footer
   AND in-content copies (inquiries 56fd2b9) — were 27px tap targets.
   Pad every icon-list link to ≥44px on touch widths. */
@media (max-width: 767px) {
  .elementor-icon-list-item > a {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    min-height: 44px !important;
    align-items: center !important;
  }
}

/* R3-1: phone footer + nav logos read too small. Nav cap raised in section 4 (92px);
   footer logo (widget c27163f, capped 232px in park-hill-override.css) widened here --
   same selectors, this sheet loads later so it wins the cascade at phone widths. */
@media (max-width: 767px) {
  .elementor-element-c27163f .raven-site-logo .raven-site-logo-link { width: 320px !important; }
  .elementor-element-c27163f .raven-site-logo .raven-site-logo-link img,
  .elementor-element-c27163f .raven-site-logo img.raven-site-logo-desktop,
  .elementor-element-c27163f .raven-site-logo img.raven-site-logo-tablet,
  .elementor-element-c27163f .raven-site-logo img.raven-site-logo-mobile { max-width: 320px !important; }
}

/* R3-2: inquiries .phx-contact links (phone, Email us) were 18px tap targets */
@media (max-width: 767px) {
  .phx-rates .phx-contact .ci a {
    display: inline-block !important;
    padding: 13px 10px !important;
  }
}

/* R3-3: phone navbar background — at narrow widths, cover scaling pulls
   navbar-parkhill.png's baked-in deco frame (double rules + fan ornaments)
   into view inside the bar, colliding with the CSS 2px gold borders.
   Desktop's wide bar crops that frame out and shows only the center texture;
   reproduce that on phones with a fixed-height zoom. Doubled class beats the
   inline phx-navbar-bg shorthand regardless of source order. */
@media (max-width: 767px) {
  .jupiterx-header.jupiterx-header {
    background-size: auto 500px !important;
    background-position: center center !important;
  }
}

/* R3-4: events page WP image gallery (widget 6bd9187, 21 photos) — the WP
   gallery-columns float widths collapse items into 25px slivers at phone
   widths. NOTE: the static export nested the page's HERO SECTION inside the
   .gallery div, which breaks grid templates unpredictably — flex is immune:
   hero rides as a full-width row, figures tile 2-up beneath it. */
@media (max-width: 767px) {
  .elementor-element-6bd9187 .gallery.gallery-columns-5 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .elementor-element-6bd9187 .gallery br { display: none !important; }
  .elementor-element-6bd9187 .gallery > .elementor-section {
    flex: 0 0 100% !important; width: 100% !important;
  }
  .elementor-element-6bd9187 .gallery > figure.gallery-item {
    flex: 0 0 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important; max-width: none !important;
    float: none !important; margin: 0 !important; padding: 0 !important;
  }
  .elementor-element-6bd9187 .gallery .gallery-icon { margin: 0 !important; }
  .elementor-element-6bd9187 .gallery .gallery-item img {
    width: 100% !important; height: 132px !important;
    object-fit: cover !important; display: block !important;
    border: none !important;
  }
}

/* R3-5: villas page slider (rev_slider_3_1) "fullwidth" left a bare strip on
   the right at every width — span the force-fullwidth wrapper across the real
   viewport and pin the module to it; !important beats revslider's inline JS. */
#rev_slider_3_1_forcefullwidth{
  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
}
#rev_slider_3_1_wrapper{ left:0 !important; width:100% !important; }
#rev_slider_3_1{ width:100% !important; }

/* R3-6: RATES page (nav-linked p=649 export, marked .phx-deco-rates) — keep the
   desktop deco look on phones: ornate gold border-image frame (sec. 5 above
   flattened it to a 2px line for the LEGACY rates/index.html export whose
   panel clips overhanging frames; that page lacks the marker class so sec. 5
   still governs it), maroon band, and desktop-style rows: name + dotted
   leader + price on one line, price right-aligned (wrapping only when a row
   physically cannot fit). */
@media (max-width: 600px) {
  .phx-deco-rates { padding-left: 32px !important; padding-right: 32px !important; }
  .phx-deco-rates .phx-panel {
    border-width: 28px !important;
    padding-left: 14px !important; padding-right: 14px !important;
  }
  .phx-deco-rates .phx-frame {
    inset: -28px !important;
    border-width: 28px !important;
    border-image: url("/wp-content/uploads/deco-frame.svg") 98 stretch !important;
    border-radius: 0 !important;
  }
  .phx-deco-rates .phx-row { flex-wrap: wrap !important; }
  .phx-deco-rates .phx-row .lead {
    order: 0 !important; flex: 1 1 auto !important;
    width: auto !important; flex-basis: auto !important; min-width: 24px !important;
    border-bottom: 2px dotted rgba(201,162,39,.4) !important;
    transform: translateY(-4px) !important; margin-top: 0 !important;
  }
  .phx-deco-rates .phx-price { margin-left: auto !important; }
  .phx-deco-rates .phx-name { white-space: nowrap !important; }
}