/**
 * Accordion — default design tokens.
 *
 * These are the plugin-level defaults for --ftps-accordion-* properties.
 * Override any of them in your theme's page-sections-tokens.css file.
 */

@layer ftps-defaults {

.page-section-accordion {

	/* ── Icon ───────────────────────────────────────────────────────── */
	--ftps-accordion-icon-size: 1.25em;

	/* Icon semantic aliases over the framework vocabulary */

	/* Each references an SVG data URI from page-sections-framework.css */
	--ftps-accordion-icon-closed:      var(--ftps-icon-angle-down);
	--ftps-accordion-icon-open:        var(--ftps-icon-angle-up);

	--ftps-accordion-icon-expand-more: var(--ftps-icon-angle-down);
	--ftps-accordion-icon-expand-less: var(--ftps-icon-angle-up);

	/* ── Title ──────────────────────────────────────────────────────── */
	--ftps-accordion-title-color: var(--accordion-title-color, inherit);
	--ftps-accordion-title-padding: 0.5em;

	/* ── Row & borders ──────────────────────────────────────────────── */
	--ftps-accordion-item-margin: 1rem;
	--ftps-accordion-border-color: var(--border-color, #dadada);
	--ftps-accordion-border-radius: var(--border-radius, 3px);

	/* ── Button ─────────────────────────────────────────────────────── */
	--ftps-accordion-button-padding: 2rem;
	--ftps-accordion-arrow-inset: 1rem;
}

} /* end @layer ftps-defaults */

/* Button elements which trigger accordion rows */
.page-section-accordion .ftps-accordion-title {
	width: 100%;
	text-align: inherit;
	padding: var(--ftps-accordion-title-padding);
	display: flex;
	flex-wrap: nowrap;
	background: none;
	background-color: transparent;
	white-space: normal;
	text-transform: none;
	color: inherit;
	border: 0;
	font-size: inherit;
}

/* These can be different heading levels */
.page-section-accordion .ftps-accordion-row-title {
	font: inherit;
	margin: 0;
}

/* Add a little arrow — rendered as an SVG mask-image */
.page-section-accordion .ftps-accordion-title::after {
	background-color: currentcolor;
	content: '';
	display: inline-block;
	flex-shrink: 0;
	height: var(--ftps-accordion-icon-size);
	margin-left: auto;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	width: var(--ftps-accordion-icon-size);
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}

/* Closed state */
.page-section-accordion .ftps-accordion-title[aria-expanded="false"]::after {
	mask-image: var(--ftps-accordion-icon-closed);
	-webkit-mask-image: var(--ftps-accordion-icon-closed);
}

/* Open state */
.page-section-accordion .ftps-accordion-title[aria-expanded="true"]::after {
	mask-image: var(--ftps-accordion-icon-open);
	-webkit-mask-image: var(--ftps-accordion-icon-open);
}

.page-section-accordion .ftps-accordion-title h3 {
	margin: 0;
}

/* TODO: verify live — button.ftps-accordion-title::after handles the icon indicator via aria-expanded; this h3::before / .is-expanded pattern may be dead code. */
.page-section-accordion .ftps-accordion-title h3::before {
	background-color: var(--ftps-accordion-title-color);
	content: '';
	float: right;
	height: var(--ftps-accordion-icon-size);
	mask-image: var(--ftps-accordion-icon-expand-more);
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	width: var(--ftps-accordion-icon-size);
	-webkit-mask-image: var(--ftps-accordion-icon-expand-more);
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}

.page-section-accordion .is-expanded .ftps-accordion-title h3::before {
	mask-image: var(--ftps-accordion-icon-expand-less);
	-webkit-mask-image: var(--ftps-accordion-icon-expand-less);
}

/* contain those children! */
.page-section-accordion .ftps-accordion-content::before,
.page-section-accordion .ftps-accordion-content::after {
	content: '';
	display: table;
	clear: both;
}

/* Accordion items */
.page-section-accordion .ftps-accordion-item {
	margin: var(--ftps-accordion-item-margin) 0;
	border: 1px solid transparent;
}

.page-section-accordion button.ftps-accordion-title {
	background-color: transparent;
	border: 1px solid var(--ftps-accordion-border-color);
	border-radius: var(--ftps-accordion-border-radius);
	color: inherit;
	display: block;
	padding-right: var(--ftps-accordion-button-padding);
	position: relative;
}

.page-section-accordion button.ftps-accordion-title::after {
	position: absolute;
	right: var(--ftps-accordion-arrow-inset);
	top: 50%;
	transform: translateY(-50%);
}

/* Active toggle buttons get gray background */

/* TODO: `.toggled` is not set by the current view.js — this rule may be dead code. */
.page-section-accordion button.ftps-accordion-title.toggled {
	background-color: var(--ftps-accordion-border-color);
}