/* Templates */

/* ========================================
   Page with sidebar navigation
======================================== */

.page-sidebar-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

/* XX-Large breakpoint (min-width: 90em) - 1440px */
@media (min-width: 90em) {
	.page-sidebar-wrapper {
		gap: 80px;
	}
}

.page-sidebar-nav {
	margin-bottom: 20px;
}

.page-sidebar-nav__menu {
	position: sticky;
	top: 20px;
}

.admin-bar .page-sidebar-nav__menu {
	top: 52px;
}

.page-sidebar-wrapper .page-sidebar-content {
	flex: 3 1 0;
	min-width: 0;
}

.page-sidebar-wrapper .entry-content {
	padding-top: 0;
}

/* ========================================
   Optional right-hand index menu
   (toggled via the "show_index_menu" ACF field)
======================================== */

.page-index-nav {
	flex: 1 1 220px;
	max-width: 220px;
}

.page-index-nav__title {
	margin: 0 0 10px;
	font-size: var(--text-ui);
	font-weight: var(--font-bold);
}

.page-index-nav__trigger {
	font-size: var(--text-ui);
}

/* Above the mobile breakpoint the index is just the static title + an
   always-expanded plain list — the dropdown trigger button doesn't apply
   there at all, so it's removed outright rather than merely disabled. This
   is our own custom dropdown markup, so overriding [hidden] with a plain,
   higher-specificity selector is reliable (unlike trying to force open a
   native <details> element). */
@media (min-width: 783px) {

	.page-sidebar-nav {
		flex: 1 1 220px;
		max-width: 220px;
		margin-bottom: 0;
	}

	.page-index-nav__holder {
		position: sticky;
		top: 20px;
	}

	.admin-bar .page-index-nav__holder {
		top: 52px;
	}

	.page-index-nav .bc-dropdown__trigger {
		display: none;
	}

	.page-index-nav .bc-dropdown__panel {
		position: static;
		display: block;
		margin-top: 0;
		padding: 0;
		border: 0;
		box-shadow: none;
		background: none;
	}
}

.page-sidebar-wrapper--with-index .entry-content h2 {
	scroll-margin-top: 20px;
}

.admin-bar .page-sidebar-wrapper--with-index .entry-content h2 {
	scroll-margin-top: 52px;
}

/* The 3-column layout gets cramped before the left sidebar needs to break, so
   drop the index nav to a full-width row earlier on its own. */
@media (max-width: 1080px) {
	.page-sidebar-wrapper--with-index .page-index-nav {
		flex: 1 1 100%;
		max-width: none;
		/* Align with the content column: left sidebar's 220px + the wrapper's 40px gap. */
		margin-left: 260px;
		order: 1;
	}

	.page-sidebar-wrapper--with-index .page-index-nav__nav {
		/* Not static: .bc-dropdown needs a positioned ancestor for its
		   absolutely-positioned panel. */
		position: relative;
	}
}

@media (max-width: 782px) {
	.page-sidebar-wrapper {
		flex-direction: column;
		gap: 20px;
	}

	.page-sidebar-nav,
	.page-index-nav {
		max-width: none;
	}

	.page-sidebar-nav__menu {
		position: static;
	}

	.page-index-nav__nav {
		/* Not static: .bc-dropdown needs a positioned ancestor for its
		   absolutely-positioned panel. */
		position: relative;
	}

	.page-sidebar-wrapper--with-index .page-index-nav {
		margin-left: 0;
		order: 1;
	}

	.page-sidebar-wrapper--with-index .page-sidebar-content {
		order: 0;
	}

	.page-sidebar-wrapper--with-index .page-sidebar-nav {
		order: -1;
	}
}