/**
 * La franja de anuncio, debajo de la barra de menú.
 *
 * Copiada de la banda `#promo-bar` del HTML de referencia de la marca
 * (`voedia-brand/LANIDNG-EJEMPLO.html`): pastilla a la izquierda, mensaje en el
 * centro y enlace a la derecha, todo sobre azul.
 *
 * ── EL AZUL ES EL PRIMARIO, Y ESO OBLIGA A REDIBUJAR LAS TRES PIEZAS ────
 *
 * Va en `--vm-azul` `#3f97c2`, el mismo del logotipo, los titulares y las
 * tarjetas de formato. Sobre ese azul el blanco da **3,27:1**, que WCAG solo
 * acepta en «texto grande» —24 px, o 18,66 px en negrita—. Con la base al 120 %
 * de este sitio, medido pieza a pieza:
 *
 *   pastilla  0,70 rem → 13,4 px  → texto normal → suspende
 *   mensaje   0,88 rem → 16,9 px  → texto normal → suspende
 *   enlace    0,78 rem → 15,0 px  → texto normal → suspende
 *
 * Así que la franja no podía quedarse como estaba. Dos soluciones distintas,
 * cada una donde corresponde:
 *
 *   · EL MENSAJE sube a 1 rem en negrita —19,2 px—, con lo que entra en texto
 *     grande y su mínimo baja a 3:1.
 *   · LA PASTILLA Y EL ENLACE pasan a fondo BLANCO SÓLIDO con el texto en azul
 *     oscuro (4,99:1). Subirlos de tamaño habría convertido la franja en una
 *     valla publicitaria; en blanco se leen a cualquier tamaño y de paso el
 *     enlace gana el peso de botón que le corresponde.
 *
 * @package Voedia_Reader
 */

.voedia-anuncio {
	background: var( --vm-azul );
	color: var( --vm-blanco );
	padding: 0.65rem clamp( 1rem, 4vw, 2.5rem );
	font-family: var( --vm-sans );
}

.voedia-anuncio-fila {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	flex-wrap: nowrap;
	max-width: 1400px;
	margin: 0 auto;
}

/* Blanco sólido: ver el aviso de la cabecera. */
.voedia-anuncio-etiqueta {
	flex-shrink: 0;
	padding: 0.22rem 0.72rem;
	border-radius: 100px;
	background: var( --vm-blanco );
	color: var( --vm-azul-tinta );
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* 1 rem en negrita: es lo que hace que este texto entre en «texto grande» de
   WCAG y pueda ir en blanco sobre el azul primario.
   `min-width: 0` para que pueda encoger: sin él, un elemento flexible no baja
   de su ancho de contenido y empuja al enlace a una segunda línea. */
.voedia-anuncio-texto {
	min-width: 0;
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
}

/* El `strong` sube a 800 para separar la enumeración del resto. Sobre este azul
   no se puede bajar el blanco para hacer jerarquía —cualquier velo tira el
   contraste por debajo del mínimo—, así que la jerarquía la hace el grosor. */
.voedia-anuncio-texto strong { font-weight: 800; }

.voedia-anuncio-enlace {
	flex-shrink: 0;
	padding: 0.4rem 1rem;
	border-radius: 100px;
	background: var( --vm-blanco );
	color: var( --vm-azul-tinta );
	font-size: 0.8rem;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.voedia-anuncio-enlace:hover {
	background: var( --vm-azul-tinta );
	color: var( --vm-blanco );
	text-decoration: none;
}

.voedia-anuncio-enlace:focus-visible {
	outline: 3px solid var( --vm-blanco );
	outline-offset: 3px;
}

/* --- Ancho y estrecho ---------------------------------------------------
 *
 * La misma franja con dos redacciones. En ancho va el mensaje entero; en
 * estrecho, uno corto que cabe en UNA línea junto al enlace. Las dos están
 * impresas en el HTML y aquí solo se elige cuál se ve.
 *
 * `display: none` y no `visibility` ni un recorte: lo oculto no debe ocupar
 * sitio ni lo debe leer un lector de pantalla, que si no anunciaría el mensaje
 * dos veces. */
.voedia-anuncio--estrecho { display: none; }

@media ( max-width: 780px ) {
	.voedia-anuncio { padding: 0.55rem 0.9rem; }
	.voedia-anuncio-fila { gap: 0.6rem; }

	/* La pastilla se va: repite lo que dice el mensaje y es lo primero que
	   sobra cuando solo hay una línea. */
	.voedia-anuncio-etiqueta { display: none; }

	.voedia-anuncio--ancho { display: none; }
	.voedia-anuncio--estrecho { display: block; }
	a.voedia-anuncio--estrecho { display: inline-block; }

	/* Sigue en negrita y a 1 rem: el azul es el mismo y el mínimo de contraste
	   no cambia por estar en un móvil. Lo que se acorta es el TEXTO, no la
	   letra. */
	.voedia-anuncio-texto {
		font-size: 1rem;
		line-height: 1.25;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.voedia-anuncio-enlace { padding: 0.35rem 0.8rem; font-size: 0.78rem; }
}

@media ( prefers-reduced-motion: reduce ) {
	.voedia-anuncio-enlace { transition: none; }
}