/* Additions to the original site stylesheets (southmedia-style.css and
   menuChildren.css, carried over with only their url() paths rewritten).

   Most of what is here replaces the screenshot gallery: fotorama and its jQuery
   dependency are gone, replaced by a scroll-snap strip and a lightbox.

   On images: they live in public/images, not in the asset pipeline, because the
   ported content templates reference /images/... directly in over a hundred
   places. Propshaft logs "Unable to resolve" for those url() paths during
   precompile - it looks for them in its load path, does not find them, and
   leaves the URL untouched, which is exactly what we want. The compiled CSS
   keeps the literal path and the files serve from public/. Do not "fix" this by
   moving them into app/assets/images: that would fingerprint the URLs and break
   every template reference. */

.gallery {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 20px 0;
}

.gallery-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 2px 0;
}
.gallery-strip::-webkit-scrollbar { display: none; }

.gallery-thumb {
  scroll-snap-align: start;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: none;
  cursor: zoom-in;
  line-height: 0;
}
.gallery-thumb:hover { border-color: #e75023; }
.gallery-thumb img { max-height: 320px; width: auto; border-radius: 3px; }

.gallery-nav {
  flex: 0 0 auto;
  width: 32px;
  height: 64px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f6f6f6;
  color: #555;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.gallery-nav:hover { background: #e75023; color: #fff; border-color: #e75023; }

/* --- lightbox --- */

dialog.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
dialog.lightbox::backdrop { background: rgba(0, 0, 0, .85); }

dialog.lightbox img {
  display: block;
  margin: 0 auto;
  max-width: 88vw;
  max-height: 88vh;
  width: auto;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.lightbox-nav,
.lightbox-close {
  position: absolute;
  border: 0;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  border-radius: 4px;
}
.lightbox-nav:hover,
.lightbox-close:hover { background: #e75023; }

.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 72px;
  font-size: 36px;
}
.lightbox-nav.prev { left: 12px; }
.lightbox-nav.next { right: 12px; }

.lightbox-close {
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  font-size: 26px;
}

.lightbox-count {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 14px;
}

@media (max-width: 640px) {
  .gallery-nav { display: none; }
  .lightbox-nav { width: 36px; height: 56px; font-size: 26px; }
}

/* The mobile menu used jQuery's slideToggle; the replacement toggles [hidden],
   which needs to beat the stylesheets' display rules. */
nav.mainMenu ul[hidden] { display: none; }

/* The mobile menu button and the expand/collapse chevrons were Font Awesome 4.3
   glyphs, pulled from BootstrapCDN by a <link> in body.php. They are inline
   Heroicons SVGs now: two icons do not justify an icon font, and it drops a
   third-party request.

   menuChildren.css also styles these with background images (nav-arrow.png,
   menu.png, menu.svg) that are not in the site archive and never existed, so
   those are suppressed too. */
nav.mainMenu label.menuTitle:before,
nav.mainMenu .toggleChildren:before {
  content: none !important;
}

nav.mainMenu label.menuTitle,
nav.mainMenu .toggleChildren {
  background-image: none !important;
}

nav.mainMenu .icon {
  color: #cecece;
  display: block;
}

nav.mainMenu label.menuTitle {
  position: relative;
}
nav.mainMenu label.menuTitle .icon-bars {
  position: absolute;
  top: 25px;
  left: 10px;
  width: 32px;
  height: 32px;
}

nav.mainMenu .toggleChildren {
  position: relative;
}
nav.mainMenu .toggleChildren .icon-chevron {
  position: absolute;
  top: 6px;
  right: 10px;
  width: 18px;
  height: 18px;
  transition: transform .15s ease;
}
/* menuChildren.css flips the whole control with scaleY(-1) when open; the icon
   handles its own rotation, so that transform is dropped. */
nav.mainMenu .toggleChildren.contract {
  transform: none !important;
}
nav.mainMenu .toggleChildren.contract .icon-chevron {
  transform: rotate(180deg);
}

/* Google Translate used to sit to the left of the search box, so the search
   reserved 90px for it. With translate gone it can use the full width. */
#___gcse_0 {
  width: 100%;
  float: none;
}

/* Store buttons on a product page: badge with its price underneath. */
.store-buttons { list-style: none; margin: 15px 0 0; padding: 0; }
.store-buttons li { display: inline-block; margin: 0 25px 10px 0; text-align: center; vertical-align: top; }
.store-buttons img { display: block; height: 53px; width: auto; }
.store-buttons .price { display: block; margin-top: 4px; font-weight: bold; }