/*
 * ADOK Certificación · preguntas frecuentes (acordeón de [adok_faq], fichas, áreas y artículos).
 * Va aparte de fichas.css para que la portada, que solo pinta [adok_faq], no cargue el resto.
 * Usa los tokens de theme.json (con valores de reserva).
 */

.adok-faq {
	--f-azul: var(--wp--preset--color--azul, #00509f);
	--f-noche: var(--wp--preset--color--azul-noche, #062b57);
	--f-claro: var(--wp--preset--color--azul-claro, #e8f0fa);
	--f-linea: var(--wp--preset--color--linea, #d9e2ec);
	--f-tinta: var(--wp--preset--color--tinta, #0f1b2d);
	--f-base: var(--wp--preset--color--base, #fff);
	max-width: 860px;
	color: var(--f-tinta);
}

.adok-faq * {
	box-sizing: border-box;
}

/* Reserva del título del tema con especificidad cero: cualquier regla del tema gana. */
:where(.adok-faq) :where(.adok-titulo-seccion) {
	margin: 0 0 .4em;
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	line-height: 1.15;
	color: var(--f-noche);
}

.adok-faq--suelta {
	margin-inline: auto;
}

.adok-faq .adok-faq__titulo {
	margin-bottom: .8em;
}

/* En la plantilla «página ancha» los shortcodes ocupan todo el ancho: margen lateral propio. */
.adok-contenido-ancho .wp-block-post-content > .adok-faq--suelta {
	box-sizing: content-box;
	padding-inline: var(--adok-gutter, 16px);
}

.adok-faq__lista {
	border-top: 1px solid var(--f-linea);
}

.adok-faq__item {
	border-bottom: 1px solid var(--f-linea);
}

/* Anclas que llegan desde fuera (#<slug> de la pregunta). El tema ya reserva la cabecera fija con
   scroll-padding-top en html; aquí solo un respiro. */
.adok-faq__item[id] {
	scroll-margin-top: 16px;
}

.adok-faq__pregunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 4px;
	color: var(--f-noche);
	font-size: 1.075rem;
	font-weight: 700;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.adok-faq__pregunta::-webkit-details-marker {
	display: none;
}

.adok-faq__pregunta:hover {
	color: var(--f-azul);
}

/* Foco azul sobre blanco (3:1 como mínimo, WCAG 1.4.11); en secciones oscuras el tema lo cambia a cian. */
.adok-faq__pregunta:focus-visible {
	outline: 3px solid var(--adok-foco, var(--f-azul));
	outline-offset: 2px;
	border-radius: 6px;
}

.adok-faq__icono {
	position: relative;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--f-claro);
	color: var(--f-azul);
}

.adok-faq__icono::before,
.adok-faq__icono::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	border-radius: 2px;
	background: currentColor;
}

.adok-faq__icono::after {
	transform: rotate(90deg);
}

.adok-faq__item[open] .adok-faq__icono {
	background: var(--f-azul);
	color: var(--f-base);
}

.adok-faq__item[open] .adok-faq__icono::after {
	transform: rotate(0deg);
}

.adok-faq__respuesta {
	padding: 0 52px 22px 4px;
	color: var(--f-tinta);
	line-height: 1.7;
}

.adok-faq__respuesta > :first-child {
	margin-top: 0;
}

.adok-faq__respuesta > :last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.adok-faq__icono,
	.adok-faq__icono::after {
		transition: transform .3s ease, background-color .3s ease;
	}

	.adok-faq__item {
		interpolate-size: allow-keywords;
	}

	.adok-faq__item::details-content {
		overflow: hidden;
		block-size: 0;
		transition: block-size .3s ease, content-visibility .3s allow-discrete;
	}

	.adok-faq__item[open]::details-content {
		block-size: auto;
	}
}

@media (max-width: 600px) {
	.adok-faq__respuesta {
		padding-right: 4px;
	}
}