/* ===========================================================
   RewardRace — Header Nav
   Clean sticky nav, purple pill CTA, subtle glass on scroll.
   =========================================================== */

.rrew-nav {
	--rrn-bg:        var(--rr-bg);
	--rrn-text:      var(--rr-ink);
	--rrn-muted:     var(--rr-muted);
	--rrn-accent:    var(--rr-brand);
	--rrn-divider:   var(--rr-divider);
	--rrn-panel:     var(--rr-bg);
	--rrn-cta-bg:    var(--rr-brand-gradient);
	--rrn-cta-text:  #FFFFFF;

	color: var(--rrn-text);
	background: var(--rrn-bg);
	width: 100%;
	box-sizing: border-box;
	position: relative;
	z-index: 50;
}
.rrew-nav *, .rrew-nav *::before, .rrew-nav *::after { box-sizing: border-box; }

.rrew-nav--dark,
html[data-theme="dark"] .rrew-nav--auto {
	--rrn-panel: var(--rr-surface);
}

.rrew-nav--sticky {
	transition: background-color var(--rr-dur-base) var(--rr-ease-out),
	            backdrop-filter var(--rr-dur-base) var(--rr-ease-out),
	            box-shadow var(--rr-dur-base) var(--rr-ease-out),
	            border-color var(--rr-dur-base) var(--rr-ease-out);
}
.rrew-nav--sticky.is-fixed {
	position: fixed !important;
	top: 0; left: 0; right: 0;
	z-index: 9999;
	width: 100%;
	animation: rrew-nav-slide var(--rr-dur-base) var(--rr-ease-out) both;
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	background-color: color-mix(in srgb, var(--rrn-bg) 78%, transparent);
	border-bottom: 1px solid var(--rrn-divider);
	box-shadow: var(--rr-shadow-sm);
}
@keyframes rrew-nav-slide {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

.rrew-nav__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--rr-space-4);
	max-width: var(--rr-container);
	margin: 0 auto;
	padding: 16px var(--rr-section-x);
	position: relative;
}
.rrew-nav__brand    { grid-column: 1; justify-self: start; }
.rrew-nav__collapse { grid-column: 2; justify-self: center; }
.rrew-nav__actions  { grid-column: 3; justify-self: end; }

.rrew-nav__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--rr-space-3);
	text-decoration: none;
	color: var(--rrn-text);
	flex-shrink: 0;
	transition: opacity var(--rr-dur-fast) var(--rr-ease-out);
}
.rrew-nav__brand:hover { opacity: .8; }

.rrew-nav__logo {
	--rrew-logo-w: 34px;
	--rrew-logo-h: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--rrew-logo-w);
	height: var(--rrew-logo-h);
	flex: 0 0 var(--rrew-logo-w);
}
.rrew-nav__logo img,
.rrew-nav__logo svg {
	max-width: 100%; max-height: 100%;
	width: auto; height: auto;
	display: block;
	object-fit: contain;
}

.rrew-nav .rrew-nav__brand-name {
	font-size: var(--rr-fs-lg);
	font-weight: 800;
	letter-spacing: var(--rr-tracking-tight);
	color: var(--rrn-text);
	white-space: nowrap;
}

/* ----- Menu (pill style) ----- */
.rrew-nav__collapse {
	display: flex;
	align-items: center;
	gap: var(--rr-space-6);
	justify-content: center;
}
.rrew-nav__login--mobile  { display: none; }
.rrew-nav__login--desktop { display: inline-block; }

.rrew-nav__menu {
	list-style: none;
	margin: 0; padding: 4px;
	display: flex;
	align-items: center;
	gap: 2px;
	background: var(--rr-surface);
	border: 1px solid var(--rr-divider);
	border-radius: var(--rr-radius-pill);
}
.rrew-nav__menu-item { position: relative; }

.rrew-nav .rrew-nav__menu-item a {
	position: relative;
	text-decoration: none;
	color: var(--rrn-muted);
	font-size: var(--rr-fs-sm);
	font-weight: 600;
	padding: 8px 16px;
	border-radius: var(--rr-radius-pill);
	transition: color var(--rr-dur-fast) var(--rr-ease-out),
	            background-color var(--rr-dur-fast) var(--rr-ease-out);
	display: inline-block;
}
.rrew-nav .rrew-nav__menu-item a:hover {
	color: var(--rrn-text);
	background-color: var(--rr-bg);
}
.rrew-nav .rrew-nav__menu-item.is-active a {
	color: var(--rrn-accent);
	background: var(--rr-bg);
	box-shadow: var(--rr-shadow-xs);
	font-weight: 700;
}

/* Remove old underline pseudo from active state */
.rrew-nav__menu-item.is-active a::after { display: none; }

.rrew-nav .rrew-nav__login,
.rrew-nav a.rrew-nav__login {
	color: var(--rrn-text);
	font-size: var(--rr-fs-sm);
	font-weight: 600;
	text-decoration: none;
	padding: 8px 4px;
	transition: color var(--rr-dur-fast) var(--rr-ease-out);
}
.rrew-nav .rrew-nav__login:hover { color: var(--rrn-accent); }

.rrew-nav__actions {
	display: inline-flex;
	align-items: center;
	gap: var(--rr-space-4);
	flex-shrink: 0;
}

/* ----- CTA (purple gradient pill) ----- */
.rrew-nav .rrew-nav__cta,
.rrew-nav a.rrew-nav__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--rr-space-2);
	padding: 11px 22px;
	background: var(--rrn-cta-bg);
	color: var(--rrn-cta-text);
	border-radius: var(--rr-radius-pill);
	text-decoration: none;
	font-size: var(--rr-fs-sm);
	font-weight: 700;
	letter-spacing: var(--rr-tracking-snug);
	white-space: nowrap;
	box-shadow: var(--rr-shadow-brand-sm);
	transition: transform var(--rr-dur-fast) var(--rr-ease-out),
	            box-shadow var(--rr-dur-fast) var(--rr-ease-out);
}
.rrew-nav .rrew-nav__cta:hover {
	color: #FFFFFF;
	transform: translateY(-1px);
	box-shadow: var(--rr-shadow-brand-md);
}

.rrew-nav__cta-arrow {
	display: inline-block;
	transition: transform var(--rr-dur-base) var(--rr-ease-out);
}
.rrew-nav__cta:hover .rrew-nav__cta-arrow { transform: translateX(3px); }

/* ----- Hamburger ----- */
.rrew-nav__hamburger {
	display: none;
	width: 42px; height: 42px;
	padding: 0;
	background: var(--rr-surface);
	border: 1px solid var(--rr-divider);
	border-radius: var(--rr-radius-md);
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	color: var(--rrn-text);
	transition: background-color var(--rr-dur-fast) var(--rr-ease-out),
	            border-color var(--rr-dur-fast) var(--rr-ease-out);
}
.rrew-nav__hamburger:hover {
	background-color: var(--rr-surface-2);
	border-color: var(--rr-border-strong);
}
.rrew-nav__hamburger:focus-visible {
	outline: none;
	box-shadow: var(--rr-ring);
}

.rrew-nav__hamburger-bar {
	display: block;
	width: 18px; height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--rr-dur-base) var(--rr-ease-out),
	            opacity var(--rr-dur-fast) var(--rr-ease-out);
}
.rrew-nav.is-open .rrew-nav__hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rrew-nav.is-open .rrew-nav__hamburger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.rrew-nav.is-open .rrew-nav__hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
	.rrew-nav__hamburger { display: inline-flex; }

	.rrew-nav__inner {
		display: flex;
		flex-wrap: wrap;
		gap: var(--rr-space-3);
		padding: 12px 18px;
	}
	.rrew-nav__brand,
	.rrew-nav__collapse,
	.rrew-nav__actions {
		grid-column: auto;
		justify-self: auto;
	}
	.rrew-nav__actions { margin-left: auto; }
	.rrew-nav__login--desktop { display: none; }
	.rrew-nav__login--mobile  { display: block; }

	.rrew-nav__collapse {
		order: 99;
		position: absolute;
		top: 100%;
		left: 0; right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
		padding: var(--rr-space-3) var(--rr-space-4) var(--rr-space-6);
		background: var(--rrn-panel);
		border-bottom: 1px solid var(--rrn-divider);
		box-shadow: var(--rr-shadow-lg);
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		pointer-events: none;
		transition: max-height var(--rr-dur-slow) var(--rr-ease-out),
		            opacity var(--rr-dur-base) var(--rr-ease-out),
		            padding var(--rr-dur-slow) var(--rr-ease-out);
	}
	.rrew-nav.is-open .rrew-nav__collapse {
		max-height: 80vh;
		opacity: 1;
		pointer-events: auto;
		overflow-y: auto;
	}

	.rrew-nav__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		width: 100%;
		background: transparent;
		border: 0;
		padding: 0;
		border-radius: 0;
	}
	.rrew-nav__menu-item + .rrew-nav__menu-item {
		border-top: 1px solid var(--rrn-divider);
	}
	.rrew-nav__menu-item a {
		padding: 14px 8px !important;
		font-size: var(--rr-fs-md) !important;
		display: block !important;
		border-radius: var(--rr-radius-sm);
		box-shadow: none !important;
	}
	.rrew-nav__menu-item.is-active a { color: var(--rrn-accent); background: transparent; }

	.rrew-nav__login {
		margin: var(--rr-space-4) 0 0;
		padding: 12px 8px;
		font-size: var(--rr-fs-md);
		text-align: left;
	}
	.rrew-nav__cta { padding: 9px 18px; font-size: var(--rr-fs-xs); }
	.rrew-nav__brand-name { font-size: var(--rr-fs-md); }
}

@media (max-width: 480px) {
	.rrew-nav__inner { padding: 10px 14px; gap: var(--rr-space-2); }
	.rrew-nav__brand-name { display: none; }
	.rrew-nav__actions { gap: var(--rr-space-2); margin-left: auto; }
}

@media (max-width: 360px) {
	.rrew-nav__cta { padding: 9px 14px; }
}