/*
 * Table of contents before the first H2 (inc/toc.php).
 * Same look as the FAQ and the bookmakers list: white card, 1px hairlines, 16px corners.
 * Font weights: 600 for the title, 400-500 for entries. Two columns on wider screens.
 * Built on native <details>, so it works without JavaScript.
 */

.brs-toc {
	--brs-dark: #262626;
	--brs-text: #212529;
	--brs-muted: #6d7277;
	--brs-line: #e7e7ec;

	margin: 1.5rem 0 2rem;
	color: var(--brs-text);
}

.brs-toc *,
.brs-toc *::before,
.brs-toc *::after {
	box-sizing: border-box;
}

.brs-toc__box {
	background: #fff;
	border: 1px solid var(--brs-line);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(38, 38, 38, 0.04), 0 6px 20px rgba(38, 38, 38, 0.06);
}

.brs-toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
	border-radius: 16px;
}

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

/* Chevron on the right: points down when closed, up when open */
.brs-toc__summary::after {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-right: 4px;
	border: solid var(--brs-dark);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	transition: transform 0.25s ease;
}

.brs-toc__box[open] > .brs-toc__summary::after {
	transform: rotate(-135deg);
}

.brs-toc__summary:focus-visible {
	outline: 2px solid var(--brs-dark);
	outline-offset: 2px;
}

.brs-toc__list {
	display: grid;
	margin: 0;
	padding: 0 18px 16px;
	list-style: none;
	counter-reset: brs-toc;
}

.brs-toc__item {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 9px 0;
	font-size: 15px;
	line-height: 1.4;
	border-top: 1px solid var(--brs-line);
	counter-increment: brs-toc;
}

.brs-toc__item::before {
	flex: 0 0 auto;
	min-width: 1.6em;
	font-size: 12.5px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--brs-muted);
	content: counter(brs-toc, decimal-leading-zero);
}

.brs-toc__link {
	color: var(--brs-text);
	text-decoration: none;
}

.brs-toc__link:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.brs-toc__link:focus-visible {
	outline: 2px solid var(--brs-dark);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Wider screens: two columns, no line above the first row */
@media (min-width: 768px) {
	.brs-toc__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 28px;
	}

	.brs-toc__item:nth-child(-n + 2) {
		border-top: 0;
	}
}

/* Headings the menu jumps to: keep them clear of a sticky header */
.brs-toc-target {
	scroll-margin-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
	.brs-toc__summary::after {
		transition: none;
	}
}