/**
 * Table of contents on single posts.
 *
 * The design system stylesheet is scoped to the homepage and category
 * archives, so it is not available here. These values are declared literally
 * and match the Emerald Odyssey tokens, the same way author-card.css does:
 * ink #0A3C30, muted #3D5B52, soft #557166, rule #D3E8E1, rule-strong
 * #A9D2C6, accent #00674F, ground #F7FCFA.
 *
 * Loaded on single posts that have at least three H2 headings, enqueued by
 * inc/toc.php.
 *
 * @package GeneratePress_Child
 */

/* Same white block and top rule as the author card above it, so the two read
   as one column rather than two unrelated boxes. */
.ha-toc {
	margin: 0 0 2rem;
	padding: 1.25rem 1.5rem 1.5rem;
	background-color: #FFFFFF;
	border-top: 2px solid #0A3C30;
}

.ha-toc__title {
	margin: 0 0 0.85rem;
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #00674F;
}

/* Numbers come from a counter rather than the browser's list marker, so they
   can be styled and so a wrapped second line aligns under the first word
   instead of under the number. */
.ha-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ha-toc;
}

.ha-toc__item {
	margin: 0;
	padding: 0;
	counter-increment: ha-toc;
}

.ha-toc__item + .ha-toc__item {
	border-top: 1px solid #D3E8E1;
}

.ha-toc__link {
	display: grid;
	grid-template-columns: 1.6rem 1fr;
	gap: 0.15rem;
	padding: 0.5rem 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: #3D5B52;
	text-decoration: none;
	border-left: 2px solid transparent;
	padding-left: 0.55rem;
	margin-left: -0.75rem;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.ha-toc__link::before {
	content: counter(ha-toc) ".";
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	color: #557166;
}

.ha-toc__link:hover,
.ha-toc__link:focus-visible {
	color: #00674F;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Set by assets/js/toc.js on the heading the reader has scrolled to. */
.ha-toc__link.is-active {
	color: #0A3C30;
	font-weight: 600;
	border-left-color: #00674F;
}

.ha-toc__link.is-active::before {
	color: #00674F;
}

/* What pins is .ha-toc-dock, the wrapper inc/toc.php puts around the list AND
   the widgets that follow it, never the list on its own. A sticky element does
   not take its following siblings with it: pin the list alone and the Recent
   Posts widget below it keeps scrolling, slides up underneath the pinned list
   and vanishes behind it. Wrapping both means the whole block pins together,
   with nothing left after the list to collide with it.

   The cap and the inner scroll are on the wrapper for the same reason: on a
   short window the list plus the widgets are taller than the screen, and
   without them the lower part of the block would be pinned off the bottom of
   the window and unreachable.

   The article is far taller than the sidebar's own content, so the sidebar
   column also has to be told to fill the row before a sticky child has
   anywhere to stick. GeneratePress lays .site-content out as flex, which
   already stretches #right-sidebar; only its inner wrapper needs the height.

   Desktop only: below 48em GeneratePress stacks the sidebar under the article,
   .ha-toc-dock is left as a plain div and nothing here applies. */
@media (min-width: 48em) {
	/* #right-sidebar is a flex item of .site-content, so it is already
	   stretched to the full height of the row. This inner wrapper used to be
	   given height: 100% of it to make a tall containing block for the sticky
	   dock below - but the wrapper starts 20px BELOW the top of that parent,
	   so 100% put its bottom edge 20px past the container and the sidebar
	   visibly overlapped the footer once the reader scrolled to the end.

	   Making the parent a flex column and letting the wrapper take the
	   remaining space gives the dock exactly the same tall containing block
	   with nothing hanging over the edge. min-height: 0 keeps the wrapper
	   from refusing to shrink below its content, which is what lets its own
	   max-height and inner scroll still work. */
	.single #right-sidebar {
		display: flex;
		flex-direction: column;
	}

	.single .inside-right-sidebar {
		flex: 1 1 auto;
		min-height: 0;
	}

	/* No overscroll-behavior here on purpose. The wrapper is usually taller
	   than the window once the widgets are inside it, so it is a scrollable
	   area sitting beside the article; containing its overscroll would mean
	   that a reader whose pointer happens to be over the sidebar scrolls to
	   the end of the widgets and then stops dead. Letting the scroll chain
	   through to the page is the behaviour they expect. */
	.ha-toc-dock {
		position: sticky;
		top: 1.5rem;
		max-height: calc(100vh - 3rem);
		overflow-y: auto;
	}
}

/* Phones: GeneratePress moves the sidebar below the article, where a table of
   contents has nothing left to navigate, so the sidebar copy is dropped and
   the collapsed copy under the title takes over. */
.ha-toc-inline {
	display: none;
}

@media (max-width: 47.9375em) {
	.ha-toc[data-ha-toc="sidebar"] {
		display: none;
	}

	.ha-toc-inline {
		display: block;
		margin: 0 0 1.75rem;
		background-color: #F7FCFA;
		border: 1px solid #D3E8E1;
		border-top: 2px solid #0A3C30;
	}

	.ha-toc-inline__summary {
		padding: 0.8rem 1rem;
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: #00674F;
		cursor: pointer;
		list-style: none;
	}

	/* Safari still draws the default triangle through this pseudo-element. */
	.ha-toc-inline__summary::-webkit-details-marker {
		display: none;
	}

	/* A chevron that turns when the panel opens, drawn with borders so there is
	   no icon font or SVG to load. */
	.ha-toc-inline__summary::after {
		content: "";
		float: right;
		width: 0.45rem;
		height: 0.45rem;
		margin-top: 0.15rem;
		border-right: 2px solid #00674F;
		border-bottom: 2px solid #00674F;
		transform: rotate(45deg);
		transition: transform 0.15s ease;
	}

	.ha-toc-inline[open] .ha-toc-inline__summary::after {
		transform: rotate(-135deg);
		margin-top: 0.4rem;
	}

	.ha-toc--inline {
		margin: 0;
		padding: 0 1rem 0.75rem;
		background-color: transparent;
		border-top: 0;
	}

	.ha-toc--inline .ha-toc__link {
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
	}

	.ha-toc--inline .ha-toc__link.is-active {
		font-weight: 400;
		color: #3D5B52;
	}
}

/* Clear the heading from the top of the window when a link jumps to it. */
.single .entry-content h2[id] {
	scroll-margin-top: 1.5rem;
}

/* This stylesheet is only ever enqueued on a post that has a list, so scoping
   the smooth scroll any further than the document is unnecessary. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}