/**
 * Navigation — header nav + mobile overlay menu.
 *
 * Desktop: frosted glass material bar.
 * Mobile: compact bar + full-screen overlay.
 * 3 breakpoints: compact (<768), regular (768-1023), large (1024+).
 */

/* ===============================================================
   Site header — material glass bar
   =============================================================== */

.site-header,
body .site-header {
	background: rgba(0, 0, 0, 0.70);
	-webkit-backdrop-filter: var(--slist-blur);
	backdrop-filter: var(--slist-blur);
	transition: transform var(--slist-transition-slow);
	z-index: var(--slist-z-header);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-header,
	body .site-header {
		background: rgba(0, 0, 0, 0.95);
	}
}

.site-header.is-hidden {
	transform: translateY(-100%);
}

.inside-header,
body .inside-header {
	max-width: var(--slist-content-wide);
	margin: 0 auto;
	padding: var(--slist-space-2) var(--slist-space-3);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--slist-space-4);
}

/* ---- Logo ---- */

.site-logo,
.site-branding {
	flex: 0 0 auto;
}

/* Logo: circle image only. Hide GP's duplicate text title. */
.site-branding,
.site-header .main-title {
	display: none;
}

.site-logo img,
.wp-block-site-logo img.custom-logo {
	width: 32px;
	height: 32px;
	max-width: 32px;
	object-fit: contain;
	border-radius: 50%;
	display: block;
}

/* ---- Primary nav — desktop ---- */

.main-navigation,
.main-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.main-navigation {
	display: none;
}

/* Regular breakpoint (768px+): show nav links */
@media (min-width: 768px) {
	.inside-header {
		padding: var(--slist-space-2) var(--slist-space-4);
	}

	.main-navigation {
		display: flex;
		align-items: center;
		gap: var(--slist-space-5);
	}

	.main-navigation .menu {
		display: flex;
		gap: var(--slist-space-5);
		margin: 0;
	}

	.main-navigation a {
		color: var(--slist-text-secondary);
		font-family: var(--slist-font-body);
		font-size: 13px;
		font-weight: var(--slist-weight-medium);
		text-decoration: none;
		transition: color var(--slist-transition-fast);
	}

	.main-navigation a:hover,
	.main-navigation a:focus-visible {
		color: var(--slist-text-secondary) !important;
		text-decoration: underline;
		text-decoration-color: var(--slist-primary);
		text-decoration-thickness: 1.5px;
		text-underline-offset: 4px;
		background: transparent !important;
		background-color: transparent !important;
		outline: none;
	}

	/* Defeat GP's li:hover background paint */
	.main-navigation .main-nav ul li:hover,
	.main-navigation .main-nav ul li.sfHover,
	.main-navigation .menu-bar-item:hover,
	.main-navigation .menu-bar-item.sfHover {
		background: transparent !important;
		background-color: transparent !important;
	}

	.main-navigation .current-menu-item > a,
	.main-navigation .main-nav ul li[class*="current-menu-"] > a,
	.main-navigation li[class*="current-menu-"] > a {
		color: var(--slist-primary) !important;
	}
}

/* Large breakpoint (1024px+): wider spacing */
@media (min-width: 1024px) {
	.inside-header {
		gap: var(--slist-space-5);
	}

	.main-navigation {
		gap: var(--slist-space-5);
	}

	.main-navigation .menu {
		gap: var(--slist-space-5);
	}
}

/* ---- Mobile menu toggle ---- */

.slist-menu-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	gap: 4px;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--slist-text-primary);
	margin-left: auto;
}

.slist-menu-toggle__bar {
	display: block;
	height: 1.5px;
	background: currentColor;
	border-radius: 1px;
	transition: transform var(--slist-transition-fast), opacity var(--slist-transition-fast);
}

.slist-menu-toggle__bar:first-child { width: 18px; }
.slist-menu-toggle__bar:last-child  { width: 12px; }

/* GP toggle styling override */
.site-header .menu-toggle {
	color: var(--slist-text-primary);
	background: transparent;
	border: none;
	padding: var(--slist-space-2);
}

.site-header .menu-toggle .gp-icon {
	color: var(--slist-text-primary);
}

/* Hide GP's default dropdown rendering */
.site-header .main-nav {
	display: none;
}

@media (min-width: 768px) {
	.site-header .menu-toggle {
		display: none !important;
	}

	.site-header .main-nav {
		display: flex;
	}

	nav.mobile-menu-control-wrapper {
		display: none !important;
	}
}

/* ---- Full-screen overlay menu (mobile) ---- */

.slist-menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100dvh;
	height: 100vh; /* fallback */
	background: var(--slist-bg);
	z-index: var(--slist-z-overlay);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--slist-space-8) var(--slist-space-4);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--slist-transition-slow),
		visibility var(--slist-transition-slow);
}

.slist-menu-overlay[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
}

.slist-menu-overlay__close {
	position: absolute;
	top: var(--slist-space-3);
	right: var(--slist-space-3);
	background: transparent;
	border: none;
	color: var(--slist-text-primary);
	cursor: pointer;
	padding: var(--slist-space-2);
	transition: color var(--slist-transition-fast);
}

.slist-menu-overlay__close:hover {
	color: var(--slist-primary);
}

.slist-menu-overlay__nav {
	text-align: center;
}

.slist-menu-overlay__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--slist-space-4);
}

.slist-menu-overlay__list a {
	font-family: var(--slist-font-display);
	font-size: var(--slist-text-title1);
	font-weight: var(--slist-weight-regular);
	color: var(--slist-text-primary);
	text-decoration: none;
	transition: color var(--slist-transition-fast);
}

.slist-menu-overlay__list a:hover,
.slist-menu-overlay__list a:focus-visible {
	color: var(--slist-primary);
}

.slist-menu-overlay__list .current-menu-item > a {
	color: var(--slist-primary);
}

body.slist-menu-open {
	overflow: hidden;
}

/* ===============================================================
   Header utility nav — cart, account, theme toggle
   =============================================================== */

.slist-nav-utils {
	display: none;
}

@media (min-width: 768px) {
	.slist-nav-utils {
		display: flex;
		align-items: center;
		gap: var(--slist-space-3);
		margin-left: auto;
	}
}

.slist-nav-util {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: var(--slist-space-1);
	background: transparent;
	border: none;
	color: var(--slist-text-secondary);
	cursor: pointer;
	text-decoration: none;
	transition: color var(--slist-transition-fast);
}

.slist-nav-util:hover {
	color: var(--slist-text-primary);
}

.slist-nav-util:focus-visible {
	outline: none;
	box-shadow: var(--slist-focus-ring);
	border-radius: var(--slist-radius-sm);
}

.slist-nav-util__badge {
	position: absolute;
	top: -4px;
	right: -6px;
	min-width: 14px;
	height: 14px;
	border-radius: 7px;
	background: var(--slist-primary);
	color: #fff;
	font-family: var(--slist-font-body);
	font-size: 10px;
	font-weight: var(--slist-weight-bold);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

/* Theme toggle — swap sun/moon icons */
.slist-theme-icon--light { display: none; }
.light-mode .slist-theme-icon--dark { display: none; }
.light-mode .slist-theme-icon--light { display: block; }

@media (min-width: 768px) {
	.slist-menu-overlay,
	.slist-menu-overlay[aria-hidden="false"] {
		display: none;
	}

	.slist-menu-toggle {
		display: none;
	}
}