/* ============================================
   DEILOFF MARMOLERIA — FIXES RESPONSIVOS
   Solo adaptacion mobile/tablet, sin cambios esteticos
   v2.0 — Julio 2026
   ============================================ */

/* 1. Header: escapar el filter:blur(0) (residuo de Elementor sin efecto visual)
   que atrapa a los hijos con position:fixed dentro de la caja del header
   (que ademas tiene overflow:hidden) -- sin esto, el menu desplegable queda
   invisible/no-clickeable en cualquier pagina que tenga ese residuo, aunque
   el DOM diga que esta bien. Selector universal via :has(), no depende del
   ID de cada pagina. */
@media (max-width: 1024px) {
  .e-con:has(.elementor-menu-toggle) {
    filter: none !important;
  }
}

/* 2. Boton hamburguesa: pegado a la derecha de la pantalla en TODAS las
   paginas, sin importar el ancho de columna o la alineacion configurados
   en cada header (varían de pagina a pagina, cada una con su propio ID). */
@media (max-width: 1024px) {
  .elementor-menu-toggle {
    position: fixed !important;
    top: 20px !important;
    right: 15px !important;
    z-index: 10000 !important;
  }
}

/* 3. Menu desplegable: mostrar cuando el toggle esta activo (no existia
   ninguna regla que lo hiciera), con fondo solido y scroll propio si el
   contenido (con submenus abiertos) supera el alto de pantalla. */
@media (max-width: 1024px) {
  .elementor-widget-nav-menu:has(.elementor-menu-toggle.elementor-active) .elementor-nav-menu--main {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 70px !important;
    left: 15px !important;
    right: 15px !important;
    width: auto !important;
    background: #ffffff !important;
    padding: 16px 20px !important;
    z-index: 9999 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
    max-height: 75vh !important;
    overflow-y: auto !important;
  }
  .elementor-widget-nav-menu:has(.elementor-menu-toggle.elementor-active) .elementor-nav-menu--main .elementor-nav-menu {
    flex-direction: column !important;
    width: 100% !important;
  }
}

/* 4. Submenus (Materiales > Piedras Naturales, etc.): usaban position:absolute
   heredado del diseño de escritorio, asi que se salian del panel desplegable
   en vez de empujarlo hacia abajo -- quedaban cortados en vez de poder
   scrollearse. El <li> padre es flex-direction:row (link + flecha al lado
   en desktop), por eso el submenu aparecia al costado en vez de abajo.
   Ademas tenian un fondo gris que no combinaba con el blanco del menu
   principal. */
@media (max-width: 1024px) {
  .elementor-nav-menu--main .sub-menu {
    position: static !important;
    width: 100% !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }
  .elementor-nav-menu--main li {
    flex-direction: column !important;
  }
}

/* 5. Seccion "Novedades" (y cualquier listado de posts de Elementor):
   la tarjeta de cada nota tenia flex-direction:row sin apilar en mobile,
   asi que la imagen ocupaba el 100% del ancho y el texto quedaba
   empujado completamente fuera de la pantalla */
@media (max-width: 1024px) {
  .elementor-post {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
  .elementor-post__thumbnail__link,
  .elementor-post__text {
    width: 100% !important;
  }
}

/* 6. Formulario de contacto (aparece en el footer de casi todas las
   paginas, wpforms id 228): sus campos tienen un ancho fijo de 600px
   puesto directamente en el CSS personalizado del widget de Elementor --
   en cualquier pantalla mas angosta que eso, los campos se salen del
   contenedor. Se usa "vw" (relativo al ancho real de la ventana) en vez
   de "%" para el campo y el boton de enviar por igual -- un porcentaje
   depende del contenedor padre de cada uno (que no siempre es el mismo
   ancho, ver fix #10 mas abajo), mientras que "vw" es identico para
   ambos sin importar la cadena de contenedores. */
@media (max-width: 1024px) {
  #wpforms-228-field_1,
  #wpforms-228-field_2,
  #wpforms-228-field_3,
  #wpforms-228-field_4,
  #wpforms-submit-228 {
    width: 90vw !important;
    max-width: 90vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* 7. En algunas paginas aparece un segundo menu "fantasma" pensado para
   tablet (.elementor-nav-menu--dropdown), superpuesto al menu real de
   mobile, sin haber sido tocado ni abierto por el usuario. Se oculta en el
   rango puramente mobile para no duplicar la navegacion. */
@media (max-width: 767px) {
  .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    display: none !important;
  }
}

/* 8. Footer (direccion/horarios + formulario de contacto): el contenedor
   que envuelve ambas columnas tiene flex-direction:row fijo (sin version
   mobile), asi que las dos quedan apretadas lado a lado en vez de una
   arriba de la otra. Como este bloque esta copiado en cada pagina (no es
   un template compartido), cada copia tiene su propio ID de Elementor --
   se usa :has() sobre el ID estable del formulario (wpforms-228) para que
   el fix aplique en todas las paginas sin depender del ID de cada una. */
@media (max-width: 1024px) {
  .e-con:has(> #wpforms-228),
  .e-con:has(#wpforms-228) {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* 9. La columna que envuelve el formulario tiene align-items:center
   (heredado de un ajuste pensado para escritorio), asi que en vez de
   estirarse al ancho real de la fila se encoge a su contenido. Se fuerza
   a que toda la cadena de contenedores -- incluido el contenedor del
   boton de enviar, que es DISTINTO al de los campos de texto y se habia
   quedado afuera de este fix la vez pasada, por eso el boton quedaba
   desalineado del resto -- ocupe el 100% real del ancho disponible. */
@media (max-width: 1024px) {
  .e-con:has(#wpforms-228) .elementor-widget-container,
  .e-con:has(#wpforms-228) .wpforms-container,
  .e-con:has(#wpforms-228) form.wpforms-form,
  .e-con:has(#wpforms-228) .wpforms-field-container,
  .e-con:has(#wpforms-228) .wpforms-submit-container {
    width: 100% !important;
  }
}

/* 11. Este bloque de footer esta copiado a mano en cada pagina, asi que el
   alto y el margen entre campos (heredados del CSS personalizado del
   widget original, con margin-bottom NEGATIVO: -20px) no son identicos en
   todas las copias -- en algunas paginas los campos quedan pegados uno
   arriba del otro, como una sola superficie continua. Se fija un alto y
   un margen positivo explicitos para los 4 campos, iguales en todas las
   paginas, en vez de depender del valor que haya quedado en cada copia. */
@media (max-width: 1024px) {
  #wpforms-228-field_1,
  #wpforms-228-field_2,
  #wpforms-228-field_3 {
    height: 48px !important;
    min-height: 48px !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
  }
  #wpforms-228-field_4 {
    height: 160px !important;
    min-height: 160px !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
  }
  #wpforms-submit-228 {
    margin-top: 6px !important;
  }
}

/* 12. El espacio visible entre campos en realidad lo controla el
   CONTENEDOR que envuelve cada campo (.wpforms-field: label + input),
   no el input en si -- el fix anterior (#11) ponia el margen solo en el
   input. Ademas el formulario tiene un campo oculto anti-spam
   (honeypot) de WPForms metido entre los campos visibles, asi que
   apoyarse en "margen entre hermanos consecutivos" es fragil. Se pone
   el espacio directamente en cada contenedor de campo, sin importar que
   haya campos ocultos de por medio. */
@media (max-width: 1024px) {
  #wpforms-228 .wpforms-field {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
  }
  #wpforms-228 .wpforms-submit-container {
    margin-top: 10px !important;
  }
}