/*
 * Primary menu — replaces Max Mega Menu (Pro).
 * Values are copied from the plugin's "Default" menu theme so the look matches.
 *
 * Desktop (>= 992px): horizontal bar, hover/focus flyouts with a fade-up effect.
 * Mobile  (<  992px): hamburger toggle, full-width drop-down panel.
 */

:root {
	--sm-green: #55622b;
	--sm-cream: #f5f0e3;
	--sm-cream-hover: #dfd6be;
	--sm-orange: #cd8a2a;
	--sm-brown: #5f4b3d;
	--sm-grey: #666;
	--sm-font: 'Helvetica', Arial, sans-serif;
}

#masthead {
	position: relative; /* anchor for the full-width mobile panel */
	z-index: 999;
}

.site-menu {
	margin-left: auto;
	font-family: var(--sm-font);
}

.site-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-menu a {
	text-decoration: none;
}

/* Hamburger toggle (mobile only) */
.site-menu-toggle {
	display: none;
	position: relative;
	width: 48px;
	height: 40px;
	padding: 0;
	border: 0;
	background: var(--sm-green);
	cursor: pointer;
}

.site-menu-toggle-bars,
.site-menu-toggle-bars::before,
.site-menu-toggle-bars::after {
	position: absolute;
	left: 50%;
	width: 32px;
	height: 3px;
	margin-left: -16px;
	border-radius: 3px;
	background: var(--sm-cream);
	transition: transform 0.2s ease, top 0.2s ease, opacity 0.2s ease;
	content: '';
}

.site-menu-toggle-bars { top: 50%; margin-top: -1.5px; }
.site-menu-toggle-bars::before { top: -9px; }
.site-menu-toggle-bars::after { top: 9px; }

.site-menu.is-open .site-menu-toggle-bars { background: transparent; }
.site-menu.is-open .site-menu-toggle-bars::before { top: 0; transform: rotate(45deg); }
.site-menu.is-open .site-menu-toggle-bars::after { top: 0; transform: rotate(-45deg); }

.screen-reader-text-sm {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- Desktop ---------- */
@media (min-width: 992px) {
	.site-menu-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.site-menu-list > li {
		position: relative;
	}

	.site-menu-list > li > a {
		display: block;
		height: 90px;
		padding: 0 30px;
		line-height: 90px;
		color: var(--sm-cream);
		font-size: 1rem;
		font-weight: bold;
		text-transform: uppercase;
		white-space: nowrap;
		transition: background-color 0.2s ease;
	}

	.site-menu-list > li:hover > a,
	.site-menu-list > li:focus-within > a,
	.site-menu-list > li.is-open > a {
		background-color: var(--sm-orange);
		color: var(--sm-cream);
	}

	/* Flyout panel */
	.site-menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		width: 360px;
		background: var(--sm-cream);
		border: 1px solid var(--sm-brown);
		border-top: 0;
		visibility: hidden;
		opacity: 0;
		transform: translateY(10px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	}

	.site-menu-list > li:hover > .sub-menu,
	.site-menu-list > li:focus-within > .sub-menu,
	.site-menu-list > li.is-open > .sub-menu {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}

	.site-menu .sub-menu li + li {
		border-top: 1px solid var(--sm-brown);
	}

	.site-menu .sub-menu a {
		display: block;
		padding: 20px 10px 20px 15px;
		line-height: 30px;
		color: var(--sm-grey);
		font-size: 15px;
		font-weight: normal;
		text-transform: uppercase;
		background: var(--sm-cream);
		transition: background-color 0.2s ease;
	}

	.site-menu .sub-menu a:hover,
	.site-menu .sub-menu a:focus {
		background: var(--sm-cream-hover);
		color: var(--sm-grey);
	}
}

/* ---------- Mobile ---------- */
@media (max-width: 991.98px) {
	.site-menu-toggle {
		display: block;
	}

	/* Bootstrap's .navbar is position:relative; release it so the panel spans the full header width */
	#masthead .navbar {
		position: static;
	}

	.site-menu-list {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--sm-cream);
		box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
	}

	.site-menu.is-open .site-menu-list {
		display: block;
	}

	.site-menu-list a {
		display: block;
		min-height: 60px;
		padding: 0 10px;
		line-height: 60px;
		text-align: center;
		color: var(--sm-brown);
		font-size: 14px;
		font-weight: bold;
		text-transform: uppercase;
	}

	.site-menu-list > li > a:hover,
	.site-menu-list > li > a:focus,
	.site-menu-list > li.is-open > a {
		background: var(--sm-orange);
		color: #fff;
	}

	.site-menu .sub-menu {
		display: none;
	}

	.site-menu li.is-open > .sub-menu {
		display: block;
	}

	.site-menu .sub-menu a {
		color: var(--sm-grey);
		font-weight: normal;
		background: var(--sm-cream);
		border-top: 1px solid var(--sm-cream-hover);
	}

	.site-menu .sub-menu a:hover,
	.site-menu .sub-menu a:focus {
		background: var(--sm-cream-hover);
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-menu *,
	.site-menu *::before,
	.site-menu *::after {
		transition: none !important;
	}
}