/* =========================================================================
   Malta Philharmonic Orchestra — main navigation
   Figma: Main_navigation (27:3914) · Menu (28:4961) · Submenu (223:5442)
          Main_navigation / scrolled (151:16028)

   Every rule is prefixed with #top (Enfold's page wrapper) so it outranks
   the theme's own header/menu defaults. The header must therefore be
   rendered INSIDE #top — the [mpo_header] shortcode and the template tag
   both are. Custom properties stay on :root so they cascade normally.

   The two header states (transparent-over-hero and solid-on-scroll) only
   re-declare a handful of colour variables — the layout rules are written
   once and reused by both states, and by the mobile panel.
   ========================================================================= */

:root {
	/* Brand */
	--mpo-purple: #573359;
	--mpo-cream: #e6e1cf;
	--mpo-white: #ffffff;
	--mpo-black: #000000;

	/* Type */
	--mpo-font: "Segment", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--mpo-font-size: 17px;
	--mpo-line-height: 25px;

	/* Metrics — the design values are hit at 1920px and scale down fluidly,
	   so the bar never overflows on narrower desktops. */
	--mpo-header-height: 90px;
	--mpo-logo-inset: 88px;
	--mpo-logo-height: 72px;
	--mpo-logo-pad-x: clamp(16px, 1.67vw, 32px);
	--mpo-logo-pad-y: 8px;
	--mpo-cta-pad-x: clamp(28px, 4.58vw, 88px);
	--mpo-nav-gap: clamp(14px, 1.67vw, 32px);
	--mpo-group-gap: clamp(20px, 3.33vw, 64px);
	--mpo-underline-offset: 0px;

	/* Panels */
	--mpo-panel-width: 297px;
	--mpo-panel-width-sub: 144px;
	--mpo-panel-pad: 14px 16px 14px 20px;
	--mpo-panel-rule: rgba(0, 0, 0, 0.12);
	--mpo-panel-shadow:
		0 19px 21px rgba(0, 0, 0, 0.08),
		0 77px 38.5px rgba(0, 0, 0, 0.07),
		0 172px 51.5px rgba(0, 0, 0, 0.04);

	--mpo-transition: 0.3s ease;
	--mpo-z: 9990;
}

/* -------------------------------------------------------------------------
   Header shell + state variables
   ---------------------------------------------------------------------- */

#top .mpo-header {
	/* Solid state (default, and the scrolled state of a transparent header) */
	--mpo-bar-bg: var(--mpo-purple);
	--mpo-ink: var(--mpo-cream);
	--mpo-ink-active: var(--mpo-white);
	--mpo-underline: var(--mpo-cream);
	--mpo-rule: rgba(230, 225, 207, 0.2);
	--mpo-cta-bg: var(--mpo-cream);
	--mpo-cta-ink: var(--mpo-purple);

	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	z-index: var(--mpo-z);
	box-sizing: border-box;
	background-color: var(--mpo-bar-bg);
	border-bottom: 1px solid var(--mpo-rule);
	font-family: var(--mpo-font);
	transition: background-color var(--mpo-transition), border-color var(--mpo-transition);
}

#top .mpo-header--sticky {
	position: fixed;
}

/* Transparent over the hero, until the page scrolls */
#top .mpo-header--transparent:not(.is-scrolled) {
	--mpo-bar-bg: transparent;
	--mpo-ink: var(--mpo-white);
	--mpo-ink-active: var(--mpo-white);
	--mpo-underline: var(--mpo-white);
	--mpo-rule: rgba(255, 255, 255, 0.4);
	--mpo-cta-bg: var(--mpo-white);
	--mpo-cta-ink: var(--mpo-black);
}

/* Reserves the space a fixed, solid header would otherwise cover */
#top .mpo-header__spacer {
	height: var(--mpo-header-height);
}

#top .mpo-header *,
#top .mpo-header *::before,
#top .mpo-header *::after {
	box-sizing: border-box;
}

#top .mpo-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--mpo-header-height);
	/* Flush with the screen edge — the left inset lives on the logo itself */
	padding-left: 0;
}

#top .mpo-header__start,
#top .mpo-header__end {
	display: flex;
	align-items: stretch;
	align-self: stretch;
	gap: var(--mpo-group-gap);
}

/* -------------------------------------------------------------------------
   Logo — always sits in a white block
   ---------------------------------------------------------------------- */

#top .mpo-header__logo {
	display: flex;
	align-self: stretch;
	height: 100%;
	align-items: center;
	justify-content: center;
	/* No left padding here — the inset is on the logo itself, so
	   --mpo-logo-inset is the true distance from the screen edge. */
	padding: var(--mpo-logo-pad-y) var(--mpo-logo-pad-x) var(--mpo-logo-pad-y) 0;
	background-color: var(--mpo-white);
	text-decoration: none;
	line-height: 0;
	box-shadow: none;
}

#top .mpo-header__logo-img,
#top .mpo-header__logo-text {
	padding-left: var(--mpo-logo-inset);
}

#top .mpo-header__logo-img {
	display: block;
	width: auto;
	height: var(--mpo-logo-height);
	/* Never let the logo push the bar past its set height */
	max-height: calc(var(--mpo-header-height) - (2 * var(--mpo-logo-pad-y)));
	max-width: 100%;
}

#top .mpo-header__logo-text {
	font-size: 18px;
	font-weight: 500;
	line-height: var(--mpo-logo-height);
	color: var(--mpo-black);
	letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------------
   Level 1 — the bar
   ---------------------------------------------------------------------- */

#top .mpo-nav {
	display: flex;
	align-items: stretch;
}

#top .mpo-nav__list {
	display: flex;
	align-items: stretch;
	gap: var(--mpo-nav-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .mpo-nav__list > li {
	list-style: none;
}

#top .mpo-nav__item {
	position: relative;
	display: flex;
	align-items: stretch;
	margin: 0;
	padding: 0;
}

#top .mpo-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 0;
	color: var(--mpo-ink);
	font-family: var(--mpo-font);
	font-size: var(--mpo-font-size);
	font-weight: 500;
	line-height: var(--mpo-line-height);
	text-decoration: none;
	white-space: nowrap;
	background: none;
	transition: color var(--mpo-transition);
}

#top .mpo-nav__link:hover,
#top .mpo-nav__link:focus,
#top .mpo-nav__link:focus-visible,
#top .mpo-nav__item.is-active > .mpo-nav__link {
	color: var(--mpo-ink-active);
	text-decoration: none;
}

/* The active underline, flush with the bottom of the bar */
#top .mpo-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--mpo-underline-offset);
	height: 2px;
	background-color: var(--mpo-underline);
	opacity: 0;
	transition: opacity 0.2s ease;
}

#top .mpo-nav__item.is-active > .mpo-nav__link::after,
#top .mpo-nav__item:hover > .mpo-nav__link::after,
#top .mpo-nav__item.is-open > .mpo-nav__link::after,
#top .mpo-nav__link:focus-visible::after {
	opacity: 1;
}

#top .mpo-nav__icon,
#top .mpo-subnav__icon,
#top .mpo-header__cta-icon,
#top .mpo-header__search-icon {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	flex: 0 0 auto;
}

#top .mpo-nav__item--has-children > .mpo-nav__link .mpo-icon {
	transition: transform var(--mpo-transition);
}

#top .mpo-nav__item.is-open > .mpo-nav__link .mpo-icon--chevron-down {
	transform: rotate(180deg);
}

/* The toggle button is a mobile / keyboard affordance only */
#top .mpo-nav__toggle {
	display: none;
}

#top .mpo-nav__notice {
	margin: 0;
	color: var(--mpo-ink);
	font-size: 14px;
}

/* -------------------------------------------------------------------------
   Levels 2 + 3 — dropdown and fly-out panels
   ---------------------------------------------------------------------- */

#top .mpo-subnav {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 2;
	min-width: var(--mpo-panel-width);
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--mpo-white);
	box-shadow: var(--mpo-panel-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

#top .mpo-subnav--level-2 {
	top: 0;
	left: 100%;
	min-width: var(--mpo-panel-width-sub);
}

#top .mpo-nav__item:hover > .mpo-subnav,
#top .mpo-nav__item:focus-within > .mpo-subnav,
#top .mpo-nav__item.is-open > .mpo-subnav,
#top .mpo-subnav__item:hover > .mpo-subnav,
#top .mpo-subnav__item:focus-within > .mpo-subnav,
#top .mpo-subnav__item.is-open > .mpo-subnav {
	opacity: 1;
	visibility: visible;
	transform: none;
}

#top .mpo-subnav__item {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .mpo-subnav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: var(--mpo-panel-pad);
	border-bottom: 1px solid var(--mpo-panel-rule);
	background-color: var(--mpo-white);
	color: var(--mpo-black);
	font-family: var(--mpo-font);
	font-size: var(--mpo-font-size);
	font-weight: 500;
	line-height: var(--mpo-line-height);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

#top .mpo-subnav__item:last-child > .mpo-subnav__link {
	border-bottom: 0;
}

#top .mpo-subnav__icon {
	opacity: 0.4;
	transition: opacity 0.15s ease;
}

#top .mpo-subnav__link:hover,
#top .mpo-subnav__link:focus,
#top .mpo-subnav__link:focus-visible,
#top .mpo-subnav__item.is-active > .mpo-subnav__link,
#top .mpo-subnav__item.is-open > .mpo-subnav__link,
#top .mpo-subnav__item:hover > .mpo-subnav__link {
	background-color: var(--mpo-purple);
	border-bottom-color: transparent;
	color: var(--mpo-white);
	text-decoration: none;
}

#top .mpo-subnav__link:hover .mpo-subnav__icon,
#top .mpo-subnav__link:focus-visible .mpo-subnav__icon,
#top .mpo-subnav__item.is-active > .mpo-subnav__link .mpo-subnav__icon,
#top .mpo-subnav__item.is-open > .mpo-subnav__link .mpo-subnav__icon,
#top .mpo-subnav__item:hover > .mpo-subnav__link .mpo-subnav__icon {
	opacity: 1;
}

/* -------------------------------------------------------------------------
   Search
   ---------------------------------------------------------------------- */

#top .mpo-header__search-toggle {
	display: flex;
	align-self: center;
	align-items: center;
	gap: 8px;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	color: var(--mpo-ink);
	font-family: var(--mpo-font);
	font-size: var(--mpo-font-size);
	font-weight: 400;
	line-height: var(--mpo-line-height);
	text-transform: none;
	cursor: pointer;
	transition: color var(--mpo-transition);
}

#top .mpo-header__search-label {
	opacity: 0.56;
	white-space: nowrap;
}

#top .mpo-header__search-toggle:hover .mpo-header__search-label,
#top .mpo-header__search-toggle[aria-expanded="true"] .mpo-header__search-label {
	opacity: 1;
}

#top .mpo-header__search-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding: 24px var(--mpo-logo-inset);
	background-color: var(--mpo-white);
	box-shadow: var(--mpo-panel-shadow);
}

#top .mpo-header__search-panel[hidden] {
	display: none;
}

#top .mpo-search-form {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 720px;
	margin: 0 auto;
}

#top .mpo-search-form__icon {
	display: inline-flex;
	color: var(--mpo-purple);
}

/* Enfold styles inputs hard (#top input[type="search"]), so this one field
   needs !important to win — everything else in this file relies on #top alone. */
#top .mpo-search-form__field {
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
	margin: 0 !important;
	padding: 10px 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--mpo-panel-rule) !important;
	border-radius: 0 !important;
	box-shadow: none;
	background: none !important;
	color: var(--mpo-black) !important;
	font-family: var(--mpo-font) !important;
	font-size: var(--mpo-font-size) !important;
	line-height: var(--mpo-line-height) !important;
}

#top .mpo-search-form__field:focus {
	outline: none;
	/* Matches the !important above, otherwise the focus colour never lands */
	border-bottom-color: var(--mpo-purple) !important;
}

#top .mpo-search-form__submit {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
	padding: 12px 28px;
	border: 0;
	border-radius: 0;
	background-color: var(--mpo-purple);
	color: var(--mpo-white);
	font-family: var(--mpo-font);
	font-size: var(--mpo-font-size);
	font-weight: 500;
	line-height: var(--mpo-line-height);
	text-transform: none;
	cursor: pointer;
}

/* -------------------------------------------------------------------------
   Call to action
   ---------------------------------------------------------------------- */

#top .mpo-header__cta {
	display: flex;
	align-self: stretch;
	align-items: center;
	gap: 8px;
	padding: 0 var(--mpo-cta-pad-x);
	border: 0;
	border-radius: 0;
	background-color: var(--mpo-cta-bg);
	color: var(--mpo-cta-ink);
	font-family: var(--mpo-font);
	font-size: var(--mpo-font-size);
	font-weight: 500;
	line-height: var(--mpo-line-height);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--mpo-transition), color var(--mpo-transition), opacity 0.2s ease;
}

#top .mpo-header__cta:hover,
#top .mpo-header__cta:focus,
#top .mpo-header__cta:focus-visible {
	color: var(--mpo-cta-ink);
	text-decoration: none;
	opacity: 0.85;
}

/* -------------------------------------------------------------------------
   Burger + mobile panel
   ---------------------------------------------------------------------- */

#top .mpo-header__burger {
	display: none;
	align-self: center;
	width: auto;
	margin: 0;
	padding: 8px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	color: var(--mpo-ink);
	line-height: 0;
	cursor: pointer;
}

#top .mpo-header__burger-close {
	display: none;
}

#top .mpo-header__burger[aria-expanded="true"] .mpo-header__burger-open {
	display: none;
}

#top .mpo-header__burger[aria-expanded="true"] .mpo-header__burger-close {
	display: inline-flex;
}

#top .mpo-mobile-panel {
	position: fixed;
	top: var(--mpo-header-height);
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	padding-bottom: 40px;
	background-color: var(--mpo-purple);
	transform: translateX(100%);
	transition: transform var(--mpo-transition);
}

#top .mpo-mobile-panel[hidden] {
	display: none;
}

#top .mpo-mobile-panel.is-open {
	transform: none;
}

/* -------------------------------------------------------------------------
   Desktop refinements
   ---------------------------------------------------------------------- */

/* Below the design width there is no room for the search wording */
@media (max-width: 1500px) {
	#top .mpo-header__search-label {
		display: none;
	}
}

@media (max-width: 1279px) {
	:root {
		--mpo-logo-inset: 40px;
		--mpo-font-size: 16px;
	}
}

/* -------------------------------------------------------------------------
   Mobile / tablet — burger menu
   Placeholder behaviour until the mobile frames land in Figma.
   ---------------------------------------------------------------------- */

@media (max-width: 1023px) {
	:root {
		--mpo-header-height: 64px;
		--mpo-logo-inset: 20px;
		--mpo-logo-height: 40px;
		--mpo-logo-pad-x: 16px;
		--mpo-logo-pad-y: 6px;
		--mpo-font-size: 17px;
	}

	#top .mpo-header__inner {
		padding-right: 12px;
	}

	#top .mpo-header__end {
		gap: 8px;
	}

	#top .mpo-header__burger {
		display: inline-flex;
	}

	/* The bar keeps only the logo, search and burger */
	#top .mpo-header__inner .mpo-nav,
	#top .mpo-header__inner > .mpo-header__end > .mpo-header__cta {
		display: none;
	}

	#top .mpo-header__search-panel {
		padding: 16px;
	}

	/* --- Menu inside the panel: same classes, stacked layout --- */

	#top .mpo-nav--mobile,
	#top .mpo-nav--mobile .mpo-nav__list {
		display: block;
		width: 100%;
	}

	#top .mpo-nav--mobile .mpo-nav__item {
		display: block;
		border-bottom: 1px solid rgba(230, 225, 207, 0.2);
	}

	#top .mpo-nav--mobile .mpo-nav__link {
		padding: 16px 56px 16px 20px;
		color: var(--mpo-cream);
	}

	#top .mpo-nav--mobile .mpo-nav__item.is-active > .mpo-nav__link {
		color: var(--mpo-white);
	}

	/* No underline treatment on mobile rows */
	#top .mpo-nav--mobile .mpo-nav__link::after {
		content: none;
	}

	/* The inline chevron is replaced by the toggle button */
	#top .mpo-nav--mobile .mpo-nav__item--has-children > .mpo-nav__link > .mpo-nav__icon {
		display: none;
	}

	#top .mpo-nav--mobile .mpo-nav__toggle {
		position: absolute;
		top: 0;
		right: 0;
		/* Matches the height of its own row, not the expanded accordion */
		height: calc(var(--mpo-line-height) + 32px);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: none;
		color: var(--mpo-cream);
		cursor: pointer;
	}

	#top .mpo-nav--mobile .mpo-subnav__item > .mpo-nav__toggle {
		height: calc(var(--mpo-line-height) + 28px);
	}

	#top .mpo-nav--mobile .mpo-nav__toggle .mpo-icon {
		transition: transform var(--mpo-transition);
	}

	#top .mpo-nav--mobile .is-open > .mpo-nav__toggle .mpo-icon {
		transform: rotate(180deg);
	}

	/* Accordion sub-levels — the panel styling is dropped, layout is reused */
	#top .mpo-nav--mobile .mpo-subnav {
		position: static;
		display: none;
		min-width: 0;
		background: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	#top .mpo-nav--mobile .is-open > .mpo-subnav {
		display: block;
	}

	#top .mpo-nav--mobile .mpo-subnav__link {
		padding-left: 40px;
		border-bottom: 0;
		background: none;
		color: var(--mpo-cream);
	}

	#top .mpo-nav--mobile .mpo-subnav--level-2 .mpo-subnav__link {
		padding-left: 60px;
	}

	#top .mpo-nav--mobile .mpo-subnav__item.is-active > .mpo-subnav__link,
	#top .mpo-nav--mobile .mpo-subnav__link:hover {
		background: rgba(255, 255, 255, 0.08);
		color: var(--mpo-white);
	}

	#top .mpo-header__cta--mobile {
		align-self: flex-start;
		margin: 24px 20px 0;
		padding: 16px 32px;
		background-color: var(--mpo-cream);
		color: var(--mpo-purple);
	}
}

/* -------------------------------------------------------------------------
   Utilities
   ---------------------------------------------------------------------- */

#top .mpo-header .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

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

@media (prefers-reduced-motion: reduce) {
	#top .mpo-header,
	#top .mpo-header *,
	#top .mpo-mobile-panel {
		transition-duration: 0.01ms !important;
	}
}