/**
 * WAR Theme - Header + sidebar rail
 */

.war-header {
	position: relative;
	z-index: 40;
	height: var(--war-header-h);
	display: flex;
	align-items: center;
}

.war-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--war-s6);
	width: 100%;
}

/* ---- Wordmark ------------------------------------------------------- */

.war-logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.war-logo img,
.war-logo svg {
	height: 34px;
	width: auto;
}

.war-logo--footer img,
.war-logo--footer svg {
	height: 30px;
}

/* Fallback wordmark if no logo asset is set in the Customizer. */
.war-logo__fallback {
	display: flex;
	align-items: center;
	gap: 9px;
}

.war-logo__bars {
	display: grid;
	gap: 2px;
	flex: 0 0 auto;
}

.war-logo__bars span {
	display: block;
	width: 22px;
	height: 3px;
	border-radius: 1px;
}

.war-logo__bars span:nth-child(1) { background: var(--war-rb-1); }
.war-logo__bars span:nth-child(2) { background: var(--war-rb-2); }
.war-logo__bars span:nth-child(3) { background: var(--war-rb-3); }
.war-logo__bars span:nth-child(4) { background: var(--war-rb-4); }
.war-logo__bars span:nth-child(5) { background: var(--war-rb-5); }

.war-logo__text {
	display: grid;
	line-height: 0.92;
}

.war-logo__we {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
}

.war-logo__retro {
	font-size: 21px;
	font-weight: 800;
	letter-spacing: 0.01em;
}

/* ---- Primary nav ----------------------------------------------------- */

/* The nav sits just right of the wordmark, not centred on the page. */
.war-nav {
	justify-self: start;
	margin-inline-start: 80px;
}

.war-nav ul {
	display: flex;
	align-items: center;
	gap: var(--war-s8);
}

.war-nav a {
	position: relative;
	display: block;
	padding-block: var(--war-s3);
	font-size: var(--war-fs-label);
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--war-text-mute);
}

.war-nav a:hover {
	color: var(--war-text);
}

.war-nav .current-menu-item > a,
.war-nav .current_page_item > a,
.war-nav .war-is-current > a {
	color: var(--war-text);
}

.war-nav .current-menu-item > a::after,
.war-nav .current_page_item > a::after,
.war-nav .war-is-current > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--war-yellow);
	border-radius: 2px;
}

/* ---- User cluster ----------------------------------------------------- */

.war-user {
	display: flex;
	align-items: center;
	gap: var(--war-s5);
	justify-self: end;
}

.war-user__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 22px;
	height: 22px;
	color: var(--war-text-dim);
}

.war-user__action:hover {
	color: var(--war-text);
}

.war-user__action svg {
	width: 18px;
	height: 18px;
}

.war-user__dot {
	position: absolute;
	top: 0;
	right: 0;
	width: 6px;
	height: 6px;
	border-radius: var(--war-r-pill);
	background: var(--war-red);
	border: 1px solid var(--war-black);
}

.war-user__id {
	display: flex;
	align-items: center;
	gap: var(--war-s3);
	padding-left: var(--war-s2);
}

.war-user__name {
	display: grid;
	line-height: 1.25;
}

.war-user__handle {
	font-size: var(--war-fs-label);
	font-weight: 600;
}

.war-user__sub {
	font-size: var(--war-fs-meta);
	color: var(--war-text-mute);
}

/* ---- Mobile nav toggle -------------------------------------------------- */

.war-navtoggle {
	display: none;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--war-line);
	border-radius: var(--war-r-sm);
	color: var(--war-text);
}

/* ---- Sidebar rail --------------------------------------------------------- */

.war-rail {
	position: sticky;
	top: var(--war-s6);
	padding-block: var(--war-s5) var(--war-s10);
}

.war-rail__group {
	display: grid;
	gap: 2px;
}

.war-rail__group + .war-rail__group {
	margin-block-start: var(--war-s5);
	padding-block-start: var(--war-s5);
	border-block-start: 1px solid var(--war-line);
}

.war-rail__grouplabel {
	font-size: var(--war-fs-meta);
	font-weight: 600;
	letter-spacing: var(--war-ls-meta);
	text-transform: uppercase;
	color: var(--war-text-faint);
	padding: 0 var(--war-s3) var(--war-s2);
}

.war-rail__link {
	display: flex;
	align-items: center;
	gap: var(--war-s3);
	height: 34px;
	padding-inline: var(--war-s3);
	border-radius: var(--war-r-md);
	font-size: var(--war-fs-label);
	font-weight: 600;
	letter-spacing: 0.075em;
	text-transform: uppercase;
	color: var(--war-text-mute);
	transition: background var(--war-t), color var(--war-t);
}

.war-rail__link:hover {
	color: var(--war-text);
	background: var(--war-panel-hover);
}

.war-rail__link.is-active {
	color: var(--war-text);
	background: rgba(255, 255, 255, 0.055);
}

.war-rail__icon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	color: currentColor;
}

.war-rail__label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.war-rail__link .war-pill-soon {
	margin-left: auto;
}

.war-rail__link--soon {
	color: var(--war-text-faint);
	cursor: default;
}

.war-rail__link--soon:hover {
	background: transparent;
	color: var(--war-text-faint);
}