/* goodlayers-static-overrides.css
 * Static-rebuild overrides for WordPress GoodLayers themes (Modernize, and the
 * same-generation "gdl-" family: Skeleton grid, superfish nav, Nivo/Flex slider,
 * Simple Lightbox, Cufon) whose frontend JS has been stripped by the flat
 * conversion. First authored for Run 48 (wigpalace, 2026-11-06). Linked AFTER
 * the captured theme stylesheets so these rules win. Keep everything
 * theme-generic — client-specific values live in the client build, not here.
 *
 * Covers the GoodLayers features that depend on the stripped runtime:
 *   1. Nivo slider — nivo-slider.css positions every slide `position:absolute`
 *      and paints a loading.gif on the container; the Nivo JS sets the
 *      container height and copies the first slide into a background. Without
 *      it the band collapses to 0px (or to the loading spinner). We render the
 *      first slide statically; the companion JS cross-fades the rest.
 *   2. Simple Lightbox / fancybox gallery links — `a[data-slb-active]` and
 *      `.gallery-icon a` open a dependency-free overlay (JS half in the .js).
 *   3. Responsive `<select class="dropdown-menu">` menu — styling is native;
 *      navigation on change is restored in the .js.
 *   4. FitVids — the theme ran jquery.fitvids.js over post/page content, wrapping
 *      every YouTube/Vimeo iframe in `.fluid-width-video-wrapper` (padding-top =
 *      height/width) and injecting the CSS below from JS. Without it a 940×315
 *      embed stays 940px wide on a 280px column (+221px on mobile, wigpalace).
 *      The .js re-wraps; this is the CSS fitvids used to inject.
 */

/* ---------------------------------------------------------------------------
 * 1) Nivo slider — static first slide, JS cross-fade for the rest.
 *    `.nivoSlider img` is absolute in nivo-slider.css, so the container has no
 *    intrinsic height. Make the FIRST slide flow (gives the band its height)
 *    and stack the others on top of it for the fade.
 * ------------------------------------------------------------------------- */
.nivoSlider {
  background-image: none !important; /* loading.gif */
}
.nivoSlider > img,
.nivoSlider > a.nivo-imageLink > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
.nivoSlider > img:first-of-type,
.nivoSlider > a.nivo-imageLink:first-of-type {
  position: relative;
}
.nivoSlider > a.nivo-imageLink {
  display: block;
}
/* Cross-fade state (JS adds .ym-nivo-ready once it has indexed the slides). */
.nivoSlider.ym-nivo-ready > img,
.nivoSlider.ym-nivo-ready > a.nivo-imageLink {
  transition: opacity 500ms ease;
  opacity: 0;
}
.nivoSlider.ym-nivo-ready > .ym-nivo-active {
  opacity: 1;
  z-index: 2;
}
/* The theme's gimmick shadows sit over the slider; keep them above the slides. */
.slider-wrapper .slider-gimmick { z-index: 7; }

/* ---------------------------------------------------------------------------
 * 2) Lightbox overlay (same contract as the Avia/BeTheme templates).
 * ------------------------------------------------------------------------- */
.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 0 40px rgba(0, 0, 0, 0.6);
}
.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 18px; opacity: 0.85;
}
.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; }
}

/* ---------------------------------------------------------------------------
 * 3) Scroll-to-top button — the theme fades it in via JS past 100px; without
 *    JS it sits visible at the page top. The .js toggles .ym-visible.
 * ------------------------------------------------------------------------- */
.scroll-top { opacity: 0; pointer-events: none; transition: opacity 300ms ease; }
.scroll-top.ym-visible { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------------------------
 * 4) FitVids — fluid video embeds (CSS that jquery.fitvids.js injected at runtime).
 * ------------------------------------------------------------------------- */
.fluid-width-video-wrapper { width: 100%; position: relative; padding: 0; }
.fluid-width-video-wrapper iframe,
.fluid-width-video-wrapper object,
.fluid-width-video-wrapper embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }