/* ==========================================================================
   Stafford Bulldogs Hardcore Global Navigation
   ========================================================================== */

:root {
	--sb-header-height: 6.35rem;
}

.sb-site-header,
.elementor-location-header {
	position: relative;
	z-index: 1000;
}

.sb-site-header--sticky {
	inset-block-start: 0;
	position: sticky;
}

.admin-bar .sb-site-header--sticky {
	inset-block-start: 32px;
}

.sb-header-shell {
	background:
		radial-gradient(
			circle at 88% 50%,
			rgb(47 102 255 / 10%),
			transparent 24rem
		),
		linear-gradient(
			180deg,
			#080d17 0%,
			#02060d 100%
		);
	border-block-end: 1px solid rgb(47 102 255 / 34%);
	box-shadow:
		0 0.8rem 2.5rem rgb(2 10 26 / 46%),
		inset 0 -1px 0 rgb(255 255 255 / 4%);
	color: var(--sb-color-white);
	isolation: isolate;
	min-height: var(--sb-header-height);
	position: relative;
}

.sb-header-shell::before {
	background:
		radial-gradient(
			circle at 19% 50%,
			#ffffff 0 1px,
			#8fb2ff 2px,
			transparent 8px
		),
		linear-gradient(
			90deg,
			transparent 0%,
			#1647d8 5%,
			#2f66ff 16%,
			#9ab9ff 32%,
			#2f66ff 57%,
			transparent 100%
		);
	block-size: 2px;
	box-shadow:
		0 0 0.45rem #2f66ff,
		0 0 1.2rem rgb(47 102 255 / 72%);
	content: "";
	inline-size: 43%;
	inset-block-end: -1px;
	inset-inline-start: 0;
	position: absolute;
	z-index: 2;
}

.sb-header-shell::after {
	background-image:
		linear-gradient(
			135deg,
			rgb(255 255 255 / 2%) 25%,
			transparent 25%
		),
		linear-gradient(
			315deg,
			rgb(255 255 255 / 2%) 25%,
			transparent 25%
		);
	background-size: 1rem 1rem;
	content: "";
	inset: 0;
	mask-image: linear-gradient(90deg, transparent 52%, #000 100%);
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.sb-header-shell__inner {
	align-items: center;
	display: flex;
	gap: clamp(1rem, 1.8vw, 2rem);
	justify-content: space-between;
	margin-inline: auto;
	max-width: 120rem;
	min-height: var(--sb-header-height);
	padding-inline: var(--sb-page-gutter);
	position: relative;
	width: 100%;
}

.sb-site-branding {
	align-self: stretch;
	background:
		linear-gradient(
			135deg,
			rgb(255 255 255 / 5%),
			transparent 48%
		),
		linear-gradient(
			180deg,
			#111823 0%,
			#05080d 100%
		);
	clip-path: polygon(0 0, 96% 0, 87% 100%, 0 100%);
	display: flex;
	flex: 0 0 clamp(30rem, 38vw, 40rem);
	inline-size: clamp(30rem, 38vw, 40rem);
	margin-inline-start: calc(var(--sb-page-gutter) * -1);
	min-inline-size: clamp(30rem, 38vw, 40rem);
	padding-inline:
		var(--sb-page-gutter)
		clamp(4rem, 5vw, 6.5rem);
	position: relative;
}

.sb-site-branding::before {
	background:
		radial-gradient(
			circle at 25% 50%,
			#ffffff 0 1px,
			#9ab9ff 2px,
			transparent 5px
		),
		linear-gradient(
			90deg,
			transparent 0%,
			#1748d8 4%,
			#2f66ff 18%,
			#8fb2ff 30%,
			#2f66ff 44%,
			transparent 72%
		);
	block-size: 2px;
	box-shadow:
		0 0 0.28rem rgb(47 102 255 / 86%),
		0 0 0.7rem rgb(47 102 255 / 34%);
	content: "";
	inset-block-end: 0;
	inset-inline: 0 3.35rem;
	pointer-events: none;
	position: absolute;
}

.sb-site-branding::after {
	background:
		linear-gradient(
			180deg,
			transparent 0%,
			#2f66ff 12%,
			#7ca3ff 42%,
			#ffffff 49%,
			#7ca3ff 56%,
			#2f66ff 84%,
			transparent 100%
		);
	box-shadow:
		0 0 0.32rem rgb(47 102 255 / 88%),
		0 0 0.85rem rgb(47 102 255 / 42%);
	content: "";
	inline-size: 2px;
	inset-block: -0.1rem;
	inset-inline-end: 3.3rem;
	pointer-events: none;
	position: absolute;
	transform: skewX(-18deg);
}

.sb-site-logo {
	align-items: center;
	color: var(--sb-color-white);
	display: flex;
	gap: clamp(0.9rem, 1.4vw, 1.4rem);
	inline-size: 100%;
	position: relative;
	text-decoration: none;
	z-index: 1;
}

.sb-site-logo:hover,
.sb-site-logo:focus-visible {
	color: var(--sb-color-white);
}

.sb-brand-mark {
	align-items: center;
	display: flex;
	flex: 0 0 clamp(4.8rem, 5.6vw, 6.3rem);
	inline-size: clamp(4.8rem, 5.6vw, 6.3rem);
	justify-content: center;
}

.sb-logo-image,
.sb-site-logo .sb-logo-image {
	block-size: auto;
	display: block;
	height: auto;
	inline-size: 100%;
	max-block-size: none;
	max-height: none;
	max-inline-size: none;
	max-width: none;
	object-fit: contain;
	width: 100%;
}

.sb-brand-copy {
	display: flex;
	flex-direction: column;
	gap: 0.24rem;
	min-inline-size: 0;
	text-transform: uppercase;
}

.sb-brand-name {
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 0.018em rgb(2 10 26 / 72%);
	background:
		linear-gradient(
			180deg,
			#ffffff 0%,
			#f7f9fc 26%,
			#bbc4cf 51%,
			#f7f9fc 72%,
			#8995a5 100%
		);
	background-clip: text;
	color: #eef2f7;
	filter:
		drop-shadow(0.06em 0.07em 0 rgb(45 55 70 / 92%))
		drop-shadow(0 0.14em 0.22em rgb(0 0 0 / 78%));
	font-family: var(--sb-font-display);
	font-size: clamp(2rem, 2.4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 0.85;
	white-space: nowrap;
}

.sb-brand-subtitle {
	color: var(--sb-color-electric-blue);
	font-family: var(--sb-font-body);
	font-size: clamp(0.72rem, 0.82vw, 0.95rem);
	font-weight: 800;
	letter-spacing: 0.15em;
	line-height: 1.1;
	text-shadow: 0 0 0.8rem rgb(47 102 255 / 40%);
	white-space: nowrap;
}

.sb-primary-nav {
	margin-inline-start: auto;
}

.sb-primary-nav ul,
.sb-primary-nav li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sb-primary-nav .sb-primary-menu {
	align-items: center;
	display: flex;
	gap: clamp(0.8rem, 1.1vw, 1.2rem);
}

.sb-primary-nav .menu-item {
	position: relative;
}

.sb-primary-nav a {
	align-items: center;
	color: var(--sb-color-white);
	display: flex;
	font-size: clamp(0.92rem, 0.82vw, 1rem);
	font-weight: 800;
	letter-spacing: 0.055em;
	min-height: var(--sb-header-height);
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.sb-primary-nav .sb-primary-menu > .menu-item:not(.sb-menu-cta) > a::after {
	background: var(--sb-color-electric-blue);
	block-size: 0.2rem;
	box-shadow: 0 0 0.75rem var(--sb-color-electric-blue);
	content: "";
	inline-size: 0;
	inset-block-end: 0.9rem;
	inset-inline-start: 50%;
	position: absolute;
	transform: translateX(-50%);
	transition: inline-size var(--sb-transition-fast);
}

.sb-primary-nav .sb-primary-menu > .menu-item:not(.sb-menu-cta) > a:hover,
.sb-primary-nav .sb-primary-menu > .current-menu-item > a,
.sb-primary-nav .sb-primary-menu > .current-menu-ancestor > a {
	color: #dbe6ff;
}

.sb-primary-nav .sb-primary-menu > .menu-item:not(.sb-menu-cta) > a:hover::after,
.sb-primary-nav .sb-primary-menu > .current-menu-item > a::after,
.sb-primary-nav .sb-primary-menu > .current-menu-ancestor > a::after,
.sb-primary-nav .sb-primary-menu > .menu-item > a:focus-visible::after {
	inline-size: 100%;
}

.sb-primary-nav .menu-item-has-children > a::before {
	border-block-end: 0.12rem solid currentColor;
	border-inline-end: 0.12rem solid currentColor;
	content: "";
	height: 0.42rem;
	margin-inline-start: 0.55rem;
	order: 2;
	transform: rotate(45deg) translateY(-0.15rem);
	width: 0.42rem;
}

.sb-primary-nav .sub-menu {
	align-items: stretch;
	display: flex;
	flex-direction: column;
	gap: 0.12rem;
	background:
		linear-gradient(
			145deg,
			rgb(47 102 255 / 14%),
			transparent 45%
		),
		#091426;
	border: 1px solid rgb(47 102 255 / 45%);
	border-radius: 0.75rem;
	box-shadow:
		0 1.5rem 4rem rgb(2 10 26 / 72%),
		0 0 1.5rem rgb(47 102 255 / 12%);
	inset-block-start: calc(100% - 0.5rem);
	inset-inline-start: 50%;
	min-width: 15rem;
	opacity: 0;
	padding: 0.55rem;
	position: absolute;
	transform: translate(-50%, 0.6rem);
	transition:
		opacity var(--sb-transition-fast),
		transform var(--sb-transition-fast),
		visibility var(--sb-transition-fast);
	visibility: hidden;
	z-index: 1000;
}

.sb-primary-nav .sub-menu::before {
	content: "";
	height: 1rem;
	inset-block-start: -1rem;
	inset-inline: 0;
	position: absolute;
}

.sb-primary-nav .menu-item-has-children:hover > .sub-menu,
.sb-primary-nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	transform: translate(-50%, 0);
	visibility: visible;
}

.sb-primary-nav .sub-menu a {
	border-radius: 0.45rem;
	min-height: 0;
	padding: 0.85rem 0.95rem;
	white-space: normal;
}

.sb-primary-nav .sub-menu a:hover,
.sb-primary-nav .sub-menu a:focus-visible,
.sb-primary-nav .sub-menu .current-menu-item > a {
	background: rgb(47 102 255 / 18%);
	color: var(--sb-color-white);
}

.sb-primary-nav .sb-menu-cta {
	align-items: center;
	display: flex;
	isolation: isolate;
	position: relative;
}

.sb-primary-nav .sb-menu-cta::before,
.sb-primary-nav .sb-menu-cta::after {
	background:
		linear-gradient(
			90deg,
			transparent 0%,
			#245cff 8%,
			#83a8ff 40%,
			#ffffff 50%,
			#83a8ff 60%,
			#245cff 92%,
			transparent 100%
		);
	block-size: 2px;
	box-shadow:
		0 0 0.22rem rgb(47 102 255 / 92%),
		0 0 0.6rem rgb(47 102 255 / 48%);
	content: "";
	inset-inline: 0.2rem;
	pointer-events: none;
	position: absolute;
	transition:
		box-shadow 520ms cubic-bezier(0.22, 1, 0.36, 1),
		filter 520ms cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 4;
}

.sb-primary-nav .sb-menu-cta::before {
	inset-block-start: 0;
}

.sb-primary-nav .sb-menu-cta::after {
	inset-block-end: 0;
}

.sb-primary-nav .sb-menu-cta > a {
	background:
		linear-gradient(
			115deg,
			#081532 0%,
			#0b235f 28%,
			#06122f 48%,
			#123b9d 72%,
			#07142f 100%
		);
	background-position: 100% 50%;
	background-size: 220% 100%;
	border: 0;
	box-shadow:
		inset 0 0 0 1px rgb(68 108 255 / 88%),
		inset 0 1px 0 rgb(255 255 255 / 12%),
		inset 0 -1px 0 rgb(0 10 42 / 92%),
		0 0 0.55rem rgb(47 102 255 / 22%);
	clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
	color: var(--sb-color-white);
	min-height: 3.45rem;
	overflow: hidden;
	padding: 0.88rem 1.85rem;
	position: relative;
	text-shadow:
		0 1px 0 rgb(0 0 0 / 90%),
		0 0 0.3rem rgb(255 255 255 / 10%);
	transition:
		background-position 680ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 520ms cubic-bezier(0.22, 1, 0.36, 1),
		color 240ms ease,
		transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 1;
}

.sb-primary-nav .sb-menu-cta > a::before {
	background:
		linear-gradient(
			105deg,
			transparent 30%,
			rgb(255 255 255 / 0%) 38%,
			rgb(255 255 255 / 32%) 50%,
			rgb(120 164 255 / 22%) 56%,
			transparent 68%
		);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	transform: translateX(-145%);
	transition: transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
	z-index: -1;
}

.sb-primary-nav .sb-menu-cta > a::after {
	background:
		linear-gradient(
			180deg,
			rgb(255 255 255 / 8%),
			transparent 34%,
			transparent 68%,
			rgb(47 102 255 / 12%)
		);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -2;
}

.sb-primary-nav .sb-menu-cta:hover::before,
.sb-primary-nav .sb-menu-cta:focus-within::before,
.sb-primary-nav .sb-menu-cta:hover::after,
.sb-primary-nav .sb-menu-cta:focus-within::after {
	box-shadow:
		0 0 0.32rem rgb(47 102 255 / 100%),
		0 0 1rem rgb(47 102 255 / 72%);
	filter: brightness(1.18);
}

.sb-primary-nav .sb-menu-cta > a:hover,
.sb-primary-nav .sb-menu-cta > a:focus-visible {
	background-position: 0% 50%;
	box-shadow:
		inset 0 0 0 1px rgb(137 170 255 / 100%),
		inset 0 1px 0 rgb(255 255 255 / 20%),
		inset 0 -1px 0 rgb(8 38 118 / 95%),
		0 0 0.9rem rgb(47 102 255 / 48%),
		0 0 1.8rem rgb(47 102 255 / 22%);
	color: var(--sb-color-white);
	transform: translateY(-2px);
}

.sb-primary-nav .sb-menu-cta > a:hover::before,
.sb-primary-nav .sb-menu-cta > a:focus-visible::before {
	transform: translateX(145%);
}

.sb-menu-toggle {
	background: transparent;
	border: 0;
	border-radius: var(--sb-radius-small);
	display: none;
	flex-direction: column;
	gap: 0.33rem;
	height: 3rem;
	min-height: 0;
	padding: 0.7rem;
	width: 3rem;
}

.sb-menu-toggle:hover,
.sb-menu-toggle:focus-visible {
	background: rgb(255 255 255 / 10%);
	border: 0;
	transform: none;
}

.sb-menu-toggle__line {
	background: var(--sb-color-white);
	border-radius: var(--sb-radius-pill);
	display: block;
	height: 0.15rem;
	transition:
		opacity var(--sb-transition-fast),
		transform var(--sb-transition-fast);
	width: 1.55rem;
}

.sb-menu-toggle.is-active .sb-menu-toggle__line:nth-of-type(2) {
	transform: translateY(0.48rem) rotate(45deg);
}

.sb-menu-toggle.is-active .sb-menu-toggle__line:nth-of-type(3) {
	opacity: 0;
}

.sb-menu-toggle.is-active .sb-menu-toggle__line:nth-of-type(4) {
	transform: translateY(-0.48rem) rotate(-45deg);
}

body.sb-menu-open {
	overflow: hidden;
}

@media (max-width: 74rem) {
	:root {
		--sb-header-height: 5.5rem;
	}

	.sb-site-branding {
		clip-path: polygon(0 0, 96% 0, 89% 100%, 0 100%);
		flex-basis: clamp(19rem, 55vw, 31rem);
		inline-size: clamp(19rem, 55vw, 31rem);
		min-inline-size: clamp(19rem, 55vw, 31rem);
		padding-inline-end: 4.2rem;
	}

	.sb-site-branding::after {
		inset-inline-end: 2.6rem;
	}

	.sb-brand-mark {
		flex-basis: 4.6rem;
		inline-size: 4.6rem;
	}

	.sb-brand-name {
		font-size: clamp(1.7rem, 4vw, 2.4rem);
	}

	.sb-brand-subtitle {
		font-size: 0.72rem;
	}

	.sb-site-header.sb-navigation-ready .sb-menu-toggle {
		display: inline-flex;
	}

	.sb-primary-nav {
		background: var(--sb-color-deep-background);
		border-block-start: 1px solid var(--sb-color-border-blue);
		inline-size: 100%;
		inset-block-start: 100%;
		inset-inline: 0;
		margin: 0;
		position: absolute;
	}

	.sb-site-header.sb-navigation-ready .sb-primary-nav {
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		pointer-events: none;
		transform: translateY(-0.5rem);
		transition:
			max-height var(--sb-transition-base),
			opacity var(--sb-transition-fast),
			transform var(--sb-transition-base);
	}

	.sb-site-header.sb-navigation-ready .sb-primary-nav.is-open {
		max-height: calc(100svh - var(--sb-header-height));
		opacity: 1;
		overflow-y: auto;
		pointer-events: auto;
		transform: translateY(0);
	}

	.sb-primary-nav .sb-primary-menu {
		align-items: stretch;
		display: flex;
		flex-direction: column;
		gap: 0;
		margin-inline: auto;
		max-width: var(--sb-wide-width);
		padding: 0.8rem var(--sb-page-gutter) 1.5rem;
	}

	.sb-primary-nav .sb-primary-menu > .menu-item {
		border-block-end: 1px solid var(--sb-color-border-blue);
	}

	.sb-primary-nav .sb-primary-menu > .menu-item:last-child {
		border-block-end: 0;
	}

	.sb-primary-nav a {
		justify-content: space-between;
		min-height: 0;
		padding: 1rem 0.2rem;
		white-space: normal;
	}

	.sb-primary-nav .sb-primary-menu > .menu-item:not(.sb-menu-cta) > a::after {
		display: none;
	}

	.sb-primary-nav .sub-menu {
		align-items: stretch;
		display: flex;
		flex-direction: column;
		background: rgb(255 255 255 / 4%);
		border: 0;
		border-radius: var(--sb-radius-small);
		box-shadow: none;
		inset: auto;
		min-width: 0;
		opacity: 1;
		padding: 0.25rem 0.75rem 0.7rem;
		position: static;
		transform: none;
		visibility: visible;
	}

	.sb-primary-nav .sub-menu::before {
		display: none;
	}

	.sb-primary-nav .sub-menu a {
		color: var(--sb-color-light-text);
		font-size: 0.8rem;
		padding: 0.7rem 0.5rem;
	}

	.sb-primary-nav .sb-menu-cta {
		border-block-end: 0;
		display: block;
		filter: none;
		padding-block-start: 1rem;
	}

	.sb-primary-nav .sb-menu-cta::before,
	.sb-primary-nav .sb-menu-cta::after {
		display: none;
	}

	.sb-primary-nav .sb-menu-cta > a {
		clip-path: none;
		justify-content: center;
		min-height: 3.25rem;
		padding: 0.9rem 1.25rem;
	}
}

@media (max-width: 48.875rem) {
	:root {
		--sb-header-height: 5.75rem;
	}

	.admin-bar .sb-site-header--sticky {
		inset-block-start: 46px;
	}

	.sb-header-shell__inner {
		gap: 0.35rem;
		padding-inline-end: 0.45rem;
	}

	/*
	 * Let the branding panel take nearly all available width,
	 * leaving only the space the hamburger actually needs.
	 */
	.sb-site-branding {
		clip-path: polygon(0 0, 98% 0, 92% 100%, 0 100%);
		flex: 1 1 auto;
		inline-size: auto;
		margin-inline-start: calc(var(--sb-page-gutter) * -1);
		min-inline-size: 0;
		padding-inline:
			var(--sb-page-gutter)
			2.2rem;
	}

	/*
	 * Push the glowing diagonal divider much farther right.
	 */
	.sb-site-branding::before {
		inset-inline: 0 2rem;
	}

	/*
	 * Keep the glowing divider aligned with the clipped diagonal edge.
	 * The previous 0.9rem offset pushed most of the skewed line outside
	 * the clip-path, which is why it disappeared on mobile.
	 */
	.sb-site-branding::after {
		background:
			linear-gradient(
				180deg,
				transparent 0%,
				#2f66ff 10%,
				#7ca3ff 38%,
				#ffffff 49%,
				#7ca3ff 58%,
				#2f66ff 88%,
				transparent 100%
			);
		box-shadow:
			0 0 0.42rem rgb(47 102 255 / 100%),
			0 0 1.1rem rgb(47 102 255 / 65%);
		inset-inline-end: 2rem;
	}

	.sb-site-logo {
		gap: 0.7rem;
		min-inline-size: 0;
	}

	/*
	 * Bigger bulldog mark and larger wordmark on mobile.
	 */
	.sb-brand-mark {
		flex: 0 0 5rem;
		inline-size: 5rem;
	}

	.sb-brand-copy {
		gap: 0.2rem;
		min-inline-size: 0;
	}

	.sb-brand-name {
		font-size: clamp(1.75rem, 7.4vw, 2.1rem);
		letter-spacing: -0.045em;
	}

	.sb-brand-subtitle {
		font-size: clamp(0.64rem, 2.7vw, 0.74rem);
		letter-spacing: 0.105em;
	}

	.sb-menu-toggle {
		flex: 0 0 3rem;
		margin-inline-start: 0;
	}
}

@media (max-width: 31rem) {
	:root {
		--sb-header-height: 5.5rem;
	}

	.sb-header-shell__inner {
		gap: 0.2rem;
		padding-inline-end: 0.3rem;
	}

	.sb-site-branding {
		clip-path: polygon(0 0, 98% 0, 92% 100%, 0 100%);
		flex: 1 1 auto;
		inline-size: auto;
		min-inline-size: 0;
		padding-inline:
			var(--sb-page-gutter)
			1.55rem;
	}

	.sb-site-branding::before {
		inset-inline: 0 1.6rem;
	}

	.sb-site-branding::after {
		inset-inline-end: 1.6rem;
	}

	.sb-site-logo {
		gap: 0.5rem;
	}

	.sb-brand-mark {
		flex: 0 0 4.35rem;
		inline-size: 4.35rem;
	}

	.sb-brand-name {
		font-size: clamp(1.48rem, 7.2vw, 1.72rem);
		letter-spacing: -0.05em;
	}

	.sb-brand-subtitle {
		font-size: clamp(0.56rem, 2.5vw, 0.64rem);
		letter-spacing: 0.085em;
	}

	.sb-menu-toggle {
		flex-basis: 2.9rem;
		height: 2.9rem;
		width: 2.9rem;
	}
}