/**
 * Native accordion — DS-consistent header (ISS-0004).
 *
 * The accordion heading is a native <button>, so it inherits the JetStream
 * button system (assets/css/forms/_button.css): brand-accent fill on
 * hover/active, an inset rounded "pill", and a hover underline — all
 * off-charter for a content accordion. theme.json tokenizes the static look
 * (item card, heading surface + typography, panel) but cannot reach the
 * <button> element or its interactive states; that is what this file owns.
 *
 * Strategy:
 *  - The TOGGLE becomes the full-bleed clickable header (it carries the
 *    padding, moved off the heading), so its highlight spans the whole head —
 *    not just the text zone.
 *  - The ITEM clips its children (overflow:hidden) to the card radius, so the
 *    square full-bleed highlight follows the rounded corners, closed and open.
 *  - The DS button variables are remapped to the neutral ramp on the toggle,
 *    so the existing button rules paint neutral (light-dark() safe) with no
 *    specificity override war. The DS focus ring is kept, but inset so the
 *    item's overflow:hidden cannot clip it.
 */

/* Card clips its children to the rounded corners (closed and open). */
.wp-block-accordion-item {
	overflow: hidden;
}

/* Toggle = full-bleed header. Padding lives here (moved off the heading) so the
   highlight covers the entire head. Square corners — the item rounds it. */
.wp-block-accordion-heading__toggle {
	width: 100%;
	border-radius: 0;

	/* Default header padding: L (20px). theme.json can't reach the <button> toggle
	   (only the core default spacing--20 0 does), so the default lives here; the
	   native Padding control on the heading still overrides it per instance. */
	padding: var( --wp--custom--semantic--spacing--base-250 );

	/* Remap the DS button vars to the neutral ramp (kills the accent pill). */
	--js-btn-surface: var( --wp--custom--semantic--color--neutral--surface );
	--js-btn-color: var( --wp--custom--semantic--text--primary );
	--js-btn-hover: var( --wp--custom--semantic--color--neutral--dim );
	--js-btn-active: var( --wp--custom--semantic--color--neutral--container );

	/* Keep the DS focus ring, but inset so overflow:hidden can't clip it. */
	--js-control-focus-ring-offset: -2px;
}

/* Hover / active — written on the TOGGLE selector, not left to the DS button rules.
 *
 * ISS-0023 : le système de boutons peint le survol par `:where(button):hover`, de
 * spécificité NULLE. Or le cœur de WordPress pose
 * `.wp-block-accordion-heading__toggle { background: none }` en 0,1,0 : il gagne
 * systématiquement, et le survol ne peignait jamais.
 *
 * Le remappage des variables ci-dessus reste la source des couleurs — on corrige la
 * portée de la règle, pas la charte. C'est d'ailleurs pour la même raison que l'état
 * ouvert fonctionnait déjà : sa règle porte un attribut, donc 0,2,0.
 */
.wp-block-accordion-heading__toggle:hover:not( :disabled ) {
	background-color: var( --js-btn-hover );
}

.wp-block-accordion-heading__toggle:active:not( :disabled ) {
	background-color: var( --js-btn-active );
}

/* Open section: a subtle neutral tint (the expanded panel + close icon already
   signal the active state). Full bleed, clipped to the card radius. */
.wp-block-accordion-heading__toggle[aria-expanded="true"] {
	background-color: var( --wp--custom--semantic--color--neutral--dim );
	color: var( --wp--custom--semantic--text--primary );
}

/* No hover/open underline — the surface highlight signals clickability. */
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title,
.wp-block-accordion-heading__toggle[aria-expanded="true"] .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * Surface variants (block styles, see inc/blocks/bootstrap.php)
 *
 * "Fond"    — the theme.json base: filled item + tinted header (default).
 * "Contour" — no fills; the item's hairline border becomes the whole visual,
 *             stepped up to the stronger neutral--outline. The header + hover
 *             stay transparent; only the leading edge + a faint open tint mark
 *             state. Same aeration + typography as Fond — only the surface
 *             treatment differs. Overrides theme.json (:where(), specificity 0).
 * ------------------------------------------------------------------------- */
.wp-block-accordion.is-style-contour .wp-block-accordion-item {
	background-color: transparent;
	border: var( --wp--custom--semantic--border--width--hairline ) solid
		var( --wp--custom--semantic--color--neutral--outline );
}

.wp-block-accordion.is-style-contour .wp-block-accordion-heading {
	background-color: transparent;
}

.wp-block-accordion.is-style-contour .wp-block-accordion-heading__toggle {
	/* Transparent surface; keep the neutral hover/active for affordance. */
	--js-btn-surface: transparent;
}

.wp-block-accordion.is-style-contour
	.wp-block-accordion-heading__toggle[aria-expanded="true"] {
	background-color: var( --wp--custom--semantic--color--neutral--surface );
}