/**
 * Simó Lorenzo Kit — Menú (horizontal o vertical).
 *
 * Colores, separación y efectos llegan como variables desde el panel.
 * La dirección (control "Dirección", por dispositivo) cambia un juego de variables
 * --slk-dm-*; los valores por defecto de cada var() son los de la horizontal.
 * Submenú (un nivel, solo con menú de WordPress):
 * - Horizontal: desplegable al pasar el ratón o con el tabulador (:focus-within), sin JS.
 * - Vertical: siempre visible, sangrado bajo su enlace.
 */

.slk-dm {
	--slk-dm-gap: 24px;
}

.slk-dm__menu {
	display: flex;
	flex-direction: var(--slk-dm-dir, row);
	flex-wrap: wrap;
	justify-content: var(--slk-dm-jc, var(--slk-dm-x, flex-start));
	align-items: var(--slk-dm-ai, center);
	gap: var(--slk-dm-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.slk-dm__item,
.slk-dm__subitem {
	position: relative;
	margin: 0;
	padding: 0;
}

/* Vertical: el texto (y el submenú) sigue la alineación; horizontal: a la izquierda. */
.slk-dm__item {
	text-align: var(--slk-dm-item-ta, left);
}

.slk-dm__item::before,
.slk-dm__item::marker,
.slk-dm__subitem::before,
.slk-dm__subitem::marker {
	content: none;
}

/* inline-block (no flex): conserva los espacios entre palabras y el destacado. */
.slk-dm__link {
	position: relative;
	display: inline-block;
	color: var(--slk-dm-color, #111b2e);
	text-decoration: none;
	white-space: var(--slk-dm-ws, nowrap);
	transition: color 0.2s ease, background-color 0.2s ease;
}

.slk-dm__link:hover,
.slk-dm__link:focus-visible,
.slk-dm__item.has-children:hover > .slk-dm__link {
	color: var(--slk-dm-hover, #ee5670);
}

.slk-dm__item.is-current > .slk-dm__link,
.slk-dm__link[aria-current="page"] {
	color: var(--slk-dm-current, var(--slk-dm-hover, #ee5670));
}

.slk-dm__link:focus-visible,
.slk-dm__sublink:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.slk-dm__highlight {
	color: var(--slk-dm-highlight, #ee5670);
}

/* --- Efecto: subrayado animado --- */

.slk-dm--underline .slk-dm__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s ease;
}

.slk-dm--underline .slk-dm__link:hover::after,
.slk-dm--underline .slk-dm__link:focus-visible::after,
.slk-dm--underline .slk-dm__item.is-current > .slk-dm__link::after {
	transform: scaleX(1);
}

/* --- Efecto: fondo redondeado --- */

.slk-dm--pill .slk-dm__link {
	padding: 8px 16px;
	border-radius: 999px;
}

.slk-dm--pill .slk-dm__link:hover,
.slk-dm--pill .slk-dm__link:focus-visible,
.slk-dm--pill .slk-dm__item.is-current > .slk-dm__link {
	background: var(--slk-dm-hover-bg, rgba(17, 27, 46, 0.06));
}

/* --- Submenú --- */

.slk-dm__caret {
	display: var(--slk-dm-caret, inline-block);
	width: 6px;
	height: 6px;
	margin-left: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
}

.slk-dm__sub {
	position: var(--slk-dm-sub-pos, absolute);
	top: 100%;
	left: 50%;
	z-index: 100;
	min-width: var(--slk-dm-sub-minw, 200px);
	margin: var(--slk-dm-sub-m, 12px 0 0);
	padding: var(--slk-dm-sub-pad, 8px);
	list-style: none;
	border-radius: var(--slk-dm-sub-radius, 16px);
	background: var(--slk-dm-sub-surface, var(--slk-dm-sub-bg, #fff));
	box-shadow: var(--slk-dm-sub-shadow, 0 12px 32px rgba(17, 27, 46, 0.12));
	opacity: var(--slk-dm-sub-op, 0);
	visibility: var(--slk-dm-sub-vis, hidden);
	transform: var(--slk-dm-sub-tx, translate(-50%, 6px));
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

/* Puente invisible entre el enlace y el desplegable: no se cierra al bajar el ratón. */
.slk-dm__sub::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	display: var(--slk-dm-sub-bridge, block);
	height: 12px;
}

.slk-dm__item.has-children:hover > .slk-dm__sub,
.slk-dm__item.has-children:focus-within > .slk-dm__sub {
	opacity: 1;
	visibility: visible;
	transform: var(--slk-dm-sub-tx-open, translate(-50%, 0));
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

.slk-dm__sublink {
	display: block;
	padding: var(--slk-dm-sublink-pad, 10px 14px);
	border-radius: calc(var(--slk-dm-sub-radius, 16px) - 6px);
	color: var(--slk-dm-color, #111b2e);
	text-decoration: none;
	white-space: var(--slk-dm-ws, nowrap);
	transition: color 0.2s ease, background-color 0.2s ease;
}

.slk-dm__sublink:hover,
.slk-dm__sublink:focus-visible,
.slk-dm__subitem.is-current > .slk-dm__sublink {
	color: var(--slk-dm-hover, #ee5670);
	background: var(--slk-dm-sublink-hover-bg, var(--slk-dm-hover-bg, rgba(17, 27, 46, 0.06)));
}

@media (prefers-reduced-motion: reduce) {
	.slk-dm__link,
	.slk-dm__link::after,
	.slk-dm__sub {
		transition: none;
	}
}