/* Chronition SEO — Table of contents */
.cwseo-toc {
	--cwseo-accent: var(--wp--preset--color--primary, var(--wp--preset--color--vivid-cyan-blue, #2563eb));
	--cwseo-radius: 14px;
	--cwseo-tint: color-mix(in srgb, var(--cwseo-accent) 6%, transparent);
	--cwseo-line: color-mix(in srgb, currentColor 14%, transparent);
	--cwseo-muted: color-mix(in srgb, currentColor 62%, transparent);
	margin: 1.75em 0 2em;
	max-width: 100%;
	container-type: inline-size; /* Lets two columns fall back to one in narrow spots. */
	font-size: .95em;
	line-height: 1.5;
	clear: both;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.cwseo-toc { --cwseo-tint: rgba(37, 99, 235, .06); --cwseo-line: rgba(127, 127, 127, .25); --cwseo-muted: inherit; }
}

.cwseo-toc__box { margin: 0; padding: 0; border: 0; }
.cwseo-toc--card .cwseo-toc__box {
	border: 1px solid var(--cwseo-line);
	border-radius: var(--cwseo-radius);
	background: var(--cwseo-tint);
	overflow: hidden;
}
.cwseo-toc--outline .cwseo-toc__box { border: 1px solid var(--cwseo-line); border-radius: var(--cwseo-radius); }
.cwseo-toc--minimal .cwseo-toc__box { border-left: 3px solid var(--cwseo-accent); padding-left: .25em; }

/* Match theme: no panel colours of its own — theme fonts, link colour, background. */
.cwseo-toc--theme { font-size: 1em; }
.cwseo-toc--theme .cwseo-toc__box {
	border: 1px solid var(--cwseo-line);
	border-radius: var(--cwseo-theme-radius, 6px);
	background: transparent;
}
.cwseo-toc--theme .cwseo-toc__head { padding: .85em 1em; font-weight: inherit; }
.cwseo-toc--theme .cwseo-toc__title {
	font-family: var(--cwseo-head-font, inherit);
	font-weight: var(--cwseo-head-weight, 700);
	letter-spacing: normal;
}
.cwseo-toc--theme .cwseo-toc__icon { width: auto; height: auto; background: none; color: var(--cwseo-accent); }
.cwseo-toc--theme .cwseo-toc__icon svg { width: 1.2em; height: 1.2em; }
.cwseo-toc--theme .cwseo-toc__body { border-top: 1px solid var(--cwseo-line); padding-top: .7em; }
.cwseo-toc--theme .cwseo-toc__list > li > a { font-weight: inherit; }
.cwseo-toc--theme a { border-radius: 4px; }
.cwseo-toc--theme a:hover .cwseo-toc__text { text-decoration: underline; text-underline-offset: .18em; }

/* Header */
.cwseo-toc__head {
	display: flex;
	align-items: center;
	gap: .6em;
	padding: .9em 1.1em;
	cursor: pointer;
	list-style: none;
	user-select: none;
	font-weight: 700;
}
.cwseo-toc__head::-webkit-details-marker { display: none; }
.cwseo-toc__head::marker { content: ""; }
.cwseo-toc--minimal .cwseo-toc__head { padding: .4em .9em; }
.cwseo-toc__head:focus-visible { outline: 2px solid var(--cwseo-accent); outline-offset: -2px; border-radius: var(--cwseo-radius); }
.cwseo-toc__icon {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 2em;
	height: 2em;
	border-radius: 9px;
	background: var(--cwseo-accent);
	color: #fff;
}
.cwseo-toc__icon svg { width: 1.1em; height: 1.1em; }
.cwseo-toc__title { flex: 1; font-size: 1.08em; letter-spacing: -.005em; }
.cwseo-toc__count { font-weight: 500; font-size: .82em; color: var(--cwseo-muted); white-space: nowrap; }
.cwseo-toc__chev {
	flex: none;
	width: .55em;
	height: .55em;
	margin: 0 .2em 0 .35em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-25%);
	transition: transform .2s ease;
	opacity: .7;
}
.cwseo-toc__box[open] .cwseo-toc__chev { transform: rotate(-135deg) translate(-15%, -15%); }

/* Body & list */
.cwseo-toc__body { padding: 0 1.1em 1em 1.1em; }
.cwseo-toc--card .cwseo-toc__body { border-top: 1px solid var(--cwseo-line); padding-top: .75em; }
.cwseo-toc--minimal .cwseo-toc__body { padding: 0 .9em .6em; }
.cwseo-toc__list, .cwseo-toc__sub { list-style: none; margin: 0; padding: 0; }
.cwseo-toc__sub { margin: .1em 0 .2em 1.25em; padding-left: .8em; border-left: 1px solid var(--cwseo-line); }
.cwseo-toc li { margin: 0; padding: 0; }
.cwseo-toc li::before, .cwseo-toc li::marker { content: none; }
.cwseo-toc a {
	position: relative;
	display: flex;
	gap: .55em;
	padding: .38em .6em;
	margin: 0 -.6em;
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.cwseo-toc a:hover, .cwseo-toc a:focus-visible {
	background: color-mix(in srgb, var(--cwseo-accent) 10%, transparent);
	color: var(--cwseo-accent);
	outline: none;
}
.cwseo-toc__list > li > a { font-weight: 600; }
.cwseo-toc__sub a { font-size: .95em; font-weight: 400; color: var(--cwseo-muted); }
.cwseo-toc a.is-active { color: var(--cwseo-accent); background: color-mix(in srgb, var(--cwseo-accent) 12%, transparent); }
.cwseo-toc a.is-active::after {
	content: "";
	position: absolute;
	left: -.15em;
	top: .45em;
	bottom: .45em;
	width: 3px;
	border-radius: 3px;
	background: var(--cwseo-accent);
}

/* Numbering: 1, 1.1, 1.1.1 */
.cwseo-num-decimal .cwseo-toc__list, .cwseo-num-decimal .cwseo-toc__sub { counter-reset: cwseo; }
.cwseo-num-decimal li { counter-increment: cwseo; }
.cwseo-num-decimal a::before {
	content: counters(cwseo, ".");
	flex: none;
	min-width: 1.6em;
	color: var(--cwseo-accent);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}
.cwseo-num-bullets a::before { content: ""; flex: none; width: .4em; height: .4em; margin-top: .6em; border-radius: 50%; background: var(--cwseo-accent); opacity: .8; }

/* Two columns: main sections flow into two columns; a section never splits. */
.cwseo-toc--cols-2 .cwseo-toc__list { column-count: 2; column-gap: 2.2em; column-rule: 1px solid var(--cwseo-line); }
.cwseo-toc--cols-2 .cwseo-toc__list > li { break-inside: avoid; page-break-inside: avoid; }
.cwseo-toc--cols-2 .cwseo-toc__list > li:first-child > a { margin-top: 0; }
@container (max-width: 400px) {
	.cwseo-toc--cols-2 .cwseo-toc__list { column-count: 1; column-rule: 0; }
}
@media (max-width: 640px) {
	.cwseo-toc--cols-2 .cwseo-toc__list { column-count: 1; column-rule: 0; }
}

/* Headings land below sticky headers. */
:where(h1, h2, h3, h4, h5, h6)[id] { scroll-margin-top: var(--cwseo-scroll-offset, 24px); }

/* Floating button & panel */
.cwseo-toc-fab {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: max(16px, env(safe-area-inset-bottom));
	z-index: 99990;
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .7em 1.05em .7em .8em;
	border: 0;
	border-radius: 999px;
	background: #111827;
	color: #fff;
	font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	text-transform: none;
	text-decoration: none;
	letter-spacing: normal;
	min-height: 0;
	box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45);
	cursor: pointer;
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.cwseo-toc-fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.cwseo-toc-fab:focus-visible { outline: 3px solid var(--cwseo-accent, #2563eb); outline-offset: 2px; }
.cwseo-toc-fab__ring {
	--p: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: conic-gradient(var(--cwseo-fab-accent, #60a5fa) calc(var(--p) * 1%), rgba(255, 255, 255, .18) 0);
	-webkit-mask: radial-gradient(circle, transparent 55%, #000 57%);
	mask: radial-gradient(circle, transparent 55%, #000 57%);
}
.cwseo-toc-panel {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: calc(max(16px, env(safe-area-inset-bottom)) + 58px);
	z-index: 99991;
	width: min(380px, calc(100vw - 32px));
	max-height: min(70vh, 560px);
	overflow: auto;
	overscroll-behavior: contain;
	padding: .4em 0;
	border-radius: 16px;
	background: #fff;
	color: #1f2937;
	box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .06);
	opacity: 0;
	transform: translateY(8px) scale(.98);
	transform-origin: bottom right;
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
}
.cwseo-toc-panel.is-open { opacity: 1; transform: none; pointer-events: auto; }
.cwseo-toc-panel .cwseo-toc { margin: 0; font-size: 15px; }
.cwseo-toc-panel .cwseo-toc__box { border: 0; background: none; }
.cwseo-toc-panel .cwseo-toc__head { pointer-events: none; }
.cwseo-toc-panel .cwseo-toc__chev { display: none; }
.cwseo-toc-panel .cwseo-toc__body { border-top: 1px solid rgba(0, 0, 0, .08); }
.cwseo-toc-panel .cwseo-toc__list { column-count: 1; column-rule: 0; }
/* Match theme: the button and panel take the page's own colours. */
.cwseo-toc-fab.is-theme { background: var(--cwseo-accent-page, #111827); color: var(--cwseo-on-accent, #fff); --cwseo-fab-accent: var(--cwseo-on-accent, #fff); font-family: var(--cwseo-head-font, inherit); }
.cwseo-toc-fab:hover, .cwseo-toc-fab:focus { text-decoration: none; }
.cwseo-toc-panel.is-theme { background: var(--cwseo-page-bg, #fff); color: var(--cwseo-page-fg, #1f2937); font-family: var(--cwseo-body-font, inherit); }
.cwseo-toc-panel.is-theme .cwseo-toc__body { border-top-color: var(--cwseo-line); }
@media (prefers-color-scheme: dark) {
	.cwseo-toc-panel:not(.is-theme) { background: #1f2937; color: #f3f4f6; }
	.cwseo-toc-fab:not(.is-theme) { background: #f9fafb; color: #111827; }
}

@media (max-width: 600px) {
	.cwseo-toc { font-size: .92em; }
	.cwseo-toc__count { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.cwseo-toc *, .cwseo-toc-fab, .cwseo-toc-panel { transition: none !important; }
}
@media print {
	.cwseo-toc-fab, .cwseo-toc-panel { display: none !important; }
	.cwseo-toc__chev { display: none; }
}
