/*
 * Sticky contents rail, single posts. 2026-09-10.
 *
 * THE NUMBER THAT CONTROLS THE RAIL WIDTH is --gt-toc-w below.
 * The body column takes whatever is left after the rail and the gap.
 */

/*
 * position:sticky needs no scrolling ancestor. The theme sets overflow:hidden
 * on .wrapper and overflow-y:auto on body, either of which silently disables
 * sticky for everything inside. The rail scrolled away instead of sticking
 * and nothing in the rail CSS looked wrong.
 *
 * overflow:clip prevents the same horizontal spill the theme was guarding
 * against WITHOUT establishing a scroll container, which is the whole point.
 * Note overflow-x:hidden with overflow-y:visible is not a valid pair, the
 * spec computes the visible one back to auto, so clip is the only fix that
 * keeps both properties honest.
 *
 * This stylesheet only loads on single posts that qualify for a rail, so no
 * other template is affected. On a browser without overflow:clip these two
 * rules are dropped, the theme's values stand, and the rail simply does not
 * stick. Nothing else changes.
 */
body.gt-toc-page{ overflow-x: clip; overflow-y: visible; }
/* The theme rule is body > .wrapper:not(.et-fb-iframe-ancestor) at (0,2,1).
   This is (0,3,2), so it wins on specificity without !important. The theme
   itself uses overflow:clip for its own sticky WooCommerce layout, so this
   is its established fix, not an invention. */
body.gt-toc-page > div.wrapper:not(.et-fb-iframe-ancestor){ overflow: clip; }

.boxes-content.gt-has-toc{
	--gt-toc-w: 236px;
	--gt-toc-gap: 48px;
	--gt-toc-top: 104px;   /* clears the sticky site header */

	display: grid;
	grid-template-columns: var(--gt-toc-w) minmax(0, 1fr);
	column-gap: var(--gt-toc-gap);
	align-items: start;
}

.gt-has-toc > .gt-toc{ grid-column: 1; grid-row: 1; }
.gt-has-toc > .the-content{ grid-column: 2; grid-row: 1; min-width: 0; }

.gt-toc{
	position: sticky;
	top: var(--gt-toc-top);
	max-height: calc(100vh - var(--gt-toc-top) - 2rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	font-size: .88rem;
	line-height: 1.4;
	padding-right: .4rem;
}

.gt-toc__h{
	margin: 0 0 .7rem;
	font-size: .72rem !important;
	letter-spacing: .09em;
	text-transform: uppercase;
	opacity: .6;
	font-weight: 700;
	line-height: 1.3;
}

.gt-toc__list{
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 2px solid rgba(128,128,128,.22);
}

.gt-toc__item{ margin: 0; }

.gt-toc__link{
	display: block;
	padding: .38rem 0 .38rem .8rem;
	margin-left: -2px;
	border-left: 2px solid transparent;
	text-decoration: none;
	color: inherit;
	opacity: .72;
}
.gt-toc__link:hover{ opacity: 1; text-decoration: underline; }

.gt-toc__link.is-current{
	opacity: 1;
	font-weight: 600;
	border-left-color: currentColor;
}

/* Respect a reduced motion preference for the smooth jump. */
@media (prefers-reduced-motion: no-preference){
	html{ scroll-behavior: smooth; }
}

/* Anchored headings must not land under the sticky site header. */
.the-content h2[id]{ scroll-margin-top: var(--gt-toc-top, 104px); }

/*
 * Stack at the same breakpoint as the post header, so the page has one
 * behaviour change rather than two.
 */
@media (max-width: 1024px){
	.boxes-content.gt-has-toc{
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
	}
	.gt-has-toc > .gt-toc{ grid-column: 1; grid-row: 1; }
	.gt-has-toc > .the-content{ grid-column: 1; grid-row: 2; }

	.gt-toc{
		position: static;
		max-height: none;
		overflow: visible;
		margin: 0 0 1.75rem;
		padding: 1rem 1.15rem;
		border: 1px solid rgba(128,128,128,.28);
		border-radius: 8px;
	}
	.gt-toc__list{ border-left: 0; }
	.gt-toc__link{ padding-left: 0; margin-left: 0; border-left: 0; }
	.gt-toc__link.is-current{ border-left: 0; }
}

.gt-toc, .gt-toc *{ max-width: 100%; box-sizing: border-box; }