/* ==========================================================================
   Ajustes de movil para cleanstocksupplies.com.au

   Solo corrige defectos medidos en el sitio real a 375px. No rediseña nada:
   cada bloque dice que estaba roto y por que se arregla asi.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. El menu movil salia en blanco

   Los enlaces de primer nivel estan pintados de blanco (#fff) porque en
   escritorio van sobre la barra azul de la cabecera. Al colapsar en movil,
   Elementor los apila sobre un panel blanco: contraste 1:1, los seis enlaces
   invisibles. Solo se leia GREEN CLEANING, que lleva su propio verde.

   Se le da al panel el mismo azul de la barra (#0e5c8a, medido en
   .elementor-element-hdr-nav) en vez de recolorear los enlaces. Asi el blanco
   vuelve a funcionar, el verde de marca se conserva legible, y el desplegable
   parece continuacion de la cabecera en lugar de un parche.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  .e-n-menu-heading {
    background: #0e5c8a !important;
    padding-bottom: 6px !important;
  }

  /* Sin esto el azul de arriba no se ve: Elementor Pro pinta cada fila de
     blanco con
       .elementor-widget-n-menu .e-n-menu[data-layout="dropdown"] .e-n-menu-title
     en widget-mega-menu.min.css. Se vuelve transparente para que el panel se
     vea a traves y el texto blanco recupere contraste (7,2:1). */
  .e-n-menu[data-layout="dropdown"] .e-n-menu-title,
  .elementor-widget-n-menu .e-n-menu[data-layout="dropdown"] .e-n-menu-title {
    background-color: transparent !important;
  }

  /* Sin separadores, seis filas del mismo azul se leen como un bloque unico. */
  .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title {
    border-bottom: 1px solid rgba(255, 255, 255, .16) !important;
  }

  .e-n-menu-heading > .e-n-menu-item:last-child > .e-n-menu-title {
    border-bottom: 0 !important;
  }

  /* El icono de hamburguesa y el de cerrar quedaban pegados al borde
     izquierdo de la pantalla (left:0, padding:0), medio cortados. */
  .e-n-menu-toggle {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* El carrito iba en position:absolute (top:60px, right:10px) dentro de
     .elementor-element-hdr-actions. En escritorio esa fila cabe en una linea
     y no estorba; al envolverse en tablet y movil, el boton "Sign in" baja
     justo a esa altura y el carrito se le monta encima (solape medido de
     54x36px a 768px). Devolviendolo al flujo se coloca solo, porque la fila
     ya es flex con justify-content:flex-end y gap.

     Ojo con la especificidad: quien lo dejo asi no lo hizo en Elementor sino
     en Apariencia > Personalizar > CSS adicional, con
       @media (max-width:768px){
         .elementor-location-header .elementor-widget-woocommerce-menu-cart{
           position:absolute!important; top:60px!important; right:10px!important }
       }
     Dos clases y !important. Hay que igualar o superar eso, por lo que aqui
     se usan tres clases; con `.elementor-element-hdr-cart` a secas no basta,
     aunque lleve !important. Si algun dia se borra esa regla del
     personalizador, este bloque se puede quitar. */
  .elementor-location-header .elementor-widget-woocommerce-menu-cart,
  .elementor-location-header .elementor-element.elementor-element-hdr-cart {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
  }
}

/* --------------------------------------------------------------------------
   2. La portada se desplazaba 26px a la derecha

   El culpable es el reCAPTCHA del formulario de contacto: mide 304px fijos y
   no encoge. Dentro de .css-contact-form-card, con 30px de relleno a cada
   lado, pide 366px donde solo hay 305. Como el track de la rejilla es `1fr`
   (= minmax(auto, 1fr)), su minimo es el contenido, asi que la columna se
   estiraba a 366px y arrastraba la pagina entera.

   Dos cosas: cortar ese minimo con min-width:0, y encoger el widget para que
   quepa de verdad (si solo se corta el minimo, el reCAPTCHA se sale de la
   tarjeta).
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

  .css-contact-grid > * {
    min-width: 0 !important;
  }

  .css-contact-form-card {
    padding: 18px !important;
  }

  .wpforms-container,
  .wpforms-container .wpforms-form {
    max-width: 100% !important;
  }

  /* 304 x 0.86 = 261px, dentro de los 269 disponibles. La altura se ajusta a
     mano porque transform no cambia el hueco que ocupa el elemento. */
  .wpforms-recaptcha-container {
    transform: scale(.86);
    transform-origin: left top;
    height: 68px !important;
  }
}