/* =============================================================
   VARIANT 10 — Fluent 2 · Topbar + large centered logo | Full-width justified nav
   Breadcrumbs: › arrow
   ============================================================= */

/* ---- Topbar ---- */
.v10-topbar {
	background: var(--color-primary);
	padding: .3rem 0;
}

.v10-topbar__inner {
	max-width: var(--w-wide);
	margin: 0 auto;
	padding: 0 var(--sp-lg);
	display: flex;
	align-items: center;
	gap: var(--sp-md);
}

.v10-topbar__date,
.v10-topbar__tagline {
	font-size: .6875rem;
	color: rgba(255,255,255,.5);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.v10-topbar__divider {
	color: rgba(255,255,255,.2);
	font-size: .75rem;
}

/* ---- Header — large centered logo ---- */
.v10-header {
	background: var(--color-bg-alt);
	border-bottom: 1px solid var(--color-border-light);
	padding: var(--sp-xl) 0 var(--sp-lg);
}

.v10-header__inner {
	max-width: var(--w-wide);
	margin: 0 auto;
	padding: 0 var(--sp-lg);
	display: flex;
	justify-content: center;
}

.v10-header__logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-sm);
	text-decoration: none;
	border: none;
}

.v10-header__logo-text {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 1rem + 4vw, 3.75rem);
	font-weight: 700;
	color: var(--color-text);
	letter-spacing: -.04em;
	line-height: 1.05;
	text-align: center;
	transition: color var(--t-fast);
}

.v10-header__logo:hover .v10-header__logo-text { color: var(--color-primary); }

/* Gradient rule under the logo */
.v10-header__logo-line {
	display: block;
	width: 4rem;
	height: 2px;
	background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-primary));
	border-radius: var(--radius-circle);
	transition: width var(--t-base);
}

.v10-header__logo:hover .v10-header__logo-line { width: 6rem; }

/* ---- Nav — full-width justified ---- */
.v10-nav {
	background: var(--color-primary-dark);
	position: sticky;
	top: 0;
	z-index: 100;
}

.v10-nav__inner {
	max-width: 100%;
	padding: 0 var(--sp-lg);
	display: flex;
	align-items: stretch;
	justify-content: center;
	position: relative;
	min-height: 2.75rem;
}

.variant-v10 .primary-menu {
	justify-content: center;
	gap: 0;
	width: 100%;
}

.variant-v10 .primary-menu > li {
	flex: 1;
	display: flex;
	justify-content: center;
	border-right: 1px solid rgba(255,255,255,.07);
}

.variant-v10 .primary-menu > li:last-child { border-right: none; }

.variant-v10 .primary-menu > li > a {
	color: rgba(255,255,255,.75);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .04em;
	padding: 0 var(--sp-sm);
	width: 100%;
	justify-content: center;
	height: 2.75rem;
	border-radius: 0;
	position: relative;
	transition: color var(--t-fast), background var(--t-fast);
}

.variant-v10 .primary-menu > li > a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--color-accent);
	transform: scaleX(0);
	transition: transform var(--t-base);
}

.variant-v10 .primary-menu > li > a:hover,
.variant-v10 .primary-menu > li:focus-within > a {
	color: #fff;
	background: rgba(255,255,255,.07);
}

.variant-v10 .primary-menu > li > a:hover::after,
.variant-v10 .primary-menu > li:focus-within > a::after {
	transform: scaleX(1);
}

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

.variant-v10 .primary-menu > li.current-menu-item > a::after {
	transform: scaleX(1);
}

.variant-v10 .primary-menu .sub-menu {
	background: var(--color-primary-dark);
	border-color: rgba(255,255,255,.1);
}

.variant-v10 .primary-menu .sub-menu a { color: rgba(255,255,255,.8); }
.variant-v10 .primary-menu .sub-menu a:hover { background: rgba(255,255,255,.08); color: #fff; }

/* ---- Burger ---- */
.v10-burger {
	display: none;
	border-color: rgba(255,255,255,.25);
	position: absolute;
	right: var(--sp-lg);
	top: 50%;
	transform: translateY(-50%);
}

.v10-burger .burger-btn__line { background: rgba(255,255,255,.9); }

/* ---- Breadcrumbs: › ---- */
.variant-v10 .breadcrumbs__item + .breadcrumbs__item::before {
	content: '›';
	font-size: 1.1em;
	font-weight: 400;
	color: var(--color-primary);
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
	.v10-topbar { display: none; }
	.v10-header { padding: var(--sp-md) 0; }
	.v10-header__logo-text { font-size: clamp(1.5rem, 5vw, 2.2rem); }
	.v10-nav__inner { justify-content: flex-end; padding: 0 var(--sp-md); }
	.v10-burger { display: flex; position: static; transform: none; }
	.variant-v10 .primary-menu > li { flex: unset; width: 100%; border-right: none; }
	.variant-v10 .primary-menu > li > a { height: auto; padding: var(--sp-md) var(--sp-lg); justify-content: flex-start; }
}