/*
 * El menú principal en la misma línea que el logo, con el tema del sitio (`consulting`).
 * El motivo y las medidas están en `CabeceraDelTema.php`.
 *
 * Por debajo de 1025 px el tema cambia a su menú móvil y esto no aplica.
 *
 * 🔴 **Cada selector lleva `body` delante, y no es adorno** (medido en fac.es el 2026-10-19). Esta hoja
 * se imprime **antes** que la del tema (`skin-custom.css`), y el tema escribe `.header-box .container`
 * con la misma especificidad y `.header-box .container .logo-box` con una clase más: sin el `body`
 * ganaba el tema, el contenedor seguía saltando de línea y el menú caía debajo del logo en todo ancho
 * por debajo de 1920 px. Solo se aplicaba el relleno de los enlaces, que el tema no escribe igual.
 */
@media (min-width: 1025px) {
	/* El contenedor del tema deja saltar de línea; así el menú no cae debajo del logo. */
	body .header-box .container {
		flex-wrap: nowrap;
		align-items: center;
	}

	/* El logo ocupa lo suyo: antes se estiraba a todo el ancho y empujaba el menú abajo. */
	body .header-box .container .logo-box {
		flex: 0 0 auto;
		width: auto;
	}

	/* El menú, el resto. Si en una pantalla mediana no cabe, se parte al lado del logo, no debajo. */
	body .header-box .container .nav-box {
		flex: 1 1 auto;
		min-width: 0;
	}

	body .header-box .main_menu_nav {
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	/*
	 * El relleno de cada enlace, según el ancho. El tema pone 15 px por lado. Con 0,35 vw caben las trece
	 * entradas en una línea desde 1366 px (medido en og: con 0,4 vw faltaban 5 px a ese ancho); por
	 * debajo se parten en dos líneas, al lado del logo.
	 */
	body .header-box .main_menu_nav > li > a {
		padding-left: clamp(4px, 0.35vw, 15px);
		padding-right: clamp(4px, 0.35vw, 15px);
	}

	/*
	 * «Mi área» es siempre la última entrada y queda pegada al borde derecho; el tema abre los
	 * desplegables hacia la derecha con 230 px de ancho, así que el de «Salir» se saldría de la pantalla.
	 */
	body .header-box .main_menu_nav > li.fac-area-menu > .sub-menu {
		right: 0;
		left: auto;
		width: auto;
		min-width: 160px;
	}
}

/*
 * 🔵 **El tema deja 125 px a cada lado desde 1500 px**, con `!important`, y eso hace que a 1536 px haya
 * menos hueco para el menú (1.045 px) que a 1440 (1.169): el menú se partía en dos justo en las
 * pantallas de portátil grande. Con 40 px el hueco crece con el ancho, como se espera.
 */
@media (min-width: 1500px) {
	/* `html` delante: el tema escribe el mismo selector, también con `!important`, y se imprime después. */
	html body.header_navigation_wide .header-box .container {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
}