/* Header styles for Magyar Hub */

.mh-header {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: blur(18px);
	background: radial-gradient(
		circle at top,
		rgba(15, 23, 42, 0.9) 0,
		rgba(2, 6, 23, 0.97) 60%,
		rgba(0, 0, 0, 0.98) 100%
	);
	border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

.mh-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: var(--space-3);
	padding-bottom: var(--space-3);
}

.mh-header__brand {
	display: flex;
	align-items: center;
	z-index: 60;
}

.mh-header__logo-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	text-decoration: none;
}

.mh-header__logo-mark {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: conic-gradient(from 160deg, #facc15, #dc2626, #0ea5e9, #facc15);
	box-shadow: 0 0 30px rgba(220, 38, 38, 0.55);
	position: relative;
}

.mh-header__logo-mark::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: inherit;
	background: radial-gradient(circle at 30% 0%, #1f2937 0, #020617 70%);
}

.mh-header__logo-text {
	font-family: var(--font-display);
	font-size: var(--font-size-lg);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gray-50);
	white-space: nowrap;
}

.mh-header__nav {
	display: flex;
	align-items: center;
}

.mh-header__nav-list {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.mh-header__nav-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	font-size: var(--font-size-sm);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--gray-200);
	padding: 0.35rem 0;
}

.mh-header__nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(90deg, #facc15, #dc2626);
	transition: width var(--transition-normal);
}

.mh-header__nav-link:hover,
.mh-header__nav-link:focus-visible {
	color: #ffffff;
}

.mh-header__nav-link:hover::after,
.mh-header__nav-link:focus-visible::after {
	width: 100%;
}

.mh-header__nav-item--cta .mh-header__nav-link--cta {
	padding: 0.45rem 1.3rem;
	border-radius: var(--radius-full);
	border: 1px solid rgba(248, 250, 252, 0.16);
	background: linear-gradient(
		135deg,
		rgba(220, 38, 38, 0.96),
		rgba(127, 29, 29, 0.96)
	);
	color: #ffffff;
	box-shadow: 0 12px 30px rgba(220, 38, 38, 0.55);
}

.mh-header__nav-item--cta .mh-header__nav-link--cta::after {
	display: none;
}

.mh-header__nav-item--cta .mh-header__nav-link--cta:hover,
.mh-header__nav-item--cta .mh-header__nav-link--cta:focus-visible {
	box-shadow: 0 18px 50px rgba(220, 38, 38, 0.75);
}

/* Mobile toggle */

.mh-header__toggle {
	display: none;
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1px solid rgba(148, 163, 184, 0.6);
	align-items: center;
	justify-content: center;
	background: radial-gradient(
		circle at top,
		rgba(15, 23, 42, 0.9) 0,
		rgba(15, 23, 42, 0.4) 100%
	);
	color: var(--gray-100);
}

.mh-header__toggle-bar {
	width: 18px;
	height: 2px;
	border-radius: 999px;
	background-color: var(--gray-100);
	transition:
		transform var(--transition-normal),
		opacity var(--transition-fast);
}



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

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

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

/* Mobile layout */

@media (max-width: 900px) {
	.mh-header__inner {
		position: relative;
	}

	.mh-header__toggle {
		display: flex;
		position: relative;
		z-index: 100;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.12);
		background: rgba(15, 23, 42, 0.92);
		backdrop-filter: blur(12px);
		box-shadow:
			0 10px 25px rgba(0, 0, 0, 0.35),
			inset 0 1px 0 rgba(255, 255, 255, 0.05);
		transition:
			background 0.25s ease,
			border-color 0.25s ease,
			transform 0.2s ease;
	}

	.mh-header__toggle:hover {
		border-color: rgba(250, 204, 21, 0.45);
		transform: scale(1.04);
	}

	.mh-header__toggle:active {
		transform: scale(0.96);
	}

	.mh-header__toggle-bar {
		position: absolute;
		width: 20px;
		height: 2px;
		margin: 0;
		background: #fff;
		border-radius: 999px;
		transition:
			transform 0.25s ease,
			opacity 0.2s ease,
			top 0.25s ease;
	}

	.mh-header__toggle-bar:nth-child(1) {
		top: 16px;
	}

	

	.mh-header__toggle-bar:nth-child(3) {
		top: 26px;
	}

	.mh-header__toggle.is-active .mh-header__toggle-bar:nth-child(1) {
		top: 23px;
		transform: rotate(45deg);
	}

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

	.mh-header__toggle.is-active .mh-header__toggle-bar:nth-child(3) {
		top: 23px;
		transform: rotate(-45deg);
	}

	.mh-header__nav {
		position: absolute;
		top: calc(100% + 14px);
		left: 0;
		right: 0;

		display: flex;
		flex-direction: column;

		padding: 20px;

		border-radius: 24px;
		border: 1px solid rgba(255, 255, 255, 0.08);

		background: linear-gradient(
			180deg,
			rgba(15, 23, 42, 0.98),
			rgba(2, 6, 23, 0.98)
		);

		backdrop-filter: blur(20px);

		box-shadow:
			0 24px 60px rgba(0, 0, 0, 0.5),
			inset 0 1px 0 rgba(255, 255, 255, 0.04);

		transform: translateY(-10px);
		opacity: 0;
		visibility: hidden;

		transition:
			opacity 0.25s ease,
			transform 0.25s ease,
			visibility 0.25s ease;
	}

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

	.mh-header__nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		margin: 0;
	}

	.mh-header__nav-link {
		width: 100%;
		padding: 14px 16px;
		border-radius: 14px;
		font-size: 14px;
		letter-spacing: 0.14em;

		background: rgba(255, 255, 255, 0.02);

		transition:
			background 0.2s ease,
			transform 0.2s ease;
	}

	.mh-header__nav-link:hover,
	.mh-header__nav-link:focus-visible {
		background: rgba(255, 255, 255, 0.06);
		transform: translateX(4px);
	}

	.mh-header__nav-link::after {
		display: none;
	}

	.mh-header__nav-item--cta .mh-header__nav-link--cta {
		justify-content: center;
		margin-top: 8px;
	}
}

/* Small screens: adjust logo size */

@media (max-width: 600px) {
	.mh-header__logo-text {
		font-size: var(--font-size-base);
		letter-spacing: 0.14em;
	}
}