/**
 * FAQ Accordion — .espt-block-faq
 *
 * Vars from the spec: --title-size --head-icon-size --head-icon-pad
 * --head-icon-radius --q-size --a-size --pad-y --pad-x --gap --item-radius
 * --list-max --marker-size --qicon-size --qicon-gap --qicon-pad
 * --qicon-radius and the colours --eyebrow-color --title-color --sub-color
 * --head-icon-color --head-icon-bg --q-color --q-open-color --a-color
 * --item-bg --line-color --marker-color --qicon-color --qicon-open-color
 * --qicon-bg. Design switches: .is-design-cards|soft|boxed|line|dark.
 *
 * Mobile-first: ≤767px, then 768px, then 1024px.
 */

.espt-block-faq .espt-faq {
	/* Per-design defaults — a user colour always wins, the design is the
	   fallback, the shared BD palette is the last resort. */
	--fq-item-bg: transparent;
	--fq-line: var(--bd-line);
	--fq-q: var(--bd-ink);
	--fq-q-open: var(--bd-primary);
	--fq-a: var(--bd-body);
	--fq-qicon: var(--bd-primary);
	--fq-px: var(--pad-x, 18px);
	min-width: 0;
}

.espt-block-faq .espt-block-note {
	background: var(--bd-soft);
	border: 1px dashed var(--bd-soft-line);
	border-radius: 10px;
	color: var(--bd-muted);
	font-size: 14px;
	margin: 0;
	padding: 14px 16px;
	text-align: center;
}

/* ------------------------------------------------------------- heading */

.espt-block-faq .espt-faq-head {
	align-items: center;
	display: flex;
	flex-direction: column;
	margin: 0 auto 24px;
	max-width: 720px;
	min-width: 0;
	text-align: center;
}

.espt-block-faq.is-text-align-left .espt-faq-head {
	align-items: flex-start;
	margin-left: 0;
	text-align: left;
}

.espt-block-faq.is-text-align-right .espt-faq-head {
	align-items: flex-end;
	margin-right: 0;
	text-align: right;
}

.espt-block-faq .espt-faq-head-media {
	align-items: center;
	background: var(--head-icon-bg, transparent);
	border-radius: var(--head-icon-radius, 50px);
	color: var(--head-icon-color, var(--bd-primary));
	display: inline-flex;
	flex: none;
	font-size: var(--head-icon-size, 40px);
	justify-content: center;
	line-height: 1;
	margin: 0 0 14px;
	max-width: 100%;
	padding: var(--head-icon-pad, 0);
	transition: transform 0.3s ease;
}

.espt-block-faq .espt-faq-head-media .espt-ic svg {
	height: 1em;
	width: 1em;
}

.espt-block-faq .espt-faq-head-media-img img {
	border-radius: inherit;
	display: block;
	height: var(--head-icon-size, 40px);
	object-fit: contain;
	width: var(--head-icon-size, 40px);
}

.espt-block-faq .espt-faq:hover .espt-faq-head-media {
	transform: translateY(-2px);
}

.espt-block-faq .espt-faq-eyebrow {
	color: var(--eyebrow-color, var(--bd-primary));
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0 0 8px;
	max-width: 100%;
	overflow-wrap: anywhere;
	text-transform: uppercase;
}

.espt-block-faq .espt-faq-title {
	color: var(--title-color, var(--bd-ink));
	font-size: var(--title-size, 24px);
	font-weight: 800;
	line-height: 1.25;
	margin: 0 0 10px;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-faq .espt-faq-sub {
	color: var(--sub-color, var(--bd-muted));
	font-size: 15px;
	line-height: 1.7;
	margin: 0;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- list */

.espt-block-faq .espt-faq-list {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	max-width: var(--list-max, 760px);
	min-width: 0;
	width: 100%;
}

/* A narrowed list follows the heading alignment instead of floating centred
   under a left/right-aligned heading. */
.espt-block-faq.is-text-align-left .espt-faq-list { margin-left: 0; }
.espt-block-faq.is-text-align-right .espt-faq-list { margin-right: 0; }

.espt-block-faq.is-design-cards .espt-faq-list,
.espt-block-faq.is-design-soft .espt-faq-list,
.espt-block-faq.is-design-dark .espt-faq-list {
	gap: var(--gap, 12px);
}

.espt-block-faq .espt-faq-item {
	background: var(--item-bg, var(--fq-item-bg));
	border: 0;
	border-radius: var(--item-radius, 14px);
	min-width: 0;
	overflow: hidden;
	padding: 0;
}

/* --------------------------------------------------------- the question */

.espt-block-faq .espt-faq-q {
	align-items: center;
	color: var(--q-color, var(--fq-q));
	cursor: pointer;
	display: flex;
	font-size: var(--q-size, 15px);
	font-weight: 700;
	gap: 12px;
	justify-content: space-between;
	line-height: 1.45;
	list-style: none;
	min-width: 0;
	padding: var(--pad-y, 16px) var(--fq-px);
	text-align: left;
	transition: color 0.2s ease, background-color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.espt-block-faq .espt-faq-q::-webkit-details-marker { display: none; }
.espt-block-faq .espt-faq-q::marker { content: ""; }

.espt-block-faq .espt-faq-q:hover,
.espt-block-faq .espt-faq-item[open] > .espt-faq-q {
	color: var(--q-open-color, var(--fq-q-open));
}

.espt-block-faq .espt-faq-q:focus-visible {
	outline: 2px solid var(--q-open-color, var(--fq-q-open));
	outline-offset: -3px;
}

.espt-block-faq .espt-faq-qmain {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
	gap: var(--qicon-gap, 12px);
	min-width: 0;
}

.espt-block-faq .espt-faq-qtext {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
	white-space: normal;
}

/* ------------------------------------------------- per-question icon */

.espt-block-faq .espt-faq-qicon {
	align-items: center;
	background: var(--qicon-bg, transparent);
	border-radius: var(--qicon-radius, 50px);
	color: var(--qicon-color, var(--fq-qicon));
	display: inline-flex;
	flex: none;
	font-size: var(--qicon-size, 20px);
	justify-content: center;
	line-height: 1;
	padding: var(--qicon-pad, 0);
	transition: color 0.2s ease, transform 0.25s ease;
}

.espt-block-faq .espt-faq-qicon .espt-ic svg {
	height: 1em;
	width: 1em;
}

.espt-block-faq .espt-faq-qicon-img img {
	border-radius: inherit;
	display: block;
	height: var(--qicon-size, 20px);
	object-fit: cover;
	width: var(--qicon-size, 20px);
}

.espt-block-faq .espt-faq-item[open] .espt-faq-qicon {
	color: var(--qicon-open-color, var(--qicon-color, var(--fq-qicon)));
	transform: scale(1.06);
}

/* ------------------------------------------------- open/close marker */

.espt-block-faq .espt-faq-ico {
	color: var(--marker-color, var(--fq-q-open));
	display: inline-flex;
	flex: none;
	height: var(--marker-size, 22px);
	transition: transform 0.25s ease, color 0.2s ease;
	width: var(--marker-size, 22px);
}

.espt-block-faq .espt-faq-ico svg {
	height: 100%;
	width: 100%;
}

.espt-block-faq.is-marker-plus .espt-faq-item[open] .espt-faq-ico { transform: rotate(45deg); }
.espt-block-faq.is-marker-chevron .espt-faq-item[open] .espt-faq-ico { transform: rotate(180deg); }
.espt-block-faq.is-marker-arrow .espt-faq-item[open] .espt-faq-ico { transform: rotate(90deg); }
.espt-block-faq.is-marker-pos-left .espt-faq-ico { order: -1; }

/* ----------------------------------------------------------- the answer */

.espt-block-faq .espt-faq-a {
	min-width: 0;
	overflow: hidden;
}

.espt-block-faq .espt-faq-a-inner {
	padding: 0 var(--fq-px) calc(var(--pad-y, 16px) * 0.95);
}

.espt-block-faq.is-marker-pos-left:not(.is-marker-none) .espt-faq-a-inner {
	padding-left: calc(var(--fq-px) + var(--marker-size, 22px) + 12px);
}

.espt-block-faq .espt-faq-a-inner p {
	color: var(--a-color, var(--fq-a));
	font-size: var(--a-size, 15px);
	line-height: 1.75;
	margin: 0 0 0.7em;
	max-width: 68ch;
	overflow-wrap: anywhere;
}

.espt-block-faq .espt-faq-a-inner p:last-child { margin-bottom: 0; }

/* Opening entrance for the no-JS <details> toggle. faq.js adds .is-js when it
   animates the panel height itself — running both at once looks jumpy.
   (Own keyframe name: @keyframes are global, and bd-faq.css owns espt-faq-in.) */
.espt-block-faq .espt-faq:not(.is-js) .espt-faq-item[open] .espt-faq-a-inner { animation: espt-faq-open 0.3s ease; }

@keyframes espt-faq-open {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- designs */

/* 1 — separate cards */
.espt-block-faq.is-design-cards .espt-faq-item {
	background: var(--item-bg, var(--bd-box-bg));
	border: 1px solid var(--line-color, var(--bd-box-line));
	transition: border-color 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.espt-block-faq.is-design-cards .espt-faq-item:hover,
.espt-block-faq.is-design-cards .espt-faq-item[open] {
	border-color: color-mix(in srgb, var(--fq-q-open) 40%, var(--line-color, var(--bd-box-line)));
}

/* 2 — soft tinted cards */
.espt-block-faq.is-design-soft .espt-faq-item {
	background: var(--item-bg, var(--bd-soft));
	border: 1px solid var(--line-color, transparent);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.espt-block-faq.is-design-soft .espt-faq-item[open] {
	border-color: var(--line-color, var(--bd-soft-line));
}

/* 3 — one box, divided rows */
.espt-block-faq.is-design-boxed .espt-faq-list {
	background: var(--item-bg, var(--bd-box-bg));
	border: 1px solid var(--line-color, var(--bd-box-line));
	border-radius: var(--item-radius, 14px);
	overflow: hidden;
	padding: 0;
}

.espt-block-faq.is-design-boxed .espt-faq-item {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.espt-block-faq.is-design-boxed .espt-faq-item + .espt-faq-item {
	border-top: 1px solid var(--line-color, var(--bd-box-line));
}

.espt-block-faq.is-design-boxed .espt-faq-item[open] {
	background: color-mix(in srgb, var(--fq-q-open) 5%, transparent);
}

/* 4 — minimal lines */
.espt-block-faq.is-design-line .espt-faq {
	--fq-px: 2px;
}

.espt-block-faq.is-design-line .espt-faq-item {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line-color, var(--fq-line));
	border-radius: 0;
	box-shadow: none;
}

.espt-block-faq.is-design-line .espt-faq-item:last-child {
	border-bottom: 0;
}

/* 5 — dark cards */
.espt-block-faq.is-design-dark .espt-faq-item {
	--fq-item-bg: #111827;
	--fq-line: rgba(255, 255, 255, 0.09);
	--fq-q: #f9fafb;
	--fq-q-open: #34d399;
	--fq-a: #9ca3af;
	--fq-qicon: #34d399;
	background: var(--item-bg, #111827);
	border: 1px solid var(--line-color, rgba(255, 255, 255, 0.09));
	transition: border-color 0.2s ease;
}

.espt-block-faq.is-design-dark .espt-faq-item[open] {
	border-color: var(--line-color, rgba(52, 211, 153, 0.35));
}

/* No card shadow for the flat designs (the shared bd-shadow-* layer puts one
   on every .espt-bd-box). */
.espt-block-faq.is-design-line .espt-faq-item,
.espt-block-faq.is-design-boxed .espt-faq-item {
	box-shadow: none;
}

/* --------------------------------------------------- entrance animation */

.espt-block-faq .espt-faq.is-anim-ready .espt-faq-anim {
	opacity: 0;
	transition: opacity 0.55s ease, transform 0.55s ease;
	will-change: opacity, transform;
}

.espt-block-faq.is-animation-up .espt-faq.is-anim-ready .espt-faq-anim { transform: translateY(24px); }
.espt-block-faq.is-animation-zoom .espt-faq.is-anim-ready .espt-faq-anim { transform: scale(0.94); }

.espt-block-faq .espt-faq.is-anim-ready.is-inview .espt-faq-anim {
	opacity: 1;
	transform: none;
	will-change: auto;
}

.espt-block-faq .espt-faq.is-anim-ready.is-inview .espt-faq-item:nth-child(1) { transition-delay: 0.06s; }
.espt-block-faq .espt-faq.is-anim-ready.is-inview .espt-faq-item:nth-child(2) { transition-delay: 0.13s; }
.espt-block-faq .espt-faq.is-anim-ready.is-inview .espt-faq-item:nth-child(3) { transition-delay: 0.2s; }
.espt-block-faq .espt-faq.is-anim-ready.is-inview .espt-faq-item:nth-child(4) { transition-delay: 0.27s; }
.espt-block-faq .espt-faq.is-anim-ready.is-inview .espt-faq-item:nth-child(5) { transition-delay: 0.34s; }
.espt-block-faq .espt-faq.is-anim-ready.is-inview .espt-faq-item:nth-child(6) { transition-delay: 0.41s; }
.espt-block-faq .espt-faq.is-anim-ready.is-inview .espt-faq-item:nth-child(n + 7) { transition-delay: 0.48s; }

/* ------------------------------------------------------------ tablet up */

@media (min-width: 768px) {
	.espt-block-faq .espt-faq-head { margin-bottom: 32px; }
	.espt-block-faq .espt-faq-eyebrow { font-size: 13px; margin-bottom: 10px; }
	.espt-block-faq .espt-faq-title { margin-bottom: 12px; }
	.espt-block-faq .espt-faq-sub { font-size: 16px; }
}

@media (min-width: 1024px) {
	.espt-block-faq .espt-faq-head { margin-bottom: 36px; }
}

/* ----------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.espt-block-faq .espt-faq-head-media,
	.espt-block-faq .espt-faq-q,
	.espt-block-faq .espt-faq-qicon,
	.espt-block-faq .espt-faq-ico,
	.espt-block-faq .espt-faq-item {
		transition: none;
	}

	/* Same selector shape as the rule above, so it actually outranks it. */
	.espt-block-faq .espt-faq:not(.is-js) .espt-faq-item[open] .espt-faq-a-inner { animation: none; }
	.espt-block-faq .espt-faq-item[open] .espt-faq-qicon { transform: none; }

	/* The per-animation rules below are one class heavier than the base one, so
	   each has to be neutralised by name. */
	.espt-block-faq .espt-faq.is-anim-ready .espt-faq-anim,
	.espt-block-faq.is-animation-up .espt-faq.is-anim-ready .espt-faq-anim,
	.espt-block-faq.is-animation-zoom .espt-faq.is-anim-ready .espt-faq-anim {
		opacity: 1;
		transform: none;
		transition: none;
	}
}