/**
 * Core Accordion — DS 0.8.0 component. FAQ owns its mobile edge treatment.
 * Framed group, Body LG questions and Core-owned independent panel state.
 * Chevron via CSS mask over core’s “+” span.
 * Motion: panel height 300ms; content fade + 6px lift 200ms; chevron 200ms.
 */

.wp-block-accordion {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-block: var(--wp--custom--spacing--padding-block, clamp(3rem, 1.004rem + 4.163vi, 6rem));
	width: 100%;
	min-width: 0;
	max-width: 708px;
	margin-inline: auto;
	border: 2px solid var(--wp--custom--color--accordion-border);
	border-radius: 12px;
	background-color: var(--wp--custom--color--accordion-background);
	overflow: clip;
	color: var(--wp--custom--color--text-primary, inherit);
}

.wp-block-accordion-item {
	--ya-accordion-height-duration: 300ms;
	--ya-accordion-text-duration: 200ms;
	--ya-accordion-chevron-duration: 200ms;
	display: grid;
	grid-template-rows: max-content 0fr;
	min-width: 0;
	margin-block: 0;
	background-color: var(--wp--custom--color--accordion-background);
	border: 0;
}

.wp-block-accordion-item + .wp-block-accordion-item {
	border-block-start: 2px solid var(--wp--custom--color--accordion-border);
}

.wp-block-accordion-item.is-open {
	grid-template-rows: max-content 1fr;
}

.wp-block-accordion-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--figtree, inherit);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
}

.wp-block-accordion-heading__toggle {
	display: flex;
	align-items: flex-start;
	gap: var(--ya-spacing-16);
	width: 100%;
	padding-block: var(--ya-spacing-20);
	padding-inline: var(--ya-spacing-16);
	border: 0;
	border-radius: 0;
	background-color: var(--wp--custom--color--accordion-background);
	color: inherit;
	font-family: var(--wp--preset--font-family--figtree, inherit);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-align: left;
	cursor: pointer;
}

.wp-block-accordion-heading__toggle:hover:not(:disabled) {
	background-color: var(--wp--custom--color--accordion-background);
}

@media (hover: hover) {
	.wp-block-accordion-item:not(.is-open) .wp-block-accordion-heading__toggle:hover:not(:disabled) {
		background-color: var(--wp--custom--color--accordion-background-hover);
	}
}

.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle,
.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle:hover:not(:disabled) {
	background-color: var(--wp--custom--color--accordion-background-active);
}

.wp-block-accordion-item:has(> .wp-block-accordion-heading .wp-block-accordion-heading__toggle:disabled) {
	color: var(--wp--custom--color--text-disabled);
}
.wp-block-accordion-heading__toggle:disabled {
	cursor: default;
	opacity: 1;
}

.wp-block-accordion-heading__toggle:focus {
	outline: none;
}

/*
 * Inset focus ring so the bottom edge isn’t covered by the next item’s
 * border (outset outline sits under that divider when the row is closed).
 * :focus-visible = keyboard / intentional focus only.
 */
.wp-block-accordion-heading__toggle:focus-visible {
	position: relative;
	z-index: 1;
	outline: var(--wp--custom--focus--width, 3px) solid var(--wp--custom--color--focus-border);
	outline-offset: calc(-1 * var(--wp--custom--focus--width, 3px));
	border-radius: 2px;
}

.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-title {
	font-weight: 700;
}

.wp-block-accordion-heading__toggle-title {
	flex: 1;
	min-width: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	overflow-wrap: anywhere;
}

/*
 * Hide core’s “+”, paint chevron via mask.
 * Use white-fill data-URI so luminance masks work; color comes from background-color.
 */
.wp-block-accordion-heading__toggle-icon {
	--ya-accordion-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 11.667L12 17L4 11.667V9L12 14.333L20 9V11.667Z' fill='%23fff'/%3E%3C/svg%3E");

	flex: 0 0 24px;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	min-height: 1.6875rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0;
	line-height: 0;
	overflow: hidden;
	background-color: currentColor;
	-webkit-mask: var(--ya-accordion-chevron) center / contain no-repeat;
	mask: var(--ya-accordion-chevron) center / contain no-repeat;
}

/* Override core’s 45° “+ → ×” rotation. */
.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
	transform: rotate(180deg);
}

.wp-block-accordion-panel {
	padding-inline: var(--ya-spacing-20);
	background-color: var(--wp--custom--color--accordion-background);
	font-family: var(--wp--preset--font-family--figtree, inherit);
	font-size: var(--wp--preset--font-size--body-md, 1rem);
	font-weight: 400;
	line-height: 1.5;
}

/* Vertical answer spacing on content so closed 0fr rows stay zero-height. */
.wp-block-accordion-panel > :first-child {
	margin-block-start: var(--ya-spacing-20);
}

.wp-block-accordion-panel > :last-child {
	margin-block-end: var(--ya-spacing-40);
}

/*
 * Keep the panel in layout while closed so grid 0fr → 1fr can animate.
 * Core sets hidden="until-found"; its state also binds inert/aria-hidden in functions.php.
 */
.wp-block-accordion-item > .wp-block-accordion-panel {
	min-height: 0;
	overflow: hidden;
	visibility: hidden;
	transition: visibility 0s linear var(--ya-accordion-height-duration);
}

.wp-block-accordion-item.is-open > .wp-block-accordion-panel {
	visibility: visible;
	transition-delay: 0s;
}

.wp-block-accordion-item > .wp-block-accordion-panel[hidden="until-found"] {
	display: block;
	content-visibility: visible;
}

.wp-block-accordion-item > .wp-block-accordion-panel > * {
	opacity: 0;
	transform: translateY(6px);
}

.wp-block-accordion-item.is-open > .wp-block-accordion-panel > * {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-accordion-item {
		transition: grid-template-rows var(--ya-accordion-height-duration) cubic-bezier(0.32, 0.72, 0, 1);
	}

	.wp-block-accordion-item > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
		transition: transform var(--ya-accordion-chevron-duration) cubic-bezier(0.4, 0, 0.2, 1);
	}

	.wp-block-accordion-item > .wp-block-accordion-panel > * {
		transition:
			opacity var(--ya-accordion-text-duration) cubic-bezier(0.32, 0.72, 0, 1),
			transform var(--ya-accordion-text-duration) cubic-bezier(0.32, 0.72, 0, 1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-accordion-item {
		--ya-accordion-height-duration: 0ms;
		--ya-accordion-text-duration: 150ms;
		--ya-accordion-chevron-duration: 0ms;
	}
	.wp-block-accordion-item > .wp-block-accordion-panel > * {
		transform: none;
		transition: opacity var(--ya-accordion-text-duration) cubic-bezier(0.32, 0.72, 0, 1);
	}
}

[data-reduced-motion="true"] .wp-block-accordion-item {
	--ya-accordion-height-duration: 0ms;
	--ya-accordion-text-duration: 150ms;
	--ya-accordion-chevron-duration: 0ms;
}
[data-reduced-motion="true"] .wp-block-accordion-item > .wp-block-accordion-panel > * {
	transform: none;
}

/* Native keyboard focus makes Enter/Space state changes immediate, without a second controller. */
.wp-block-accordion-item:has(> .wp-block-accordion-heading :focus-visible) {
	--ya-accordion-height-duration: 0ms;
	--ya-accordion-text-duration: 0ms;
	--ya-accordion-chevron-duration: 0ms;
}

@media (forced-colors: active) {
	.wp-block-accordion {
		border-color: ButtonText;
	}

	.wp-block-accordion-heading__toggle:focus-visible {
		outline-color: Highlight;
	}
}