/* ==========================================================================
   Apollo Civic Theatre — responsive quick-fixes (child theme)
   --------------------------------------------------------------------------
   Goal: fix the most-felt mobile issues on standard Apple/Android phones and
   tablets WITHOUT upgrading any plugin or the parent theme. Loaded last so
   these rules win the cascade. Companion to the child header.php, which
   restores pinch-zoom (removes maximum-scale / user-scalable).
   ========================================================================== */

/* 1) Legible base text on phones ------------------------------------------- */
/* The theme drops the root font to 14px below 576px; bring it back to 16px so
   showtimes, prices, and body copy are readable for an older audience.        */
@media (max-width: 576px) {
  html { font-size: 16px !important; }
}

/* 2) No horizontal side-scroll -------------------------------------------- */
/* Root causes rather than the theme's overflow band-aid: media and embeds are
   never wider than the screen, and wide tables scroll inside their own box.   */
img, video, iframe, embed, object, svg,
.wpb_single_image img, .vc_single_image-wrapper img { max-width: 100%; height: auto; }
.entry-content table, .wpb_text_column table, .woocommerce table.shop_table {
  display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
/* Page-builder rows/columns must respect the viewport width. */
.vc_row, .wpb_row, .vc_column_container, .vc_column-inner, .wpb_column { max-width: 100%; }
.vc_row[data-vc-full-width] { overflow-x: clip; }

/* 3) Tame the hero slider on phones/tablets -------------------------------- */
/* The hero is the theme wrapper #ct-header__hero containing a Slider Revolution
   v7 module (sr7-module / sr7-bg). Portrait event posters were filling the width
   and running the hero to full screen height (logo cut off, oversized title).
   Constrain the hero height on small screens and fit the whole poster.         */
@media (max-width: 1024px) {
  #ct-header__hero, .ct-header__hero { max-height: 60vh !important; max-width: 100vw !important; overflow: hidden !important; }
  #ct-header__hero sr7-module, #ct-header__hero sr7-adjuster,
  #ct-header__hero sr7-content { max-height: 60vh !important; height: 60vh !important; }
  /* Show the whole poster instead of a zoomed, cropped slice. */
  #ct-header__hero sr7-bg { background-size: contain !important; background-position: center center !important; }
  #ct-header__hero img { object-fit: contain !important; }
}
@media (max-width: 767px) {
  #ct-header__hero, .ct-header__hero { max-height: 52vh !important; }
  #ct-header__hero sr7-module, #ct-header__hero sr7-adjuster,
  #ct-header__hero sr7-content { max-height: 52vh !important; height: 52vh !important; }
}

/* 4) Mobile navigation usability ------------------------------------------ */
/* Give the menu drawer room and comfortable tap targets (does NOT restructure
   the 30-item menu — that IA work is scheduled separately). */
@media (max-width: 1024px) {
  .ct-main-nav a, .ct-mobile-menu a, .menu-item a { line-height: 1.4; }
  .ct-main-nav li > a, .ct-mobile-menu li > a { padding-top: .55em; padding-bottom: .55em; }
}

/* 5) WPBakery horizontal overflow on mobile (off-center / clipped sections) -- */
/* Sections broke out of the viewport from three WPBakery habits, all of which
   only make sense on a wide desktop:
     (a) full-width "stretch" rows sized to the document width by inline JS,
     (b) fluid rows with negative side margins, and
     (c) auto-generated custom classes with negative left/right margins
         (e.g. margin: -4rem -> the "fostering creativity" band clipped both sides).
   Neutralize all three so every section fits the screen. The desktop full-bleed
   design overflows at every width below ~1440px (iPad landscape included), so
   this applies up to 1439px; true desktops (>=1440px) keep the full-bleed. */
@media (max-width: 1439px) {
  html, body { max-width: 100% !important; overflow-x: hidden !important; }
  .wpb-content-wrapper .vc_row,
  .vc_row[data-vc-full-width],
  .vc_row-fluid {
    width: auto !important;
    max-width: 100% !important;
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }
  /* Auto-generated builder classes that bleed off-screen via negative margins. */
  .wpb-content-wrapper [class*="vc_custom_"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Columns and content blocks never exceed their parent. */
  .vc_column_container, .vc_column-inner, .wpb_column, .wpb_wrapper,
  .wpb_text_column, .wpb_single_image, .wpb_single_image img { max-width: 100% !important; }
}