/* ---------- design tokens ---------- */
#nexusSideNav,
#nexusSideNavBody {
	--nx-ink: #500000;
	--nx-ink-soft: #6d3a2a;
	--nx-surface: #e7ded0;
	--nx-accent: #998031;
	/* the accent darkened until it holds AA contrast on --nx-surface,
	   for text rather than the hairlines --nx-accent is used for */
	--nx-gold: #735c1f;
	--nx-line: rgba(80, 0, 0, 0.13);
	--nx-hover: rgba(80, 0, 0, 0.07);
	--nx-active: rgba(80, 0, 0, 0.11);
	--nx-panel: rgba(153, 128, 49, 0.13);
	--nx-font: "Poppins", Helvetica, Arial, Lucida, sans-serif;
	--nx-pad: 20px;
}

/* ---------- collapsed tab ---------- */
#nexusSideNav {
	position: fixed;
	top: calc(100% - 50px);
	left: 0px;
	height: 35px;
	width: 200px;
	transform-origin: 0 0;
	transform: rotate(270deg);
	font-family: var(--nx-font);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: white;
	border-radius: 0 0 14px 14px;
	text-decoration: none;
	transition: left 0.5s ease, background-color 0.25s ease;
	background-color: var(--nx-ink);
	padding: 6px 0 0;
	text-align: center;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}

#nexusSideNav:hover {
	cursor: pointer;
	background-color: #6b1414;
}

#nexusSideNav>svg {
	vertical-align: middle;
	height: 17px;
	margin-right: 5px;
	fill: white !important;
}

/* ---------- panel ---------- */
#nexusSideNavBody {
	left: 0px;
	width: 0px;
	display: flex;
	flex-flow: column;
	height: 100%;
	position: fixed;
	top: 0;
	background-color: var(--nx-surface);
	overflow-x: hidden;
	padding: 22px 0 0;
	transition: left 0.5s ease, width 0.5s ease;
	font-family: var(--nx-font);
	box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2);
}

#nexusSearch {
	padding: 0 var(--nx-pad) 16px;
	border-bottom: 1px solid var(--nx-line);
}

/* ---------- menu ---------- */
/* The menu is a stack of panels, one per level, sharing this box. Only the
   current panel is on screen; the rest wait to the left (already visited)
   or to the right (not opened yet), which is what gives back and forward
   their direction. */
#nexusMenu {
	position: relative;
	flex: auto;
	min-height: 0;
	overflow: hidden;
}

.nexusPanel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-flow: column;
	overflow-x: hidden;
	overflow-y: auto;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.3s ease, visibility 0s linear 0.3s;
}

.nexusPanel.is-active {
	transform: translateX(0);
	visibility: visible;
	transition: transform 0.3s ease;
}

/* panels we drilled in from, held just off the left edge */
.nexusPanel.is-behind {
	transform: translateX(-28%);
}

.nexusPanel::-webkit-scrollbar {
	width: 8px;
}

.nexusPanel::-webkit-scrollbar-track {
	background: transparent;
}

.nexusPanel::-webkit-scrollbar-thumb {
	background: rgba(80, 0, 0, 0.22);
	border-radius: 4px;
}

.nexusPanel:hover::-webkit-scrollbar-thumb {
	background: rgba(80, 0, 0, 0.38);
}

.nexusPanelItems {
	width: 100%;
	padding: 8px 0 16px;
}

/* ---------- panel header ---------- */
.nexusPanelHead {
	position: sticky;
	top: 0;
	z-index: 1;
	flex: 0 0 auto;
	padding: 12px var(--nx-pad) 13px;
	background-color: var(--nx-surface);
	border-bottom: 1px solid var(--nx-line);
}

.nexusBack {
	display: inline-flex;
	align-items: center;
	margin: 0 0 9px;
	padding: 5px 12px 5px 8px;
	border: none;
	border-radius: 999px;
	background-color: var(--nx-hover);
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--nx-ink);
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.nexusBack:hover {
	background-color: var(--nx-active);
}

.nexusPanelTitle {
	display: block;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--nx-ink);
	text-decoration: none;
}

a.nexusPanelTitle:hover {
	text-decoration: underline;
}

/* ---------- items ---------- */
.nexusItem {
	position: relative;
	display: flex;
	align-items: flex-start;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 10px var(--nx-pad);
	border: none;
	background: none;
	outline: none;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
	text-decoration: none;
	color: var(--nx-ink);
	transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

/* top level reads a shade stronger than the levels below it */
.nexusPanel[data-panel="root"]>.nexusPanelItems>.nexusItem {
	font-weight: 600;
}

.nexusItem:hover {
	cursor: pointer;
	background-color: var(--nx-hover);
	box-shadow: inset 3px 0 0 var(--nx-ink);
}

/* caret showing the item opens a panel rather than a page */
.nexusBranch {
	padding-right: 38px;
}

.nexusBranch::after {
	content: "";
	position: absolute;
	right: 21px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 1.7px solid currentColor;
	border-bottom: 1.7px solid currentColor;
	transform: translateY(-50%) rotate(-45deg);
	opacity: 0.5;
	transition: opacity 0.18s ease;
}

.nexusBranch:hover::after {
	opacity: 0.85;
}

/* section headings read as labels, not bold underlined text */
.nexusHeading {
	margin: 0;
	padding: 16px var(--nx-pad) 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--nx-ink-soft);
}

.nexusPanelItems>.nexusHeading:first-child {
	padding-top: 6px;
}

/* icons sit in a fixed column so every label starts on the same line */
#nexusMenu i,
#nexusFooter i {
	flex: 0 0 auto;
	width: 1.25em;
	margin: 0 0.6em 0 0;
	text-align: center;
	font-style: normal;
	line-height: inherit;
	opacity: 0.65;
}

.nexusBack i {
	margin-right: 0.35em;
	opacity: 0.8;
}

.nexusItem>svg {
	flex: 0 0 auto;
	height: 18px;
	width: 18px;
	margin-right: 6px;
	fill: var(--nx-ink) !important;
}

/* keyboard focus must be visible - the old rules removed the outline */
#nexusMenu a:focus-visible,
#nexusMenu button:focus-visible,
#nexusFooter a:focus-visible,
#nexusSideNav:focus-visible {
	outline: 2px solid var(--nx-ink);
	outline-offset: -2px;
}
/* The surrounding theme styles its own anchors, and a rule of its own such
   as `.entry-content a:hover` outranks a bare class here - which is how
   menu links were turning blue under the cursor. Resting and hovered are
   both pinned under the panel's id so the menu keeps its own palette
   wherever it is dropped in. */
#nexusSideNavBody a.nexusItem,
#nexusSideNavBody a.nexusItem:link,
#nexusSideNavBody a.nexusItem:visited,
#nexusSideNavBody .nexusBranch,
#nexusSideNavBody .nexusPanelTitle,
#nexusSideNavBody a.nexusPanelTitle:link,
#nexusSideNavBody a.nexusPanelTitle:visited,
#nexusSideNavBody #nexusFooter>a,
#nexusSideNavBody #nexusFooter>a:link,
#nexusSideNavBody #nexusFooter>a:visited {
	color: var(--nx-ink);
}

/* Gold is the pointer and keyboard highlight only - these sit after the
   resting rules above, which they match on specificity. */
#nexusSideNavBody a.nexusItem:hover,
#nexusSideNavBody a.nexusItem:focus-visible,
#nexusSideNavBody a.nexusItem:active,
#nexusSideNavBody .nexusBranch:hover,
#nexusSideNavBody .nexusBranch:focus-visible,
#nexusSideNavBody a.nexusPanelTitle:hover,
#nexusSideNavBody a.nexusPanelTitle:focus-visible,
#nexusSideNavBody a.nexusPanelTitle:active,
#nexusSideNavBody #nexusFooter>a:hover,
#nexusSideNavBody #nexusFooter>a:focus-visible,
#nexusSideNavBody #nexusFooter>a:active {
	color: var(--nx-gold);
}

/* ---------- footer ---------- */
#nexusFooter {
	margin: 0;
	padding: 14px var(--nx-pad) 18px;
	border-top: 1px solid var(--nx-line);
}

/* All advertisements share one grid cell so the footer keeps the height of
   the tallest one and the menu does not shift when they are rotated. */
#nexusAds {
	display: grid;
	margin-bottom: 14px;
}

#nexusAds>.nexusAd {
	grid-area: 1 / 1;
	visibility: hidden;
}

#nexusAds>.nexusAd.active {
	visibility: visible;
}

#nexusAds img {
	display: block;
	width: 100%;
	margin: auto;
	border-radius: 8px;
}

#nexusFooter>a {
	display: block;
	margin: 0;
	padding: 7px 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--nx-ink);
	text-decoration: none;
	transition: opacity 0.18s ease;
}

#nexusFooter>a:hover {
	cursor: pointer;
	opacity: 0.65;
}

#nexusSideNavFade {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100vh;
	width: 100vw;
	z-index: -1;
	opacity: 0.0;
	background-color: black;
	transition: opacity 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {

	#nexusSideNav,
	#nexusSideNavBody,
	#nexusSideNavFade,
	.nexusPanel,
	.nexusPanel.is-active,
	.nexusItem,
	.nexusBranch::after,
	.nexusBack,
	#nexusFooter>a {
		transition: none !important;
	}
}