/*! mk-app.css - styles for the vanilla bundle (lightbox + carousel bits).
 *  Replaces magnific-popup.css. Slider/meanmenu styling still comes from the
 *  existing theme CSS, which mk-app.js emits matching class names for.
 */

/* ---- Lightbox (replaces Magnific Popup) ---- */
.mk-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2, 10, 24, .92);
  padding: 40px 16px;
}

.mk-lightbox.open { display: flex; }

.mk-lb-fig {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.mk-lb-fig img {
  max-width: 100%;
  max-height: calc(100vh - 120px);
  width: auto;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
}

.mk-lb-fig figcaption {
  color: #e8ecf4;
  font-size: 14px;
  text-align: center;
  max-width: 60ch;
  line-height: 1.5;
}
.mk-lb-fig figcaption:empty { display: none; }

.mk-lightbox button {
  position: absolute;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, border-color .2s ease;
  padding: 0;
}

.mk-lightbox button:hover,
.mk-lightbox button:focus-visible {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .5);
  outline: none;
}

.mk-lb-close { top: 16px; right: 16px; }
.mk-lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.mk-lb-next { right: 16px; top: 50%; transform: translateY(-50%); }

@media (max-width: 575px) {
  .mk-lightbox { padding: 16px 8px; }
  .mk-lightbox button { width: 40px; height: 40px; font-size: 22px; }
  .mk-lb-prev { left: 6px; }
  .mk-lb-next { right: 6px; }
  .mk-lb-close { top: 8px; right: 8px; }
}

/* ---- Carousel: keep slides laid out before the script runs ---- */
.hero-slider-active:not(.slick-initialized) > :nth-child(n+2),
.brand-carousel-active:not(.slick-initialized) > :nth-child(n+7),
.case-studies-carousel-active:not(.slick-initialized) > :nth-child(n+6) { display: none; }

.brand-carousel-active:not(.slick-initialized),
.case-studies-carousel-active:not(.slick-initialized) { display: flex; gap: 0; }

.brand-carousel-active:not(.slick-initialized) > * { flex: 0 0 16.666%; }
.case-studies-carousel-active:not(.slick-initialized) > * { flex: 0 0 20%; }

.slick-nav { color: #fff; }
.slick-nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---- Scroll reveal: nothing stays invisible if the script never runs ---- */
.no-js .wow { visibility: visible !important; }

/* ---- fadeInUp, lifted verbatim from animate.css ----
 * It is the only animation used anywhere on the site (157 uses), so the
 * 55.8 KB animate.css is no longer loaded. */
.animated { animation-duration: 1s; animation-fill-mode: both; }
.fadeInUp { animation-name: fadeInUp; }
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .animated { animation: none !important; }
}