/* Preguntas frecuentes (contenidos, #107). Solo tokens de style.css.
 * El grupo «Preguntas frecuentes» (clase `pf-faq`, inc/contenidos-faq.php):
 * un título y un bloque Detalles por pregunta. Cada pregunta es un nodo
 * blanco con sombra suave, como los del ERP, y el indicador de abrir y cerrar
 * lleva el verde del isotipo: chevron verde en un círculo verde suave;
 * abierta, el círculo se rellena y el chevron gira. Es un <details> nativo:
 * sin JS se abre y se cierra, y se pueden abrir varias a la vez. Sin
 * movimiento reducido, la respuesta entra con un fundido corto (solo opacity
 * y transform, §9.9).
 *
 * Las preguntas son los Detalles hijos directos del grupo. En un tema sin
 * theme.json, WordPress los mete en `.wp-block-group__inner-container` (en la
 * web y en el editor): el selector cubre los dos casos. Gana a los Detalles
 * genéricos de la prosa (templates/page/bloques.css) por especificidad, sin
 * depender del orden de las hojas. */

/* El apartado separa como un H2 de la prosa (su título es el primer hijo y
 * pierde ese aire). */
.pf-bloques > .pf-faq {
    margin-top: var(--pf-space-xl);
}

:is(.pf-faq, .pf-faq > .wp-block-group__inner-container) > .wp-block-details {
    margin: var(--pf-space-sm) 0 0;
    padding: 0;
    color: var(--pf-color-text);
    background-color: var(--pf-color-surface);
    border: 1px solid var(--pf-color-border);
    border-radius: var(--pf-radius-card);
    box-shadow: var(--pf-shadow-md);
    transition: border-color var(--pf-transition), box-shadow var(--pf-transition);
}

:is(.pf-faq, .pf-faq > .wp-block-group__inner-container) > :is(h2, h3, h4, p, ul) + .wp-block-details {
    margin-top: var(--pf-space-md);
}

/* La pregunta: toda la fila es el control (≥ 44 px de alto). */
:is(.pf-faq, .pf-faq > .wp-block-group__inner-container) > .wp-block-details > summary {
    position: relative;
    display: block;
    min-height: 2.75rem;
    padding: var(--pf-space-sm) calc(var(--pf-space-md) + 2rem + var(--pf-space-sm)) var(--pf-space-sm) var(--pf-space-md);
    font-size: var(--pf-text-md);
    font-weight: var(--pf-weight-bold);
    line-height: var(--pf-leading-snug);
    color: var(--pf-color-heading);
    list-style: none;
    cursor: pointer;
    border-radius: var(--pf-radius-card);
}

:is(.pf-faq, .pf-faq > .wp-block-group__inner-container) > .wp-block-details > summary::-webkit-details-marker {
    display: none;
}

/* Indicador: el círculo… */
:is(.pf-faq, .pf-faq > .wp-block-group__inner-container) > .wp-block-details > summary::before {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-end: var(--pf-space-md);
    width: 2rem;
    height: 2rem;
    margin-top: -1rem;
    background-color: var(--pf-color-brand-soft);
    border-radius: var(--pf-radius-round);
    -webkit-mask: none;
    mask: none;
    rotate: none;
    transition: background-color var(--pf-transition);
}

/* …y el chevron, que mira abajo cerrada y arriba abierta. */
:is(.pf-faq, .pf-faq > .wp-block-group__inner-container) > .wp-block-details > summary::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-end: calc(var(--pf-space-md) + 0.5rem);
    width: 1rem;
    height: 1rem;
    margin-top: -0.5rem;
    background-color: var(--pf-color-brand-strong);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

:is(.pf-faq, .pf-faq > .wp-block-group__inner-container) > .wp-block-details[open] > summary::before {
    background-color: var(--pf-color-brand);
    rotate: none;
}

:is(.pf-faq, .pf-faq > .wp-block-group__inner-container) > .wp-block-details[open] > summary::after {
    background-color: var(--pf-color-on-accent);
    rotate: 180deg;
}

/* La respuesta: la prosa de siempre (párrafos, listas, tablas) dentro del nodo. */
:is(.pf-faq, .pf-faq > .wp-block-group__inner-container) > .wp-block-details > :not(summary) {
    margin-inline: var(--pf-space-md);
}

:is(.pf-faq, .pf-faq > .wp-block-group__inner-container) > .wp-block-details > summary + * {
    margin-top: 0;
}

:is(.pf-faq, .pf-faq > .wp-block-group__inner-container) > .wp-block-details > :last-child:not(summary) {
    margin-bottom: var(--pf-space-md);
}

/* Al pasar, el nodo se marca como los del ERP (borde fuerte y más sombra). */
@media (hover: hover) {
    :is(.pf-faq, .pf-faq > .wp-block-group__inner-container) > .wp-block-details:has(> summary:hover) {
        border-color: var(--pf-color-border-strong);
        box-shadow: var(--pf-shadow-lg);
    }
}

/* Foco: el anillo común rodea el nodo entero. Sin :has(), el del resumen. */
@supports selector(:has(*)) {
    :is(.pf-faq, .pf-faq > .wp-block-group__inner-container) > .wp-block-details:has(> summary:focus-visible) {
        outline: 2px solid var(--pf-color-focus);
        outline-offset: 2px;
    }

    :is(.pf-faq, .pf-faq > .wp-block-group__inner-container) > .wp-block-details > summary:focus-visible {
        outline: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    :is(.pf-faq, .pf-faq > .wp-block-group__inner-container) > .wp-block-details > summary::after {
        transition: rotate var(--pf-transition), background-color var(--pf-transition);
    }

    :is(.pf-faq, .pf-faq > .wp-block-group__inner-container) > .wp-block-details[open] > :not(summary) {
        animation: pf-faq-respuesta var(--pf-transition);
    }
}

@keyframes pf-faq-respuesta {
    from {
        opacity: 0;
        transform: translateY(-0.375rem);
    }
}