/**
 * Article table of contents - markup produced by [osmopolis_toc].
 *
 * The beige box, its padding, its radius and its sticky behaviour belong to the
 * Bricks div that wraps the shortcode: only what Bricks cannot reach, i.e. the
 * markup SimpleTOC and the shortcode emit, is styled here.
 *
 *   .article-toc                <nav aria-labelledby>
 *     .article-toc__toggle      "Sommaire" + chevron, a button below 992px only
 *     .article-toc__panel       the collapsible part
 *       ul.simpletoc-list       SimpleTOC's own markup
 */

.article-toc {
	display: flex;
	flex-direction: column;
	row-gap: 16px;
}

.article-toc__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	font-family: "Kulim Park", sans-serif;
	font-size: var(--heading-300);
	font-weight: 600;
	line-height: 1.2;
	color: var(--osmo-black);
}

/* article-toc.js only hands out the role below 992px, where the toggle acts. */
.article-toc__toggle[role="button"] {
	cursor: pointer;
}

.article-toc__chevron {
	flex: none;
	width: 16px;
	height: 16px;
	transition: transform 150ms ease;
}

.article-toc__toggle[aria-expanded="true"] .article-toc__chevron {
	transform: rotate(180deg);
}

.article-toc__toggle[aria-expanded="false"] + .article-toc__panel {
	display: none;
}

/* Above 992px the list never collapses, so the chevron would promise a toggle
   that is not there. The script drops aria-expanded at the same breakpoint. */
@media (min-width: 992px) {
	.article-toc__chevron {
		display: none;
	}
}

.article-toc .simpletoc-list {
	display: flex;
	flex-direction: column;
	row-gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.article-toc .simpletoc-list a {
	display: block;
	font-family: "Outfit", sans-serif;
	font-size: var(--text-s);
	line-height: 1.25;
	color: var(--osmo-black);
	text-decoration: none;
	transition: padding-left 150ms ease;
}

/* The site-wide link hover paints white on blue, which inside the list reads as
   a selection and fights with the current-section dot. Underline only. */
.article-toc .simpletoc-list a:hover,
.article-toc .simpletoc-list a:focus-visible {
	color: var(--osmo-black);
	background-color: transparent;
	text-decoration: underline;
}

/* Current section: the mockup indents the line rather than reserving the space
   on every item, so the shift is deliberate. */
.article-toc .simpletoc-list a[aria-current="true"] {
	position: relative;
	padding-left: 18px;
}

.article-toc .simpletoc-list a[aria-current="true"]::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	border-radius: 50%;
	background-color: var(--osmo-violet);
}

@media (prefers-reduced-motion: reduce) {
	.article-toc__chevron,
	.article-toc .simpletoc-list a {
		transition: none;
	}
}

/* Anchor landing spot, clear of the sticky header, same offset as the sticky
   TOC column itself. article-toc.js reads this variable to place its trigger
   line, so a heading scrolled to by a click cannot land under it. */
:root {
	--toc-anchor-offset: 120px;
}

.article-content :is(h2, h3, h4)[id] {
	scroll-margin-top: var(--toc-anchor-offset);
}