/**
 * Detalles (core/details): botón del selector de la familia de Santa María y
 * variación «Leer más» (biografías e historia completas de Quiénes somos).
 *
 * «Leer más» guarda el texto largo de la web anterior debajo del resumen del
 * diseño: el <summary> parece un enlace en negrita con una flecha que gira al
 * abrir, con 44 px de alto para el dedo. theme.json no llega al <summary> ni
 * a su marcador.
 *
 * El diseño dibuja un botón en forma de píldora con tres puntos de color
 * (Movimiento, Cruzados y Milicia) y una flecha. Con <details> el selector se
 * abre con teclado y sin JavaScript, pero theme.json no puede ocultar el
 * texto del <summary> ni dibujar los puntos: el texto sigue en el HTML (es el
 * nombre accesible del botón) y se oculta con font-size: 0; los puntos y la
 * flecha son pseudoelementos. El desplegable está en core-group.css
 * (.fermento-familia__panel).
 */

/* ===== Leer más ===== */

.is-style-leer-mas {

	/* En bloque y con la flecha en línea: si el texto ocupa dos líneas, la
	   flecha sigue a la última palabra en lugar de quedarse sola al borde. */
	& > summary {
		display: block;
		box-sizing: border-box;
		inline-size: fit-content;
		max-inline-size: 100%;
		min-block-size: var(--wp--preset--dimension--tactil);
		padding-block: 8px;
		font-weight: 700;
		text-decoration: underline;
		text-underline-offset: 0.2em;
		list-style: none;
		cursor: pointer;
	}

	& > summary::-webkit-details-marker {
		display: none;
	}

	& > summary::after {
		content: "";
		display: inline-block;
		margin-inline-start: 10px;
		inline-size: 7px;
		block-size: 7px;
		border-block-end: 2.5px solid currentcolor;
		border-inline-end: 2.5px solid currentcolor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.15s ease;
	}

	& > :not(summary) {
		margin-block: 16px 0;
	}
}

/* ===== Selector de la familia ===== */

.fermento-familia {
	position: relative;
	flex-shrink: 0;

	& > summary {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		box-sizing: border-box;
		block-size: 40px;
		padding-inline: 14px;
		border: 1.5px solid color-mix(in srgb, currentcolor 45%, transparent);
		border-radius: var(--wp--preset--border-radius--pildora);
		font-size: 0;
		list-style: none;
		cursor: pointer;
	}

	& > summary::-webkit-details-marker {
		display: none;
	}

	/* Tres puntos solapados: el último de la lista queda debajo. */
	& > summary::before {
		content: "";
		inline-size: 32px;
		block-size: 14px;
		background:
			radial-gradient(circle at 25px 7px, var(--wp--custom--familia--milicia) 5.5px, var(--wp--preset--color--marca) 5.75px 7px, transparent 7.25px),
			radial-gradient(circle at 16px 7px, var(--wp--custom--familia--cruzados) 5.5px, var(--wp--preset--color--marca) 5.75px 7px, transparent 7.25px),
			radial-gradient(circle at 7px 7px, var(--wp--custom--familia--movimiento) 5.5px, var(--wp--preset--color--marca) 5.75px 7px, transparent 7.25px);
	}

	/* Flecha: se gira al abrir. */
	& > summary::after {
		content: "";
		inline-size: 6px;
		block-size: 6px;
		border-block-end: 2.5px solid currentcolor;
		border-inline-end: 2.5px solid currentcolor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.15s ease;
	}

	@media (width <= 37.5rem) {
		position: static;

		& > summary {
			gap: 6px;
			padding-inline: 10px;
		}
	}

	& > summary:focus-visible {
		outline: 3px solid var(--wp--custom--foco);
		outline-offset: 3px;
	}
}

.fermento-familia[open] > summary::after {
	transform: translateY(2px) rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {

	.fermento-familia > summary::after {
		transition: none;
	}
}

/* Estados de «Leer más» al final: son más específicos que las reglas del
   selector de la familia (no-descending-specificity). */

.is-style-leer-mas > summary:hover {
	text-decoration-thickness: 2px;
}

.is-style-leer-mas > summary:focus-visible {
	outline: 3px solid var(--wp--custom--foco);
	outline-offset: 3px;
}

.is-style-leer-mas[open] > summary::after {
	transform: translateY(2px) rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {

	.is-style-leer-mas > summary::after {
		transition: none;
	}
}