/* Codeon Restaurant V2 — header "screen" variant overrides.
   Loads IN ADDITION to header.css (see inc/setup.php). */

.nav-screen {
	background: color-mix(in srgb, var(--surface) 82%, transparent);
	border-bottom-color: var(--nav-border);
}
.nav-screen.scrolled {
	background: color-mix(in srgb, var(--surface) 94%, transparent);
	box-shadow: 0 18px 48px color-mix(in srgb, var(--ink) 8%, transparent);
}
.nav-screen .nav-inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	height: 76px;
	gap: clamp(14px, 2vw, 28px);
}
.nav-screen .nav-logo img,
.nav-screen .nav-logo .custom-logo {
	height: var(--logo-height, 40px);
}
.nav-screen .nav-logo {
	grid-column: 1;
}
.nav-screen .nav-center {
	grid-column: 2;
	position: static;
	justify-self: center;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	transform: none;
	background: var(--nav-pill);
	border: 1px solid var(--nav-border);
	box-shadow: inset 0 1px 0 var(--glass);
}
.nav-screen .nav-center::-webkit-scrollbar {
	display: none;
}
.nav-screen .nav-center a {
	padding: 10px clamp(11px, 1vw, 18px);
	color: var(--ink-soft);
	font-weight: 600;
}
.nav-screen .nav-center a:hover,
.nav-screen .nav-center .current-menu-item a {
	color: var(--heading);
	background: var(--surface);
	box-shadow: 0 8px 18px color-mix(in srgb, var(--ink) 6%, transparent);
}
.nav-screen .nav-right {
	grid-column: 3;
	justify-self: end;
	min-width: 0;
	gap: 12px;
}
.nav-screen .nav-cta-btn {
	max-width: min(210px, 18vw);
	padding: 13px 17px 13px 22px;
	background: var(--brand);
	box-shadow: 0 14px 32px color-mix(in srgb, var(--brand) 22%, transparent);
	font-weight: 800;
}
.nav-screen .nav-cta-btn:hover {
	background: var(--brand-deep);
	box-shadow: 0 18px 40px color-mix(in srgb, var(--brand) 26%, transparent);
}
.nav-screen .nav-account,
.nav-screen .nav-menu-btn,
.nav-screen .nav-theme-toggle {
	background: color-mix(in srgb, var(--surface) 72%, transparent);
	border-color: var(--line);
}
.nav-screen .nav-account {
	box-shadow: inset 0 1px 0 var(--glass);
}
.nav-screen .nav-account .avatar {
	background: var(--brand);
}

@media (max-width: 1500px) {
	.nav-screen .nav-phone {
		display: none;
	}
	.nav-screen .nav-cta-btn {
		max-width: 180px;
	}
}

@media (max-width: 1180px) {
	.nav-screen .nav-inner {
		display: flex;
	}
	.nav-screen .nav-center {
		position: static;
		transform: none;
	}
}

@media (max-width: 920px) {
	.nav-screen .nav-inner { height: 68px; }
	.nav-screen .nav-logo img,
	.nav-screen .nav-logo .custom-logo { height: var(--logo-height-mobile, 36px); }
}

@media (max-width: 600px) {
	.nav-screen .nav-inner {
		gap: 10px;
	}
	.nav-screen .nav-cta-btn {
		max-width: min(48vw, 220px);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}