/* =============================================================
   VARIANT 8 — Fluent 2 · Large hero banner | Logo CENTER big | Glass sticky nav
   Breadcrumbs: › arrow
   ============================================================= */

/* ---- Header — hero proportions ---- */
.v8-header {
	background: linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, #1a7cc7 100%);
	padding: var(--sp-2xl) 0 var(--sp-xl);
	position: relative;
	overflow: hidden;
	text-align: center;
}

/* Radial sport energy effect */
.v8-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle 600px at 80% 50%, rgba(247,99,12,.15) 0%, transparent 60%),
		radial-gradient(circle 400px at 10% 80%, rgba(255,255,255,.07) 0%, transparent 50%);
	pointer-events: none;
}

/* Grid mesh lines — subtle */
.v8-header::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
	background-size: 60px 60px;
	pointer-events: none;
}

.v8-header__inner {
	max-width: var(--w-wide);
	margin: 0 auto;
	padding: 0 var(--sp-lg);
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-sm);
}

.v8-header__eyebrow {
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--color-accent-light);
	margin: 0;
}

.v8-header__logo {
	text-decoration: none;
	border: none;
}

.v8-header__logo-text {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 1.2rem + 4vw, 3.8rem);
	font-weight: 700;
	color: #fff;
	letter-spacing: -.03em;
	line-height: 1.1;
	text-align: center;
	transition: opacity var(--t-fast);
}

.v8-header__logo:hover .v8-header__logo-text { opacity: .85; }

.v8-header__tagline {
	font-size: .875rem;
	color: rgba(255,255,255,.55);
	letter-spacing: .02em;
}

/* ---- Nav — glass effect, sticky ---- */
.v8-nav {
	background: rgba(255,255,255,.92);
	border-bottom: 1px solid var(--color-border);
	backdrop-filter: blur(24px) saturate(200%);
	-webkit-backdrop-filter: blur(24px) saturate(200%);
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: var(--shadow-8);
}

.v8-nav__inner {
	max-width: var(--w-wide);
	margin: 0 auto;
	padding: 0 var(--sp-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	min-height: 2.75rem;
}

.variant-v8 .primary-menu > li > a {
	font-size: .8125rem;
	font-weight: 500;
	padding: 0 var(--sp-md);
	height: 2.75rem;
	color: var(--color-text-muted);
	transition: color var(--t-fast), background var(--t-fast);
}

.variant-v8 .primary-menu > li > a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 2px;
	background: var(--color-primary);
	border-radius: 2px 2px 0 0;
	transition: width var(--t-base);
}

.variant-v8 .primary-menu > li > a:hover,
.variant-v8 .primary-menu > li:focus-within > a {
	color: var(--color-text);
	background: rgba(0,0,0,.03);
}

.variant-v8 .primary-menu > li > a:hover::after,
.variant-v8 .primary-menu > li:focus-within > a::after {
	width: calc(100% - var(--sp-lg));
}

.variant-v8 .primary-menu > li.current-menu-item > a {
	color: var(--color-primary);
	font-weight: 600;
}

.variant-v8 .primary-menu > li.current-menu-item > a::after {
	width: calc(100% - var(--sp-lg));
}

/* Burger */
.v8-burger { position: absolute; right: var(--sp-lg); }

/* ---- Breadcrumbs: › ---- */
.variant-v8 .breadcrumbs__item + .breadcrumbs__item::before {
	content: '›';
	font-size: 1em;
	font-weight: 400;
	color: var(--color-text-light);
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
	.v8-header { padding: var(--sp-xl) 0 var(--sp-lg); }
	.v8-header__logo-text { font-size: clamp(1.6rem, 5vw, 2.2rem); }
	.v8-header__eyebrow { display: none; }
	.v8-nav__inner { justify-content: flex-end; }
}