/* ==========================================================================
   RIIRI — ajustes exclusivos de WordPress
   --------------------------------------------------------------------------
   Esta hoja NO modifica el diseno aprobado. Solo resuelve lo que existe en
   WordPress y no existia en la maqueta estatica:

     1. La barra de administracion desplaza el header sticky.
     2. El selector de idioma, que la maqueta no contemplaba.
     3. La navegacion generada por wp_nav_menu.
     4. Contenido editorial (paginas sueltas, 404).

   riiri-base.css se carga antes y se deja intacto para poder comparar pixel a
   pixel contra la maqueta. Todo lo nuevo vive aqui.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Barra de administracion
   El header es sticky con altura --header (150px). Con la barra de admin
   visible quedaria por debajo de ella, y scroll-padding-top desalinearia
   todas las anclas.
   -------------------------------------------------------------------------- */
.has-admin-bar .site-header {
	top: 32px;
}

.has-admin-bar {
	scroll-padding-top: calc(var(--header) + 32px);
}

@media (max-width: 782px) {
	.has-admin-bar .site-header {
		top: 46px;
	}

	.has-admin-bar {
		scroll-padding-top: calc(var(--header) + 46px);
	}
}

/* --------------------------------------------------------------------------
   2. Selector de idioma
   Bandera de Colombia para espanol y de Estados Unidos para ingles, por
   decision del cliente. El estilo se controla con RIIRI_LANG_SWITCHER_STYLE;
   estas reglas cubren los tres valores posibles.
   -------------------------------------------------------------------------- */
.lang-switcher {
	display: flex;
	align-items: center;
	gap: 6px;
}

.lang-switcher__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 10px;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--navy);
	border: 1px solid transparent;
	transition: background .2s, border-color .2s, opacity .2s;
}

.lang-switcher__item:hover {
	background: rgba(6, 38, 90, .07);
}

.lang-switcher__item.is-current {
	border-color: rgba(6, 38, 90, .25);
	background: rgba(6, 38, 90, .05);
}

/* El idioma inactivo se atenua, nunca por debajo de 4.5:1 de contraste. */
.lang-switcher__item:not(.is-current) {
	opacity: .78;
}

.lang-switcher__item:not(.is-current):hover,
.lang-switcher__item:not(.is-current):focus-visible {
	opacity: 1;
}

.lang-switcher__flag {
	display: block;
	width: 22px;
	height: 15px;
	overflow: hidden;
	border-radius: 2px;
	/* Borde interior: separa la franja blanca de la bandera de EE.UU. del
	   fondo blanco del header sin anadir un elemento extra. */
	box-shadow: inset 0 0 0 1px rgba(6, 38, 90, .28);
	flex: 0 0 auto;
}

.lang-switcher__flag svg {
	display: block;
	width: 100%;
	height: 100%;
	/* Las banderas tienen proporciones distintas (19:10 EE.UU., 3:2 Colombia);
	   cover las normaliza a una misma caja sin deformarlas. */
	object-fit: cover;
}

.lang-switcher__code {
	font: 800 11px var(--display);
	letter-spacing: .04em;
}

/* Vista previa sin Polylang: se ve el diseno pero no invita a hacer clic. */
.lang-switcher--preview .lang-switcher__item {
	cursor: default;
}

.lang-switcher--preview .lang-switcher__item:hover {
	background: none;
}

/* La copia de escritorio vive en .header-tools, oculto por debajo de 780px. */
.lang-switcher--mobile {
	display: none;
}

@media (max-width: 780px) {
	.lang-switcher--desktop {
		display: none;
	}

	/* La copia movil ocupa una fila completa del panel desplegable, que el CSS
	   base define como grid de dos columnas. */
	.lang-switcher--mobile {
		display: flex;
		grid-column: 1 / -1;
		justify-content: center;
		gap: 10px;
		margin-top: 14px;
		padding-top: 14px;
		border-top: 1px solid rgba(6, 38, 90, .15);
	}

	.lang-switcher--mobile .lang-switcher__item {
		font-size: 12px;
		padding: 9px 14px;
	}

	.lang-switcher--mobile .lang-switcher__flag {
		width: 26px;
		height: 18px;
	}
}

/* --------------------------------------------------------------------------
   3. Navegacion generada por WordPress
   El walker emite anclas planas, igual que la maqueta. Solo falta el estado
   del item activo, que la maqueta estatica no tenia.
   -------------------------------------------------------------------------- */
.main-nav a.is-current {
	text-decoration: underline;
	text-decoration-color: var(--orange);
	text-decoration-thickness: 3px;
	text-underline-offset: 7px;
}

/* El boton de pestana necesita cursor y familia explicitos cuando lo genera
   PHP con el atributo type="button". */
.service-tabs button[type="button"] {
	font-family: var(--sans);
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   4. Contenido editorial (page.php, index.php, 404.php)
   -------------------------------------------------------------------------- */
.entry-content {
	line-height: 1.7;
}

.entry-content > * + * {
	margin-top: 1.1em;
}

/* El margen propio del primer y del ultimo bloque se suma al del contenedor y
   abre un hueco que nadie pidio: el <p> que WordPress genera trae el margen
   por defecto del navegador (1em arriba y abajo) ademas del espaciado de
   arriba. */
.entry-content > :first-child {
	margin-top: 0;
}

.entry-content > :last-child {
	margin-bottom: 0;
}

/* Un incrustado pegado en el editor (una direccion de YouTube, por ejemplo)
   llega como <iframe> y los navegadores le ponen un borde "inset" de 2px, que
   sobre fondo oscuro se ve como un marco blanco alrededor de una caja vacia si
   el video no carga. Ni borde, ni desbordamiento, y proporcion 16:9. */
.entry-content iframe,
.entry-content embed,
.entry-content object {
	display: block;
	border: 0;
	max-width: 100%;
}

.entry-content iframe[src*="youtube"],
.entry-content iframe[src*="youtu.be"],
.entry-content iframe[src*="vimeo"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.entry-content figure {
	margin-left: 0;
	margin-right: 0;
}

.entry-content h2,
.entry-content h3 {
	font-family: var(--display);
	letter-spacing: -.03em;
}

.entry-content a {
	color: var(--teal);
	text-underline-offset: 4px;
}

.entry-content img {
	max-width: 100%;
	height: auto;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	/* Una tabla larga no debe ensanchar el documento. */
	display: block;
	overflow-x: auto;
}

/* Sin relleno propio: dentro va una .slide, que ya trae el suyo, y la cabecera
   es sticky (ocupa su sitio en el flujo). Sumar var(--header) aqui dejaba
   295 px en blanco encima del titulo. */
.fallback-main {
	padding-top: 0;
}

/* --------------------------------------------------------------------------
   4a. Campos vaciados a proposito
   Un campo que el cliente vacia deja su etiqueta en el marcado (<p></p>), y con
   ella el margen y el espacio que ocupaba. El hueco se nota mas que el texto
   que habia. No se omite la etiqueta en la plantilla porque varias reglas del
   CSS aprobado seleccionan por elemento y posicion (.contact-copy > p:nth-of-
   type(2), .mission-statement p:last-child): quitar un <p> correria la cuenta y
   descolocaria el que si tiene texto.

   Se excluye .sr-only: #slideStatus nace vacio y lo rellena el JavaScript para
   anunciar la seccion visible al lector de pantalla.
   -------------------------------------------------------------------------- */
.site-main p:empty:not(.sr-only),
.site-main h2:empty,
.site-main h3:empty,
.site-main li:empty {
	display: none;
}

/* --------------------------------------------------------------------------
   4b. Logotipo
   El CSS aprobado fija el ANCHO del logo (.brand es flex:0 0 clamp(205px,19vw,
   300px)) y deja la altura libre, asi que la altura la decide la proporcion del
   archivo que se suba. Con el logo de la maqueta (1448x760) eso da 158 px de
   alto dentro de una cabecera de 150: se salia ya, pero el archivo tiene fondo
   blanco y mix-blend-mode:multiply, asi que el sobrante era invisible. Con un
   logo de fondo transparente, o de otra proporcion, deja de serlo.

   Aqui se limita la ALTURA y se deja que el ancho se ajuste solo. Asi cualquier
   archivo entra, sea cual sea su proporcion, y nadie tiene que calcular nada
   antes de subirlo.
   -------------------------------------------------------------------------- */
:root {
	/* Alto del logo. Unico numero que hay que tocar para agrandarlo o
	   reducirlo; el ancho se recalcula solo. Es practicamente todo el alto util
	   de la cabecera: --header menos sus 20 px de relleno, menos un par de
	   pixeles de aire. Subirlo mas lo pegaria al borde del area blanca. */
	--riiri-logo-h: 126px;
}

.brand img {
	/* height, no max-height: asi el logo ocupa siempre el alto disponible.
	   Con max-height, un archivo mas pequeno que el tope se quedaba a su
	   tamano natural y se veia diminuto en medio de la cabecera. */
	height: var(--riiri-logo-h);
	width: auto;
	max-width: 100%;
	/* Un logo muy apaisado toca antes el ancho de .brand que el alto. En ese
	   caso max-width recorta la caja y, con height fijo, el navegador
	   deformaria la imagen: object-fit la mantiene en proporcion dentro de la
	   caja, alineada a la izquierda. */
	object-fit: contain;
	object-position: left center;
}

@media (max-width: 1050px) {
	:root {
		--riiri-logo-h: 102px;
	}
}

@media (max-width: 780px) {
	:root {
		--riiri-logo-h: 62px;
	}
}

/* --------------------------------------------------------------------------
   5. Paginas interiores: su pie
   El selector de elemento "footer" del CSS aprobado lo posiciona en absoluto
   respecto a la seccion de contacto, donde vive en la portada. En una pagina
   interior esa seccion no existe: hay que reponer las cuatro propiedades.
   -------------------------------------------------------------------------- */
.inner-footer {
	position: static;
	left: auto;
	right: auto;
	bottom: auto;
	padding: 26px var(--pad) 30px;
	background: var(--navy);
	gap: 20px;
	flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   5b. Segundo enlace de la columna Our Vision
   El CSS aprobado tiene .purpose .btn { align-self:flex-start; margin-top:20px }
   contando con que el boton es hijo directo de un flex en columna. Al meterlo
   en una fila con el enlace, esas dos propiedades hay que neutralizarlas.
   -------------------------------------------------------------------------- */
.purpose-actions {
	align-self: flex-start;
	margin-top: 20px;
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
}

.purpose-actions .btn {
	align-self: center;
	margin-top: 0;
}

.purpose-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	text-decoration: none;
	color: var(--navy);
}

.purpose-link strong {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.purpose-link:hover strong {
	text-decoration-color: var(--white);
}

/* La columna derecha es teal con texto blanco: el enlace hereda ese color en
   lugar del navy de la izquierda. */
.relocation-actions {
	margin: 26px 0 0;
}

.purpose-link--light {
	color: #fff;
}

.purpose-link--light:hover strong {
	text-decoration-color: var(--orange);
}

/* Enlace generado por el shortcode [videos] dentro de un parrafo. Hereda el
   color del texto que lo rodea, que puede ser navy o blanco segun la seccion. */
.riiri-inline-link {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	white-space: nowrap;
}

.riiri-inline-link:hover {
	text-decoration-color: var(--orange);
}

/* --------------------------------------------------------------------------
   6. Pagina de videos (page-videos.php)
   Namespace propio. No se reutiliza .slide (fija 100vh de alto y es lo que
   observa main.js para marcar el menu) ni .reveal (arranca en opacity:0 y solo
   lo levanta ese mismo observador).
   -------------------------------------------------------------------------- */
.video-page {
	background: var(--navy);
	color: #fff;
	/* NO sumar var(--header) aqui. La primera capa del CSS aprobado declara la
	   cabecera position:fixed, pero la segunda la cambia a sticky, asi que ya
	   ocupa su sitio en el flujo y el contenido arranca debajo por si solo.
	   Sumarla dejaba el doble de hueco: 150 px de cabecera mas 173 de relleno,
	   323 px en blanco encima del titular.
	   Los cortes son los mismos que usa .slide en la maqueta, un poco mas
	   ajustados: una pagina interior no necesita el respiro del hero. */
	padding: clamp(56px, 5.5vw, 88px) var(--pad) clamp(70px, 7vw, 110px);
}

@media (max-width: 1050px) {
	.video-page {
		padding-top: 64px;
		padding-bottom: 80px;
	}
}

@media (max-width: 780px) {
	.video-page {
		padding-top: 52px;
		padding-bottom: 64px;
	}
}

.video-intro {
	max-width: 1380px;
	margin: 0 auto clamp(34px, 4vw, 58px);
}

.video-intro h1 {
	font-family: var(--display);
	font-weight: 800;
	letter-spacing: -.055em;
	font-size: clamp(40px, 5.2vw, 76px);
	line-height: 1.03;
	margin: 0;
	max-width: 20ch;
}

.video-intro__copy {
	max-width: 760px;
	margin-top: 22px;
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.7;
	color: #d9e6f4;
}

.video-intro__copy a {
	color: var(--orange);
}

.video-back {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 26px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	color: #6ce0df;
}

.video-back:hover {
	text-decoration: underline;
	text-decoration-color: var(--orange);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

.video-list {
	max-width: 1380px;
	margin: 0 auto;
}

.video-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* auto-fill con un minimo: pasa de tres a dos y a una columna sin media
	   queries, y una lista de dos videos no se estira a lo ancho. */
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: clamp(26px, 3vw, 46px);
}

.video-card {
	display: flex;
	flex-direction: column;
}

/* La caratula: un boton que ocupa todo el ancho y mantiene 16:9. */
.video-card__frame {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	overflow: hidden;
	/* El degradado va en todas las caratulas, no solo en las que no tienen
	   miniatura: si YouTube deja de servir la imagen (video borrado, red
	   caida), debajo queda el panel de color y no un hueco gris. */
	background: linear-gradient(135deg, var(--teal) 0%, var(--navy) 100%);
	cursor: pointer;
	/* El desplazamiento solido del diseno aprobado, el mismo de .contact-card. */
	box-shadow: 10px 10px 0 rgba(255, 157, 10, .9);
	transition: transform .2s, box-shadow .2s;
}

.video-card__frame:hover {
	transform: translateY(-3px);
	box-shadow: 12px 12px 0 var(--orange);
}

.video-card__thumb {
	display: block;
	width: 100%;
	height: 100%;
	/* La miniatura de YouTube es 4:3 con bandas: cover recorta las bandas. */
	object-fit: cover;
}

.video-card__play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 68px;
	height: 68px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--orange);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
	transition: transform .2s;
}

/* El triangulo se dibuja con bordes: ni una imagen ni una fuente de iconos. */
.video-card__play::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-42%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent var(--navy);
}

.video-card__frame:hover .video-card__play {
	transform: translate(-50%, -50%) scale(1.08);
}

/* Sin miniatura (Vimeo sin imagen destacada, u otro enlace): panel de color. */
.video-card__frame--plain {
	background: linear-gradient(135deg, var(--teal) 0%, var(--navy) 100%);
}

.video-card__title {
	font-family: var(--display);
	font-weight: 800;
	font-size: clamp(19px, 1.5vw, 23px);
	line-height: 1.22;
	letter-spacing: -.03em;
	margin: 0;
}

.video-card__text {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: #c3d5e9;
}

/* El iframe sustituye al boton al pulsar: hereda la misma caja. */
.video-card__player {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0 0 20px;
	background: #000;
	box-shadow: 10px 10px 0 rgba(255, 157, 10, .9);
}

.video-card__player iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-empty {
	margin: 0;
	font-size: clamp(17px, 1.4vw, 21px);
	line-height: 1.6;
	color: #d9e6f4;
}

.video-empty__admin {
	margin: 26px 0 0;
}

@media (max-width: 520px) {
	/* El desplazamiento solido se sale de la pantalla en movil. */
	.video-card__frame,
	.video-card__player {
		box-shadow: 6px 6px 0 rgba(255, 157, 10, .9);
	}

	.video-card__play {
		width: 56px;
		height: 56px;
	}

	.inner-footer {
		flex-direction: column;
		gap: 10px;
	}
}