/* Ajustes al menú principal (Flatsome) para que los ítems entren en una sola
   línea SIN achicar el logo. El sitio original tenía 6 ítems; con Contacto
   (7) y luego "Validar certificado" (8, visible u oculto según el módulo
   valida-doc — ver [[Módulos del sitio]]) no alcanza el espacio, así que en
   vez de tocar el logo recuperamos el margen que Flatsome le deja alrededor
   (".logo{margin:0 30px}") y angostamos el propio menú.

   flex-shrink:0 en el logo es la protección real: ul.header-nav tiene
   flex-wrap:nowrap (no puede pasar ítems a una segunda línea), así que si el
   contenido no entra, flexbox por defecto encoge TODOS los hijos del
   contenedor — incluido el logo, que es hermano del <nav> en .header-inner.
   Sin esta línea, agregar un octavo ítem (Valida DOC visible) achicaba el
   logo notoriamente aunque el menú en sí tuviera espacio de sobra (bug real,
   2026-07-31 — se hizo visible recién al poder comparar el sitio con Valida
   DOC activo vs inactivo gracias al toggle de Módulos). */
#logo.logo {
  flex-shrink: 0;
  margin-left: 0;
  margin-right: 24px;
}

ul.header-nav.header-nav-main {
  justify-content: flex-start;
  flex-wrap: nowrap;
}

ul.header-nav.header-nav-main > li {
  margin: 0 3px;
}

ul.header-nav.header-nav-main > li > a.nav-top-link {
  padding-left: 6px;
  padding-right: 6px;
  font-size: 13px;
  white-space: nowrap;
}

/* Ítems partidos en dos líneas ("Validar certificado", "Acceso Entidades"):
   son los más largos de los 8 y en una sola línea vuelven a apretar el resto.
   El marcado va en content/header.html:
   <a class="nav-top-link"><span class="nav-dos-lineas">Acceso<br>Entidades</span></a>

   No altera la altura del header: éste es fijo (90px, wp-inline.css) y el
   line-height del nav es de 15px (20px en modo sticky), así que las dos
   líneas ocupan 30-40px y siguen centrándose verticalmente solas.

   El <span> NO es decorativo. El <a> del menú es un contenedor FLEX
   (flatsome.css: ".nav>li>a{display:flex}"), y ahí:
     - text-align sobre el <a> no centra nada, porque no aplica a flex items.
     - un <br> suelto dentro del <a> tampoco fuerza el corte: los dos textos
       quedan como flex items sueltos y el salto lo termina dando el
       flex-wrap según el ancho disponible — o sea que en otra pantalla
       podía volver a una sola línea.
   Envuelto en el <span> es UN solo flex item con layout de bloque adentro,
   donde el <br> sí corta siempre y el text-align sí centra.

   En el menú off-canvas mobile (content/after-footer.html) ambos van en UNA
   línea: ahí la lista es vertical y hay ancho de sobra. Son dos fragmentos
   HTML distintos — ver [[Menú mobile inconsistente con el desktop]]. */
ul.header-nav.header-nav-main .nav-dos-lineas {
  display: block;
  text-align: center;
}

/* Inocuo en los ítems de una línea: son flex de un solo item. */
ul.header-nav.header-nav-main > li > a.nav-top-link {
  justify-content: center;
}

.header-inner.container {
  padding-left: 8px;
  padding-right: 8px;
}

/* Antes solo se angostaba entre 850-1400px (7 ítems tenían de sobra arriba
   de 1400px). Con 8 ítems (Valida DOC activo) ya no alcanza ni siquiera en
   pantallas anchas si el logo no puede ceder espacio (ver flex-shrink:0
   arriba) — se angosta siempre a partir de 850px, no solo hasta 1400px.

   >=850px porque por debajo de eso Flatsome oculta este menú entero y
   muestra el hamburguesa (.show-for-medium) — este bloque NO debe tocar ese
   layout mobile (logo a la izquierda, botón hamburguesa a la derecha). */
@media (min-width: 850px) {
  #logo.logo {
    margin-right: 14px;
  }

  ul.header-nav.header-nav-main > li {
    margin: 0 1px;
  }

  ul.header-nav.header-nav-main > li > a.nav-top-link {
    padding-left: 3px;
    padding-right: 3px;
    font-size: 11px;
  }

  /* Logo + menú centrados como un solo bloque dentro del header, en vez de
     pegados a la izquierda con un vacío grande a la derecha (no hay
     cart/iconos del lado derecho que balanceen el "Right Elements" vacío de
     Flatsome). La columna del menú (content/header.html) trae flex-grow de
     Flatsome, que la hace ocupar TODO el espacio restante — sin anularlo
     acá, el justify-content:center no tiene efecto visible porque no queda
     espacio libre que centrar. */
  .header-inner.flex-row > .flex-col.flex-grow {
    flex-grow: 0;
  }

  .header-inner.flex-row {
    justify-content: center;
  }
}