/* BD FAQ Accordion — .espt-block-bd-faq
 * block vars: --q-size --a-size --pad-y --gap --q-color --a-color --marker-color
 *             --bar-color --line-color
 * local vars: --side --qgap --a-indent (see below)
 * classes: is-design-{lines|cards|soft|fill|boxed|minimal} is-marker-{plus|chevron|arrow|none}
 *          is-marker-pos-{right|left} is-numbers is-narrow
 *          (is-text-align-* aligns .espt-title/.espt-sub via _shared.css)
 */
/* Layout vars the designs re-point, so every design keeps the answer text
 * lined up under the question no matter the marker side / numbering.
 *   --side     horizontal inset of a row (0 for the borderless designs)
 *   --qgap     gap between number / question / marker
 *   --a-indent extra answer indent (number badge and/or left marker width)
 */
.espt-block-bd-faq {
	--side: 0px;
	--qgap: 10px;
	--a-indent: 0px;
}

.espt-block-bd-faq.is-numbers { --a-indent: calc(var(--q-size, 15px) * 1.4 + var(--qgap)); }
.espt-block-bd-faq.is-marker-pos-left:not(.is-marker-none) { --a-indent: calc(24px + var(--qgap)); }
.espt-block-bd-faq.is-marker-pos-left:not(.is-marker-none).is-numbers { --a-indent: calc(24px + var(--qgap) + var(--q-size, 15px) * 1.4 + var(--qgap)); }

.espt-block-bd-faq .bdf18 {
	color: var(--bd-ink);
	max-width: 100%;
	min-width: 0;
}

/* editor-only hint when there is nothing to show yet */
.espt-block-bd-faq .espt-block-note {
	background: var(--bd-soft);
	border: 1px dashed var(--bd-soft-line);
	border-radius: 10px;
	color: var(--bd-muted);
	font-size: 13px;
	margin: 0;
	padding: 12px 14px;
}

.espt-block-bd-faq .bdf18-head { margin: 0 0 14px; }
.espt-block-bd-faq .bdf18-title { margin: 0 0 6px; overflow-wrap: anywhere; }
.espt-block-bd-faq .bdf18-sub { margin: 0; overflow-wrap: anywhere; }

.espt-block-bd-faq .bdf18-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
}

.espt-block-bd-faq .bdf18-item {
	border-top: 1px solid var(--line-color, var(--bd-line));
	min-width: 0;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.espt-block-bd-faq .bdf18-item:last-child { border-bottom: 1px solid var(--line-color, var(--bd-line)); }

/* question row */
.espt-block-bd-faq .bdf18-q {
	align-items: flex-start;
	color: var(--q-color, var(--bd-ink));
	cursor: pointer;
	display: flex;
	font-size: var(--q-size, 15px);
	font-weight: 700;
	gap: var(--qgap, 10px);
	line-height: 1.5;
	list-style: none;
	min-width: 0;
	padding: var(--pad-y, 15px) var(--side, 0px);
	position: relative;
	transition: color 0.2s ease, background-color 0.2s ease, border-radius 0.2s ease;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.espt-block-bd-faq .bdf18-q::-webkit-details-marker { display: none; }
.espt-block-bd-faq .bdf18-q::marker { content: ""; }
.espt-block-bd-faq .bdf18-q:hover { color: var(--bd-primary); }
.espt-block-bd-faq .bdf18-q:focus { outline: none; }
.espt-block-bd-faq .bdf18-q:focus-visible { border-radius: 6px; outline: 2px solid var(--bd-primary); outline-offset: 2px; }
.espt-block-bd-faq.is-design-soft .bdf18-q:focus-visible,
.espt-block-bd-faq.is-design-fill .bdf18-q:focus-visible { border-radius: 0; outline-offset: -3px; }

.espt-block-bd-faq .bdf18-qt {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* number badge */
.espt-block-bd-faq .bdf18-n {
	align-items: center;
	background: var(--bd-soft);
	border-radius: 999px;
	color: var(--bd-primary);
	display: none;
	flex: 0 0 auto;
	font-size: 0.8em;
	font-weight: 800;
	height: 1.75em;
	justify-content: center;
	line-height: 1;
	margin-top: calc((var(--q-size, 15px) * 1.5 - 1.75em) / 2);
	min-width: 1.75em;
	padding: 0 0.35em;
}

.espt-block-bd-faq.is-numbers .bdf18-n { display: inline-flex; }

/* marker: 24px square, vertically centred on the first line of the question */
.espt-block-bd-faq .bdf18-m {
	color: var(--marker-color, var(--bd-primary));
	flex: 0 0 auto;
	height: 24px;
	margin-top: calc((var(--q-size, 15px) * 1.5 - 24px) / 2);
	position: relative;
	transition: transform 0.25s ease, color 0.2s ease;
	width: 24px;
}

.espt-block-bd-faq.is-marker-pos-left .bdf18-m { order: -1; }
.espt-block-bd-faq .bdf18-q:hover .bdf18-m { transform: scale(1.12); }

/* plus / minus — two bars, the vertical one turns on open */
.espt-block-bd-faq .bdf18-m-plus::before,
.espt-block-bd-faq .bdf18-m-plus::after {
	background: currentColor;
	border-radius: 2px;
	content: "";
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: transform 0.25s ease, opacity 0.2s ease;
}

.espt-block-bd-faq .bdf18-m-plus::before { height: 2.5px; width: 14px; }
.espt-block-bd-faq .bdf18-m-plus::after { height: 14px; width: 2.5px; }
.espt-block-bd-faq .bdf18-item[open] .bdf18-m-plus::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.espt-block-bd-faq .bdf18-item[open] .bdf18-m-plus::before { transform: translate(-50%, -50%) rotate(180deg); }

/* chevron — border-drawn, flips on open */
.espt-block-bd-faq .bdf18-m-chevron::before {
	border-bottom: 2.5px solid currentColor;
	border-right: 2.5px solid currentColor;
	content: "";
	height: 9px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -70%) rotate(45deg);
	transition: transform 0.25s ease;
	width: 9px;
}

.espt-block-bd-faq .bdf18-item[open] .bdf18-m-chevron::before { transform: translate(-50%, -30%) rotate(225deg); }

/* arrow — svg from the icon library, rotates down on open */
.espt-block-bd-faq .bdf18-m-arrow {
	align-items: center;
	display: inline-flex;
	font-size: 18px;
	justify-content: center;
}

.espt-block-bd-faq .bdf18-m-arrow .bdf18-mi { transition: transform 0.25s ease; }
.espt-block-bd-faq .bdf18-item[open] .bdf18-m-arrow .bdf18-mi { transform: rotate(90deg); }

/* answer */
.espt-block-bd-faq .bdf18-a {
	min-width: 0;
	overflow: hidden;
}

.espt-block-bd-faq .bdf18-ai {
	padding: 0 var(--side, 0px) var(--pad-y, 15px);
	padding-left: calc(var(--side, 0px) + var(--a-indent, 0px));
}

.espt-block-bd-faq .bdf18-ai p {
	color: var(--a-color, var(--bd-body));
	font-size: var(--a-size, 15px);
	line-height: 1.75;
	margin: 0 0 0.7em;
	overflow-wrap: anywhere;
}

.espt-block-bd-faq .bdf18-ai p:last-child { margin-bottom: 0; }
.espt-block-bd-faq.is-narrow .bdf18-ai p { max-width: 56ch; }

/* answer entrance — only when the JS height animation is not running */
.espt-block-bd-faq .bdf18:not(.is-js) .bdf18-item[open] .bdf18-ai { animation: espt-faq-in 0.3s ease; }
@keyframes espt-faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

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

/* the three inset designs breathe inside their own card / bar */
.espt-block-bd-faq.is-design-cards,
.espt-block-bd-faq.is-design-soft,
.espt-block-bd-faq.is-design-fill { --side: 14px; }

/* cards — each question its own card */
.espt-block-bd-faq.is-design-cards .bdf18-list { gap: var(--gap, 10px); }
.espt-block-bd-faq.is-design-cards .bdf18-item {
	background: var(--bd-box-bg);
	border: 1px solid var(--line-color, var(--bd-box-line));
	border-radius: calc(var(--bd-radius) * 0.75);
}
.espt-block-bd-faq.is-design-cards .bdf18-item:hover { border-color: color-mix(in srgb, var(--bd-primary) 40%, var(--line-color, var(--bd-box-line))); }
.espt-block-bd-faq.is-design-cards .bdf18-item[open] { border-color: color-mix(in srgb, var(--bd-primary) 55%, var(--line-color, var(--bd-box-line))); }

/* the BD "box" controls (shadow / hover) apply to every design whose rows are
 * real cards — the boxed design gets them from .espt-bd-box instead. The open
 * row keeps its own emphasis shadow, so the BD shadow only dresses closed rows
 * (:not([open]) also keeps it from beating that emphasis on specificity). */
.espt-block-bd-faq.is-design-cards .bdf18-item[open],
.espt-block-bd-faq.is-design-soft .bdf18-item[open],
.espt-block-bd-faq.is-design-fill .bdf18-item[open] { box-shadow: 0 10px 26px -16px rgba(15, 23, 42, 0.3); }
.espt-block-bd-faq.bd-shadow-soft.is-design-cards .bdf18-item:not([open]),
.espt-block-bd-faq.bd-shadow-soft.is-design-soft .bdf18-item:not([open]),
.espt-block-bd-faq.bd-shadow-soft.is-design-fill .bdf18-item:not([open]) { box-shadow: 0 6px 20px -12px rgba(15, 23, 42, 0.16); }
.espt-block-bd-faq.bd-shadow-strong.is-design-cards .bdf18-item:not([open]),
.espt-block-bd-faq.bd-shadow-strong.is-design-soft .bdf18-item:not([open]),
.espt-block-bd-faq.bd-shadow-strong.is-design-fill .bdf18-item:not([open]) { box-shadow: 0 14px 32px -16px rgba(15, 23, 42, 0.32); }
.espt-block-bd-faq.bd-hover-lift.is-design-cards .bdf18-item:hover,
.espt-block-bd-faq.bd-hover-lift.is-design-soft .bdf18-item:hover,
.espt-block-bd-faq.bd-hover-lift.is-design-fill .bdf18-item:hover { transform: translateY(-2px); }
.espt-block-bd-faq.bd-hover-scale.is-design-cards .bdf18-item:hover,
.espt-block-bd-faq.bd-hover-scale.is-design-soft .bdf18-item:hover,
.espt-block-bd-faq.bd-hover-scale.is-design-fill .bdf18-item:hover { transform: scale(1.012); }
.espt-block-bd-faq.bd-hover-glow.is-design-cards .bdf18-item:hover,
.espt-block-bd-faq.bd-hover-glow.is-design-soft .bdf18-item:hover,
.espt-block-bd-faq.bd-hover-glow.is-design-fill .bdf18-item:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bd-primary) 26%, transparent); }

/* soft — tinted question bar, answer in a pale panel */
.espt-block-bd-faq.is-design-soft .bdf18-list { gap: var(--gap, 10px); }
.espt-block-bd-faq.is-design-soft .bdf18-item {
	border: 1px solid var(--line-color, var(--bd-soft-line));
	border-radius: calc(var(--bd-radius) * 0.75);
	overflow: hidden;
}
.espt-block-bd-faq.is-design-soft .bdf18-q { background: var(--bar-color, var(--bd-soft)); }
.espt-block-bd-faq.is-design-soft .bdf18-q:hover { background: color-mix(in srgb, var(--bar-color, var(--bd-soft)) 80%, var(--bd-primary) 20%); }
.espt-block-bd-faq.is-design-soft .bdf18-ai { background: var(--bd-box-bg); padding-top: 12px; }
.espt-block-bd-faq.is-design-soft.is-numbers .bdf18-n { background: var(--bd-box-bg); }

/* fill — open question bar goes solid primary */
.espt-block-bd-faq.is-design-fill .bdf18-list { gap: var(--gap, 10px); }
.espt-block-bd-faq.is-design-fill .bdf18-item {
	border: 1px solid var(--line-color, var(--bd-line));
	border-radius: calc(var(--bd-radius) * 0.75);
	overflow: hidden;
}
.espt-block-bd-faq.is-design-fill .bdf18-item:hover { border-color: color-mix(in srgb, var(--bar-color, var(--bd-primary)) 50%, var(--line-color, var(--bd-line))); }
.espt-block-bd-faq.is-design-fill .bdf18-item[open] { border-color: var(--bar-color, var(--bd-primary)); }
.espt-block-bd-faq.is-design-fill .bdf18-item[open] .bdf18-q {
	background: var(--bar-color, var(--bd-primary));
	color: var(--q-color, #fff);
}
.espt-block-bd-faq.is-design-fill .bdf18-item[open] .bdf18-m { color: var(--marker-color, #fff); }
.espt-block-bd-faq.is-design-fill .bdf18-item[open] .bdf18-n { background: rgba(255, 255, 255, 0.2); color: #fff; }
.espt-block-bd-faq.is-design-fill .bdf18-ai { padding-top: 12px; }

/* boxed — whole list inside the shared BD box; inner dividers only */
.espt-block-bd-faq.is-design-boxed .bdf18-item:first-child { border-top: 0; }
.espt-block-bd-faq.is-design-boxed .bdf18-item:last-child { border-bottom: 0; }
.espt-block-bd-faq.is-design-boxed .bdf18-item:first-child .bdf18-q { padding-top: 0; }
.espt-block-bd-faq.is-design-boxed .bdf18-item:last-child .bdf18-ai { padding-bottom: 0; }

/* minimal — no lines, question turns primary on hover/open */
.espt-block-bd-faq.is-design-minimal .bdf18-list { gap: var(--gap, 10px); }
.espt-block-bd-faq.is-design-minimal .bdf18-item,
.espt-block-bd-faq.is-design-minimal .bdf18-item:last-child { border: 0; }
.espt-block-bd-faq.is-design-minimal .bdf18-q { padding: calc(var(--pad-y, 15px) * 0.5) var(--side, 0px); }
.espt-block-bd-faq.is-design-minimal .bdf18-item[open] .bdf18-q { color: var(--q-color, var(--bd-primary)); }
.espt-block-bd-faq.is-design-minimal .bdf18-ai { padding-bottom: calc(var(--pad-y, 15px) * 0.6); }

/* ---------------------------------------------------------------- responsive */
@media (min-width: 768px) {
	.espt-block-bd-faq { --qgap: 12px; }
	.espt-block-bd-faq.is-design-cards,
	.espt-block-bd-faq.is-design-soft,
	.espt-block-bd-faq.is-design-fill { --side: 18px; }
	.espt-block-bd-faq .bdf18-head { margin-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.espt-block-bd-faq .bdf18-item,
	.espt-block-bd-faq .bdf18-q,
	.espt-block-bd-faq .bdf18-m,
	.espt-block-bd-faq .bdf18-m::before,
	.espt-block-bd-faq .bdf18-m::after,
	.espt-block-bd-faq .bdf18-mi { transition: none; }
	.espt-block-bd-faq .bdf18-item[open] .bdf18-ai { animation: none; }
	.espt-block-bd-faq .bdf18-q:hover .bdf18-m { transform: none; }
	.espt-block-bd-faq.bd-hover-lift.is-design-cards .bdf18-item:hover,
	.espt-block-bd-faq.bd-hover-lift.is-design-soft .bdf18-item:hover,
	.espt-block-bd-faq.bd-hover-lift.is-design-fill .bdf18-item:hover,
	.espt-block-bd-faq.bd-hover-scale.is-design-cards .bdf18-item:hover,
	.espt-block-bd-faq.bd-hover-scale.is-design-soft .bdf18-item:hover,
	.espt-block-bd-faq.bd-hover-scale.is-design-fill .bdf18-item:hover { transform: none; }
}