/* Table of contents on blog posts (includes/toc.php): a collapsible
 * contents card before the first heading. Theme tokens with fallbacks,
 * so it still reads without the theme. Loaded only on posts that get
 * a table of contents. */

.ac-toc {
	margin-block: 32px;
	border: 1px solid var(--wp--preset--color--line, #e3e9f3);
	border-left: 4px solid var(--wp--preset--color--blue, #285cf4);
	border-radius: var(--wp--preset--border-radius--lg, 18px);
	background: var(--wp--preset--color--wash, #f7faff);
}

.ac-toc__summary {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 22px;
	list-style: none;
	cursor: pointer;
}

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

.ac-toc__title {
	color: var(--wp--preset--color--ink, #0f172a);
	font-size: var(--wp--preset--font-size--medium, 18px);
	font-weight: var(--wp--custom--font-weight--heading, 700);
}

.ac-toc__count {
	color: var(--wp--preset--color--muted, #64748b);
	font-size: var(--wp--preset--font-size--x-small, 14px);
}

/* Chevron in a round button at the end of the header. */
.ac-toc__summary::after {
	content: "";
	flex: none;
	width: 32px;
	height: 32px;
	margin-left: auto;
	border: 1px solid var(--wp--preset--color--line-blue, #d6e2f7);
	border-radius: 50%;
	background-color: var(--wp--preset--color--white, #fff);
	background-image:
		linear-gradient(45deg, transparent 43%, currentcolor 43%, currentcolor 57%, transparent 57%),
		linear-gradient(-45deg, transparent 43%, currentcolor 43%, currentcolor 57%, transparent 57%);
	background-repeat: no-repeat;
	background-position: 38% 55%, 62% 55%;
	background-size: 30% 30%;
	color: var(--wp--preset--color--blue, #285cf4);
	transition: transform 0.2s ease;
}

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

.ac-toc__summary:focus-visible {
	border-radius: var(--wp--preset--border-radius--lg, 18px);
	outline: 3px solid var(--wp--custom--focus-ring, rgba(40, 92, 244, 0.35));
	outline-offset: -3px;
}

/* Smooth open where the browser can animate <details> (progressive). */
.ac-toc details {
	interpolate-size: allow-keywords;
}

.ac-toc details::details-content {
	height: 0;
	overflow: hidden;
	transition: height 0.25s ease, content-visibility 0.25s allow-discrete;
}

.ac-toc details[open]::details-content {
	height: auto;
}

/* Numbered entries (1, 1.1, 1.1.1 …), as Easy TOC showed them. */
.ac-toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ac-toc;
}

.ac-toc details > ol {
	padding: 0 14px 18px;
}

.ac-toc ol ol {
	margin: 0 0 4px 22px;
	padding-left: 8px;
	border-left: 1px solid var(--wp--preset--color--line, #e3e9f3);
	font-size: var(--wp--preset--font-size--small, 15px);
}

.ac-toc li {
	counter-increment: ac-toc;
}

.wp-block-post-content .ac-toc li > a {
	display: flex;
	gap: 10px;
	padding: 6px 8px;
	border-radius: 8px;
	color: var(--wp--preset--color--body, #334155);
	line-height: 1.5;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ac-toc li > a::before {
	content: counters(ac-toc, ".");
	flex: none;
	min-width: 1.8em;
	color: var(--wp--preset--color--blue, #285cf4);
	font-weight: var(--wp--custom--font-weight--label, 600);
	font-variant-numeric: tabular-nums;
}

.wp-block-post-content .ac-toc li > a:hover,
.wp-block-post-content .ac-toc li > a:focus-visible {
	background: var(--wp--preset--color--white, #fff);
	color: var(--wp--preset--color--blue, #285cf4);
}

.wp-block-post-content .ac-toc li > a:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue, #285cf4);
	outline-offset: -2px;
}

/* Jump targets clear the sticky header. */
.wp-block-post-content :is(h1, h2, h3, h4, h5, h6)[id],
.ac-toc-anchor {
	scroll-margin-top: 110px;
}

/* Phones: title and count stay on one line each. */
@media (max-width: 600px) {

	.ac-toc__summary {
		gap: 10px;
		padding: 14px 14px 14px 16px;
	}

	.ac-toc__title,
	.ac-toc__count {
		white-space: nowrap;
	}

	.ac-toc details > ol {
		padding: 0 6px 14px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.ac-toc__summary::after,
	.ac-toc details::details-content {
		transition: none;
	}
}