/* West End Wilma — mobile improvements (phones only, max-width 767px).
   Desktop and tablet layouts are untouched. Turn off under Settings → WEW Listings. */
@media (max-width: 767px) {

  /* 1. Use the full width of the phone: Elementor's nested containers each add 32px of side padding,
        which left only ~260px of a 390px screen for content. Keep 16px on the outer container only;
        boxes with their own background colour keep a little padding so text doesn't touch the edge. */
  .elementor .e-con.e-parent { --padding-left: 16px; --padding-right: 16px; }
  .elementor .e-con.e-child { --padding-left: 0px; --padding-right: 0px; }
  .elementor .e-con.e-child[data-settings*="background_background"] { --padding-left: 14px; --padding-right: 14px; }
  .elementor-widget-posts > .elementor-widget-container,
  .elementor-widget-loop-grid > .elementor-widget-container { padding-left: 0 !important; padding-right: 0 !important; }

  /* 2. Header adverts: full width, tighter spacing */
  .elementor-location-header .e-grid { gap: 8px !important; }
  .elementor-location-header .elementor-widget-image img { width: 100%; height: auto; }

  /* 3. Menu: one swipeable row instead of three wrapped lines, with bigger tap targets */
  .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu {
    flex-wrap: nowrap !important; overflow-x: auto; justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 8px;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
            mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu::-webkit-scrollbar { display: none; }
  .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li { flex: 0 0 auto; }
  .elementor-location-header .elementor-nav-menu--main .elementor-item {
    padding-top: 13px !important; padding-bottom: 13px !important; white-space: nowrap;
  }

  /* 4. Headings: still bold, but no longer one word per line */
  h1.elementor-heading-title, .elementor-widget-theme-post-title .elementor-heading-title {
    font-size: clamp(26px, 7.4vw, 32px) !important; line-height: 1.15 !important; letter-spacing: 0 !important;
  }
  h2.elementor-heading-title { font-size: clamp(20px, 6vw, 26px) !important; line-height: 1.2 !important; }
  h3.elementor-heading-title { font-size: clamp(18px, 5.2vw, 22px) !important; line-height: 1.25 !important; }
  .elementor-widget-theme-post-excerpt p,
  .elementor-widget-theme-post-excerpt .elementor-widget-container { font-size: 20px !important; line-height: 1.35 !important; }

  /* 5. Body text: comfortable reading size, and images never wider than the screen */
  .elementor-widget-theme-post-content p,
  .elementor-widget-text-editor p { font-size: 17px; line-height: 1.6; }
  .elementor img { max-width: 100%; height: auto; }
  .elementor-widget-theme-post-content iframe, .elementor-widget-text-editor iframe { max-width: 100%; }

  /* 6. Newsletter sign-up: smaller heading, full-width form */
  .ml-form-embedContainer h4 { font-size: 24px !important; line-height: 1.2 !important; }
  .ml-form-embedWrapper.embedForm { max-width: 100% !important; }

  /* 7. Post grids: one card per row, full width */
  .elementor-posts-container.elementor-grid { grid-template-columns: 1fr !important; }

  /* 8. Buttons and links: easier to tap */
  .elementor-button { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 767px) {
  /* Headings typed inside articles (reviews, show pages) */
  .elementor-widget-text-editor h1, .elementor-widget-theme-post-content h1 { font-size: 26px !important; line-height: 1.2 !important; }
  .elementor-widget-text-editor h2, .elementor-widget-theme-post-content h2 { font-size: 22px !important; line-height: 1.25 !important; }
  .elementor-widget-text-editor h3, .elementor-widget-theme-post-content h3 { font-size: 20px !important; line-height: 1.3 !important; }
  .elementor-widget-text-editor h4, .elementor-widget-theme-post-content h4 { font-size: 18px !important; }
  .elementor-widget-theme-post-content blockquote p { font-size: 20px !important; line-height: 1.4 !important; }
}