/* =========================================================================
   LAQUIN FOODS · Que nada se salga por el lado derecho

   Lo carga el plugin «Laquin Foods — Optimización» (assets/responsive.css),
   en todas las páginas. Son tres arreglos que comparten causa: en pantallas
   estrechas algo medía más que el documento, el navegador ensanchaba el
   viewport para que cupiera, y con él se iban la cabecera fija y la franja
   de fondo que asomaba por la derecha.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. La causa: la animación de entrada lateral

   Spectra anima las secciones con AOS. `fade-left` las coloca en
   `translate3d(100px, 0, 0)` y las deja ahí hasta que entran en pantalla;
   mientras tanto la sección asoma 100 px por la derecha y el documento se
   ensancha. En una pantalla de 400 px eso son 484 px de ancho desplazable,
   suficiente para ver el vino del fondo por el borde.

   En escritorio sobra sitio y no se nota, así que la animación se deja como
   está. De 767 px para abajo el desplazamiento pasa a ser vertical: misma
   entrada, mismo desvanecido, sin nada que sobresalga. Se cubren de una vez
   todas las variantes laterales de AOS, estén o no en uso hoy, para que
   añadir una sección nueva no vuelva a abrir el mismo agujero.

   Los selectores repiten el atributo para pesar (0,2,0) y no depender de en
   qué orden acabe esta hoja respecto a la de AOS.
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {

  [data-aos="fade-left"][data-aos],
  [data-aos="fade-right"][data-aos],
  [data-aos="fade-up-left"][data-aos],
  [data-aos="fade-up-right"][data-aos],
  [data-aos="fade-down-left"][data-aos],
  [data-aos="fade-down-right"][data-aos],
  [data-aos="slide-left"][data-aos],
  [data-aos="slide-right"][data-aos],
  [data-aos="zoom-in-left"][data-aos],
  [data-aos="zoom-in-right"][data-aos],
  [data-aos="zoom-out-left"][data-aos],
  [data-aos="zoom-out-right"][data-aos] {
    transform: translate3d(0, 40px, 0);
  }

  /* El estado final es el de siempre: sin desplazamiento. */
  [data-aos="fade-left"][data-aos].aos-animate,
  [data-aos="fade-right"][data-aos].aos-animate,
  [data-aos="fade-up-left"][data-aos].aos-animate,
  [data-aos="fade-up-right"][data-aos].aos-animate,
  [data-aos="fade-down-left"][data-aos].aos-animate,
  [data-aos="fade-down-right"][data-aos].aos-animate,
  [data-aos="slide-left"][data-aos].aos-animate,
  [data-aos="slide-right"][data-aos].aos-animate,
  [data-aos="zoom-in-left"][data-aos].aos-animate,
  [data-aos="zoom-in-right"][data-aos].aos-animate,
  [data-aos="zoom-out-left"][data-aos].aos-animate,
  [data-aos="zoom-out-right"][data-aos].aos-animate {
    transform: translate3d(0, 0, 0);
  }
}

/* -------------------------------------------------------------------------
   2. La red debajo

   Con lo de arriba ya no debería sobrar nada, pero un bloque nuevo mal
   configurado no tiene por qué llevarse por delante toda la página. `clip`
   recorta sin crear un contenedor de desplazamiento, así que —a diferencia
   de `hidden`— no rompe `position: sticky` ni el salto suave a las anclas
   del menú. Los navegadores que no lo entienden se quedan con `hidden`, que
   se declara antes.

   Esto es una red, no el arreglo: el arreglo es el punto 1.
   ------------------------------------------------------------------------- */

html,
body,
#page {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

/* -------------------------------------------------------------------------
   3. La cabecera móvil, dentro del viewport

   La barra de Astra va fija entre 12 px de margen a cada lado (menu.css).
   Cuando el documento se ensanchaba, esos 12 px se medían contra el ancho
   ensanchado y el botón de menú se quedaba fuera de la pantalla.

   Resuelto el desbordamiento ya cabe, pero la barra sigue siendo una fila de
   dos columnas que puede desbordarse por su cuenta si el logo crece. Se le
   da caja de borde y se le permite encoger: en flexbox los ítems no bajan de
   su contenido mientras `min-width` sea `auto`, y es justo lo que empujaba
   al botón fuera. El botón, en cambio, no encoge: es el que tiene que
   verse siempre.
   ------------------------------------------------------------------------- */

@media (max-width: 921px) {

  #ast-mobile-header .ast-main-header-wrap,
  #ast-mobile-header .ast-primary-header-bar,
  #ast-mobile-header .ast-builder-grid-row,
  #ast-mobile-header .site-header-primary-section-left,
  #ast-mobile-header .site-header-primary-section-right {
    box-sizing: border-box;
    max-width: 100%;
  }

  #ast-mobile-header .ast-builder-grid-row {
    min-width: 0;
  }

  /* El logo cede espacio; el botón no. */
  #ast-mobile-header .site-header-primary-section-left {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  #ast-mobile-header .site-header-primary-section-right {
    min-width: 0;
    flex: 0 0 auto;
  }

  #ast-mobile-header .ast-button-wrap,
  #ast-mobile-header .menu-toggle {
    flex: 0 0 auto;
  }
}