/* restore-fix.css — corrective safety net for the static Wayback mirror of
   mclean-eyecare.com. Loaded LAST. Recovered real Elementor CSS (global.css,
   post-5/7/359/375/381.css, frontend.min.css) drives the actual layout; this
   file only guards against edge cases on pages whose per-page CSS was never
   archived (service pages: post-167/172-180) and collapses empty containers
   left behind after the Elementor frontend JS was removed for the static build.
   Practice palette: green #2e8b57 (logo) + blue #1a6aa8 (buttons). */

/* --- 1. Constrain ALL content images to their container. The per-widget
       Elementor sizing CSS was never archived for several pages, so images
       (the brand logo + full-size 2560px service photos) rendered at their
       natural/attribute size and blew out the layout. This is a LOW-specificity
       base — recovered Elementor rules that set explicit sizes still win. --- */
img { max-width: 100%; height: auto; }
.elementor-widget-image img,
.elementor-widget-image-box img,
.elementor-image-box-img img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* Hard caps for the oversized service photos + logo (classes the page CSS
   left unsized). The logo never needs to exceed ~240px in any band. */
img.sp-image,
img[class*="wp-image"],
img.attachment-full,
img.size-full { max-width: 100% !important; height: auto !important; }
img[src*="mclean"], img[src*="Logo"], img[src*="logo"] { max-width: 240px !important; height: auto !important; }
.elementor-widget-image-box .elementor-image-box-wrapper { display: block; }

/* Hide image wrappers that ended up with no resolvable image (avoids empty boxes) */
.elementor-widget-image a:empty,
.elementor-image-box-img:empty { display: none; }

/* --- 2. Header top bar: keep hours / phone / address inline on desktop,
       stack cleanly on mobile (does not override recovered header CSS) --- */
@media (min-width: 768px) {
  header .elementor-container,
  .elementor-location-header .elementor-container {
    flex-wrap: nowrap;
  }
}
header .elementor-heading-title,
.elementor-location-header .elementor-heading-title {
  line-height: 1.4;
}

/* --- 3. Service cards: responsive grid fallback (4 -> 2 -> 1) only when the
       native Elementor column flex did not apply (e.g. unarchived page CSS).
       Native .elementor-col-* widths from frontend.min.css win when present. --- */
.elementor-widget-image-box .elementor-image-box-content { width: 100%; }
.elementor-button,
.jet-button .jet-button__instance {
  display: inline-block;
  background: #1a6aa8;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.2;
}
.elementor-button:hover,
.jet-button .jet-button__instance:hover { background: #155a90; }

/* --- 4. Collapse stray empty sections/columns produced by removed dynamic
       widgets (forms/popups) so they don't leave large blank gaps --- */
.elementor-section:empty,
.elementor-column-wrap:empty,
.e-con-inner:empty { display: none; }

/* --- 5. Inert Vue review templates must never render --- */
script[type="text/x-template"] { display: none !important; }

/* --- 6. Mobile sanity: no horizontal overflow, readable base size --- */
html, body { overflow-x: clip; }
@media (max-width: 767px) {
  .elementor-heading-title { word-break: break-word; }
}

/* --- 7. Hero JetSlider: the JetEngine slider JS was stripped, so its UI
       controls (prev/next arrow + fullscreen button) rendered as stray
       FontAwesome icons stuck at the top-left ( "<" and the move-cross ),
       and the slide <img> used object-fit:fill which distorted/awkwardly
       cropped the face. Hide the dead controls and make the slide cover
       its frame from the upper third so faces aren't cut at the mouth. --- */
[class*="jet-slider__arrow-icon"],
[class*="jet-slider__fullscreen-icon"],
.jet-slider .hidden-html,
.jet-slider__arrows,
.jet-slider__arrow,
.jet-slider__fullscreen,
.slider-pro .sp-arrow,
.slider-pro .sp-fullscreen-button,
.slider-pro .sp-buttons,
.jet-slider__pagination,
.jet-slider__progress,
.jet-slider__counter,
.jet-slider__overlay-icon { display: none !important; }
.jet-slider img,
.jet-slider__image img,
.jet-slider .swiper-slide img {
  object-fit: cover !important;
  object-position: center 28% !important;
  width: 100% !important;
  height: 100% !important;
}

/* --- 8. JetButton ("Book Consultation") has two stacked states — normal and
       hover — that the JS swaps on hover. Without the animation BOTH showed,
       so the label looked duplicated. Hide the hover state; keep normal. --- */
.jet-button__state.jet-button__state-hover { display: none !important; }