/*
 * EcoWP FAQs — frontend accordion.
 *
 * Loaded only on requests that render the [ecowp_faq] shortcode.
 *
 * Everything inherits from the active theme (font, color, links). Colors are
 * derived from `currentColor`, so presets adapt to light and dark sections.
 * Themes can restyle any preset by overriding the custom properties below on
 * `.ecowp-faq`, without touching selectors.
 */

.ecowp-faq {
	--ecowp-faq-border-color: color-mix(in srgb, currentColor 20%, transparent);
	--ecowp-faq-border: 1px solid var(--ecowp-faq-border-color);
	--ecowp-faq-card-background: var(--wp--preset--color--base, #fff);
	--ecowp-faq-radius: 0.5rem;
	--ecowp-faq-gap: var(--wp--preset--spacing--sm, 0.75rem);
	--ecowp-faq-padding-block: 1rem;
	--ecowp-faq-padding-inline: 1.25rem;
	--ecowp-faq-question-size: 1.125em;
	--ecowp-faq-question-weight: 600;
	--ecowp-faq-icon-size: 1em;
	--ecowp-faq-focus: currentColor;
	--ecowp-faq-duration: 0.2s;
}

/* Base: what every preset (including "none") needs to work. */

.ecowp-faq__title {
	margin-block: 0 var(--ecowp-faq-gap);
}

.ecowp-faq__item {
	margin: 0;
}

.ecowp-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: var(--ecowp-faq-padding-block);
	list-style: none;
	cursor: pointer;
}

.ecowp-faq__question::-webkit-details-marker {
	display: none;
}

.ecowp-faq__question:focus-visible {
	outline: 2px solid var(--ecowp-faq-focus);
	outline-offset: 2px;
}

/* The heading keeps the theme's heading family, color and weight, but is
   sized as an accordion trigger rather than as a section heading. */
.ecowp-faq__question-text {
	margin: 0;
	font-size: var(--ecowp-faq-question-size);
	font-weight: var(--ecowp-faq-question-weight);
	line-height: 1.4;
}

.ecowp-faq__answer {
	padding-block-end: var(--ecowp-faq-padding-block);
}

.ecowp-faq__answer > :first-child {
	margin-block-start: 0;
}

.ecowp-faq__answer > :last-child {
	margin-block-end: 0;
}

/* Icons */

.ecowp-faq__icon {
	position: relative;
	flex: none;
	width: var(--ecowp-faq-icon-size);
	height: var(--ecowp-faq-icon-size);
}

.ecowp-faq__icon::before,
.ecowp-faq__icon::after {
	content: "";
	position: absolute;
	transition: transform var(--ecowp-faq-duration) ease;
}

.ecowp-faq--icon-chevron .ecowp-faq__icon::before {
	top: 20%;
	left: 25%;
	width: 50%;
	height: 50%;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.ecowp-faq--icon-chevron .ecowp-faq__item[open] > .ecowp-faq__question .ecowp-faq__icon::before {
	transform: translateY(35%) rotate(-135deg);
}

.ecowp-faq--icon-plus .ecowp-faq__icon::before,
.ecowp-faq--icon-plus .ecowp-faq__icon::after {
	top: calc(50% - 1px);
	left: 10%;
	width: 80%;
	height: 2px;
	background: currentColor;
}

.ecowp-faq--icon-plus .ecowp-faq__icon::after {
	transform: rotate(90deg);
}

.ecowp-faq--icon-plus .ecowp-faq__item[open] > .ecowp-faq__question .ecowp-faq__icon::after {
	transform: rotate(0deg);
}

/* Smooth open/close where the browser supports animating <details>. */

@supports (interpolate-size: allow-keywords) {
	.ecowp-faq {
		interpolate-size: allow-keywords;
	}

	.ecowp-faq__item::details-content {
		block-size: 0;
		overflow: hidden;
		transition: block-size var(--ecowp-faq-duration) ease, content-visibility var(--ecowp-faq-duration) allow-discrete;
	}

	.ecowp-faq__item[open]::details-content {
		block-size: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ecowp-faq {
		--ecowp-faq-duration: 0s;
	}
}

/* Preset: minimal — thin dividers between questions (none above the first
   or below the last). */

.ecowp-faq--minimal .ecowp-faq__item + .ecowp-faq__item {
	border-block-start: var(--ecowp-faq-border);
}

/* Preset: boxed — the whole list inside one bordered box. */

.ecowp-faq--boxed .ecowp-faq__list {
	border: var(--ecowp-faq-border);
	border-radius: var(--ecowp-faq-radius);
	overflow: hidden;
}

.ecowp-faq--boxed .ecowp-faq__item + .ecowp-faq__item {
	border-block-start: var(--ecowp-faq-border);
}

.ecowp-faq--boxed .ecowp-faq__question,
.ecowp-faq--boxed .ecowp-faq__answer {
	padding-inline: var(--ecowp-faq-padding-inline);
}

.ecowp-faq--boxed .ecowp-faq__question:focus-visible {
	outline-offset: -3px;
}

/* Preset: cards — each question as a separate card; when open, the question
   is the card header and the answer its body, split by a divider. */

.ecowp-faq--cards .ecowp-faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--ecowp-faq-gap);
}

.ecowp-faq--cards .ecowp-faq__item {
	border: var(--ecowp-faq-border);
	border-radius: var(--ecowp-faq-radius);
	background: var(--ecowp-faq-card-background);
}

.ecowp-faq--cards .ecowp-faq__question,
.ecowp-faq--cards .ecowp-faq__answer {
	padding-inline: var(--ecowp-faq-padding-inline);
}

.ecowp-faq--cards .ecowp-faq__item[open] > .ecowp-faq__question {
	border-block-end: var(--ecowp-faq-border);
}

.ecowp-faq--cards .ecowp-faq__answer {
	padding-block-start: var(--ecowp-faq-padding-block);
}