/**
 * Section table of contents.
 *
 * The whole design rests on one distinction: Section links are navigation to
 * other parts of the audience, sub-section links are "you are here, these are
 * your siblings". The two must not look alike, or the reader loses the sense
 * of place. Sections read as a plain top-level list; the current Section's
 * sub-sections read as a nested, quieter sub-group.
 *
 * Structural only, like assets/content.css. Colours and type are neutral
 * placeholders until the design system lands.
 *
 * Note on stickiness: `position: sticky` is set on the Elementor container
 * that holds the shortcode widget, not here, with `align-self: start`.
 */

.gs-toc {
	font-size: 0.95em;
	line-height: 1.4;
}

.gs-toc__title {
	margin: 0 0 0.9em;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gs-toc__title a {
	color: inherit;
	text-decoration: none;
}

.gs-toc__title a:hover {
	text-decoration: underline;
}

.gs-toc__list,
.gs-toc__sublist {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---- Section level: the top-level navigation ---- */

.gs-toc__link--section {
	display: block;
	padding: 0.5em 0;
	color: inherit;
	text-decoration: none;
	font-weight: 500;
}

.gs-toc__link--section:hover,
.gs-toc__link--section:focus-visible {
	text-decoration: underline;
}

.gs-toc__item--section.is-current-section > .gs-toc__link--section {
	font-weight: 700;
}

/* ---- Sub-section level: the "you are here" sub-group ---- */

/* Indented, lighter, and bounded by a rule so it reads as belonging to the
   current Section rather than as more top-level items. */
.gs-toc__sublist {
	margin: 0.15em 0 0.6em;
	padding-left: 0.9em;
	border-left: 1px solid rgba(0, 0, 0, 0.12);
}

.gs-toc__link--sub {
	display: block;
	padding: 0.4em 0 0.4em 0.6em;
	/* The left rule doubles as the active marker: transparent by default so
	   the text never shifts when an item becomes current. */
	border-left: 2px solid transparent;
	margin-left: -0.9em;
	font-size: 0.92em;
	color: inherit;
	text-decoration: none;
	opacity: 0.85;
}

.gs-toc__link--sub:hover,
.gs-toc__link--sub:focus-visible {
	border-left-color: rgba(0, 0, 0, 0.25);
	text-decoration: underline;
	opacity: 1;
}

.gs-toc__item--sub.is-current > .gs-toc__link--sub {
	border-left-color: currentColor;
	font-weight: 700;
	opacity: 1;
}

/**
 * Below the tablet breakpoint the two column layout collapses. The container
 * is hidden on mobile from Elementor, so nothing is needed here; this comment
 * exists so the absence is deliberate rather than forgotten.
 */