/* Menu Management System — frontend styles
   Colours/sizes come from CSS custom properties injected inline by the
   plugin (see class-mms-frontend.php generate_dynamic_css). Two header
   styles share most rules: "solid" (legacy always-colored gradient bar)
   and "hero" (transparent-over-homepage-hero with a light theme once
   scrolled / on inner pages). */

.mms-header {
	width: 100%;
	z-index: 9999;
	position: relative;
	box-sizing: border-box;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.mms-header * {
	box-sizing: border-box;
}

.mms-header.mms-style-solid.mms-sticky {
	position: sticky;
	top: 0;
}

/* Hero style becomes position:fixed once scrolled (JS adds .mms-scrolled and
   a matching-height placeholder so page content doesn't jump), gated on the
   "Become Fixed on Scroll" setting via the .mms-sticky class. */
.mms-header.mms-style-hero.mms-sticky.mms-scrolled {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

/* Homepage "fixed from load": the header is position:fixed the instant the
   page renders — sitting transparently on top of the hero/slider — rather
   than only becoming fixed once the visitor scrolls. Scrolling still swaps
   the theme (see .mms-home.mms-scrolled below) but the positioning itself
   doesn't change, so there's never a layout jump to compensate for. */
.mms-header.mms-style-hero.mms-sticky.mms-home.mms-fixed-from-load {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

.mms-header-placeholder {
	display: none;
	width: 100%;
}

.mms-container {
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--mms-padding-y, 18px) 24px;
	gap: 24px;
	transition: padding 0.3s ease;
}

/* ---------- SOLID STYLE (legacy, always-colored) ---------- */
.mms-header.mms-style-solid {
	background: linear-gradient(var(--mms-bg-angle, 90deg), var(--mms-bg-start, #5b0eae), var(--mms-bg-end, #8e2de2));
}

.mms-header.mms-style-solid .mms-menu-link { color: var(--mms-text, #fff); }
.mms-header.mms-style-solid .mms-menu-link:hover,
.mms-header.mms-style-solid .mms-menu-link:focus { color: var(--mms-hover, #e8d9ff); }
.mms-header.mms-style-solid .mms-menu-item.mms-current > .mms-menu-link { color: var(--mms-active, #fff); }
.mms-header.mms-style-solid .mms-sub-menu { background: var(--mms-submenu-bg, #3d0f7a); }
.mms-header.mms-style-solid .mms-sub-menu .mms-menu-link { color: var(--mms-submenu-text, #fff); }
.mms-header.mms-style-solid .mms-burger-line { background: var(--mms-text, #fff); }
.mms-header.mms-style-solid .mms-site-title,
.mms-header.mms-style-solid .mms-site-tagline { color: var(--mms-text, #fff); }

/* ---------- HERO STYLE ---------- */

/* Homepage, before scroll: fully transparent, overlay theme */
.mms-header.mms-style-hero.mms-home {
	background: transparent;
}

.mms-header.mms-style-hero.mms-home .mms-menu-link { color: var(--mms-overlay-text, #fff); }
.mms-header.mms-style-hero.mms-home .mms-menu-link:hover,
.mms-header.mms-style-hero.mms-home .mms-menu-link:focus { color: var(--mms-overlay-hover, #e8d9ff); }
.mms-header.mms-style-hero.mms-home .mms-menu-item.mms-current > .mms-menu-link { color: var(--mms-overlay-active, #fff); }
.mms-header.mms-style-hero.mms-home .mms-sub-menu { background: var(--mms-overlay-submenu-bg, #3d0f7a); }
.mms-header.mms-style-hero.mms-home .mms-sub-menu .mms-menu-link { color: var(--mms-overlay-submenu-text, #fff); }
.mms-header.mms-style-hero.mms-home .mms-burger-line { background: var(--mms-overlay-text, #fff); }
.mms-header.mms-style-hero.mms-home .mms-site-title,
.mms-header.mms-style-hero.mms-home .mms-site-tagline { color: var(--mms-overlay-text, #fff); }
.mms-header.mms-style-hero.mms-home .mms-logo-overlay { display: block; }
.mms-header.mms-style-hero.mms-home .mms-logo-light { display: none; }

/* Homepage, scrolled: top strip gone, fixed, white/light theme, normal (unchanged) height */
.mms-header.mms-style-hero.mms-home.mms-scrolled {
	background: var(--mms-light-bg, #fff);
	box-shadow: var(--mms-light-shadow, 0 4px 18px rgba(0, 0, 0, 0.12));
}
.mms-header.mms-style-hero.mms-home.mms-scrolled .mms-top-strip { display: none; }
.mms-header.mms-style-hero.mms-home.mms-scrolled .mms-menu-link { color: var(--mms-light-text, #141414); }
.mms-header.mms-style-hero.mms-home.mms-scrolled .mms-menu-link:hover,
.mms-header.mms-style-hero.mms-home.mms-scrolled .mms-menu-link:focus { color: var(--mms-light-hover, #6b21a8); }
.mms-header.mms-style-hero.mms-home.mms-scrolled .mms-menu-item.mms-current > .mms-menu-link { color: var(--mms-light-active, #c81e3a); }
.mms-header.mms-style-hero.mms-home.mms-scrolled .mms-sub-menu { background: var(--mms-light-submenu-bg, #fff); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); }
.mms-header.mms-style-hero.mms-home.mms-scrolled .mms-sub-menu .mms-menu-link { color: var(--mms-light-submenu-text, #141414); }
.mms-header.mms-style-hero.mms-home.mms-scrolled .mms-burger-line { background: var(--mms-light-text, #141414); }
.mms-header.mms-style-hero.mms-home.mms-scrolled .mms-site-title,
.mms-header.mms-style-hero.mms-home.mms-scrolled .mms-site-tagline { color: var(--mms-light-text, #141414); }
.mms-header.mms-style-hero.mms-home.mms-scrolled .mms-logo-overlay { display: none; }
.mms-header.mms-style-hero.mms-home.mms-scrolled .mms-logo-light { display: block; }

/* Inner pages: no top strip ever, light theme from the first paint */
.mms-header.mms-style-hero.mms-inner {
	background: var(--mms-light-bg, #fff);
}
.mms-header.mms-style-hero.mms-inner .mms-top-strip { display: none; }
.mms-header.mms-style-hero.mms-inner .mms-menu-link { color: var(--mms-light-text, #141414); }
.mms-header.mms-style-hero.mms-inner .mms-menu-link:hover,
.mms-header.mms-style-hero.mms-inner .mms-menu-link:focus { color: var(--mms-light-hover, #6b21a8); }
.mms-header.mms-style-hero.mms-inner .mms-menu-item.mms-current > .mms-menu-link { color: var(--mms-light-active, #c81e3a); }
.mms-header.mms-style-hero.mms-inner .mms-sub-menu { background: var(--mms-light-submenu-bg, #fff); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); }
.mms-header.mms-style-hero.mms-inner .mms-sub-menu .mms-menu-link { color: var(--mms-light-submenu-text, #141414); }
.mms-header.mms-style-hero.mms-inner .mms-burger-line { background: var(--mms-light-text, #141414); }
.mms-header.mms-style-hero.mms-inner .mms-site-title,
.mms-header.mms-style-hero.mms-inner .mms-site-tagline { color: var(--mms-light-text, #141414); }
.mms-header.mms-style-hero.mms-inner .mms-logo-overlay { display: none; }
.mms-header.mms-style-hero.mms-inner .mms-logo-light { display: block; }

/* Inner pages, scrolled: fixed + a more compact height than the homepage's scrolled state */
.mms-header.mms-style-hero.mms-inner.mms-scrolled {
	box-shadow: var(--mms-light-shadow, 0 4px 18px rgba(0, 0, 0, 0.12));
}
.mms-header.mms-style-hero.mms-inner.mms-scrolled .mms-container {
	padding-top: var(--mms-inner-compact-padding-y, 10px);
	padding-bottom: var(--mms-inner-compact-padding-y, 10px);
}
.mms-header.mms-style-hero.mms-inner.mms-scrolled .mms-logo-img {
	max-height: var(--mms-inner-compact-logo-height, 40px);
}

/* ---------- Logo / brand ---------- */
.mms-brand-link {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

.mms-logo-img {
	max-height: var(--mms-logo-height, 60px);
	width: auto;
	display: block;
	transition: max-height 0.3s ease;
}

/* Solid style only ever shows one logo image (no overlay/light class applied) */
.mms-header.mms-style-solid .mms-logo-img { display: block; }

.mms-brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.mms-site-title {
	font-weight: 800;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.mms-site-tagline {
	opacity: 0.85;
	font-size: 12px;
}

/* ---------- Top strip (hero style, homepage only) ---------- */
.mms-top-strip {
	background: var(--mms-topstrip-bg, rgba(0, 0, 0, 0.2));
	color: var(--mms-topstrip-text, #fff);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mms-top-strip-inner {
	max-width: var(--mms-max-width, 1400px);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: var(--mms-topstrip-padding-y, 10px) 24px;
	font-size: 13px;
}

.mms-top-strip-location {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--mms-topstrip-text, #fff);
}

.mms-topstrip-icon,
.mms-social-icon,
.mms-search-toggle {
	display: inline-flex;
	color: var(--mms-topstrip-icon, #fff);
}

.mms-topstrip-icon svg,
.mms-social-icon svg,
.mms-search-toggle svg,
.mms-search-form button svg {
	width: 16px;
	height: 16px;
	display: block;
}

.mms-top-strip-right {
	display: flex;
	align-items: center;
	gap: 18px;
}

.mms-social-icons {
	display: flex;
	align-items: center;
	gap: 14px;
}

.mms-social-icon {
	color: var(--mms-topstrip-icon, #fff);
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.15s ease;
}

.mms-social-icon:hover {
	opacity: 1;
}

.mms-top-strip-search {
	position: relative;
	display: flex;
	align-items: center;
}

.mms-search-toggle {
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 4px;
}

.mms-search-form {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 8px;
	display: none;
	align-items: center;
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	z-index: 10;
}

.mms-search-form.mms-search-open {
	display: flex;
}

.mms-search-form input[type="search"] {
	border: 0;
	padding: 8px 10px;
	font-size: 13px;
	width: 200px;
	outline: none;
	color: #141414;
}

.mms-search-form button[type="submit"] {
	background: #141414;
	color: #fff;
	border: 0;
	padding: 8px 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
}

/* ---------- Nav + menu (shared) ---------- */
.mms-nav-wrap {
	display: flex;
	align-items: center;
	gap: 28px;
	flex: 1;
	justify-content: flex-end;
}

.mms-mobile-nav-brand {
	display: none;
}

.mms-menu-list {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0;
	padding: 0;
}

.mms-menu-item {
	position: relative;
}

.mms-menu-item-head {
	display: flex;
	align-items: center;
}

.mms-menu-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	text-decoration: none;
	font-weight: 700;
	font-size: var(--mms-font-size, 16px);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
	padding: 8px 2px;
	transition: color 0.15s ease;
}

.mms-dropdown-indicator {
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1;
}

.mms-submenu-toggle {
	display: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-left: 4px;
	border-radius: 4px;
	color: inherit;
}

.mms-submenu-toggle-icon {
	font-size: 20px;
	line-height: 1;
	font-weight: 700;
	transition: transform 0.2s ease;
}

.mms-menu-item.mms-mobile-expanded > .mms-menu-item-head .mms-submenu-toggle-icon {
	transform: rotate(45deg);
}

/* Dropdowns (desktop = hover) */
.mms-sub-menu {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	border-radius: 8px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 100;
}

.mms-menu-item.mms-has-dropdown:hover > .mms-sub-menu,
.mms-menu-item.mms-has-dropdown:focus-within > .mms-sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mms-sub-menu .mms-menu-item {
	width: 100%;
}

.mms-sub-menu .mms-menu-link {
	display: block;
	text-transform: none;
	font-weight: 600;
	font-size: 14px;
	padding: 10px 20px;
}

.mms-sub-menu .mms-menu-link:hover {
	background: rgba(128, 128, 128, 0.12);
}

/* Nested (3rd level+) submenus slide out to the right */
.mms-sub-menu .mms-sub-menu {
	top: 0;
	left: 100%;
}

/* CTA button (same across all themes/states) */
.mms-cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--mms-cta-bg, #3d1466);
	color: var(--mms-cta-text, #fff);
	text-decoration: none;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 14px;
	padding: 12px 26px;
	border-radius: var(--mms-cta-radius, 8px);
	white-space: nowrap;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.mms-cta-button:hover,
.mms-cta-button:focus {
	background: var(--mms-cta-hover, #2a0e49);
	color: var(--mms-cta-text, #fff);
}

.mms-cta-button:active {
	transform: translateY(1px);
}

/* Mobile toggle button (hidden on desktop) */
.mms-mobile-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 8px;
}

.mms-burger-line {
	display: block;
	width: 26px;
	height: 3px;
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}

.mms-mobile-toggle[aria-expanded="true"] .mms-burger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.mms-mobile-toggle[aria-expanded="true"] .mms-burger-line:nth-child(2) { opacity: 0; }
.mms-mobile-toggle[aria-expanded="true"] .mms-burger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Responsive: collapse into a slide-down mobile menu below the breakpoint.
   The breakpoint value is admin-configurable; JS mirrors this width when
   deciding whether tap-to-expand dropdown behaviour should apply. */
@media (max-width: 992px) {
	.mms-top-strip-inner { flex-wrap: wrap; gap: 10px; }

	.mms-mobile-toggle { display: inline-flex; }

	body.mms-mobile-menu-open {
		overflow: hidden;
		position: fixed;
		left: 0;
		right: 0;
		width: 100%;
	}

	.mms-header {
		--mms-drawer-bg: #f9f9f9;
		--mms-drawer-fg: var(--mms-mobile-bg, #3d0f7a);
		--mms-drawer-surface: rgba(61, 15, 122, 0.08);
		z-index: 10003;
	}

	.mms-mobile-backdrop {
		position: fixed;
		inset: 0;
		border: 0;
		padding: 0;
		margin: 0;
		background: rgba(0, 0, 0, 0.34);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.24s ease;
		z-index: 10000;
	}

	body.mms-mobile-menu-open .mms-mobile-backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	#mms-header ~ *:not(.mms-mobile-backdrop) {
		transition: margin-left 0.28s ease;
	}

	body.mms-mobile-menu-open #mms-header ~ *:not(.mms-mobile-backdrop) {
		margin-left: var(--mms-page-shift, 0px);
	}

	.mms-nav-wrap {
		position: fixed;
		top: 0;
		left: 0;
		right: auto;
		bottom: 0;
		width: min(80vw, 420px);
		max-width: 80vw;
		height: 100dvh;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		background: var(--mms-drawer-bg);
		color: var(--mms-drawer-fg);
		padding: 16px 20px 26px;
		gap: 16px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-y;
		transform: translateX(-102%);
		opacity: 1;
		visibility: hidden;
		transition: transform 0.28s ease, visibility 0s linear 0.28s;
		z-index: 10004;
		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 22px 0 44px rgba(0, 0, 0, 0.35);
	}

	.mms-mobile-nav-brand {
		display: block;
		width: 100%;
		padding: 4px 0 10px;
		border-bottom: 1px solid rgba(61, 15, 122, 0.18);
		margin-bottom: 6px;
	}

	.mms-mobile-nav-brand .mms-brand-link {
		width: 100%;
	}

	.mms-mobile-nav-brand .mms-logo-img {
		max-height: 48px;
	}

	/* In the light drawer, prefer the standard logo variant when available. */
	.mms-mobile-nav-brand .mms-logo-overlay {
		display: none !important;
	}

	.mms-mobile-nav-brand .mms-logo-light {
		display: block !important;
	}

	.mms-header .mms-brand-link,
	.mms-header .mms-site-title,
	.mms-header .mms-site-tagline,
	.mms-header .mms-mobile-toggle,
	.mms-header .mms-burger-line {
		color: var(--mms-drawer-fg);
	}

	body.mms-mobile-menu-open .mms-header {
		background: var(--mms-drawer-bg);
	}

	body.mms-mobile-menu-open .mms-header .mms-site-title,
	body.mms-mobile-menu-open .mms-header .mms-site-tagline,
	body.mms-mobile-menu-open .mms-header .mms-burger-line {
		color: var(--mms-drawer-fg);
		background: var(--mms-drawer-fg);
	}

	.mms-nav-wrap.mms-mobile-open {
		transform: translateX(0);
		visibility: visible;
		transition: transform 0.28s ease;
	}

	.mms-menu-list {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		gap: 4px;
	}

	.mms-nav-wrap > .mms-menu-list,
	.mms-nav-wrap > ul.mms-menu-list,
	.mms-nav-wrap > ul#menu-main {
		position: static !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		z-index: auto !important;
		width: 100% !important;
	}

	.mms-menu-item,
	.mms-menu-item-head {
		width: 100%;
	}

	.mms-menu-link {
		color: var(--mms-drawer-fg) !important;
		flex: 1;
		padding: 10px 0;
		justify-content: flex-start;
		white-space: normal;
		overflow-wrap: anywhere;
		word-break: break-word;
		line-height: 1.35;
	}

	.mms-menu-link .mms-dropdown-indicator {
		display: none;
	}

	.mms-submenu-toggle {
		display: inline-flex;
		color: var(--mms-drawer-fg);
	}

	.mms-submenu-toggle[aria-expanded="true"] .mms-submenu-toggle-icon {
		transform: rotate(45deg);
	}

	.mms-sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
		background: var(--mms-drawer-surface) !important;
		box-shadow: none;
		border-radius: 4px;
		width: 100%;
		margin: 4px 0 8px;
		max-height: none;
		overflow: visible;
	}

	.mms-sub-menu .mms-menu-link {
		color: var(--mms-drawer-fg) !important;
		white-space: normal;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.mms-menu-item.mms-mobile-expanded > .mms-sub-menu { display: block; }

	.mms-sub-menu .mms-sub-menu { left: 0; top: 0; }

	.mms-cta-button { margin-top: 8px; }
}