/*
 * Nanomegas A11y — Frontend Fixes CSS
 * WCAG 2.1 AA corrections for Divi-based sites
 *
 * Variables globales — sobrescribibles por el tema vía :root
 */
:root {
	--nma11y-focus-color:  #005fcc;
	--nma11y-focus-width:  3px;
	--nma11y-focus-offset: 2px;
}

/* =============================================================
   FIX #03 — Skip link  (WCAG 2.4.1)
   Oculto visualmente; aparece al recibir el foco con teclado.
   El color de foco reutiliza las variables globales del plugin.
   ============================================================= */
/*
 * position: fixed es relativo al viewport, no al contenedor de Divi.
 * El show/hide también lo gestiona JS (focus/blur inline styles) para
 * sobrevivir a cualquier override de Divi sobre :focus. El CSS con ID
 * actúa como red de seguridad con la máxima especificidad posible en CSS.
 */
#nma11y-skip-link {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;
	padding: 0.75em 1.25em;
	background: #fff;
	color: #000;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	border-radius: 0 0 4px 0;
	box-shadow: none;
	transform: translateY(-100%);
	opacity: 0;
	transition: transform 0.15s ease, opacity 0.15s ease !important;
}

#nma11y-skip-link:focus,
#nma11y-skip-link:focus-visible {
	transform: translateY(0) !important;
	opacity: 1 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	outline: var(--nma11y-focus-width) solid var(--nma11y-focus-color) !important;
	outline-offset: var(--nma11y-focus-offset) !important;
}

@media (prefers-reduced-motion: reduce) {
	#nma11y-skip-link {
		transition: none !important;
	}
}

/* =============================================================
   FIX #17 — Botón pausa/play en vídeos hero con autoplay  (WCAG 2.2.2)
   Posición fija en la esquina inferior izquierda del contenedor.
   Contraste: blanco #fff sobre negro semitransparente → ratio > 4.5:1 ✓
   ============================================================= */

.nma11y-video-pause-btn {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: rgba(0, 0, 0, 0.72);
	color: #fff;
	font-size: 1.1rem;
	line-height: 1;
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	cursor: pointer;
	/* No hereda estilos de botón de Divi */
	font-family: inherit;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
	transition: background 0.15s ease, transform 0.1s ease;
}

.nma11y-video-pause-btn:hover {
	background: rgba(0, 0, 0, 0.9);
}

.nma11y-video-pause-btn:focus-visible {
	outline: var(--nma11y-focus-width) solid var(--nma11y-focus-color) !important;
	outline-offset: var(--nma11y-focus-offset) !important;
}

@media (prefers-reduced-motion: reduce) {
	.nma11y-video-pause-btn {
		transition: none !important;
	}
}

/* =============================================================
   FIX #02 — Nav uppercase via CSS  (WCAG 1.3.1)
   El HTML del menú queda en Title Case; el efecto visual de
   mayúsculas se garantiza aquí para que no dependa de cómo
   Divi o el tema gestionen su propio text-transform.
   ============================================================= */

/* Divi 4.x — menú de cabecera */
#et-top-navigation nav ul li a,
/* Divi 5.x / ET Builder menu module */
.et_pb_menu__menu nav ul li a,
/* Menú móvil Divi */
.et_mobile_menu li a {
	text-transform: uppercase !important;
}