/* PoolSpaKit — content.css
 * Design tokens, long-form reading typography and article components.
 * Loaded on the front end and inside the block editor.
 * Components are unscoped so they render identically in the editor.
 */

/* ------------------------------------------------------------------ Tokens */
:root {
	--psk-navy: #0C2F3F;
	--psk-navy-deep: #082230;
	--psk-aqua: #2BB7A9;
	--psk-link: #0B6E67;
	--psk-link-hover: #07504B;
	--psk-aqua-wash: #E4F4F1;

	--psk-bg: #F7FAFA;
	--psk-surface: #FFFFFF;
	--psk-tile: #EAF1F2;
	--psk-line: #D4E1E3;
	--psk-line-strong: #B4C8CB;

	--psk-ink: #1C2A30;
	--psk-ink-soft: #3D4F57;
	--psk-muted: #5B6D76;

	--psk-note-bg: #EAF3FA;
	--psk-note-line: #9CC3E0;
	--psk-note-ink: #173F61;
	--psk-warn-bg: #FFF4E1;
	--psk-warn-line: #E7B96B;
	--psk-warn-ink: #5F3B00;
	--psk-danger-bg: #FCECEA;
	--psk-danger-line: #C4473F;
	--psk-danger-ink: #6E1D18;
	--psk-ok-bg: #E9F6EF;
	--psk-ok-line: #2F9565;
	--psk-ok-ink: #154A31;

	--psk-font-read: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
	--psk-font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--psk-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--psk-measure: 46.25rem;
	--psk-r-s: 6px;
	--psk-r-m: 10px;
	--psk-r-l: 16px;
	--psk-gap: clamp(1rem, 3vw, 1.5rem);
	--psk-header-h: 64px;

	--psk-i-answer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c3.2 4 6 7.4 6 10.6a6 6 0 0 1-12 0c0-3.2 2.8-6.6 6-10.6z'/%3E%3C/svg%3E");
	--psk-i-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
	--psk-i-safety: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2.8 19.5h18.4z'/%3E%3Cpath d='M12 10v4.5M12 17.2h.01'/%3E%3C/svg%3E");
	--psk-i-tip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17.5h6M10 20.5h4M12 3.5a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1 2V17h5.2v-.7c0-.8.4-1.5 1-2A6 6 0 0 0 12 3.5z'/%3E%3C/svg%3E");
	--psk-i-chem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 3.5h5M10 3.5v5.2L5.2 17.3A2.2 2.2 0 0 0 7.1 20.5h9.8a2.2 2.2 0 0 0 1.9-3.2L14 8.7V3.5'/%3E%3Cpath d='M7.5 14.5h9'/%3E%3C/svg%3E");
	--psk-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--psk-i-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E");
	--psk-i-calc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M8.5 7h7M8.5 11h.01M12 11h.01M15.5 11h.01M8.5 14.5h.01M12 14.5h.01M15.5 14.5v3M8.5 18h.01M12 18h.01'/%3E%3C/svg%3E");
	--psk-i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	--psk-i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------- Reading column */
.psk-prose {
	font-family: var(--psk-font-read);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	line-height: 1.72;
	color: var(--psk-ink);
	overflow-wrap: break-word;
}

.psk-prose > * {
	margin-block: 0;
}

.psk-prose > * + * {
	margin-block-start: 1.15em;
}

.psk-prose h2,
.psk-prose h3,
.psk-prose h4 {
	font-family: var(--psk-font-ui);
	color: var(--psk-navy);
	line-height: 1.25;
	letter-spacing: -0.012em;
	scroll-margin-top: calc(var(--psk-header-h) + 1.25rem);
	text-wrap: balance;
}

.psk-prose h2 {
	font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
	font-weight: 720;
	margin-block-start: 2.1em;
}

.psk-prose h3 {
	font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
	font-weight: 680;
	margin-block-start: 1.75em;
}

.psk-prose h4 {
	font-size: 1.0625rem;
	font-weight: 680;
	margin-block-start: 1.5em;
}

.psk-prose :is(h2, h3, h4) + * {
	margin-block-start: 0.55em;
}

.psk-prose a {
	color: var(--psk-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.psk-prose a:hover {
	color: var(--psk-link-hover);
	text-decoration-thickness: 2px;
}

.psk-prose :where(ul, ol) {
	padding-inline-start: 1.35em;
}

.psk-prose li + li {
	margin-block-start: 0.4em;
}

.psk-prose li > :is(ul, ol) {
	margin-block-start: 0.4em;
}

.psk-prose strong {
	font-weight: 700;
}

.psk-prose blockquote {
	margin-inline: 0;
	padding-inline-start: 1.25em;
	border-inline-start: 3px solid var(--psk-aqua);
	color: var(--psk-ink-soft);
}

.psk-prose code {
	font-family: var(--psk-font-mono);
	font-size: 0.875em;
	background: var(--psk-tile);
	padding: 0.1em 0.35em;
	border-radius: 4px;
}

.psk-prose figure {
	margin-inline: 0;
}

.psk-prose hr {
	border: 0;
	border-top: 1px solid var(--psk-line);
}

.psk-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--psk-r-m);
}

.psk-prose figcaption,
.wp-element-caption {
	font-family: var(--psk-font-ui);
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--psk-muted);
	margin-top: 0.6rem;
}

/* ------------------------------------------------------------------ Tables */
.wp-block-table {
	overflow-x: auto;
	margin-inline: 0;
	-webkit-overflow-scrolling: touch;
	/* Scroll shadows: pure CSS hint that a wide table scrolls sideways. */
	background:
		linear-gradient(to right, var(--psk-bg) 30%, rgba(247, 250, 250, 0)) left / 40px 100% no-repeat local,
		linear-gradient(to left, var(--psk-bg) 30%, rgba(247, 250, 250, 0)) right / 40px 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, rgba(12, 47, 63, 0.16), transparent) left / 12px 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, rgba(12, 47, 63, 0.16), transparent) right / 12px 100% no-repeat scroll;
}

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--psk-font-ui);
	font-size: 0.9375rem;
	line-height: 1.45;
	font-variant-numeric: tabular-nums;
}

.wp-block-table :is(th, td) {
	padding: 0.65rem 0.85rem;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid var(--psk-line);
}

.wp-block-table thead {
	border: 0;
}

.wp-block-table thead th {
	background: var(--psk-tile);
	color: var(--psk-navy);
	font-weight: 650;
	border-bottom: 2px solid var(--psk-line-strong);
}

.wp-block-table tbody tr:last-child :is(th, td) {
	border-bottom-color: var(--psk-line-strong);
}

/* Dosing: strong header, readable first column, zebra rows. */
.wp-block-table.is-style-psk-dosing thead th {
	background: var(--psk-navy);
	color: #fff;
	border-bottom: 0;
}

.wp-block-table.is-style-psk-dosing tbody tr:nth-child(even) td {
	background: rgba(234, 241, 242, 0.6);
}

.wp-block-table.is-style-psk-dosing td:first-child {
	font-weight: 600;
	color: var(--psk-navy);
}

/* Comparison: first column stays put while the rest scrolls. */
.wp-block-table.is-style-psk-comparison table {
	min-width: 34rem;
}

.wp-block-table.is-style-psk-comparison :is(td, th):first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--psk-bg);
	font-weight: 650;
	color: var(--psk-navy);
	box-shadow: inset -1px 0 0 var(--psk-line);
}

.wp-block-table.is-style-psk-comparison thead th:first-child {
	background: var(--psk-tile);
}

/* ------------------------------------------------------------------- Boxes */
.psk-box {
	--psk-box-bg: var(--psk-surface);
	--psk-box-line: var(--psk-line);
	--psk-box-title: var(--psk-navy);
	--psk-box-icon: var(--psk-i-note);
	background: var(--psk-box-bg);
	border: 1px solid var(--psk-box-line);
	border-radius: var(--psk-r-m);
	padding: 1.05rem 1.25rem 1.15rem;
	font-size: 0.96em;
	line-height: 1.65;
}

.psk-box > * {
	margin-block: 0;
}

.psk-box > * + * {
	margin-block-start: 0.55em;
}

.psk-box__title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--psk-font-ui);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--psk-box-title);
}

.psk-box__title::before {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background: currentColor;
	-webkit-mask: var(--psk-box-icon) center / contain no-repeat;
	mask: var(--psk-box-icon) center / contain no-repeat;
}

.psk-box__foot {
	font-family: var(--psk-font-ui);
	font-size: 0.8125rem;
	color: var(--psk-muted);
}

/* The quick answer sits on the waterline: a single aqua rule on top. */
.psk-box--answer {
	--psk-box-icon: var(--psk-i-answer);
	border-top: 3px solid var(--psk-aqua);
	border-radius: 0 0 var(--psk-r-m) var(--psk-r-m);
	font-size: 1em;
}

.psk-box--note {
	--psk-box-bg: var(--psk-note-bg);
	--psk-box-line: var(--psk-note-line);
	--psk-box-title: var(--psk-note-ink);
	--psk-box-icon: var(--psk-i-note);
}

.psk-box--safety {
	--psk-box-bg: var(--psk-danger-bg);
	--psk-box-line: #EBB8B3;
	--psk-box-title: var(--psk-danger-ink);
	--psk-box-icon: var(--psk-i-safety);
	border-inline-start: 4px solid var(--psk-danger-line);
}

.psk-box--tip {
	--psk-box-bg: var(--psk-ok-bg);
	--psk-box-line: #A9D9C0;
	--psk-box-title: var(--psk-ok-ink);
	--psk-box-icon: var(--psk-i-tip);
}

.psk-box--chem {
	--psk-box-bg: var(--psk-tile);
	--psk-box-line: var(--psk-line-strong);
	--psk-box-icon: var(--psk-i-chem);
}

.psk-box--takeaways {
	--psk-box-icon: var(--psk-i-check);
}

.psk-chemlist {
	list-style: none;
	padding: 0;
	font-family: var(--psk-font-ui);
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}

.psk-chemlist li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.45rem 0;
	border-bottom: 1px dashed var(--psk-line-strong);
}

.psk-chemlist li + li {
	margin: 0;
}

.psk-chemlist strong {
	font-weight: 600;
	color: var(--psk-navy);
}

/* ------------------------------------------------------------------- Lists */
.is-style-psk-steps {
	list-style: none;
	padding-inline-start: 0;
	counter-reset: psk-step;
}

.is-style-psk-steps > li {
	position: relative;
	counter-increment: psk-step;
	padding-inline-start: 3rem;
	min-height: 2.25rem;
}

.is-style-psk-steps > li + li {
	margin-block-start: 1.1em;
}

.is-style-psk-steps > li::before {
	content: counter(psk-step);
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--psk-navy);
	color: #fff;
	font: 700 0.9375rem/2rem var(--psk-font-ui);
	text-align: center;
}

.is-style-psk-steps > li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(1rem - 1px);
	top: 2.35rem;
	bottom: -0.9em;
	width: 2px;
	background: var(--psk-line);
}

.is-style-psk-check,
.is-style-psk-cross {
	list-style: none;
	padding-inline-start: 0;
}

.is-style-psk-check > li,
.is-style-psk-cross > li {
	position: relative;
	padding-inline-start: 1.75rem;
}

.is-style-psk-check > li::before,
.is-style-psk-cross > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1.15rem;
	height: 1.15rem;
	background: var(--psk-ok-line);
	-webkit-mask: var(--psk-i-check) center / contain no-repeat;
	mask: var(--psk-i-check) center / contain no-repeat;
}

.is-style-psk-cross > li::before {
	background: var(--psk-danger-line);
	-webkit-mask-image: var(--psk-i-cross);
	mask-image: var(--psk-i-cross);
}

/* --------------------------------------------------------------- Pros/cons */
.wp-block-columns.psk-proscons {
	gap: 1rem;
}

.psk-pros,
.psk-cons {
	background: var(--psk-surface);
	border: 1px solid var(--psk-line);
	border-top: 3px solid var(--psk-ok-line);
	border-radius: 0 0 var(--psk-r-m) var(--psk-r-m);
	padding: 1rem 1.15rem 1.1rem;
	font-size: 0.96em;
}

.psk-cons {
	border-top-color: var(--psk-danger-line);
}

.psk-pros > *,
.psk-cons > * {
	margin-block: 0;
}

.psk-pros > * + *,
.psk-cons > * + * {
	margin-block-start: 0.6em;
}

.psk-proscons__title {
	font-family: var(--psk-font-ui);
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--psk-navy);
}

/* ----------------------------------------------------------------- Product */
.psk-product {
	background: var(--psk-surface);
	border: 1px solid var(--psk-line);
	border-radius: var(--psk-r-l);
	padding: 1.25rem 1.35rem 1.1rem;
}

.psk-product > * {
	margin-block: 0;
}

.psk-product > * + * {
	margin-block-start: 0.7em;
}

.psk-product__badge {
	display: inline-block;
	font-family: var(--psk-font-ui);
	font-size: 0.8125rem;
	font-weight: 650;
	color: var(--psk-link);
	background: var(--psk-aqua-wash);
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
}

.psk-prose .psk-product__name,
.psk-product__name {
	margin-block-start: 0.5rem;
	font-size: 1.25rem;
}

.psk-product__note {
	font-family: var(--psk-font-ui);
	font-size: 0.75rem;
	color: var(--psk-muted);
}

/* ----------------------------------------------------------------- Buttons */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.7rem 1.3rem;
	font-family: var(--psk-font-ui);
	font-size: 1rem;
	font-weight: 650;
	line-height: 1.2;
	color: #fff;
	background: var(--psk-navy);
	border: 0;
	border-radius: var(--psk-r-s);
	text-decoration: none;
}

.psk-prose .wp-block-button__link {
	color: #fff;
	text-decoration: none;
}

.wp-block-button__link:hover {
	background: var(--psk-navy-deep);
	color: #fff;
}

.is-style-psk-affiliate .wp-block-button__link,
.psk-prose .is-style-psk-affiliate .wp-block-button__link {
	background: var(--psk-aqua);
	color: var(--psk-navy);
}

.is-style-psk-affiliate .wp-block-button__link:hover {
	background: #24A396;
	color: var(--psk-navy);
}

.is-style-psk-quiet .wp-block-button__link,
.psk-prose .is-style-psk-quiet .wp-block-button__link {
	background: transparent;
	color: var(--psk-navy);
	box-shadow: inset 0 0 0 1px var(--psk-line-strong);
}

/* -------------------------------------------------------------- Disclosure */
.psk-disclosure {
	font-family: var(--psk-font-ui);
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--psk-muted);
	border-block: 1px dashed var(--psk-line-strong);
	padding-block: 0.7rem;
}

.psk-disclosure > * {
	margin: 0;
}

/* ---------------------------------------------------------------- Tool CTA */
.psk-toolcta {
	background: var(--psk-navy);
	color: #E3EEF0;
	border-top: 3px solid var(--psk-aqua);
	border-radius: 0 0 var(--psk-r-l) var(--psk-r-l);
	padding: 1.2rem 1.35rem 1.3rem;
	font-family: var(--psk-font-ui);
}

.psk-toolcta > * {
	margin-block: 0;
}

.psk-toolcta > * + * {
	margin-block-start: 0.5rem;
}

.psk-toolcta__title {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 1.125rem;
	font-weight: 700;
	color: #fff;
}

.psk-toolcta__title::before {
	content: "";
	width: 1.4rem;
	height: 1.4rem;
	flex: none;
	background: var(--psk-aqua);
	-webkit-mask: var(--psk-i-calc) center / contain no-repeat;
	mask: var(--psk-i-calc) center / contain no-repeat;
}

.psk-toolcta__text {
	font-size: 0.9375rem;
	line-height: 1.5;
}

.psk-toolcta .wp-block-buttons {
	margin-block-start: 0.9rem;
}

.psk-toolcta .wp-block-button__link,
.psk-prose .psk-toolcta .wp-block-button__link {
	background: var(--psk-aqua);
	color: var(--psk-navy);
}

.psk-toolcta :focus-visible {
	outline-color: var(--psk-aqua);
}

/* ------------------------------------------------------------ Related card */
.psk-relcard {
	position: relative;
	background: var(--psk-surface);
	border: 1px solid var(--psk-line);
	border-radius: var(--psk-r-m);
	padding: 0.9rem 1.1rem 1rem;
	font-family: var(--psk-font-ui);
}

.psk-relcard > * {
	margin-block: 0;
}

.psk-relcard__label {
	font-size: 0.8125rem;
	color: var(--psk-muted);
}

.psk-relcard__title {
	margin-block-start: 0.2rem;
	font-size: 1.0625rem;
	font-weight: 650;
	line-height: 1.35;
}

.psk-relcard__title a,
.psk-prose .psk-relcard__title a {
	color: var(--psk-navy);
	text-decoration: none;
}

.psk-relcard__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.psk-relcard:hover {
	border-color: var(--psk-aqua);
}

.psk-relcard:hover .psk-relcard__title a {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.psk-relcard__text {
	margin-block-start: 0.25rem;
	font-size: 0.875rem;
	color: var(--psk-ink-soft);
}

/* --------------------------------------------------------------------- FAQ */
.psk-faq > * {
	margin-block: 0;
}

.psk-faq > h2 + * {
	margin-block-start: 0.75rem;
}

.psk-faq .wp-block-details {
	border-top: 1px solid var(--psk-line);
	padding-block: 0.25rem;
}

.psk-faq .wp-block-details:last-child {
	border-bottom: 1px solid var(--psk-line);
}

.wp-block-details summary {
	cursor: pointer;
}

.psk-faq .wp-block-details summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	min-height: 44px;
	padding-block: 0.65rem;
	font-family: var(--psk-font-ui);
	font-size: 1.0625rem;
	font-weight: 650;
	line-height: 1.35;
	color: var(--psk-navy);
	list-style: none;
}

.psk-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.psk-faq .wp-block-details summary::after {
	content: "";
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	background: var(--psk-link);
	-webkit-mask: var(--psk-i-plus) center / contain no-repeat;
	mask: var(--psk-i-plus) center / contain no-repeat;
}

.psk-faq .wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

.psk-faq .wp-block-details > :not(summary) {
	margin-block: 0 0.9rem;
}

/* ----------------------------------------------------------------- Sources */
.psk-sources {
	margin-block-start: 2.5rem;
	padding-block-start: 1.25rem;
	border-top: 1px solid var(--psk-line);
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--psk-ink-soft);
}

.psk-sources > * {
	margin-block: 0;
}

.psk-sources > * + * {
	margin-block-start: 0.6rem;
}

.psk-sources h2,
.psk-prose .psk-sources h2 {
	margin-block-start: 0;
	font-size: 1.0625rem;
}

.psk-sources li + li {
	margin-block-start: 0.35em;
}

/* ------------------------------------------------------ Table of contents */
.psk-toc {
	font-family: var(--psk-font-ui);
	font-size: 0.9375rem;
	line-height: 1.45;
	background: var(--psk-surface);
	border: 1px solid var(--psk-line);
	border-radius: var(--psk-r-m);
}

.psk-prose > .psk-toc {
	margin-block: 1.75rem;
}

.psk-toc__summary {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 48px;
	padding: 0.7rem 1.1rem;
	cursor: pointer;
	list-style: none;
}

.psk-toc__summary::-webkit-details-marker {
	display: none;
}

.psk-toc__title {
	font-weight: 700;
	color: var(--psk-navy);
}

.psk-toc__count {
	margin-inline-start: auto;
	font-size: 0.8125rem;
	color: var(--psk-muted);
}

.psk-toc__summary::after {
	content: "";
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	background: var(--psk-muted);
	-webkit-mask: var(--psk-i-chevron) center / contain no-repeat;
	mask: var(--psk-i-chevron) center / contain no-repeat;
}

.psk-toc[open] .psk-toc__summary::after {
	transform: rotate(180deg);
}

.psk-toc__nav {
	padding: 0 1.1rem 1rem;
	border-top: 1px solid var(--psk-line);
}

.psk-toc__list {
	margin: 0.8rem 0 0;
	padding-inline-start: 1.4rem;
}

.psk-toc__list > li::marker {
	color: var(--psk-muted);
	font-variant-numeric: tabular-nums;
}

.psk-toc li + li {
	margin-block-start: 0.35rem;
}

.psk-toc ol ol {
	list-style: none;
	margin: 0.35rem 0 0.15rem;
	padding-inline-start: 0.9rem;
	border-inline-start: 1px solid var(--psk-line);
	font-size: 0.875rem;
}

.psk-toc a,
.psk-prose .psk-toc a {
	color: var(--psk-ink-soft);
	text-decoration: none;
}

.psk-toc a:hover {
	color: var(--psk-link);
	text-decoration: underline;
}

/* --------------------------------------------------------------------- Ads */
.psk-ad {
	clear: both;
	text-align: center;
}

.psk-prose > .psk-ad {
	margin-block: 2.25rem;
}

.psk-ad__label {
	display: block;
	margin-bottom: 0.4rem;
	font: 500 0.6875rem/1 var(--psk-font-ui);
	letter-spacing: 0.03em;
	color: var(--psk-muted);
}

.psk-ad__inner {
	display: flex;
	align-items: center;
	justify-content: center;
}

.psk-ad__inner > * {
	max-width: 100%;
}

.psk-ad--preview .psk-ad__inner {
	min-height: 120px;
	border: 2px dashed var(--psk-line-strong);
	border-radius: var(--psk-r-s);
	background: var(--psk-tile);
}

/* ------------------------------------------------------ Demo hero image */
.psk-demo-hero img {
	width: 100%;
	height: auto;
	aspect-ratio: 1200 / 630;
	object-fit: cover;
}

/* ---------------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: no-preference) {
	.psk-faq .wp-block-details summary::after,
	.psk-toc__summary::after {
		transition: transform 0.15s ease;
	}
}