/* betheme-static-overrides.css
 * Static-rebuild overrides for WordPress BeTheme (Muffin Builder) sites whose
 * frontend JS has been stripped by the flat conversion. First authored for
 * Run 17 (lovebirds, 2026-07-02). Linked AFTER the captured BeTheme stylesheets
 * so these rules win. Keep everything theme-generic — client-specific values
 * (exact hero image, brand color) live in the client build, not here.
 *
 * Covers two BeTheme features that depend on the stripped runtime:
 *   1. Slider Revolution hero — module ships visibility:hidden; the rev JS
 *      normally reveals it, sizes the module, and paints the lazyload bg.
 *   2. Responsive (mobile) menu — the .responsive-menu-toggle is wired by JS;
 *      body.mobile-menu is added by JS at the responsive breakpoint. The
 *      companion betheme-static-overrides.js supplies both behaviors; this file
 *      is the styling half.
 */

/* ---------------------------------------------------------------------------
 * 1) Slider Revolution — reveal + statically size the single-slide hero.
 *    rev fullwidth layout: display height scales with viewport width from the
 *    module's gridheight/gridwidth ratio, capped at gridheight. The client
 *    build sets --ym-hero-ratio (gridheight/gridwidth) and --ym-hero-max
 *    (gridheight px) as inline custom props on the module wrap; defaults below
 *    approximate a 1240x700 grid (0.5645).
 * ------------------------------------------------------------------------- */
rs-module-wrap[id*="rev_slider"],
.rev_slider_wrapper,
.forcefullwidth_wrapper_tp_banner {
  visibility: visible !important;
  height: auto !important;
  overflow: hidden;
}
rs-module[id*="rev_slider"],
.rev_slider {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: calc(var(--ym-hero-ratio, 0.5645) * 100vw) !important;
  max-height: var(--ym-hero-max, 700px) !important;
  min-height: var(--ym-hero-min, 340px) !important;
  overflow: hidden !important;
  margin: 0 !important;
  visibility: visible !important;
}
rs-module[id*="rev_slider"] rs-slides,
.rev_slider rs-slides {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
rs-module[id*="rev_slider"] rs-slide,
.rev_slider rs-slide {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* main slide photo — cover the module; honor data-bg center-bottom default */
rs-slide img.rev-slidebg,
img.rev-slidebg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center bottom !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  max-width: none !important;
}
/* Full-width overlay image layers (bottom gradient bands etc.). The client
 * build tags the ones to reveal with class ym-hero-layer; everything else in
 * the slider stays hidden so runtime-animated text/shape layers don't render
 * mis-positioned. */
rs-module[id*="rev_slider"] rs-layer { visibility: hidden !important; }
rs-module[id*="rev_slider"] rs-layer.ym-hero-layer {
  visibility: visible !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  z-index: 5 !important;
  opacity: 1 !important;
}
rs-module[id*="rev_slider"] rs-layer.ym-hero-layer img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ---------------------------------------------------------------------------
 * 2) Responsive (mobile) menu. betheme-static-overrides.js adds body.mobile-menu
 *    at/below the breakpoint and toggles #menu.ym-open on hamburger tap. These
 *    rules are self-contained (BeTheme drives its native mobile menu purely from
 *    inline JS display toggles, so we can't rely on the theme's own open-state).
 * ------------------------------------------------------------------------- */
body.mobile-menu #Top_bar a.responsive-menu-toggle { display: block !important; }
body.mobile-menu #Top_bar #menu {
  display: none !important;
  float: left;
  position: static !important;
  width: 100% !important;
}
body.mobile-menu #Top_bar #menu.ym-open { display: block !important; }
/* stack the items vertically + reset the desktop horizontal float */
body.mobile-menu #Top_bar #menu > ul.menu-main,
body.mobile-menu #Top_bar #menu > ul {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}
body.mobile-menu #Top_bar #menu ul li {
  display: block !important;
  float: none !important;
  width: 100% !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body.mobile-menu #Top_bar #menu ul li a {
  display: block !important;
  width: 100% !important;
  padding: 4px 15px !important;
  height: auto !important;
  line-height: 44px !important;
}
/* mobile submenus: hidden until the row is opened */
body.mobile-menu #Top_bar #menu ul li ul.sub-menu {
  display: none !important;
  position: static !important;
  width: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: none !important;
  padding-left: 16px;
}
body.mobile-menu #Top_bar #menu ul li.ym-sub-open > ul.sub-menu { display: block !important; }

/* ---------------------------------------------------------------------------
 * 3) WordPress [gallery] shortcode → uniform lightbox grid. BeTheme's own
 *    gallery lightbox + equal-heights JS are stripped on flat rebuilds, so
 *    mixed-orientation galleries render ragged and un-clickable. Give every
 *    .gallery.file a clean equal-tile grid (cover-crop to a common portrait
 *    ratio) and the companion JS wires the lightbox. Column width honors the
 *    theme's own gallery-columns-N inline width.
 * ------------------------------------------------------------------------- */
.gallery.file { overflow: hidden; }
.gallery.file .gallery-item {
  box-sizing: border-box;
  padding: 0 6px;
  margin: 0 0 12px !important;
}
.gallery.file .gallery-item .gallery-item-wrapper,
.gallery.file .gallery-item .gallery-icon { margin: 0 !important; }
.gallery.file .gallery-item a {
  display: block !important;
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  cursor: zoom-in;
  line-height: 0;
}
.gallery.file .gallery-item a > img,
.gallery.file .gallery-item img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 !important;
  border: 2px solid #cfcfcf;
  box-sizing: border-box;
}
/* fallback for engines without aspect-ratio */
@supports not (aspect-ratio: 1) {
  .gallery.file .gallery-item a { height: 0; padding-bottom: 133.33%; }
}

/* Lightbox overlay (injected + toggled by betheme-static-overrides.js) */
.ym-lightbox {
  position: fixed; inset: 0; z-index: 100000;
  display: none;
  background: rgba(0, 0, 0, 0.9);
  align-items: center; justify-content: center;
}
.ym-lightbox.ym-open { display: flex; }
.ym-lightbox img.ym-lb-img {
  max-width: 92vw; max-height: 88vh;
  width: auto; height: auto;
  object-fit: contain;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.5);
}
.ym-lightbox .ym-lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: #fff;
  font-size: 44px; line-height: 1; cursor: pointer;
  padding: 12px 20px; opacity: 0.8; user-select: none;
}
.ym-lightbox .ym-lb-btn:hover { opacity: 1; }
.ym-lightbox .ym-lb-prev { left: 8px; }
.ym-lightbox .ym-lb-next { right: 8px; }
.ym-lightbox .ym-lb-close {
  position: absolute; top: 14px; right: 22px;
  font-size: 34px; color: #fff; cursor: pointer; opacity: 0.85;
  background: none; border: 0; line-height: 1;
}
.ym-lightbox .ym-lb-close:hover { opacity: 1; }
@media (max-width: 767px) {
  .ym-lightbox .ym-lb-btn { font-size: 32px; padding: 8px 12px; }
}