/*
 * Music Experiences shared site shell
 * Presentation only. Navigation/account behavior belongs to the platform plugin.
 */

:root {
	--me-shell-ink: #272128;
	--me-shell-surface: #ffffff;
	--me-shell-shadow: 0 8px 26px rgba(31, 24, 31, 0.07);
}

/* Remove legacy Listeo header geometry so one layout owns the shell. */
html body #header-container,
html body #header-container #header,
html body #header-container #header.cloned,
html body #header-container #header .container,
html body #header-container .left-side,
html body #header-container .mmenu-trigger,
html body #header-container .mmenu-trigger button {
	border: 0 !important;
	outline: 0 !important;
}

html body #header-container,
html body #header-container #header:not(.cloned) {
	box-shadow: none !important;
}

html body #header-container #header.cloned {
	box-shadow: var(--me-shell-shadow) !important;
}

html body #header-container #header .container,
html body #header-container .left-side {
	overflow: visible !important;
}

html body #header-container #navigation,
html body #header-container .right-side {
	display: none !important;
}

html body #header-container .left-side {
	display: flex !important;
	align-items: center !important;
	visibility: visible !important;
	float: none !important;
	min-width: 0 !important;
}

html body #header-container #logo {
	display: block !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

html body #header-container #logo a {
	display: block !important;
	/* Dark-letter mark for white header surfaces. */
	background-image: url('https://musicexperiences.com/wp-content/uploads/2025/09/Music-experiences-logo-white-background-black-letters-scaled-header-cropped.png') !important;
	background-repeat: no-repeat !important;
	background-position: left center !important;
	background-size: contain !important;
	filter: none !important;
	opacity: 1 !important;
	image-rendering: auto !important;
}

html body.transparent-header #header-container #header:not(.cloned) #logo a {
	/* White-letter mark on the image-backed transparent desktop header. */
	background-image: url('https://musicexperiences.com/wp-content/uploads/2025/09/Music-experiences-logo-black-background-white-letters-scaled-header-cropped.png') !important;
}

html body #header-container #logo img {
	display: block !important;
	margin: 0 !important;
	filter: none !important;
	opacity: 0 !important;
}

html body #header-container .mmenu-trigger {
	position: static !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	float: none !important;
	margin-left: auto !important;
	margin-right: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

html body #header-container .mmenu-trigger button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	border-radius: 10px !important;
	background: transparent !important;
	box-shadow: none !important;
	transform: none !important;
}

html body #header-container .hamburger-box {
	width: 25px !important;
	height: 19px !important;
}

html body #header-container .hamburger-inner,
html body #header-container .hamburger-inner::before,
html body #header-container .hamburger-inner::after {
	width: 25px !important;
	height: 2px !important;
	background: var(--me-shell-ink) !important;
}

html body.transparent-header #header-container #header:not(.cloned) .hamburger-inner,
html body.transparent-header #header-container #header:not(.cloned) .hamburger-inner::before,
html body.transparent-header #header-container #header:not(.cloned) .hamburger-inner::after {
	background: #ffffff !important;
}

/* Desktop shell. */
@media (min-width: 992px) {
	html body #header-container #header,
	html body #header-container #header.cloned,
	html body #header-container #header .container,
	html body #header-container #header.cloned .container,
	html body #header-container .left-side,
	html body #header-container #header.cloned .left-side {
		height: 104px !important;
		min-height: 104px !important;
	}

	html body #header-container #header .container,
	html body #header-container #header.cloned .container {
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 48px !important;
	}

	html body #header-container .left-side,
	html body #header-container #header.cloned .left-side {
		width: 100% !important;
		max-width: none !important;
	}

	html body #header-container #logo {
		flex: 0 0 180px !important;
		width: 180px !important;
		height: 44px !important;
	}

	html body #header-container #logo a,
	html body #header-container #logo img {
		width: 180px !important;
		height: 44px !important;
		max-width: none !important;
		max-height: none !important;
	}

	html body #header-container .mmenu-trigger,
	html body #header-container .mmenu-trigger button {
		width: 46px !important;
		height: 46px !important;
		flex-basis: 46px !important;
	}

	html body #header-container .mmenu-trigger button {
		padding: 10px !important;
	}
}

/* Tablet + mobile shell. Keep the menu pinned to the right edge. */
@media (max-width: 991px) {
	html body #header-container {
		height: 74px !important;
		min-height: 74px !important;
		max-height: 74px !important;
		margin: 0 !important;
		padding: 0 !important;
		background: var(--me-shell-surface) !important;
		overflow: visible !important;
	}

	html body #header-container #header:not(.cloned),
	html body #header-container #header:not(.cloned) .container,
	html body #header-container #header:not(.cloned) .left-side {
		height: 74px !important;
		min-height: 74px !important;
		max-height: 74px !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		background: var(--me-shell-surface) !important;
	}

	html body #header-container #header.cloned {
		display: none !important;
		height: 0 !important;
		min-height: 0 !important;
		max-height: 0 !important;
		overflow: hidden !important;
	}

	html body #header-container #header .container {
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-left: max(18px, env(safe-area-inset-left)) !important;
		padding-right: max(18px, env(safe-area-inset-right)) !important;
	}

	html body #header-container .left-side {
		justify-content: flex-start !important;
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: none !important;
	}

	html body #header-container #logo {
		flex: 0 0 168px !important;
		width: 168px !important;
		height: 44px !important;
		margin-right: 0 !important;
		transform: none !important;
	}

	html body #header-container #logo a,
	html body #header-container #logo img {
		width: 168px !important;
		height: 44px !important;
		max-width: none !important;
		max-height: none !important;
	}

	html body #header-container .mmenu-trigger,
	html body #header-container .mmenu-trigger button {
		flex: 0 0 46px !important;
		width: 46px !important;
		height: 46px !important;
	}

	html body #header-container .mmenu-trigger {
		margin-left: auto !important;
		margin-right: 0 !important;
	}

	html body #header-container .mmenu-trigger button {
		padding: 10px !important;
	}

	/* Listeo keeps the phone header on a white surface even when the page has
	 * the transparent-header class. Keep the dark-letter mark and dark menu. */
	html body #header-container #header:not(.cloned) #logo a,
	html body.transparent-header #header-container #header:not(.cloned) #logo a {
		background-image: none !important;
	}

	html body #header-container #header:not(.cloned) #logo img,
	html body.transparent-header #header-container #header:not(.cloned) #logo img {
		content: url('https://musicexperiences.com/wp-content/uploads/2025/09/Music-experiences-logo-white-background-black-letters-scaled-header-cropped.png') !important;
		display: block !important;
		opacity: 1 !important;
		filter: none !important;
		object-fit: contain !important;
		object-position: left center !important;
	}

	html body.transparent-header #header-container #header:not(.cloned) .hamburger-inner,
	html body.transparent-header #header-container #header:not(.cloned) .hamburger-inner::before,
	html body.transparent-header #header-container #header:not(.cloned) .hamburger-inner::after {
		background: var(--me-shell-ink) !important;
	}
}