/* ==========================================================================
   HQDM — accordion (HQDM standard): the old question element keeps its tag and text;
   site.js puts a button inside it. Core Details blocks share the same look.
   Split layout on desktop: title left (sticky), questions right.
   ========================================================================== */
.hq-faq-section { isolation: isolate; }
.hq-faq-section::before {
	/* old hqdm.io orbit ring across the whole section, fading out at the edges */
	content: "";
	position: absolute;
	inset: 0;
	background: url("../../img/orbit.webp") 70% 50% / cover no-repeat;
	opacity: .6;
	mix-blend-mode: screen;
	-webkit-mask: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
	mask: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
	z-index: -1;
	pointer-events: none;
}
@media (max-width: 781px) { .hq-faq-section::before { background-size: 220% auto; } }
.hq-faq-section--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 6vw, 96px); align-items: start; }
.hq-faq-section--split > * { max-width: none; margin: 0 !important; }
.hq-faq-section--split > .hq-head, .hq-faq-section--split > .hq-section-title { position: sticky; top: 120px; justify-items: start; text-align: left; }
.hq-faq-section--split .hq-section-title { margin-inline: 0; text-align: left; }
@media (max-width: 1023px) {
	.hq-faq-section--split { grid-template-columns: 1fr; }
	.hq-faq-section--split > .hq-head, .hq-faq-section--split > .hq-section-title { position: static; margin-bottom: var(--sp-6) !important; }
}
.hq-faq { display: grid; gap: var(--sp-2); }
.hq-faq__item, .wp-block-details {
	position: relative;
	font-size: 1rem;
	border-radius: var(--r-2);
	border: 1px solid;
	border-color: var(--glass-edge-lit);
	background: var(--glass-bg);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	box-shadow: var(--glass-shadow);
	transition: border-color var(--d-2) var(--ease), box-shadow var(--d-3) var(--ease);
}
.hq-faq__item::after {
	/* neon edge on the open item only */
	content: "";
	position: absolute;
	inset: -1px 18% auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(196, 173, 255, .8) 35%, #fff 50%, rgba(196, 173, 255, .8) 65%, transparent);
	box-shadow: 0 0 8px 0 rgba(151, 71, 255, .7), 0 8px 24px -4px rgba(151, 71, 255, .25);   /* the glow falls into the item, not up */
	opacity: 0;
	transition: opacity var(--d-2) var(--ease);
	pointer-events: none;
}
.hq-faq__item.is-open::after { opacity: 1; }
.hq-faq__item.is-open, .wp-block-details[open] { border-color: rgba(255, 255, 255, .2) rgba(255, 255, 255, .1) rgba(196, 173, 255, .3); background: var(--glass-bg-strong); box-shadow: var(--glass-shadow-hover); }
.hq-faq__q { margin: 0 !important; font-family: var(--ff-heading); font-size: 1.125rem; font-weight: var(--fw-heading); line-height: 1.35; letter-spacing: -.008em; color: var(--c-text-strong); }
.wp-block-details summary { font-family: var(--ff-heading); font-size: 1.125rem; font-weight: var(--fw-heading); line-height: 1.35; letter-spacing: -.008em; color: var(--c-text-strong); }
@media (max-width: 600px) { .hq-faq__q, .wp-block-details summary { font-size: 1.0625rem; } }
.hq-faq__item:not(.is-collapsible) .hq-faq__q { padding: var(--sp-5) var(--sp-6) var(--sp-2); }
.hq-faq__btn, .wp-block-details summary {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	width: 100%;
	min-height: 72px;
	padding: var(--sp-5) var(--sp-6);
	border: 0;
	border-radius: inherit;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	list-style: none;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.hq-faq__label { flex: 1; }
.hq-faq__btn::after, .wp-block-details summary::after {
	content: "";
	flex: none;
	width: 12px;
	height: 12px;
	background:
		linear-gradient(currentColor 0 0) center / 12px 1.5px no-repeat,
		linear-gradient(currentColor 0 0) center / 1.5px 12px no-repeat;
	color: var(--c-text-muted);
	transition: transform var(--d-2) var(--ease-in-out), color var(--d-2) var(--ease);
}
.hq-faq__item.is-open .hq-faq__btn::after, .wp-block-details[open] summary::after { transform: rotate(45deg); color: var(--c-text-strong); }
.hq-faq__btn:focus-visible, .wp-block-details summary:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; border-radius: var(--r-2); }
@media (hover: hover) { .hq-faq__item:not(.is-open):hover, .wp-block-details:not([open]):hover { border-color: rgba(255, 255, 255, .22) rgba(255, 255, 255, .1) rgba(196, 173, 255, .25); } }
.hq-faq__a { padding: 0 var(--sp-6) var(--sp-6); color: var(--c-text-muted); margin-top: 0 !important; }
.hq-faq__a p { max-width: 64ch; }
.hq-faq__a p:last-child { margin-bottom: 0; }
.hq-faq__item.is-collapsible .hq-faq__a { display: grid; grid-template-rows: 0fr; padding-bottom: 0; transition: grid-template-rows var(--d-2) var(--ease-in-out); }
.hq-faq__item.is-collapsible .hq-faq__inner { overflow: hidden; min-height: 0; }
.hq-faq__item.is-collapsible .hq-faq__inner > :last-child { padding-bottom: var(--sp-6); }
.hq-faq__item.is-collapsible:not(.is-open) .hq-faq__a { visibility: hidden; transition: grid-template-rows var(--d-2) var(--ease-in-out), visibility 0s var(--d-2); }
.hq-faq__item.is-open .hq-faq__a { grid-template-rows: 1fr; }
.wp-block-details > :not(summary) { padding: 0 var(--sp-6) var(--sp-5); color: var(--c-text-muted); }
.wp-block-details::details-content { block-size: 0; overflow: hidden; transition: block-size var(--d-2) var(--ease-in-out), content-visibility var(--d-2) allow-discrete; }
.wp-block-details[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }
