/*
 * 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;
}

/* El botón del menú en móvil.
   Abre y cierra el menú, así que es un <button> y no un <a href="#">: un enlace a
   «#» no lleva a ninguna parte, Google lo sigue igual y con el teclado se comporta
   raro. Pero todo el CSS del tema está escrito para «.prague-nav-menu-icon a», así
   que al cambiar la etiqueta el icono se quedó sin borde y sin las tres rayas —
   invisible—. Aquí se le devuelve el mismo aspecto, regla por regla. */
.prague-nav-menu-icon button {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 34px;
  height: 34px;
  padding: 0;
  cursor: pointer;
  text-align: center;
  font-size: 16px;
  line-height: 32px;
  background-color: transparent;
  border: 1px solid rgba(17, 17, 17, 0.4);
  transition: border 0.3s ease-in, background-color 0.3s ease-in;
}

/* Las tres rayas: la de en medio es el propio <i>, las otras dos sus pseudoelementos */
.prague-nav-menu-icon button i {
  width: 16px;
  height: 1px;
  display: inline-block;
  position: relative;
  top: -4px;
  background-color: #111;
  transition: background-color 0.3s ease-in;
}

.prague-nav-menu-icon button i::before,
.prague-nav-menu-icon button i::after {
  content: "";
  width: 16px;
  height: 1px;
  position: absolute;
  left: 0;
  background-color: #111;
  transition: background-color 0.3s ease-in, transform 0.2s ease-in;
}

.prague-nav-menu-icon button i::before { top: -4px }
.prague-nav-menu-icon button i::after  { top: 4px }

.prague-nav-menu-icon button:hover {
  border: 1px solid #111;
  background-color: #111;
}

.prague-nav-menu-icon button:hover i,
.prague-nav-menu-icon button:hover i::before,
.prague-nav-menu-icon button:hover i::after {
  background-color: #fff;
}

/* Abierto: las rayas de fuera se cruzan en aspa y la de en medio desaparece */
.prague-nav-menu-icon.active button i { background-color: transparent }
.prague-nav-menu-icon.active button i::before { top: 0; transform: rotate(45deg) }
.prague-nav-menu-icon.active button i::after  { top: 0; transform: rotate(-45deg) }

/* La cabecera de Panelate lleva la clase «light», que en este tema significa
   cabecera oscura: ahí las rayas van en blanco. Sin esto quedarían negras sobre
   negro, que es tan invisible como no tenerlas. */
.prague-header.light .prague-nav-menu-icon button {
  border: 1px solid rgba(242, 242, 242, 0.4);
}

.prague-header.light .prague-nav-menu-icon button i,
.prague-header.light .prague-nav-menu-icon button i::before,
.prague-header.light .prague-nav-menu-icon button i::after {
  background-color: #fff;
}

.prague-header.light .prague-nav-menu-icon button:hover {
  border: 1px solid #fff;
  background-color: #fff;
}

.prague-header.light .prague-nav-menu-icon button:hover i,
.prague-header.light .prague-nav-menu-icon button:hover i::before,
.prague-header.light .prague-nav-menu-icon button:hover i::after {
  background-color: #111;
}

.prague-header.light .prague-nav-menu-icon.active button i { background-color: transparent }