/* Header-specific styles for Wonderstar s. r. o. */

.site-header {
	position: relative;
	z-index: 50;
}

.navbar {
	/* Base shell already in base.css; extend for branding and mobile layout */
}

.navbar__brand-mark {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 30% 20%, #ffb020, transparent 60%),
		radial-gradient(circle at 70% 80%, #2ec4b6, transparent 55%), #05070b;
	box-shadow: 0 0 18px rgba(255, 176, 32, 0.55);
}

.navbar__brand-text {
	display: flex;
	flex-direction: column;
}

.navbar__brand-name {
	font-size: 0.8rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.navbar__brand-tagline {
	font-size: 0.65rem;
	color: var(--color-text-muted);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* Navigation list refinement */
.navbar__menu {
	list-style: none;
}

.navbar__item {
	position: relative;
}

.navbar__link {
	padding: 0.35rem 0;
}

/* Mobile toggle */
.navbar__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	border: 1px solid rgba(163, 169, 182, 0.5);
	background:
		radial-gradient(circle at 0 0, rgba(122, 92, 255, 0.24), transparent 55%),
		rgba(10, 14, 20, 0.92);
	color: var(--color-text-primary);
	cursor: pointer;
	transition:
		background-color var(--transition-base),
		border-color var(--transition-base),
		box-shadow var(--transition-base),
		transform var(--transition-fast);
}

.navbar__toggle-bar {
	width: 18px;
	height: 2px;
	border-radius: 999px;
	background-color: var(--color-text-primary);
	transition:
		transform var(--transition-base),
		opacity var(--transition-base);
}

.navbar__toggle:focus-visible {
	outline: 2px solid var(--color-accent-cyan);
	outline-offset: 3px;
}

.navbar__toggle:hover {
	border-color: var(--color-accent-cyan);
	box-shadow: var(--shadow-glow-cyan);
}

/* Mobile layout */
@media (max-width: 768px) {
	.navbar__toggle {
		display: inline-flex;
	}

	.navbar__nav {
		position: fixed;
		inset: 64px 0 auto 0;
		background:
			radial-gradient(circle at top, rgba(122, 92, 255, 0.26), transparent 60%),
			rgba(5, 7, 11, 0.98);
		backdrop-filter: blur(20px);
		border-bottom: 1px solid rgba(122, 92, 255, 0.35);
		transform: translateY(-120%);
		opacity: 0;
		visibility: hidden;
		transition:
			transform var(--transition-base),
			opacity var(--transition-base),
			visibility var(--transition-base);
	}

	.navbar__menu {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		padding: var(--space-4);
	}

	.navbar__item {
		border-bottom: 1px solid rgba(163, 169, 182, 0.25);
		padding-bottom: var(--space-2);
	}

	.navbar__item:last-child {
		border-bottom: none;
	}

	.navbar__link {
		display: block;
		font-size: 0.8rem;
		letter-spacing: 0.18em;
	}

	.navbar__nav.is-open {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}

	.navbar__toggle.is-active .navbar__toggle-bar:nth-child(1) {
		transform: translateY(4px) rotate(45deg);
	}

	.navbar__toggle.is-active .navbar__toggle-bar:nth-child(2) {
		opacity: 0;
	}

	.navbar__toggle.is-active .navbar__toggle-bar:nth-child(3) {
		transform: translateY(-4px) rotate(-45deg);
	}
}

/* Larger screens keep base nav visible */
@media (min-width: 769px) {
	.navbar__nav {
		display: block;
	}
}