/*!
 * BWD Full Screen Menu
 * Ported verbatim from the injected stylesheet in bwd-fullscreen-nav.js.
 *
 * Everything below the "Plugin additions" banner is new: the WordPress admin
 * bar offset, the grid fallbacks for menus with fewer than seven items, the
 * theme-placed trigger button, the current-page markers, and the site logo.
 *
 * Big Wall yellow is #fcba04. Never #facc15.
 */

body.bwd-nav-is-open {
	overflow: hidden !important;
}

.bwd-nav-altitude-offset {
	flex: none;
	min-width: max-content;
	margin-right: 76px !important;
}

#game-hud {
	gap: 18px;
}

.bwd-fullscreen-nav-root,
.bwd-fullscreen-nav-root * {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- toggle */

.bwd-nav-toggle {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 100090;
	width: 54px;
	height: 54px;
	border: 1px solid rgba(252, 186, 4, .4);
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0;
	color: #fcba04;
	background: rgba(37, 36, 96, .78);
	box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	cursor: pointer;
	pointer-events: auto;
	transition: background .35s, border-color .35s, transform .2s;
}

.bwd-nav-toggle:hover {
	transform: scale(1.07);
}

.bwd-nav-toggle:active {
	transform: scale(.93);
}

.bwd-nav-toggle:focus-visible {
	outline: 3px solid rgba(252, 186, 4, .38);
	outline-offset: 4px;
}

.bwd-nav-toggle > span {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform .4s cubic-bezier(.22, .9, .26, 1), background .35s;
}

.bwd-nav-toggle.is-open {
	color: #14133b;
	background: #fcba04;
	border-color: #fcba04;
}

.bwd-nav-toggle.is-open > span:first-child {
	transform: translateY(4px) rotate(45deg);
}

.bwd-nav-toggle.is-open > span:last-child {
	transform: translateY(-4px) rotate(-45deg);
}

/* ---------------------------------------------------------------- stage */

.bwd-fullscreen-nav {
	position: fixed;
	inset: 0;
	z-index: 100070;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	color: #f4f4ff;
	font-family: Inter, system-ui, sans-serif;
	/*
	 * Not in the prototype, which only ever sat on pages it controlled. A
	 * plugin lands on whatever theme is active, and these five inherit: a
	 * theme body rule of `line-height:1.7` alone grows the footer and steals
	 * five pixels a row off the mosaic.
	 */
	font-weight: 400;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
	background: radial-gradient(1300px 850px at 82% -12%, #3a4297 0%, #2a2971 46%, #1c1b4d 100%);
	clip-path: circle(0 at calc(100% - 47px) 47px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	overflow: hidden;
	transition: clip-path .75s cubic-bezier(.66, 0, .22, 1), opacity .5s ease, visibility 0s linear .75s;
}

.bwd-fullscreen-nav.is-open {
	clip-path: circle(150vmax at calc(100% - 47px) 47px);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.bwd-nav-header,
.bwd-nav-footer {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-left: clamp(14px, 2.2vw, 30px);
	padding-right: clamp(14px, 2.2vw, 30px);
}

.bwd-nav-header {
	padding-top: 18px;
	padding-bottom: 8px;
}

.bwd-nav-brand {
	display: flex;
	align-items: center;
	gap: 14px;
}

.bwd-nav-brand-link {
	display: inline-flex;
	align-items: center;
	border-radius: 5px;
	text-decoration: none;
}

.bwd-nav-brand-link:focus-visible {
	outline: 3px solid #fcba04;
	outline-offset: 5px;
}

.bwd-nav-brand img {
	display: block;
	width: auto;
	height: 32px;
}

.bwd-nav-kicker,
.bwd-nav-escape,
.bwd-nav-location {
	font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
	font-weight: 600;
	line-height: 1;
}

.bwd-nav-kicker {
	padding-left: 14px;
	border-left: 1px solid rgba(252, 186, 4, .35);
	color: #fcba04;
	font-size: 10.5px;
	letter-spacing: .22em;
}

.bwd-nav-escape {
	margin-right: 64px;
	color: rgba(233, 235, 255, .45);
	font-size: 11px;
	letter-spacing: .1em;
}

/* ---------------------------------------------------------------- mosaic */

.bwd-nav-grid {
	flex: 1;
	min-height: 0;
	display: grid;
	gap: 10px;
	padding: 8px clamp(14px, 2.2vw, 30px);
	grid-template-columns: 1.06fr .94fr 1fr .98fr .9fr 1.12fr;
	grid-template-rows: repeat(5, 1fr);
	grid-template-areas:
		"sv sv hm hm ab ab"
		"sv sv hm hm ab ab"
		"sv sv pf pf im im"
		"ct ct pf pf im im"
		"ct ct gr gr gr gr";
}

.bwd-nav-card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: clamp(16px, 1.7vw, 28px);
	border: 1px solid rgba(252, 186, 4, .16);
	border-radius: 18px;
	color: var(--bwd-nav-card-fg);
	background: var(--bwd-nav-card-bg);
	box-shadow: 0 4px 18px rgba(0, 0, 0, .22);
	text-decoration: none;
	opacity: 0;
	transform: translateY(46px) scale(.96);
	transition: opacity .65s cubic-bezier(.22, .9, .26, 1) var(--bwd-nav-delay), transform .55s cubic-bezier(.22, .9, .26, 1) var(--bwd-nav-delay), border-color .3s, box-shadow .3s, background .3s;
}

.bwd-fullscreen-nav.is-open .bwd-nav-card {
	opacity: 1;
	transform: none;
}

.bwd-nav-card:hover,
.bwd-nav-card:focus-visible {
	z-index: 3;
	border-color: rgba(252, 186, 4, .85);
	background: var(--bwd-nav-card-hover);
	box-shadow: 0 22px 48px rgba(0, 0, 0, .4);
	transform: translateY(-5px);
	outline: none;
}

.bwd-nav-card[data-area="sv"] { grid-area: sv; }
.bwd-nav-card[data-area="hm"] { grid-area: hm; }
.bwd-nav-card[data-area="ab"] { grid-area: ab; }
.bwd-nav-card[data-area="pf"] { grid-area: pf; }
.bwd-nav-card[data-area="im"] { grid-area: im; }

.bwd-nav-card[data-area="ct"] {
	grid-area: ct;
	border-color: rgba(20, 19, 59, .3);
}

.bwd-nav-card[data-area="ct"]:hover,
.bwd-nav-card[data-area="ct"]:focus-visible {
	color: var(--bwd-nav-card-fg);
	border-color: #14133b;
}

.bwd-nav-card[data-area="gr"] { grid-area: gr; }

.bwd-nav-card-top {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.bwd-nav-number {
	color: #fcba04;
	font: 600 10.5px/1 ui-monospace, Menlo, Monaco, Consolas, monospace;
	letter-spacing: .18em;
}

.bwd-nav-card[data-area="ct"] .bwd-nav-number {
	color: rgba(20, 19, 59, .65);
}

.bwd-nav-arrow {
	font-size: 19px;
	line-height: 1;
	opacity: .35;
	transition: opacity .3s, transform .35s cubic-bezier(.22, .9, .26, 1);
}

.bwd-nav-card:hover .bwd-nav-arrow,
.bwd-nav-card:focus-visible .bwd-nav-arrow {
	opacity: 1;
	transform: translateX(4px);
}

.bwd-nav-card-copy {
	position: relative;
	z-index: 2;
	display: block;
	max-width: 72%;
	margin-top: auto;
}

.bwd-nav-card-title,
.bwd-nav-card-description {
	display: block;
}

.bwd-nav-card-title {
	font-family: "Space Grotesk", Inter, system-ui, sans-serif;
	font-size: var(--bwd-nav-title-size);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -.02em;
	overflow-wrap: break-word;
}

.bwd-nav-card-description {
	max-width: 34ch;
	margin-top: 7px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.45;
	opacity: .66;
}

/*
 * Hover text colour. Themes style `a:hover` with their own colour (often
 * black), which reached the card's text and turned it dark on the blue cards.
 * The card states its own colour on hover, and the title goes Big Wall yellow.
 * Services keeps its light title, and Contact Us its dark one on the yellow
 * card, where yellow text would vanish.
 */

.bwd-nav-card:hover,
.bwd-nav-card:focus-visible {
	color: var(--bwd-nav-card-fg);
}

.bwd-nav-card:not([data-area="sv"]):not([data-area="ct"]):hover .bwd-nav-card-title,
.bwd-nav-card:not([data-area="sv"]):not([data-area="ct"]):focus-visible .bwd-nav-card-title {
	color: #fcba04;
}

.bwd-nav-card-art {
	position: absolute;
	z-index: 1;
	right: var(--bwd-nav-art-right);
	bottom: var(--bwd-nav-art-bottom);
	width: var(--bwd-nav-art-width);
	pointer-events: none;
	transform-origin: 60% 70%;
	transition: transform .5s cubic-bezier(.22, .9, .26, 1);
	animation: bwdNavFloat var(--bwd-nav-float-time) ease-in-out var(--bwd-nav-float-delay) infinite;
}

.bwd-nav-card-art img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	filter: drop-shadow(0 20px 32px rgba(0, 0, 0, .45));
}

.bwd-nav-card:hover .bwd-nav-card-art,
.bwd-nav-card:focus-visible .bwd-nav-card-art {
	transform: scale(1.08) rotate(-5deg);
}

/* ---------------------------------------------------------------- footer */

.bwd-nav-footer {
	flex-wrap: wrap;
	gap: 12px 22px;
	padding-top: 10px;
	padding-bottom: 16px;
}

.bwd-nav-secondary {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
}

.bwd-nav-secondary a {
	color: rgba(233, 235, 255, .6);
	font-size: 12.5px;
	font-weight: 500;
	text-decoration: none;
	transition: color .25s;
}

.bwd-nav-secondary a:hover,
.bwd-nav-secondary a:focus-visible {
	color: #fcba04;
	outline: none;
}

.bwd-nav-location {
	color: rgba(233, 235, 255, .38);
	font-size: 10.5px;
	letter-spacing: .12em;
}

@keyframes bwdNavFloat {
	0%, 100% { transform: translateY(0) rotate(0); }
	50% { transform: translateY(-11px) rotate(-2.5deg); }
}

/*
 * Short landscape windows (roughly half a normal desktop height). The five-row
 * stack gets cramped, so Grants leaves the bottom of columns 2-3 and becomes a
 * full-height fourth column on the right, letting the other six cards keep more
 * vertical room each. Guarded by min-width so narrow phones keep the
 * single-column stack. Added in 0.0.2 from the latest bwd-fullscreen-nav.js.
 *
 * A bare `.bwd-nav-grid` at (0,1,0), so the data-count arrangements for menus
 * of six items or fewer, at (0,2,0), keep their own layouts.
 */

@media (min-width: 900px) and (max-height: 560px) {
	.bwd-nav-grid {
		grid-template-columns: 1.06fr .94fr 1fr .98fr .9fr 1.12fr .88fr .88fr;
		grid-template-areas:
			"sv sv hm hm ab ab gr gr"
			"sv sv hm hm ab ab gr gr"
			"sv sv pf pf im im gr gr"
			"ct ct pf pf im im gr gr"
			"ct ct pf pf im im gr gr";
	}
}

@media (max-width: 839px) {
	.bwd-fullscreen-nav {
		overflow-x: hidden;
		overflow-y: auto;
	}

	.bwd-nav-header {
		position: sticky;
		top: 0;
		z-index: 10;
		padding-bottom: 12px;
		background: linear-gradient(#29286f 70%, rgba(41, 40, 111, 0));
	}

	.bwd-nav-escape { display: none; }

	.bwd-nav-grid {
		flex: none;
		min-height: auto;
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-template-areas: none;
	}

	.bwd-nav-card {
		grid-area: auto !important;
		min-height: 180px;
	}

	.bwd-nav-card[data-area="sv"] { min-height: 230px; }
	.bwd-nav-card[data-area="hm"] { min-height: 170px; }
	.bwd-nav-card[data-area="ab"] { min-height: 200px; }
	.bwd-nav-card[data-area="ct"] { min-height: 210px; }
	.bwd-nav-card[data-area="gr"] { min-height: 150px; }

	.bwd-nav-card-title {
		font-size: var(--bwd-nav-mobile-title-size);
	}

	.bwd-nav-card-art {
		width: var(--bwd-nav-mobile-art-width);
	}

	.bwd-nav-footer {
		align-items: flex-start;
		padding-top: 18px;
		padding-bottom: 26px;
	}
}

@media (max-width: 640px) {
	.bwd-nav-altitude-offset {
		position: absolute !important;
		top: 58px !important;
		right: 0 !important;
		margin-right: 0 !important;
		padding: 5px 8px;
		border-radius: 10px;
		background: rgba(20, 19, 59, .48);
		backdrop-filter: blur(7px);
		-webkit-backdrop-filter: blur(7px);
	}

	.bwd-nav-altitude-offset #timecode {
		font-size: 1.25rem !important;
		line-height: 1.2;
	}

	.bwd-nav-altitude-offset #game-altitude-helper {
		display: none;
	}

	.bwd-nav-toggle {
		top: 14px;
		right: 14px;
		width: 48px;
		height: 48px;
	}

	.bwd-fullscreen-nav {
		clip-path: circle(0 at calc(100% - 38px) 38px);
	}

	.bwd-fullscreen-nav.is-open {
		clip-path: circle(150vmax at calc(100% - 38px) 38px);
	}

	.bwd-nav-brand { gap: 10px; }
	.bwd-nav-brand img { height: 25px; }

	.bwd-nav-kicker {
		padding-left: 10px;
		font-size: 9px;
		letter-spacing: .16em;
	}

	.bwd-nav-card-copy { max-width: 68%; }
	.bwd-nav-card-description { font-size: 11.5px; }
	.bwd-nav-secondary { gap: 10px 18px; }

	.bwd-nav-location {
		width: 100%;
		line-height: 1.45;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bwd-fullscreen-nav,
	.bwd-nav-card,
	.bwd-nav-card-art,
	.bwd-nav-toggle > span {
		transition-duration: .01ms !important;
		animation: none !important;
	}
}

/* =================================================== Plugin additions === */

/*
 * Menus with fewer than seven items.
 *
 * The prototype always had exactly seven tiles. A WordPress menu might not, so
 * every count from one to six gets its own arrangement over the same six
 * column tracks. Without these the mosaic would keep holes where the missing
 * tiles used to be.
 */

/*
 * Above the breakpoint only. These carry (0,2,0) while the mobile reset that
 * flattens the mosaic is a bare `.bwd-nav-grid` at (0,1,0), and a media query
 * adds no specificity - unscoped, they would win below 840px too and lay a
 * five-item menu out as five slivers across one row on a phone.
 *
 * Negated rather than `min-width: 840px` so this is the exact complement of
 * the block above: a zoomed viewport can report a fractional width like
 * 839.5px, which is neither <= 839 nor >= 840, and would fall through both.
 */

@media not all and (max-width: 839px) {
	.bwd-nav-grid[data-count="6"] {
		grid-template-rows: repeat(4, 1fr);
		grid-template-areas:
			"sv sv hm hm ab ab"
			"sv sv hm hm ab ab"
			"sv sv pf pf im im"
			"ct ct pf pf im im";
	}

	.bwd-nav-grid[data-count="5"] {
		grid-template-rows: repeat(4, 1fr);
		grid-template-areas:
			"sv sv sv hm hm hm"
			"sv sv sv hm hm hm"
			"ab ab pf pf im im"
			"ab ab pf pf im im";
	}

	.bwd-nav-grid[data-count="4"] {
		grid-template-rows: repeat(2, 1fr);
		grid-template-areas:
			"sv sv sv hm hm hm"
			"ab ab ab pf pf pf";
	}

	.bwd-nav-grid[data-count="3"] {
		grid-template-rows: repeat(2, 1fr);
		grid-template-areas:
			"sv sv sv hm hm hm"
			"sv sv sv ab ab ab";
	}

	.bwd-nav-grid[data-count="2"] {
		grid-template-rows: 1fr;
		grid-template-areas: "sv sv sv hm hm hm";
	}

	.bwd-nav-grid[data-count="1"] {
		grid-template-rows: 1fr;
		grid-template-areas: "sv sv sv sv sv sv";
	}
}

/* Site name fallback when no logo image is configured. */

.bwd-nav-brand-name {
	color: #f4f4ff;
	font-family: "Space Grotesk", Inter, system-ui, sans-serif;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -.01em;
}

/* Current page markers. */

.bwd-nav-card.is-current {
	border-color: rgba(252, 186, 4, .55);
}

.bwd-nav-card[data-area="ct"].is-current {
	border-color: rgba(20, 19, 59, .65);
}

.bwd-nav-secondary a.is-current {
	color: rgba(252, 186, 4, .85);
}

/*
 * Restated because the three rules above are the same specificity as the
 * prototype's hover rules and come after them, so without this the one card
 * you are already on is the one card that does not light up under the cursor.
 */

.bwd-nav-card.is-current:hover,
.bwd-nav-card.is-current:focus-visible {
	border-color: rgba(252, 186, 4, .85);
}

.bwd-nav-card[data-area="ct"].is-current:hover,
.bwd-nav-card[data-area="ct"].is-current:focus-visible {
	border-color: #14133b;
}

.bwd-nav-secondary a.is-current:hover,
.bwd-nav-secondary a.is-current:focus-visible {
	color: #fcba04;
}

/*
 * A trigger placed by the [bwd_full_screen_menu] shortcode. Deliberately plain
 * so it inherits the theme header rather than fighting it.
 */

.bwd-nav-trigger {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	border: 1px solid rgba(252, 186, 4, .45);
	border-radius: 999px;
	color: #fcba04;
	background: transparent;
	font: 600 11px/1 ui-monospace, Menlo, Monaco, Consolas, monospace;
	letter-spacing: .18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .3s, border-color .3s, color .3s;
}

.bwd-nav-trigger:hover,
.bwd-nav-trigger:focus-visible {
	border-color: #fcba04;
	color: #14133b;
	background: #fcba04;
}

.bwd-nav-trigger-bars {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 16px;
}

.bwd-nav-trigger-bars > span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

/*
 * The site logo, top left on every page: the page prototypes' header, lifted
 * into the plugin. Positioned absolute, so it scrolls away with the page while
 * the button above stays fixed. z-index 40 keeps it over the page content and
 * far below the open overlay (100070), which covers it.
 *
 * The bar spans the full window width, with the same edge padding as the open
 * menu's header, so the logo sits in the same top left spot in both states. It
 * ignores the pointer, so it never blocks a click on the page beneath; only
 * the link takes it.
 */

.bwd-site-logo {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 40;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding: 18px clamp(14px, 2.2vw, 30px) 8px;
	pointer-events: none;
}

.bwd-site-logo-link {
	display: flex;
	align-items: center;
	border-radius: 5px;
	text-decoration: none;
	pointer-events: auto;
}

.bwd-site-logo-link:focus-visible {
	outline: 3px solid #fcba04;
	outline-offset: 5px;
}

/* The renderer sets the custom property only for a non-default height. */

.bwd-site-logo-link img {
	display: block;
	width: auto;
	height: var(--bwd-site-logo-height, 34px);
}

/*
 * The WordPress admin bar sits exactly where the floating button does, and it
 * is 32px tall above 782px, 46px below it.
 */

body.admin-bar .bwd-nav-toggle {
	top: 52px;
}

body.admin-bar .bwd-fullscreen-nav {
	top: 32px;
}

/*
 * The logo scrolls with the page, and so does the space core opens above it
 * for the bar (`html { margin-top }`, 32px, 46px at 782px and under), at every
 * width. It needs the full offset, with no 601px floor.
 */

body.admin-bar .bwd-site-logo {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .bwd-site-logo {
		top: 46px;
	}
}

/*
 * Only down to 601px. Core's admin-bar.css turns #wpadminbar into
 * `position: absolute` at 600px and under, so the bar scrolls off with the
 * document - a fixed 46px inset would hold a transparent band open over the
 * scrolling page for the whole time the menu is up.
 */

@media (min-width: 601px) and (max-width: 782px) {
	body.admin-bar .bwd-nav-toggle {
		top: 60px;
	}

	body.admin-bar .bwd-fullscreen-nav {
		top: 46px;
	}
}