/*
 * Next Accordion — front end + editor.
 *
 * Every colour comes from the theme's tokens (--wp--preset--color--*) or from currentColor, so the block follows the
 * theme in light mode, in a dark style variation, and under Next Dark Mode Toggle (html.nxdm-dark) without its own
 * dark rules. Override any of the custom properties below on .nxacc (or a parent) to restyle it.
 */
.nxacc {
	--nxacc-accent: var(--wp--preset--color--primary, var(--wp--preset--color--brand, var(--wp--preset--color--accent, var(--wp--preset--color--vivid-amber, #f5c400))));
	--nxacc-text: inherit;
	--nxacc-muted: color-mix(in srgb, currentColor 72%, transparent);
	--nxacc-surface: color-mix(in srgb, currentColor 4%, transparent);
	--nxacc-surface-hover: color-mix(in srgb, currentColor 6.5%, transparent);
	--nxacc-border: color-mix(in srgb, currentColor 13%, transparent);
	--nxacc-border-strong: color-mix(in srgb, currentColor 24%, transparent);
	--nxacc-radius: 12px;
	--nxacc-gap: 12px;
	--nxacc-pad-y: 1.4rem;
	--nxacc-pad-x: 1.75rem;
	--nxacc-icon: 14px;
	color: var(--nxacc-text);
	box-sizing: border-box;
}
.nxacc *,
.nxacc *::before,
.nxacc *::after { box-sizing: border-box; }

/* Header ---------------------------------------------------------------- */
.nxacc__eyebrow {
	margin: 0 0 .5rem;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--nxacc-muted);
}
.nxacc__title {
	margin: 0 0 1.75rem;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.1;
	overflow-wrap: break-word;
	hyphens: auto;
}
:where(.nxacc) > :where(h1.nxacc__title, h2.nxacc__title) { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }

/* Items ----------------------------------------------------------------- */
.nxacc__items {
	display: flex;
	flex-direction: column;
	gap: var(--nxacc-gap);
}
.nxacc-item {
	margin: 0;
	border: 1px solid var(--nxacc-border);
	border-radius: var(--nxacc-radius);
	background: var(--nxacc-surface);
	transition: border-color .2s ease, background-color .2s ease;
	overflow: hidden;
}
.nxacc-item:hover { border-color: var(--nxacc-border-strong); }
.nxacc-item[open] { background: var(--nxacc-surface-hover); }

.nxacc-item__q {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: var(--nxacc-pad-y) var(--nxacc-pad-x);
	font-size: 1.125em;
	font-weight: 700;
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.nxacc-item__q::-webkit-details-marker { display: none; }
.nxacc-item__q::marker { content: ""; }
.nxacc-item__q:focus { outline: none; }
.nxacc-item__q:focus-visible {
	outline: 2px solid var(--nxacc-accent);
	outline-offset: -2px;
	border-radius: var(--nxacc-radius);
}
.nxacc-item__text { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.nxacc[data-icon="left"] .nxacc-item__icon { order: -1; }

/* "+" that turns into "×" when open */
.nxacc-item__icon {
	position: relative;
	flex: 0 0 auto;
	width: var(--nxacc-icon);
	height: var(--nxacc-icon);
	padding: 0;
	border: 0;
	background: none;
	color: var(--nxacc-accent);
	transition: transform .25s ease;
}
.nxacc-item__icon::before,
.nxacc-item__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	border-radius: 2px;
	background: currentColor;
}
.nxacc-item__icon::after { transform: rotate(90deg); }
.nxacc-item[open] > .nxacc-item__q .nxacc-item__icon,
.nxacc-item.is-open > .nxacc-item__q .nxacc-item__icon { transform: rotate(45deg); }

/* Answer */
.nxacc-item__a {
	padding: 1.25rem var(--nxacc-pad-x) 1.5rem;
	border-top: 1px solid var(--nxacc-border);
	color: var(--nxacc-muted);
	line-height: 1.65;
}
.nxacc-item__a > :first-child { margin-top: 0; }
.nxacc-item__a > :last-child { margin-bottom: 0; }
.nxacc-item__a a { color: inherit; text-decoration-color: var(--nxacc-accent); text-underline-offset: .2em; }

/* Smooth open/close where the browser supports animating <details> (progressive enhancement). */
@supports (interpolate-size: allow-keywords) {
	.nxacc { interpolate-size: allow-keywords; }
	.nxacc-item::details-content {
		block-size: 0;
		overflow: hidden;
		transition: block-size .28s ease, content-visibility .28s allow-discrete;
	}
	.nxacc-item[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.nxacc-item,
	.nxacc-item__icon,
	.nxacc-item::details-content { transition: none !important; }
}
@media (max-width: 600px) {
	.nxacc { --nxacc-pad-y: 1.1rem; --nxacc-pad-x: 1.15rem; }
	.nxacc-item__q { font-size: 1.0625em; }
}

/* Editor: the answer is always visible so it can be edited; the icon shows the "open on load" setting. */
.nxacc-item--editor .nxacc-item__q { cursor: text; }
.nxacc-item--editor .nxacc-item__icon { cursor: pointer; }