/*
 * Contents list.
 *
 * Loaded only on pages where show_table_of_contents is on.
 *
 * A utility, not a feature: hairline border, small type, muted labels, no
 * shadow, no accent panel. It should be findable and otherwise invisible.
 *
 * Mobile is a collapsed block in the normal flow below the hero — never a
 * floating overlay, which on a phone is guaranteed to cover the thing being
 * read. Desktop lifts it into a sticky 236px column beside the content, as
 * the Local SEO comp draws it.
 */

/* ============================================================= LAYOUT == */

.toc-layout__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-5);
}

/*
 * Sections inside the content column keep their own padding and bands. On a
 * contents page the bands are column-width rather than full-bleed, which is
 * exactly how the Local SEO comp lays this page type out.
 */
.toc-layout__main {
	min-width: 0;
}


/* ================================================================ TOC == */

.toc__panel {
	border: var(--sq-border-width-hair) solid var(--sq-rule);
	background-color: var(--sq-color-paper);
	color: var(--sq-color-ink);
	padding: 0.875rem 1rem; /* 14 16 */
}

.toc__summary {
	display: flex;
	gap: var(--sq-space-3);
	align-items: center;
	justify-content: space-between;
	min-height: var(--sq-tap-target);
	padding-block: var(--sq-space-1);
	color: var(--sq-color-support);
	font-size: var(--sq-text-label-sm);
	font-weight: var(--sq-weight-bold);
	letter-spacing: var(--sq-tracking-label-sm);
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

/* base.css draws a chevron on every <summary>; this one gets a plain caret. */
.toc__summary::after {
	width: 0.5rem;
	height: 0.5rem;
	border-width: 2px;
	transform: rotate(45deg) translate(-1px, -1px);
	content: '';
}

.toc__panel[open] > .toc__summary::after {
	transform: rotate(225deg) translate(-1px, -1px);
}

.toc__count {
	color: var(--sq-color-blue);
	font-size: 0.9375rem; /* 15 */
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
}

.toc__nav {
	margin-top: var(--sq-space-3);
	padding-top: var(--sq-space-1);
	border-top: var(--sq-border-width-hair) solid var(--sq-rule);
}

.toc__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.toc__item {
	margin: 0;
}

.toc__link {
	display: flex;
	gap: var(--sq-space-2);
	align-items: baseline;
	min-height: var(--sq-tap-target);
	padding: var(--sq-space-2) 0 var(--sq-space-2) var(--sq-space-3);
	border-left: 2px solid transparent;
	color: var(--sq-color-ink);
	font-size: var(--sq-text-small);
	line-height: 1.4;
	text-decoration: none;
}

.toc__link:hover {
	border-left-color: var(--sq-color-orange-text);
	color: var(--sq-color-orange-text);
}

/*
 * Current section. Set by the script via aria-current, so the state is
 * exposed to assistive technology rather than being colour alone — and with
 * no script there is simply no highlight, which is a complete feature minus
 * one affordance.
 */
.toc__link[aria-current='true'] {
	border-left-color: var(--sq-color-ink);
	font-weight: var(--sq-weight-bold);
}

.toc__number {
	flex: 0 0 1.375rem;
	color: var(--sq-color-support);
	font-family: var(--sq-font-mono);
	font-size: var(--sq-text-micro);
}


/* ============================================================= DESKTOP == */

@media (min-width: 61.25em) {
	.toc-layout__inner {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--sq-space-7); /* 48 */
	}

	.toc {
		position: sticky;
		/* Clear of the sticky site header. */
		top: calc(var(--sq-header-height) + var(--sq-space-4));
		flex: 0 0 14.75rem; /* 236 */
		max-width: 14.75rem;
	}

	.toc-layout__main {
		flex: 1 1 auto;
	}

	/* Sticky panels do not want to be taller than the viewport. */
	.toc__nav {
		max-height: calc(100vh - var(--sq-header-height) - 8rem);
		overflow-y: auto;
	}
}

@media print {
	/* A printed page has no scroll position to track and no links to follow. */
	.toc {
		display: none;
	}
}