/**
 * Estructura y superficie configurable del nav/footer público de Bz.
 *
 * Lo sirven las 12 plantillas públicas (6 tiendas + 6 fichas de producto), que
 * comparten el mismo HTML porque lo genera un solo módulo:
 * frontend/js/landing-header.js. Antes de existir este archivo, estas reglas
 * estaban duplicadas inline en los 12 HTML y ya habían empezado a divergir.
 *
 * QUÉ VIVE ACÁ y qué no:
 *   - Acá: estructura y comportamiento (flex/grid/posición/orden), idénticos en
 *     las 12 por construcción, y la superficie configurable como tokens
 *     `var(--lp-*)`, a propósito SIN valor de fallback: un token no seteado
 *     hace que la declaración compute como `unset` (o sea `inherit` en props
 *     heredadas, `initial` en el resto), que es exactamente lo que le pasa hoy
 *     a la plantilla que no declara esa propiedad. Con un fallback le
 *     estaríamos metiendo un valor que hoy no tiene.
 *   - NO acá: la identidad visual de cada plantilla (colores, tipografías,
 *     radios, sombras, transiciones). Eso sigue inline en cada HTML, porque las
 *     6 plantillas DEBEN verse distinto — es una característica del producto,
 *     no duplicación.
 *
 * CASCADA (el orden es el que ya usaban routes/store.js y routes/share.js):
 *   1. este archivo, por <link> en el <head> de cada plantilla
 *   2. el <style> inline de la plantilla -> pisa los tokens con SU identidad
 *   3. <style id="__landing_palette__">, que el server inyecta justo antes de
 *      </head> -> gana siempre, y es por donde entra lo que el admin configura
 *
 * Por eso un token nuevo de Configuración no necesita tocar los 12 HTML: basta
 * emitir una var más en ese bloque `:root` del server.
 */

/* Tokens que consume esta hoja (los declara cada plantilla en su :root; la
   Fase 1 de Configuración los vuelve a pisar desde el server):
     --lp-dd-min-width  --lp-footer-max-width  --lp-footer-pad
     --lp-footer-social-size  --lp-nav-blocks-pad  --lp-nav-gap
     --lp-nav-items-gap  --lp-nav-legacy-link-color
     --lp-nav-legacy-link-size  --lp-nav-legacy-link-spacing
     --lp-nav-legacy-link-transform  --lp-nav-legacy-link-weight
     --lp-nav-legacy-links-gap  --lp-nav-link-color  --lp-nav-link-size
     --lp-nav-link-spacing  --lp-nav-link-transform  --lp-nav-link-weight
     --lp-nav-max-width  --lp-nav-pad  --lp-row-gap  --lp-social-size
 */

.section-row{
  display: grid;
  gap: var(--lp-row-gap);
}

.section-row-col{
  min-width: 0;
}

.landing-navbar{
  max-width: var(--lp-nav-max-width);
  margin: 0 auto;
  padding: var(--lp-nav-pad-y) var(--lp-nav-pad-x);
  display: flex;
  align-items: center;
  gap: var(--lp-nav-gap);
  flex-wrap: wrap;
}

.landing-navbar-links{
  display: flex;
  gap: var(--lp-nav-legacy-links-gap);
  flex-wrap: wrap;
}

.landing-navbar-links a{
  color: var(--lp-nav-legacy-link-color);
  font-size: var(--lp-nav-legacy-link-size);
  font-weight: var(--lp-nav-legacy-link-weight);
  text-transform: var(--lp-nav-legacy-link-transform);
  letter-spacing: var(--lp-nav-legacy-link-spacing);
}

.landing-navbar-search{
  flex: 1;
  min-width: 160px;
  margin-left: auto;
}

.landing-navbar-search input{
  width: 100%;
}

.landing-navbar-social{
  display: flex;
}

.landing-social-link{
  font-size: var(--lp-social-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.landing-footer-inner{
  max-width: var(--lp-footer-max-width);
  margin: 0 auto;
  padding: var(--lp-footer-pad-y) var(--lp-footer-pad-x);
  text-align: center;
}

.landing-footer-phones{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.landing-footer-social{
  display: flex;
  justify-content: center;
}

.landing-footer-social .landing-social-link{
  font-size: var(--lp-footer-social-size);
}

.landing-navbar-blocks{
  max-width: var(--lp-nav-max-width);
  margin: 0 auto;
  padding: var(--lp-nav-blocks-pad-y) var(--lp-nav-blocks-pad-x);
  display: flex;
  flex-direction: column;
}

.landing-navbar-block{
  display: flex;
}

.landing-navbar-block-pos-left{
  justify-content: flex-start;
}

.landing-navbar-block-pos-center{
  justify-content: center;
}

.landing-navbar-block-pos-right{
  justify-content: flex-end;
}

.landing-announcement-bar-inner{
  width: 100%;
  text-align: inherit;
}

.landing-contact-bar-inner{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.landing-navbar-items{
  display: flex;
  gap: var(--lp-nav-items-gap);
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}

.landing-navbar-item{
  position: relative;
}

.landing-navbar-item>a{
  color: var(--lp-nav-link-color);
  font-size: var(--lp-nav-link-size);
  font-weight: var(--lp-nav-link-weight);
  text-transform: var(--lp-nav-link-transform);
  letter-spacing: var(--lp-nav-link-spacing);
  display: inline-flex;
  align-items: center;
}

.landing-navbar-dropdown{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  grid-auto-flow: column;
  z-index: 30;
  min-width: var(--lp-dd-min-width);
}

.landing-navbar-item.has-dropdown.open .landing-navbar-dropdown{
  display: grid;
}

.landing-navbar-dropdown-col{
  display: flex;
  flex-direction: column;
  min-width: 150px;
}

.landing-navbar-dropdown-item{
  display: flex;
  align-items: center;
}

.landing-footer-blocks{
  display: flex;
  flex-direction: column;
}

.landing-footer-block{
  width: 100%;
}

.landing-footer-columns{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: left;
}

.landing-footer-col{
  min-width: 140px;
}

.landing-footer-col a{
  display: block;
}

.landing-footer-newsletter{
  margin: 0 auto;
}

.landing-footer-newsletter-form{
  display: flex;
}

.landing-footer-newsletter-form input{
  flex: 1;
}

.landing-footer-newsletter-form button{
  cursor: pointer;
}

/* ── Fase 1: superficie configurable desde Configuración ─────────────────
   Todo lo de abajo tiene fallback al valor histórico, así que sin nada
   configurado el aspecto es idéntico al de antes. */

/* Tamaño de los íconos sociales. Antes el tamaño venía hardcodeado dentro de
   social-icons.js (width/height="20" en el SVG y un style inline en el <img>
   de los íconos custom), lo que hacía imposible configurarlo: el style inline
   no lo pisa ninguna hoja. Ahora el tamaño vive acá. */
.landing-social-link .social-icon-svg,
.landing-social-link .social-icon-svg-img{
  width: var(--lp-social-icon-px, 20px);
  height: var(--lp-social-icon-px, 20px);
}
.landing-social-link .social-icon-svg-img{
  object-fit: contain;
}

/* Nav fijo al hacer scroll. Tri-estado a propósito: sin el atributo cada
   plantilla conserva su comportamiento de fábrica (store-eshop y
   product-eshop ya traían su nav sticky, el resto no), y `off` permite
   apagarlo justamente en esas dos. El selector con atributo gana por
   especificidad sobre el `#navBarSlot{position:sticky}` inline de esas
   plantillas. */
body[data-nav-sticky="on"] #navBarSlot{
  position: sticky;
  top: 0;
  z-index: 25;
}
body[data-nav-sticky="off"] #navBarSlot{
  position: static;
}

/* Barra de anuncio descartable. El botón solo existe si el admin marcó
   `dismissible` en el bloque (ver landing-header.js). */
.landing-announcement-bar-inner.is-dismissible{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.landing-announcement-bar-inner .landing-announcement-bar-msgs{
  min-width: 0;
}
.landing-announcement-close{
  flex-shrink: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 1.15em;
  line-height: 1;
  padding: 0 2px;
  opacity: .7;
}
.landing-announcement-close:hover{
  opacity: 1;
}

/* Menú desplegable: forma de apertura y ancho (bloque nav_menu del
   constructor de Header). */

/* Apertura por hover. Va dentro de @media (hover: hover) a propósito: en un
   dispositivo táctil el "hover" queda pegado tras el primer toque y el menú
   no se puede cerrar. El click sigue funcionando siempre (lo engancha
   landing-header.js), así que en touch la experiencia es la de siempre. */
@media (hover: hover) {
  .landing-navbar-item.has-dropdown.dd-hover:hover .landing-navbar-dropdown{
    display: grid;
  }
}

/* Ancho del desplegable. 'auto' no tiene clase: usa --lp-dd-min-width y es el
   comportamiento histórico.

   La clase vive en el ÍTEM (dd-w-*), no en el desplegable, y eso es
   deliberado: el desplegable es position:absolute y su ancestro posicionado
   es el ítem, así que un left:0;right:0 puesto sobre él se resuelve contra el
   ancho del ítem y el "mega menú" queda igual de angosto. Para que tome el
   ancho de la barra hay que sacar al ítem del flujo de posicionamiento
   (position:static) y que el ancla sea el bloque del nav.

   El ancla es .landing-navbar-block y NO .landing-navbar-items: el buscador
   es hermano de los ítems, no hijo, así que anclar a .landing-navbar-items
   dejaba el mega menú cortado justo donde terminan los ítems. */
.landing-navbar-block{
  position: relative;
}
.landing-navbar-item.dd-w-wide > .landing-navbar-dropdown{
  min-width: min(880px, 92vw);
}
.landing-navbar-item.dd-w-full{
  position: static;
}
.landing-navbar-item.dd-w-full > .landing-navbar-dropdown{
  left: 0;
  right: 0;
  width: auto;
  min-width: 0;
}