/**
 * Header: Off-Canvas Menu Panel
 *
 * A header whose navigation lives in a Bootstrap off-canvas panel opened from a
 * trigger button in the bar. The panel drops from the top over (or above) the
 * page, so it is positioned against the document rather than the viewport and
 * takes only the height its own rows need.
 *
 * The panel's link scale is set through Bootstrap's own nav custom properties,
 * and a dark panel carries the design's `dark` class: link colour is the only
 * declaration that differs between the two skins.
 *
 * Loaded only where `.offcanvas-btn` is rendered.
 */

/* The push variant slides the whole page down as the panel opens. */
#wrapper {
	transition: margin-top 0.3s ease-in-out;
}

.offcanvas.offcanvas-top {
	position: absolute;
	height: max-content;
	background-color: var(--cnvs-contrast-100);
	--bs-offcanvas-border-color: rgba(var(--cnvs-contrast-rgb), .1);
}

.nav:not(.primary-nav) .nav-link {
	--bs-nav-link-padding-x: 0;
}

.primary-nav .nav-link {
	--bs-nav-link-padding-y: 8px;
	--bs-nav-link-font-size: 1.25rem;
	--bs-nav-link-font-weight: 700;
}

.primary-nav .nav-link:hover {
	font-style: italic;
}

.offcanvas.dark .primary-nav .nav-link {
	--bs-nav-link-color: var(--cnvs-contrast-900);
}

.offcanvas:not(.dark) .primary-nav .nav-link {
	--bs-nav-link-color: var(--cnvs-contrast-800);
}

.offcanvas:not(.dark) .nav:not(.primary-nav) .nav-link {
	--bs-nav-link-color: var(--cnvs-contrast-800);
}

/* Columns of panel links are separated by a hairline, not by the first one. */
.offcanvas .container > .row > *:not(:first-child) {
	border-left: 1px solid var(--cnvs-contrast-200);
}