/*
 * MxChat FAQ, presentation layer v2 (2026-10-10).
 * Styles the stored <div class="mxchat-faq"> markup (nav + six sections of <details id="faq-*">)
 * plus the render-time hero from mxchat-faq-enhancements.php. Stored content is never changed.
 * Tokens follow the kadence-child landing.css. The brand gradient is used once: the search field.
 */

body.mxf-v2 {
	--mxf-ink: #212121;
	--mxf-body: #43434e;
	--mxf-dim: #6d6d79;
	--mxf-faint: #9d9da8;
	--mxf-hair: #e7e7ee;
	--mxf-hair-soft: #f0f0f5;
	--mxf-panel: #fafafc;
	--mxf-panel2: #f4f4f8;
	--mxf-code: #efeff5;
	--mxf-purple: #7873f5;
	--mxf-purple-ink: #4f49d6;
	--mxf-tint: rgba(120, 115, 245, 0.1);
	--mxf-teal: #1f9aa2;
	--mxf-grad: linear-gradient(90deg, #fa73e6, #7873f5 55%, #3ac9d1);
	--mxf-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mxf-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
	--mxf-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--mxf-rail: 236px;
	--mxf-stick: 24px;
	--mxf-icon-plus: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23212121' stroke-width='2.2' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
	--mxf-icon-minus: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f49d6' stroke-width='2.2' stroke-linecap='round'><path d='M5 12h14'/></svg>");
}

/* ---------- Page frame ---------- */
.mxf-v2 .entry-content.single-content {
	font-family: var(--mxf-sans);
	color: var(--mxf-body);
}
.mxf-v2 .mxf-hero *,
.mxf-v2 .mxchat-faq *,
.mxf-v2 .mxchat-faq *::before,
.mxf-v2 .mxchat-faq *::after { box-sizing: border-box; }

.mxf-v2 .mxf-hero :focus-visible,
.mxf-v2 .mxchat-faq :focus-visible {
	outline: 2px solid var(--mxf-purple);
	outline-offset: 3px;
	border-radius: 8px;
}
/* Chrome focuses a #faq-* target on arrival; keyboard focus belongs on the question, not the panel. */
.mxf-v2 .mxchat-faq details[id^="faq-"]:focus-visible { outline: none; border-radius: 16px; }

/* ---------- Hero ---------- */
.mxf-v2 .mxf-hero {
	max-width: 780px;
	margin: 0 0 64px;
}
.mxf-v2 .mxf-hero h1.mxf-title {
	margin: 0 0 16px;
	font-family: var(--mxf-display);
	font-weight: 600;
	font-size: clamp(2.25rem, 1.35rem + 3vw, 3.5rem);
	line-height: 1.04;
	letter-spacing: -0.025em;
	color: var(--mxf-ink);
	font-variation-settings: "opsz" 96;
}
.mxf-v2 .mxf-hero p.mxf-lede {
	margin: 0 0 32px;
	max-width: 56ch;
	font-size: 1.125rem;
	line-height: 1.55;
	color: var(--mxf-body);
}
.mxf-v2 .mxf-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 60px;
	margin: 0;
	padding: 0 10px 0 18px;
	border: 2px solid transparent;
	border-radius: 16px;
	background: linear-gradient(#fff, #fff) padding-box, var(--mxf-grad) border-box;
	box-shadow: 0 1px 2px rgba(33, 33, 33, 0.04), 0 10px 28px -16px rgba(120, 115, 245, 0.55);
	transition: box-shadow 0.2s ease;
}
.mxf-v2 .mxf-search:focus-within {
	box-shadow: 0 0 0 4px rgba(120, 115, 245, 0.16), 0 10px 28px -16px rgba(120, 115, 245, 0.55);
}
.mxf-v2 .mxf-search > svg {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--mxf-dim);
}
.mxf-v2 .mxf-search input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	outline: 0;
	font: 500 1.0625rem/1.2 var(--mxf-sans);
	color: var(--mxf-ink);
	-webkit-appearance: none;
	appearance: none;
}
.mxf-v2 .mxf-search input[type="search"]:focus {
	border: 0;
	box-shadow: none;
	outline: 0;
}
.mxf-v2 .mxf-search input[type="search"]::placeholder { color: var(--mxf-faint); opacity: 1; }
.mxf-v2 .mxf-search input[type="search"]::-webkit-search-cancel-button,
.mxf-v2 .mxf-search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }

.mxf-v2 .mxf-kbd {
	flex: none;
	margin-right: 8px;
	padding: 3px 8px;
	border: 1px solid var(--mxf-hair);
	border-radius: 6px;
	background: var(--mxf-panel);
	font: 500 12px/1.3 var(--mxf-mono);
	color: var(--mxf-dim);
}
.mxf-v2 .mxf-search.has-value .mxf-kbd { display: none; }

.mxf-v2 .mxf-hero button.mxf-clear {
	display: none;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	box-shadow: none;
	color: var(--mxf-dim);
	cursor: pointer;
}
.mxf-v2 .mxf-hero button.mxf-clear:hover { background: var(--mxf-panel2); color: var(--mxf-ink); }
.mxf-v2 .mxf-hero button.mxf-clear svg { width: 18px; height: 18px; }
.mxf-v2 .mxf-search.has-value button.mxf-clear { display: inline-flex; }

.mxf-v2 .mxf-hero p.mxf-status {
	min-height: 1.5em;
	margin: 14px 2px 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--mxf-dim);
}
.mxf-v2 .mxf-status strong { color: var(--mxf-ink); font-weight: 600; }

@media (hover: none) {
	.mxf-v2 .mxf-kbd { display: none; }
}

/* ---------- Layout: rail + questions ---------- */
.mxf-v2 .mxchat-faq {
	display: grid;
	grid-template-columns: var(--mxf-rail) minmax(0, 1fr);
	column-gap: clamp(36px, 5vw, 80px);
	align-items: start;
	font-family: var(--mxf-sans);
	color: var(--mxf-body);
}
/* The hero carries the intro sentence and the documentation link. */
.mxf-v2 .mxf-hero ~ .mxchat-faq > p:first-child { display: none; }

.mxf-v2 .mxchat-faq > nav {
	grid-column: 1;
	grid-row: 1 / span 40;
	position: sticky;
	top: var(--mxf-stick);
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-size: 0; /* hides the stored "Jump to:" label spacing and the middle-dot separators */
	line-height: 0;
}
.mxf-v2 .mxchat-faq > nav > strong { display: none; }
.mxf-v2 .mxchat-faq > nav > a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 42px;
	padding: 9px 12px;
	border-radius: 10px;
	font: 500 15px/1.3 var(--mxf-sans);
	color: var(--mxf-body);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.mxf-v2 .mxchat-faq > nav > a:hover { background: var(--mxf-panel2); color: var(--mxf-ink); }
.mxf-v2 .mxchat-faq > nav > a.is-active { background: var(--mxf-tint); color: var(--mxf-purple-ink); }
.mxf-v2 .mxchat-faq > nav > a.is-empty { opacity: 0.38; pointer-events: none; }
.mxf-v2 .mxf-count {
	font: 500 13px/1 var(--mxf-sans);
	color: var(--mxf-faint);
	font-variant-numeric: tabular-nums;
}
.mxf-v2 .mxchat-faq > nav > a.is-active .mxf-count { color: var(--mxf-purple); }
.mxf-v2 .mxchat-faq > nav > button.mxf-navsearch { display: none; }

.mxf-v2 .mxchat-faq > section,
.mxf-v2 .mxchat-faq > .mxf-empty,
.mxf-v2 .mxchat-faq > .mxf-help {
	grid-column: 2;
	min-width: 0;
}
.mxf-v2 .mxchat-faq > section {
	margin: 0 0 64px;
	padding: 0;
	scroll-margin-top: var(--mxf-stick);
}
.mxf-v2 .mxchat-faq > section > h2 {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	font-family: var(--mxf-display);
	font-weight: 600;
	font-size: 1.625rem;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--mxf-ink);
}
.mxf-v2 .mxf-h2count {
	flex: none;
	font: 500 14px/1 var(--mxf-sans);
	letter-spacing: 0;
	color: var(--mxf-faint);
	font-variant-numeric: tabular-nums;
}

/* ---------- Question rows ---------- */
.mxf-v2 .mxchat-faq details[id^="faq-"] {
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--mxf-hair);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	scroll-margin-top: var(--mxf-stick);
	transition: background-color 0.2s ease;
}
.mxf-v2 .mxchat-faq details[id^="faq-"]:last-of-type { border-bottom: 1px solid var(--mxf-hair); }
.mxf-v2 .mxchat-faq details[id^="faq-"][open] {
	margin: 6px -20px;
	padding: 0 20px;
	border-color: transparent;
	border-radius: 16px;
	background: var(--mxf-panel);
}
.mxf-v2 .mxchat-faq details[id^="faq-"][open] + details { border-top-color: transparent; }

.mxf-v2 .mxchat-faq details[id^="faq-"] > summary {
	position: relative;
	display: block;
	margin: 0;
	padding: 19px 52px 19px 0;
	list-style: none;
	cursor: pointer;
	font: 500 1.0625rem/1.45 var(--mxf-sans);
	color: var(--mxf-ink);
	-webkit-tap-highlight-color: transparent;
	transition: color 0.15s ease;
}
.mxf-v2 .mxchat-faq details[id^="faq-"] > summary::-webkit-details-marker { display: none; }
.mxf-v2 .mxchat-faq details[id^="faq-"] > summary::marker { content: ""; }
.mxf-v2 .mxchat-faq details[id^="faq-"] > summary::after {
	content: "";
	position: absolute;
	top: 17px;
	right: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: var(--mxf-panel2);
	background-image: var(--mxf-icon-plus);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 14px;
	transition: background-color 0.15s ease, transform 0.25s ease;
}
.mxf-v2 .mxchat-faq details[id^="faq-"] > summary:hover { color: var(--mxf-purple-ink); }
.mxf-v2 .mxchat-faq details[id^="faq-"] > summary:hover::after { background-color: var(--mxf-hair); }
.mxf-v2 .mxchat-faq details[id^="faq-"][open] > summary { color: var(--mxf-ink); padding-bottom: 12px; }
.mxf-v2 .mxchat-faq details[id^="faq-"][open] > summary::after {
	background-color: #fff;
	background-image: var(--mxf-icon-minus);
	box-shadow: 0 0 0 1px var(--mxf-hair) inset;
	transform: rotate(180deg);
}
.mxf-v2 .mxchat-faq details[id^="faq-"] > summary code {
	font-size: 0.86em;
}

/* Answer */
.mxf-v2 .mxchat-faq details[id^="faq-"] > p {
	max-width: 68ch;
	margin: 0 0 4px;
	padding: 0;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--mxf-body);
}
.mxf-v2 .mxchat-faq details[id^="faq-"] strong { color: var(--mxf-ink); font-weight: 600; }
.mxf-v2 .mxchat-faq details[id^="faq-"] a {
	color: var(--mxf-purple-ink);
	text-decoration: underline;
	text-decoration-color: rgba(79, 73, 214, 0.35);
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}
.mxf-v2 .mxchat-faq details[id^="faq-"] a:hover { text-decoration-color: currentColor; }
.mxf-v2 .mxchat-faq details[id^="faq-"] code {
	padding: 0.1em 0.38em;
	border-radius: 5px;
	background: var(--mxf-code);
	font-family: var(--mxf-mono);
	font-size: 0.84em;
	color: var(--mxf-ink);
	overflow-wrap: anywhere;
}

/* Answer footer: the availability note (moved here by the script, text unchanged) + copy link */
.mxf-v2 .mxf-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 20px;
	margin: 16px 0 0;
	padding: 14px 0 18px;
	border-top: 1px solid var(--mxf-hair);
}
.mxf-v2 .mxf-foot > em.mxf-scope {
	position: relative;
	display: block;
	flex: 1 1 260px;
	max-width: 68ch;
	padding-left: 16px;
	font-style: normal;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--mxf-dim);
}
.mxf-v2 .mxf-foot > em.mxf-scope::before {
	content: "";
	position: absolute;
	top: 0.5em;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mxf-faint);
}
.mxf-v2 .mxf-foot > em.mxf-scope.is-core::before { background: var(--mxf-teal); }
.mxf-v2 .mxf-foot > em.mxf-scope.is-addon::before { background: var(--mxf-purple); }
.mxf-v2 .mxf-foot > em.mxf-scope strong { color: var(--mxf-body); }

.mxf-v2 .mxchat-faq button.mxf-copy {
	flex: none;
	margin: 0 -10px 0 auto;
	padding: 6px 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
	font: 500 0.875rem/1.3 var(--mxf-sans);
	color: var(--mxf-purple-ink);
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}
.mxf-v2 .mxchat-faq button.mxf-copy:hover,
.mxf-v2 .mxchat-faq button.mxf-copy:focus { background: var(--mxf-tint); color: var(--mxf-purple-ink); box-shadow: none; }
.mxf-v2 .mxchat-faq button.mxf-copy.is-done { color: var(--mxf-teal); background: transparent; }

/* Deep-link landing */
@keyframes mxf-flash {
	from { background-color: rgba(120, 115, 245, 0.16); }
	to { background-color: var(--mxf-panel); }
}
.mxf-v2 .mxchat-faq details[id^="faq-"].mxf-target { animation: mxf-flash 1.8s ease-out; }

/* ---------- Search states ---------- */
.mxf-v2 .mxchat-faq details[id^="faq-"].mxf-hide,
.mxf-v2 .mxchat-faq > section.mxf-hide { display: none; }
.mxf-v2 .mxchat-faq mark.mxf-hit {
	padding: 0 0.06em;
	border-radius: 3px;
	background: rgba(120, 115, 245, 0.17);
	color: inherit;
	box-shadow: none;
}
.mxf-v2 .mxchat-faq .mxf-snippet {
	display: block;
	margin-top: 6px;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.55;
	color: var(--mxf-dim);
}
.mxf-v2 .mxchat-faq details[open] .mxf-snippet { display: none; }

.mxf-v2 .mxf-empty,
.mxf-v2 .mxf-help {
	padding: 28px;
	border-radius: 18px;
	background: var(--mxf-panel);
}
.mxf-v2 .mxf-empty { margin: 0 0 64px; }
.mxf-v2 .mxf-help { margin: 0 0 24px; }
.mxf-v2 .mxf-empty[hidden],
.mxf-v2 .mxf-help[hidden] { display: none; }
.mxf-v2 .mxchat-faq p.mxf-box-title {
	margin: 0 0 8px;
	font-family: var(--mxf-display);
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--mxf-ink);
	overflow-wrap: anywhere;
}
.mxf-v2 .mxchat-faq p.mxf-box-text {
	max-width: 60ch;
	margin: 0 0 20px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--mxf-body);
}
.mxf-v2 .mxf-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mxf-v2 .mxchat-faq .mxf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 0;
	padding: 10px 18px;
	border: 1px solid var(--mxf-hair);
	border-radius: 12px;
	background: #fff;
	box-shadow: none;
	font: 600 0.9375rem/1.2 var(--mxf-sans);
	color: var(--mxf-ink);
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.mxf-v2 .mxchat-faq .mxf-btn:hover,
.mxf-v2 .mxchat-faq .mxf-btn:focus { border-color: #cfcfdb; background: #fff; color: var(--mxf-ink); box-shadow: none; }
.mxf-v2 .mxchat-faq .mxf-btn.is-primary { border-color: var(--mxf-ink); background: var(--mxf-ink); color: #fff; }
.mxf-v2 .mxchat-faq .mxf-btn.is-primary:hover,
.mxf-v2 .mxchat-faq .mxf-btn.is-primary:focus { border-color: #000; background: #000; color: #fff; }
.mxf-v2 .mxchat-faq .mxf-btn[hidden] { display: none; }

/* ---------- Open/close motion (Chromium 131+; others open instantly) ---------- */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
	body.mxf-v2 { interpolate-size: allow-keywords; }
	.mxf-v2 .mxchat-faq details[id^="faq-"]::details-content {
		block-size: 0;
		overflow-y: clip;
		transition: block-size 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), content-visibility 0.28s allow-discrete;
	}
	.mxf-v2 .mxchat-faq details[id^="faq-"][open]::details-content { block-size: auto; }
}

/* ---------- Tablet and phone ---------- */
@media (max-width: 1023px) {
	body.mxf-v2 { --mxf-stick: 70px; }
	.mxf-v2 .mxf-hero { margin-bottom: 28px; }
	.mxf-v2 .mxchat-faq { display: block; }
	.mxf-v2 .mxchat-faq > nav {
		position: sticky;
		top: 0;
		z-index: 40;
		flex-direction: row;
		align-items: center;
		gap: 8px;
		width: 100vw;
		margin: 0 calc(50% - 50vw) 28px;
		padding: 10px calc(50vw - 50%);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		background: rgba(255, 255, 255, 0.94);
		-webkit-backdrop-filter: saturate(180%) blur(10px);
		backdrop-filter: saturate(180%) blur(10px);
		border-bottom: 1px solid var(--mxf-hair);
	}
	.mxf-v2 .mxchat-faq > nav::-webkit-scrollbar { display: none; }
	.mxf-v2 .mxchat-faq > nav > a {
		flex: none;
		min-height: 38px;
		padding: 8px 14px;
		border-radius: 999px;
		background: var(--mxf-panel2);
		font-size: 14px;
	}
	.mxf-v2 .mxchat-faq > nav > a.is-active { background: var(--mxf-ink); color: #fff; }
	.mxf-v2 .mxchat-faq > nav > a .mxf-count { display: none; }
	.mxf-v2 .mxchat-faq > nav > button.mxf-navsearch {
		display: inline-flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		margin: 0;
		padding: 0;
		border: 1px solid var(--mxf-hair);
		border-radius: 50%;
		background: #fff;
		box-shadow: none;
		color: var(--mxf-ink);
		cursor: pointer;
	}
	.mxf-v2 .mxchat-faq > nav > button.mxf-navsearch svg { width: 17px; height: 17px; }
	.mxf-v2 .mxchat-faq > section { margin-bottom: 48px; }
}

@media (max-width: 640px) {
	.mxf-v2 .mxf-hero p.mxf-lede { margin-bottom: 24px; font-size: 1.0625rem; }
	.mxf-v2 .mxf-search { height: 56px; border-radius: 14px; padding-left: 16px; }
	.mxf-v2 .mxf-search input[type="search"] { font-size: 1rem; }
	.mxf-v2 .mxchat-faq > section > h2 { font-size: 1.4rem; }
	.mxf-v2 .mxchat-faq details[id^="faq-"] > summary { padding: 17px 46px 17px 0; font-size: 1rem; }
	.mxf-v2 .mxchat-faq details[id^="faq-"] > summary::after { top: 15px; width: 30px; height: 30px; }
	.mxf-v2 .mxchat-faq details[id^="faq-"][open] { margin: 6px -14px; padding: 0 14px; border-radius: 14px; }
	.mxf-v2 .mxchat-faq details[id^="faq-"] > p { font-size: 0.97rem; line-height: 1.68; }
	.mxf-v2 .mxf-empty,
	.mxf-v2 .mxf-help { padding: 22px 20px; }
	.mxf-v2 .mxf-actions .mxf-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.mxf-v2 .mxf-search,
	.mxf-v2 .mxchat-faq details[id^="faq-"],
	.mxf-v2 .mxchat-faq details[id^="faq-"] > summary,
	.mxf-v2 .mxchat-faq details[id^="faq-"] > summary::after,
	.mxf-v2 .mxchat-faq > nav > a { transition: none; }
	.mxf-v2 .mxchat-faq details[id^="faq-"]::details-content { transition: none; }
	.mxf-v2 .mxchat-faq details[id^="faq-"].mxf-target { animation: none; }
}