/**
 * MOS · Enlaces de texto, réplica del tema de Shopify
 *
 * Resuelto desde assets/theme.scss.liquid del respaldo del tema
 * (bloque `.rte, .rte-setting` y `.site-nav__link--underline`),
 * con el interruptor $animate_underlines en true.
 *
 * Variables sustituidas:
 *   $colorTextBody = settings.color_body_text = #000000
 *   $colorNavText  = settings.color_header_text = #000
 *   $siteNavItemPadding = 15px
 *
 * Cómo se usa:
 *   .mos-texto   en el contenedor  -> lo heredan todos los enlaces de dentro
 *   .mos-enlace  en un enlace suelto
 *   .mos-nav     en un enlace de menú
 *   .mos-menu    en el contenedor del menú -> lo heredan todos sus enlaces
 */

:root {
	--mos-enlace-linea-base: rgba(0, 0, 0, 0.15);
	--mos-enlace-grosor: 2px;
	--mos-enlace-duracion: 0.5s;
	--mos-nav-linea: #000000;
}

/* =========================================================================
 * 1. Enlace de texto
 *
 * Reposo: una línea de 1px al 15% del color del cuerpo, siempre visible.
 * Hover:  una segunda línea de 2px en currentColor que crece de 0 a 100%
 *         de ancho en medio segundo.
 * ====================================================================== */

.mos-texto a:not(.mos-btn):not(.mos-sin-linea),
a.mos-enlace {
	position: relative;
	text-decoration: none;
	border-bottom: 1px solid var(--mos-enlace-linea-base);

	/* El tema lo marca con este mismo comentario: hace falta para que el
	 * ::after tenga una caja de referencia del ancho del enlace. */
	display: inline-block;
}

.mos-texto a:not(.mos-btn):not(.mos-sin-linea)::after,
a.mos-enlace::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0%;
	border-bottom: var(--mos-enlace-grosor) solid currentColor;
	transition: width var(--mos-enlace-duracion) ease;
}

.mos-texto a:not(.mos-btn):not(.mos-sin-linea):hover::after,
.mos-texto a:not(.mos-btn):not(.mos-sin-linea):focus::after,
a.mos-enlace:hover::after,
a.mos-enlace:focus::after {
	width: 100%;
}

/* El único subrayado es el animado.
 *
 * Hay que apagar el de la hoja del tema en los estados interactivos, no
 * solo en reposo: `a:hover` suma especificidad y vuelve a encenderlo.
 *
 * Y hay que alcanzar a los hijos. Al poner una palabra en negritas, Brizy
 * envuelve el texto en un <strong>, y ese hijo dibuja su propia línea
 * encima de la que ya trae el enlace: de ahí el subrayado doble. El
 * text-decoration de un descendiente no lo borra el padre. */
.mos-texto a:not(.mos-sin-linea),
.mos-texto a:not(.mos-sin-linea):hover,
.mos-texto a:not(.mos-sin-linea):focus,
.mos-texto a:not(.mos-sin-linea):active,
.mos-texto a:not(.mos-sin-linea):visited,
a.mos-enlace,
a.mos-enlace:hover,
a.mos-enlace:focus,
a.mos-enlace:active,
a.mos-enlace:visited,
.mos-nav,
.mos-nav:hover,
.mos-nav:focus,
.mos-menu a,
.mos-menu a:hover,
.mos-menu a:focus {
	/* Brizy pinta sus enlaces con `.brz .brz-rich-text__custom a[href]:hover`:
	 * dos clases, un selector de atributo y una pseudoclase. Eso pesa más
	 * que cualquier selector de clase razonable de este lado, así que aquí
	 * no alcanza con subir especificidad. Va acotado a una sola propiedad. */
	text-decoration: none !important;
}

.mos-texto a *,
.mos-texto a:hover *,
.mos-texto a:focus *,
a.mos-enlace *,
a.mos-enlace:hover *,
a.mos-enlace:focus *,
.mos-nav *,
.mos-nav:hover *,
.mos-menu a *,
.mos-menu a:hover * {
	text-decoration: none !important;
	border-bottom: 0 !important;
}

/* Las imágenes enlazadas no llevan ni línea ni animación. */
.mos-texto a:has(img),
.mos-texto a.mos-enlace-imagen {
	border-bottom: 0;
	display: inline;
}

.mos-texto a:has(img)::after,
.mos-texto a.mos-enlace-imagen::after {
	content: none;
}

/* Un botón dentro de un bloque .mos-texto sigue siendo botón. */
.mos-texto a.mos-btn {
	border-bottom: 1px solid transparent;
	display: inline-block;
}

/* =========================================================================
 * 2. Enlace de menú
 *
 * La línea crece de izquierda a derecha en medio segundo, igual que en el
 * tema de Shopify.
 *
 * Why no va con ::after: un pseudoelemento absoluto se posiciona contra la
 * caja de padding, así que para que la línea midiera lo mismo que el texto
 * había que restarle el padding del enlace a mano. En Shopify ese número
 * era conocido —15px, el padding de los ítems del menú— pero en Brizy el
 * espaciado lo pone el contenedor y el valor cambia de un encabezado a
 * otro. Un degradado con `background-origin: content-box` mide la caja de
 * contenido, es decir el texto, sin que nadie tenga que saber el padding.
 * ====================================================================== */

.mos-nav,
.mos-menu a:not(.mos-btn):not(.mos-sin-linea) {
	position: relative;
	text-decoration: none;
	background-image: linear-gradient(var(--mos-nav-linea), var(--mos-nav-linea));
	background-repeat: no-repeat;
	background-position: left bottom;
	background-origin: content-box;
	background-size: 0% var(--mos-enlace-grosor);
	transition: background-size var(--mos-enlace-duracion) ease;
}

.mos-nav:hover,
.mos-nav:focus,
li:hover > .mos-nav,
.mos-menu a:not(.mos-btn):not(.mos-sin-linea):hover,
.mos-menu a:not(.mos-btn):not(.mos-sin-linea):focus,
.mos-menu li:hover > a:not(.mos-btn):not(.mos-sin-linea) {
	background-size: 100% var(--mos-enlace-grosor);
}

/* =========================================================================
 * 3. Accesibilidad
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	.mos-texto a::after,
	a.mos-enlace::after,
	.mos-nav,
	.mos-menu a {
		transition: none;
	}
}