/**
 * @layer components — navegación principal de escritorio, con el filete de
 * hover/foco (fila #8 del inventario de movimiento): un ::after independiente
 * del border-bottom que marca la página actual, para que ambos convivan sin
 * pisarse.
 *
 * `color`/`text-decoration` con !important: ver la nota en buttons.css —
 * WordPress imprime el color y el subrayado de los <a> como CSS global sin
 * @layer, y eso le gana a cualquier regla dentro de un @layer.
 */

@layer components {
	.nav-principal {
		display: none;
	}

	@media (width >= 1024px) {
		.nav-principal {
			display: block;
		}
	}

	.nav-principal__lista {
		display: flex;
		align-items: flex-start;
		gap: var(--space-5);
	}

	.nav-principal__lista > li > a:not(.boton) {
		position: relative;
		font-size: 13px;
		font-weight: 600 !important;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: color-mix(in oklab, var(--c-white) 82%, transparent) !important;
		text-decoration: none !important;
		padding-block: var(--space-1);
		padding-inline: var(--space-1);
		border-bottom: 1px solid transparent;
	}

	.nav-principal__lista > li > a:not(.boton)::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: -1px;
		height: 1px;
		background: var(--c-white);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--dur-2) var(--ease-glide);
	}

	.nav-principal__lista > li > a:not(.boton):hover,
	.nav-principal__lista > li > a:not(.boton):focus-visible {
		color: var(--c-white) !important;
	}

	.nav-principal__lista > li > a:not(.boton):hover::after,
	.nav-principal__lista > li > a:not(.boton):focus-visible::after {
		transform: scaleX(1);
	}

	.nav-principal__lista > li.current-menu-item > a:not(.boton),
	.nav-principal__lista > li.current_page_item > a:not(.boton) {
		color: var(--c-white) !important;
		border-bottom-color: var(--c-accent-600);
	}

	.nav-principal__con-submenu {
		position: relative;
	}

	.nav-principal__con-submenu > a::after {
		content: '▾';
		margin-inline-start: var(--space-1);
		font-size: .75em;
	}

	.nav-principal__submenu,
	.sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 280px;
		margin-top: var(--space-3);
		padding: var(--space-3) 0;
		background: var(--c-white);
		border: 1px solid var(--c-ink-200);
		box-shadow: 0 8px 24px rgb(15 15 14 / 0.08);
	}

	.nav-principal__con-submenu:hover > .nav-principal__submenu,
	.nav-principal__con-submenu:hover > .sub-menu,
	.nav-principal__con-submenu:focus-within > .nav-principal__submenu,
	.nav-principal__con-submenu:focus-within > .sub-menu {
		display: block;
	}

	.nav-principal__submenu li a,
	.sub-menu li a {
		display: block;
		padding: 6px 0px !important;
		font-size: 14px !important;
		color: var(--c-ink-700) !important;
		text-decoration: none !important;
		white-space: nowrap;
	}

	.nav-principal__submenu li a:hover,
	.sub-menu li a:hover,
	.nav-principal__submenu li a:focus-visible,
	.sub-menu li a:focus-visible {
		color: var(--c-accent-600) !important;
		background: var(--c-accent-050);
	}

	.nav-principal__cta > a {
		width: 100%;
		padding-inline: 16px !important;
		color: var(--c-ink-900) !important;
	}

}