/**
 * Ajustes globales pequeños del tema hijo.
 * Los que solo afectan a una plantilla van en su propio fichero.
 */

/**
 * Buscador de la cabecera con la lupa sola (punto G2 de la revisión).
 *
 * El cliente no quería que «Search» pareciese una sección más del menú. Pero el
 * icono va con aria-hidden, así que quitar el texto dejaba el enlace sin nombre
 * accesible: un lector de pantalla anunciaría «enlace» y punto.
 *
 * Así que el texto se queda en el marcado y solo se esconde a la vista. No se
 * usa display:none ni visibility:hidden: eso también lo oculta a los lectores
 * de pantalla, que es justo lo que queremos evitar.
 */
.buscador-solo-icono .elementor-button-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	clip-path: inset(50%);
}

/* Sin texto al lado, el icono no necesita separación. */
.buscador-solo-icono .elementor-button-content-wrapper {
	gap: 0;
}

/**
 * Separación de los enlaces de la cabecera en pantallas de escritorio
 * estrechas (1025–1300 px).
 *
 * La cabecera de escritorio reparte la fila en 40% menú izquierdo, 28% logotipo
 * y 40% derecha, y la separación entre enlaces está puesta en la plantilla como
 * `calc( 10vw / 2 )`, o sea 5vw. El texto de los enlaces, en cambio, mide
 * siempre lo mismo porque el tamaño va en rem. Así que al bajar de ~1080 px el
 * contenedor se queda más corto que sus dos enlaces y el segundo cae a una
 * segunda línea, debajo del primero.
 *
 * Pasaba ya con "Where to buy" + "FAQ" en el menú de la derecha, y al renombrar
 * About us como The Spanish Way —siete caracteres más— empezó a pasar también
 * en el de la izquierda. Justo encima de 1024 px, que es donde la cabecera
 * cambia a la versión móvil, así que no lo tapa el menú hamburguesa.
 *
 * Se limita la separación a 26px en esa franja y no se toca nada por encima:
 * a partir de 1300 px sobra sitio y la cabecera se queda como está.
 *
 * La clase del widget va repetida para ganarle a la regla que genera Elementor
 * (`.elementor-12 .elementor-element.elementor-element-2a2a6cb`, tres clases)
 * sin depender del orden de carga de las hojas y sin usar !important.
 */
@media ( min-width: 1025px ) and ( max-width: 1300px ) {

	.elementor-location-header .elementor-widget-nav-menu.elementor-widget-nav-menu.elementor-widget-nav-menu {
		--e-nav-menu-horizontal-menu-item-margin: 26px;
	}
}