/**
 * Toffoletto FAQ Accordion
 * Styles applied only when the Yoast FAQ block uses the "Accordion" style
 * (wrapper class: .schema-faq.is-style-accordion).
 *
 * Front-end uses native <details>/<summary> (no JavaScript).
 * In the editor the markup stays as the standard Yoast list, so these rules
 * are scoped to real <details> elements and won't disturb editing.
 */

.schema-faq.is-style-accordion {
	display: block;
}

.schema-faq.is-style-accordion details.schema-faq-section {
	border: 1px solid var(--toff-faq-border, #e2e2e2);
	border-radius: 6px;
	margin: 0 0 0.75em;
	background: var(--toff-faq-bg, #fff);
	overflow: hidden;
}

.schema-faq.is-style-accordion details.schema-faq-section[open] {
	border-color: var(--toff-faq-accent, #1a4a7a);
}

/* Question / toggle */
.schema-faq.is-style-accordion summary.schema-faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin: 0;
	padding: 1em 1.25em;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

/* Hide the default disclosure triangle (Safari + others) */
.schema-faq.is-style-accordion summary.schema-faq-question::-webkit-details-marker {
	display: none;
}
.schema-faq.is-style-accordion summary.schema-faq-question::marker {
	content: "";
}

/* Custom chevron indicator */
.schema-faq.is-style-accordion summary.schema-faq-question::after {
	content: "";
	flex: 0 0 auto;
	width: 0.6em;
	height: 0.6em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 0.2s ease;
	margin-top: -0.2em;
}

.schema-faq.is-style-accordion details[open] summary.schema-faq-question::after {
	transform: rotate(-135deg);
	margin-top: 0.15em;
}

.schema-faq.is-style-accordion summary.schema-faq-question:focus-visible {
	outline: 2px solid var(--toff-faq-accent, #1a4a7a);
	outline-offset: -2px;
}

/* Answer */
.schema-faq.is-style-accordion .schema-faq-answer {
	margin: 0;
	padding: 0 1.25em 1.25em;
}

.schema-faq.is-style-accordion .schema-faq-answer img {
	max-width: 100%;
	height: auto;
}

@media (prefers-reduced-motion: reduce) {
	.schema-faq.is-style-accordion summary.schema-faq-question::after {
		transition: none;
	}
}