/* Brand logo styles */
.brand {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: inherit;
}

.brand-logo {
	height: 32px;
	width: auto;
}

.brand-logo-dark {
	display: none;
}

[data-theme="dark-purple"] .brand-logo-light {
	display: none;
}

[data-theme="dark-purple"] .brand-logo-dark {
	display: block;
}

.brand-text {
	font-weight: 600;
	font-size: 18px;
}

/* Desktop defaults hide icon glyphs */
.nav .nav-entry .icon {
	display: none;
}

.more-menu {
	display: none;
}

#navMoreBtn {
	display: none;
}

.nav button.nav-entry {
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	border: 0;
	padding: 0;
}

.nav-theme-toggle {
	border: none;
}

/* Language switcher */
.nav-lang {
	position: relative;
	margin-left: 12px;
}

.nav-lang-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 1px solid rgba(148, 163, 184, 0.3);
	border-radius: 8px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.nav-lang-menu {
	position: absolute;
	top: 110%;
	right: 0;
	min-width: 140px;
	background: #0b1220;
	color: #e5e7eb;
	border: 1px solid rgba(148, 163, 184, 0.16);
	border-radius: 10px;
	padding: 6px;
	display: none;
	z-index: 1200;
	transform: translateZ(0);
}

.nav-lang-menu a {
	display: block;
	padding: 8px 10px;
	border-radius: 8px;
	color: white;
	text-decoration: none;
}

.nav-lang-menu a:hover {
	background: rgba(148, 163, 184, 0.12);
}

.nav-lang-menu.open {
	display: block;
}

.nav-collapsible {
	display: none;
}

.nav-collapse-menu {
	display: none;
}

[data-theme="light"] .nav-lang-menu {
	background: #ffffff;
	color: #111827;
	border-color: #e5e7eb;
}

[data-theme="light"] .nav-lang-menu a {
	color: #111827;
}

@media (max-width: 768px) {
	/* Mobile nav mirrors operator console bottom navigation */
	body {
		padding-bottom: 64px;
	}

	.site-header {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		width: 100%;
		z-index: 1000;
		border-top: 1px solid var(--mobile-nav-border);
		border-bottom: none;
		background: var(--mobile-nav-bg);
	}

	.site-header .header-inner {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.brand {
		display: none;
	}

	.nav {
		flex: 1;
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		gap: 0;
		color: var(--mobile-nav-text);
	}

	.nav > *:not(.more-menu) {
		flex: 1 1 0;
		display: flex;
		justify-content: center;
		align-items: stretch;
	}

	.nav .nav-entry {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 8px 6px;
		font-size: 11px;
		font-weight: 700;
		line-height: 1;
		gap: 3px;
		min-width: 42px;
		background: transparent;
		color: inherit;
		border: none;
		border-radius: 10px;
		text-decoration: none;
		-webkit-appearance: none;
		appearance: none;
		box-shadow: none;
	}

	.nav button.nav-entry {
		font-size: 11px;
		font-weight: 700;
		line-height: 1;
	}

	.nav .nav-entry .icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 22px;
		height: 22px;
		min-width: 22px;
	}

	.nav .nav-entry .icon svg {
		width: 100%;
		height: 100%;
		transform-origin: center;
	}

	.nav .nav-entry .label {
		display: block;
	}

	.nav a.nav-link-docs,
	.nav a.nav-link-news,
	.nav a.nav-link-plus {
		display: none;
	}

	.more-menu {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 64px;
		margin: 0 auto;
		max-width: 520px;
		background: #0b1220;
		color: var(--mobile-nav-text);
		border: 1px solid rgba(148, 163, 184, 0.16);
		border-radius: 12px;
		padding: 10px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		z-index: 1100;
	}

	.more-menu.open {
		display: grid;
	}

	#navMoreBtn {
		cursor: pointer;
	}

	.more-menu a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10px;
		border: 1px solid rgba(148, 163, 184, 0.16);
		border-radius: 10px;
	}

	.nav-collapsible {
		display: flex;
		position: relative;
		justify-content: center;
		align-items: stretch;
	}

	.nav-collapsible > .nav-entry {
		flex: 1;
	}

	.nav-collapse-btn {
		width: 100%;
		cursor: pointer;
	}

	.nav-collapse-menu {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 110%;
		min-width: 160px;
		background: #0b1220;
		color: var(--mobile-nav-text);
		border: 1px solid rgba(148, 163, 184, 0.16);
		border-radius: 12px;
		padding: 8px;
		display: none;
		flex-direction: column;
		gap: 8px;
		z-index: 1200;
		box-shadow: 0 10px 30px rgba(15, 23, 42, 0.4);
	}

	.nav-collapse-menu.open {
		display: flex;
	}

	.nav-collapse-menu a {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 8px;
		border-radius: 8px;
		color: white;
		text-decoration: none;
		font-size: 14px;
		font-weight: 600;
	}

	.nav-collapse-menu a .icon {
		width: 18px;
		height: 18px;
	}

	.nav-collapse-menu a:hover {
		background: rgba(148, 163, 184, 0.12);
	}

	/* Mobile language switcher positioning */
	.nav .nav-lang {
		display: flex;
		position: relative;
		justify-content: center;
		align-items: stretch;
		margin-left: 0;
	}

	.nav .nav-lang > .nav-entry {
		flex: 1;
	}

	.nav .nav-lang-btn {
		width: 100%;
		cursor: pointer;
	}

	.nav-lang-menu {
		position: absolute;
		left: auto;
		right: 0;
		top: auto;
		bottom: 110%;
		min-width: 160px;
		background: #0b1220;
		color: var(--mobile-nav-text);
		border: 1px solid rgba(148, 163, 184, 0.16);
		border-radius: 10px;
		padding: 8px;
		z-index: 1200;
		transform: translateZ(0);
	}

	[data-theme="light"] .nav-lang-menu {
		background: #ffffff;
		color: #111827;
		border-color: #e5e7eb;
	}

	[data-theme="light"] .nav-lang-menu a {
		color: #111827;
	}

	[data-theme="light"] .nav-collapse-menu {
		background: #ffffff;
		color: #111827;
		border-color: #e5e7eb;
		box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
	}

	[data-theme="light"] .nav-collapse-menu a {
		color: #111827;
	}

	[data-theme="light"] .nav-collapse-menu a:hover {
		background: rgba(15, 23, 42, 0.08);
	}
}

/* Light theme adjustments on mobile */
@media (max-width: 768px) {
	[data-theme="light"] .site-header {
		background: #ffffff;
		border-top: 1px solid #e5e7eb;
	}

	[data-theme="light"] .nav {
		color: var(--mobile-nav-text);
	}
}