/*
 * React overrides for Prague template
 * Fixes that were previously handled by jQuery/JS
 */

/* -----------------------------------------------
   s-img-switch: hero and footer background images
   In the original, JS converted these <img> tags
   into CSS background images on their parent.
   Here we replicate that with object-fit: cover.
----------------------------------------------- */
.top-banner > .s-img-switch {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  z-index: 0;
}

/* Project list images fill their absolute container */
.project-list-img .s-img-switch {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

/* -----------------------------------------------
   Mobile navigation: show when menu is open
   Original JS used slideToggle(); we replicate
   with an important override on open-menu state.
----------------------------------------------- */
.prague-header.open-menu .prague-navigation {
  display: block !important;
}

/* -----------------------------------------------
   Body scroll lock when mobile menu is open
----------------------------------------------- */
body.no-scroll {
  overflow: hidden !important;
}

/* -----------------------------------------------
   Testimonials: pagination bullets are text-based
   (author names), not dots. The CSS already handles
   styling them as inline text.
----------------------------------------------- */
.testimonials-wrapper .swiper-pagination-bullet {
  display: block !important;
  border-radius: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
}

/* -----------------------------------------------
   Fix Bootstrap col padding conflict with
   Prague's no-padd utility on mobile
----------------------------------------------- */
@media (max-width: 767px) {
  .row-fluid {
    margin-left: 0;
    margin-right: 0;
  }
}

/* -----------------------------------------------
   Quitar outline de click (mantener para teclado)
----------------------------------------------- */
*:focus:not(:focus-visible) {
  outline: none;
}

/* -----------------------------------------------
   Header — reducir altura de la barra de navegación
----------------------------------------------- */
.prague-header {
  padding: 14px 30px !important;
}

/* La plantilla usa «overflow-x: hidden» en html/body para evitar el scroll horizontal,
   pero eso anula «position: sticky» (secciones que se quedan fijas al hacer scroll,
   como la de Panelate Flux). «clip» evita el scroll horizontal igual y no lo rompe.
   Los navegadores que no lo soporten mantienen el «hidden» de style.css. */
html, body {
  overflow-x: clip;
}