/* aieo-faq-accordion.css — the accordion of the [faq] / [aieo_faq] shortcode (AIEO_FAQ): native <details>/<summary>.
 *
 * The theme's accordion look (rooster-theme assets/css/blocks/core/accordion.css, its footer's groups and its My
 * Account rows; the owner, 2 Nov 2026: "In the frequently asked questions make sure we also have an accordion view
 * similar to the one we have in the theme's footer or the my account page sections"): each question a full-width row
 * on a hairline of the line token; Lucide's chevron-down, a mask in the text colour, at the row's inline end, turned
 * up while the answer is open (no motion when the visitor asks for less); the open row, and a row under the pointer
 * or the focus, in the accent's readable shade, chevron included; the theme's focus ring; no native marker. Logical
 * properties only, so a right-to-left page mirrors it. Questions keep their natural case (not uppercased).
 *
 * No theme dependency: every token has a fallback, drawn from the text colour where it is a colour, so the sheet
 * reads in the light and the dark scheme of any theme. Scoped under .aieo-faq / .aieo-faq-accordion. */

.aieo-faq {
	width: 100%;
	margin: 0;
}

.aieo-faq__title {
	font-family: var(--wp--preset--font-family--heading, var(--wp--preset--font-family--aeonik, inherit));
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 0.75rem;
}

.aieo-faq__section-title {
	font-family: var(--wp--preset--font-family--heading, var(--wp--preset--font-family--aeonik, inherit));
	font-weight: 400;
	font-size: 1.125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 1.75rem 0 0.25rem;
}

.aieo-faq-accordion {
	--aieo-faq-line: var(--wp--preset--color--line, color-mix(in srgb, currentColor 18%, transparent));
	--aieo-faq-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	width: 100%;
}

.aieo-faq-accordion__item {
	margin: 0;
	padding: 0;
	border: 0;
	border-block-start: 1px solid var(--aieo-faq-line);
}
.aieo-faq-accordion__item:last-of-type {
	border-block-end: 1px solid var(--aieo-faq-line);
}

.aieo-faq-accordion__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4, 1rem);
	box-sizing: border-box;
	min-height: 3.5rem;
	margin: 0;
	padding-block: var(--wp--preset--spacing--4, 1rem);
	padding-inline: 0;
	list-style: none;
	cursor: pointer;
	text-align: start;
	font-family: var(--wp--preset--font-family--body, var(--wp--preset--font-family--aeonik, inherit));
	font-size: var(--wp--preset--font-size--lg, 1.125rem);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--wp--preset--color--fg, currentColor);
}
.aieo-faq-accordion__q::-webkit-details-marker { display: none; }
.aieo-faq-accordion__q::marker { content: ""; }

/* The chevron: the theme's (Lucide's chevron-down), in the row's colour. */
.aieo-faq-accordion__q::after {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background-color: currentColor;
	opacity: 0.75;
	-webkit-mask: var(--aieo-faq-chevron) center / contain no-repeat;
	mask: var(--aieo-faq-chevron) center / contain no-repeat;
	transition: rotate var(--wp--custom--rooster--motion--base, 200ms) ease;
}
.aieo-faq-accordion__item[open] > .aieo-faq-accordion__q::after {
	rotate: 180deg;
	opacity: 1;
}

/* The open row, and a row under the pointer or the focus, in the accent's readable shade (the theme's accordions). */
.aieo-faq-accordion__item[open] > .aieo-faq-accordion__q,
.aieo-faq-accordion__q:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--accent-text, currentColor);
}

/* The theme's focus ring; the transparent outline is what a forced-colours mode draws instead. */
.aieo-faq-accordion__q:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: var(--wp--custom--rooster--focus-ring, 0 0 0 3px color-mix(in srgb, currentColor 35%, transparent));
}

.aieo-faq-accordion__a {
	padding-block: 0 var(--wp--preset--spacing--4, 1rem);
	padding-inline: 0;
	line-height: 1.6;
}
.aieo-faq-accordion__a > :first-child { margin-block-start: 0; }
.aieo-faq-accordion__a > :last-child  { margin-block-end: 0; }

@media (min-width: 768px) {
	.aieo-faq-accordion__q {
		min-height: 4rem;
		font-size: var(--wp--preset--font-size--xl, 1.375rem);
		line-height: 1.2;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aieo-faq-accordion__q::after { transition: none; }
}

@media (forced-colors: active) {
	.aieo-faq-accordion__q::after {
		forced-color-adjust: none;
		background-color: CanvasText;
	}
}