/* ==========================================================================
   Header and menu
   The top bar with the logo, the dropdown menu and the mobile menu. HTML: header.php and inc/menu-dropdown-walker.php
   ========================================================================== */

.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	height: var(--header-h);
	display: flex;
	align-items: center;
	border-bottom: 1px solid transparent;
	transition: background .35s, border-color .35s, box-shadow .35s, height .35s var(--ease);
}
.admin-bar .site-header { top: 32px; }
/* Once scrolled: near-solid glass bar so page content never shows through the menu. */
.site-header.is-scrolled {
	--header-h: 72px;
	background: rgba(9, 5, 30, .94);
	backdrop-filter: blur(16px) saturate(150%);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	border-bottom-color: var(--border);
	box-shadow: 0 12px 40px -24px rgba(0, 0, 0, .9);
}
.site-header__inner { display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; flex-shrink: 0; }
.brand:hover { color: #fff; }
.brand__logo {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
	background: #fff;
	box-shadow: 0 0 0 2px rgba(167, 139, 250, .35), 0 6px 24px -6px rgba(124, 58, 237, .8);
	transition: transform .5s var(--ease);
}
.brand:hover .brand__logo { transform: rotate(-12deg) scale(1.05); }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; letter-spacing: -.01em; }
.brand__sub { font-size: .7rem; letter-spacing: .32em; text-transform: uppercase; color: var(--c-glow); font-weight: 600; margin-top: 3px; }
.primary-nav { margin-left: auto; }
.menu { list-style: none; margin: 0; padding: 0; }
.menu--primary { display: flex; align-items: center; gap: 4px; }
.menu--primary > .menu-item { position: relative; display: flex; align-items: center; }
.menu-link {
	position: relative;
	display: block;
	padding: 10px 14px;
	color: #cfc9ea;
	font-size: .95rem;
	font-weight: 500;
	white-space: nowrap;
	transition: color .2s;
}
/* Single animated underline for hover, open dropdown and the current page. */
.menu-link::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background: var(--grad);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .35s var(--ease);
}
.has-dropdown > .menu-link { padding-right: 4px; }
.has-dropdown > .menu-link::after { right: 4px; }
.menu-link:hover, .menu-item:focus-within > .menu-link, .menu-item.is-current > .menu-link { color: #fff; }
.menu-link:hover::after, .menu-item:focus-within > .menu-link::after, .has-dropdown:hover > .menu-link::after { transform: scaleX(.6); }
.menu-item.is-current > .menu-link { font-weight: 600; }
.menu-item.is-current > .menu-link::after { transform: scaleX(1); }
.submenu-toggle {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	margin-right: 6px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--muted);
	transition: transform .3s var(--ease), color .2s;
}
.has-dropdown:hover > .submenu-toggle, .submenu-toggle[aria-expanded="true"] { color: #fff; transform: rotate(180deg); }
.sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	min-width: 270px;
	list-style: none;
	margin: 0;
	padding: 10px;
	border-radius: 18px;
	/* Opaque so page content never shows through the menu (a backdrop blur
	   cannot work here because the header already has one). */
	background: linear-gradient(160deg, #1a1046, #100a2e);
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow), 0 0 60px -20px rgba(124, 58, 237, .5);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 10px) scale(.98);
	transform-origin: top center;
	transition: opacity .25s var(--ease), transform .35s var(--ease), visibility .25s;
}
.sub-menu::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }
/* hover bridge */
.has-dropdown:hover > .sub-menu,
.has-dropdown:focus-within > .sub-menu,
.has-dropdown.is-open > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }
.sub-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 10px;
	color: #d8d3f0;
	font-size: .92rem;
	transition: background .2s, color .2s, padding .25s var(--ease);
}
.sub-link::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); transition: background .2s, box-shadow .2s; }
.sub-link:hover, .sub-menu .is-current .sub-link { background: rgba(124, 58, 237, .2); color: #fff; padding-left: 18px; }
.sub-link:hover::before { background: var(--c-glow); box-shadow: 0 0 10px var(--c-glow); }
.site-header__actions { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
	display: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--border-strong);
	background: rgba(255, 255, 255, .05);
	place-items: center;
}
.nav-toggle__bars { display: grid; gap: 5px; width: 20px; }
.nav-toggle__bars span { display: block; height: 2px; border-radius: 2px; background: #fff; transition: transform .35s var(--ease), opacity .2s; }
.nav-open .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.primary-nav__mobile-extra { display: none; }

@media (max-width: 1400px) {
	.site-header__inner { gap: 16px; }
	.menu--primary { gap: 0; }
	.menu-link { padding: 10px 10px; font-size: .9rem; }
	.menu-link::after { left: 10px; right: 10px; }
}

@media (max-width: 1180px) {
	.header-cta { display: none; }
}

@media (max-width: 1180px) {
	:root { --header-h: 74px; }
	/* Off-canvas mobile navigation */
	.nav-toggle { display: grid; }
	.primary-nav {
		position: fixed;
		inset: 0;
		z-index: -1;
		margin: 0;
		padding: calc(var(--header-h) + 12px) var(--gutter) 32px;
		background: rgba(7, 4, 26, .97);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-12px);
		transition: opacity .35s var(--ease), transform .45s var(--ease), visibility .35s;
	}
	.nav-open .primary-nav { opacity: 1; visibility: visible; transform: none; }
	.admin-bar .primary-nav { padding-top: calc(var(--header-h) + 44px); }
	.site-header__actions { margin-left: auto; }
	.nav-open { overflow: hidden; }
	.nav-open .site-header { background: transparent; box-shadow: none; backdrop-filter: none; }
	.menu--primary { flex-direction: column; align-items: stretch; gap: 4px; }
	.menu--primary > .menu-item { flex-wrap: wrap; border-bottom: 1px solid var(--border); }
	.menu-link { flex: 1; font-size: 1.12rem; font-family: var(--font-display); font-weight: 600; padding: 16px 4px; border-radius: 0; background: none !important; box-shadow: none !important; }
	.menu-link::after { display: none; }
	.submenu-toggle { width: 44px; height: 44px; margin: 0; border: 1px solid var(--border); }
	.sub-menu {
		position: static;
		flex-basis: 100%;
		min-width: 0;
		transform: none !important;
		opacity: 1;
		visibility: visible;
		display: none;
		padding: 0 0 12px;
		margin: 0;
		background: none;
		border: 0;
		box-shadow: none;
		backdrop-filter: none;
	}
	.has-dropdown:hover > .sub-menu, .has-dropdown:focus-within > .sub-menu { display: none; }
	.has-dropdown.is-open > .sub-menu { display: block; }
	.has-dropdown:hover > .submenu-toggle { transform: none; }
	.submenu-toggle[aria-expanded="true"] { transform: rotate(180deg); }
	.sub-link { font-size: 1rem; }
	/* CTA + contact stay visible at the bottom of the open menu */
	.primary-nav__mobile-extra {
		position: sticky;
		bottom: -32px;
		display: grid;
		gap: 12px;
		margin: 24px calc(var(--gutter) * -1) -32px;
		padding: 18px var(--gutter) 24px;
		background: linear-gradient(180deg, rgba(7, 4, 26, 0), rgba(7, 4, 26, .96) 22%);
		border-top: 1px solid var(--border);
	}
	.primary-nav__mobile-extra .btn { width: 100%; }
	.mobile-contact { display: flex; align-items: center; gap: 10px; color: var(--muted); }
}

@media (max-width: 782px) {
	.admin-bar .primary-nav { padding-top: calc(var(--header-h) + 58px); }
}

@media (min-width: 601px) and (max-width: 1180px) {
	.header-cta { display: inline-flex; }
}

@media (max-width: 600px) {
	/* Keep the WP admin bar fixed so the header never leaves a gap when logged in. */
	#wpadminbar { position: fixed !important; }
}

@media (max-width: 1024px) {
	:root { --header-h: 74px; }
}

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

@media (max-width: 680px) {
	.brand__logo { width: 44px; height: 44px; }
	.brand__name { font-size: 1rem; }
}