/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* containers */

.sidebar-nav-container {
	position: sticky;
	top: 230px; /* Adjust based on sticky header height */

	margin: 16px 0 72px;

	max-height: 70vh;
	overflow-y: auto;
}

.sidebar-nav-container::after {
	content: "";
	position: sticky;
	bottom: -1px;
	display: block;
	pointer-events: none;
	height: 60px;
	z-index: 2;
	background: linear-gradient(0deg, var(--white), transparent);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* toggle */

.sidebar-nav__toggle {
	display: flex;
	width: 100%;
	padding: 14px 20px;

	cursor: pointer;
	border: none;
	background: var(--purple-dk);
	border-radius: var(--box-border-radius-sm) var(--box-border-radius-sm) 0 0;

	font-family: "Cachet";
	text-transform: uppercase;
	font-size: 22px;
	font-weight: 700;
	color: var(--white);

	display: flex;
	justify-content: space-between;
	align-items: center;

	margin-bottom: 2px; /* Small gap above list */

	transition: border-radius 0.2s 0.1s ease;
}
.sidebar-nav__toggle[aria-expanded="false"] {
	border-radius: var(--box-border-radius-sm);

	transition: border-radius 0.2s 0.3s ease;
}

.sidebar-nav__toggle .toggle-icon {
	font-size: 14px;
	transition: transform 0.3s ease;
}

.sidebar-nav__toggle[aria-expanded="true"] .toggle-icon {
	transform: rotate(180deg);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* content */

.sidebar-nav {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease-out;
}

.sidebar-nav.is-open {
	max-height: 2500px; /* Allow for many links without cropping perfectly valid items! */
}

.sidebar-nav__list {
	list-style: none;
	padding: 0;
	margin: 0;

	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sidebar-nav__item {
	transition: all 0.3s ease;
	overflow: hidden;
}

/* Every row is its own card, so the accent border belongs to the link and not
   to the <li>: a top-level <li> also wraps the nested sub-list, so an accent on
   the item spans the heading and all of its subheadings as one block. */
.sidebar-nav__link {
	display: block;
	padding: 15px 18px;

	border: none;
	border-left: 8px solid var(--blue-dk);
	background: var(--blue-dk);
	border-radius: 0;

	font-family: "Cachet";
	text-transform: uppercase;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.2px;
	color: var(--white);

	transition: all 0.3s ease;
}
li.sidebar-nav__item:last-child {
	border-radius: 0 0 var(--box-border-radius-sm) var(--box-border-radius-sm);
}

/* Nested h3 rows (blog post TOC only). Same 2px rhythm as the top-level list;
   the accent column stays flush and the indent is carried by the text. */
.sidebar-nav__sub-list {
	list-style: none;
	padding: 0;
	margin: 2px 0 0;

	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sidebar-nav__sub-item .sidebar-nav__link {
	padding: 12px 18px 12px 34px;
	font-size: 16px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* hover & active states */

/* The global a:hover (defaults.css) turns anchors --purple-dk at specificity
   (0,1,1); the bare class here is (0,1,0), so without an explicit hover color
   the white text flips purple on these dark rows. The accent border is the
   hover signal — text stays white. */
.sidebar-nav__link:hover {
	border-left-color: #00aeef99;
	color: var(--white);
}

.sidebar-nav__item.is-active > .sidebar-nav__link,
.sidebar-nav__sub-item.is-active > .sidebar-nav__link {
	border-left-color: var(--blue-lt);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* mobile */

@media (max-width: 768px) {
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	/* containers */

	.sidebar-nav-container {
		position: relative;
		top: 0;
		max-height: 300px;
		margin: 30px 0;
		display: none; /* dont show on mobile */
	}

	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	/* hover & active states */

	/* Colour-matched rather than removed, so the row does not shift 8px. */
	.sidebar-nav__item.is-active > .sidebar-nav__link,
	.sidebar-nav__sub-item.is-active > .sidebar-nav__link {
		border-left-color: var(--blue-dk);
	}
}