/* =========================================================================
   Menú con desplegables (2026-10-06)
   - Escritorio: las líneas con subcategorías abren una lista al pasar el
     puntero, al enfocar con el teclado o al pulsar la flecha.
   - Celular: panel lateral izquierdo (84% del ancho, máx. 360px); el resto
     se oscurece y cierra al tocarlo; cada línea se despliega como acordeón.
   Se encola después de main.css, arridal.css y portada.css (prioridad 30).
   ====================================================================== */

/* ---- Botón flecha que añade main.js a cada línea con hijas ------------ */
.ap-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-inline-start: 2px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	vertical-align: middle;
	transition: transform 220ms ease, background-color 160ms ease;
}

.ap-nav__toggle svg {
	width: 14px;
	height: 14px;
	display: block;
}

.ap-nav__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ---- Escritorio ------------------------------------------------------- */
@media (min-width: 1024px) {
	.ap-nav__list > li {
		position: relative;
		display: flex;
		align-items: center;
	}

	.ap-nav__list .ap-nav__toggle {
		color: inherit;
	}

	.ap-nav__list .sub-menu {
		display: block;
		position: absolute;
		top: 100%;
		left: 50%;
		z-index: 110;
		min-width: 240px;
		padding: 10px 0;
		margin: 0;
		list-style: none;
		background: #fff;
		color: var(--pw-ink, #1b2a22);
		border-radius: 14px;
		box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
		transform: translate(-50%, 8px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
	}

	.ap-nav__list .sub-menu::before {
		content: "";
		position: absolute;
		top: -8px;
		left: 50%;
		width: 16px;
		height: 16px;
		background: #fff;
		transform: translateX(-50%) rotate(45deg);
		border-radius: 3px;
	}

	.ap-nav__list .sub-menu::after {
		/* puente invisible para que el puntero pueda bajar sin que se cierre */
		content: "";
		position: absolute;
		top: -14px;
		left: 0;
		right: 0;
		height: 14px;
	}

	.ap-nav__list > li:hover > .sub-menu,
	.ap-nav__list > li:focus-within > .sub-menu,
	.ap-nav__list > li.is-open > .sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translate(-50%, 0);
		transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
	}

	.ap-nav__list > li:hover > .ap-nav__toggle,
	.ap-nav__list > li.is-open > .ap-nav__toggle {
		transform: rotate(180deg);
	}

	.ap-nav__list .sub-menu li {
		border: 0;
	}

	/* Enlaces de la lista: mismos para la cabecera verde y la blanca */
	.ap-nav__list .sub-menu a,
	body.pw-portada .ap-nav__list .sub-menu a,
	body.pw-portada .ap-header.is-stuck .ap-nav__list .sub-menu a {
		display: block;
		padding: 10px 22px;
		font-family: var(--pw-font, var(--ap-font-body));
		font-size: 0.875rem;
		font-weight: 500;
		letter-spacing: 0.02em;
		text-transform: none;
		color: #1b2a22;
		text-shadow: none;
		white-space: nowrap;
		opacity: 1;
	}

	.ap-nav__list .sub-menu a::after {
		display: none;
	}

	.ap-nav__list .sub-menu a:hover,
	.ap-nav__list .sub-menu a:focus-visible,
	.ap-nav__list .sub-menu .current-menu-item > a,
	body.pw-portada .ap-nav__list .sub-menu a:hover,
	body.pw-portada .ap-nav__list .sub-menu .current-menu-item > a {
		color: var(--verde, #0b4a2a);
		background: rgba(11, 74, 42, 0.07);
		opacity: 1;
	}

	/* Si la lista queda cerca del borde derecho, se alinea a la derecha */
	.ap-nav__list > li:last-child > .sub-menu,
	.ap-nav__list > li:nth-last-child(2) > .sub-menu {
		left: auto;
		right: 0;
		transform: translate(0, 8px);
	}

	.ap-nav__list > li:last-child:hover > .sub-menu,
	.ap-nav__list > li:last-child:focus-within > .sub-menu,
	.ap-nav__list > li:last-child.is-open > .sub-menu,
	.ap-nav__list > li:nth-last-child(2):hover > .sub-menu,
	.ap-nav__list > li:nth-last-child(2):focus-within > .sub-menu,
	.ap-nav__list > li:nth-last-child(2).is-open > .sub-menu {
		transform: translate(0, 0);
	}

	.ap-nav__list > li:last-child > .sub-menu::before,
	.ap-nav__list > li:nth-last-child(2) > .sub-menu::before {
		left: auto;
		right: 28px;
		transform: rotate(45deg);
	}
}

/* ---- Celular: panel lateral izquierdo --------------------------------- */
@media (max-width: 1023.98px) {
	.ap-mobile-nav__backdrop {
		position: fixed;
		inset: 0;
		z-index: 98;
		background: rgba(8, 20, 14, 0.55);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
		opacity: 0;
		transition: opacity 260ms ease;
	}

	.ap-mobile-nav__backdrop.is-open {
		opacity: 1;
	}

	.ap-mobile-nav {
		/* Panel lateral izquierdo (2026-10-06). --ap-nav-top lo fija main.js
		   con la altura real de la cabecera para que la lista empiece debajo. */
		inset: 0 auto 0 0;
		width: min(84vw, 360px);
		height: 100%;
		height: 100dvh;
		padding: calc(var(--ap-nav-top, 110px) + 14px) 22px 28px;
		border-radius: 0 22px 22px 0;
		box-shadow: 18px 0 60px rgba(0, 0, 0, 0.35);
		transform: translateX(-100%);
		transition: opacity 220ms ease, transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
		overscroll-behavior: contain;
	}

	.ap-mobile-nav.is-open {
		transform: translateX(0);
	}

	.ap-mobile-nav__list {
		margin-bottom: 18px;
	}

	.ap-mobile-nav__list > li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		/* al desplegar, la línea no queda bajo la cabecera fija */
		scroll-margin-top: calc(var(--ap-nav-top, 110px) + 12px);
	}

	.ap-mobile-nav__list > li > a {
		flex: 1 1 0;
		min-width: 0;
		padding-block: 13px;
		font-size: 1.05rem;
		letter-spacing: 0.04em;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.ap-mobile-nav__list .ap-nav__toggle {
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		color: var(--crema, #f6f3ea);
		border-inline-start: 1.5px dashed rgba(246, 243, 234, 0.2);
		border-radius: 0;
	}

	.ap-mobile-nav__list .ap-nav__toggle svg {
		width: 18px;
		height: 18px;
		transition: transform 220ms ease;
	}

	.ap-mobile-nav__list > li.is-open > .ap-nav__toggle svg {
		transform: rotate(180deg);
	}

	/* Acordeón: las hijas solo se ven al abrir la línea */
	.ap-mobile-nav__list .sub-menu {
		flex: 0 0 100%;
		display: none;
		margin: 0 0 6px;
		padding: 0 0 4px;
		border-top: 1.5px dashed rgba(246, 243, 234, 0.14);
	}

	.ap-mobile-nav__list > li.is-open > .sub-menu {
		display: block;
	}

	.ap-mobile-nav__list .sub-menu li {
		border: 0;
	}

	.ap-mobile-nav__list .sub-menu a {
		padding: 9px 4px 9px 22px;
		font-size: 0.95rem;
	}

	.ap-mobile-nav__list .sub-menu a::before {
		content: "–";
		margin-inline-end: 8px;
		opacity: 0.6;
	}

	.ap-mobile-nav__foot {
		gap: 10px;
	}

	.ap-mobile-nav__foot {
		margin-top: 8px;
	}
}