/* ---------------------------------------------------------------------------
 * Main nav (Max Mega Menu)
 *
 * MMM emits its own stylesheet from the plugin; we override at the
 * #mega-menu-wrap-primary scope so our rules win without `!important`.
 * Figma reference: 9163:9002 (header) → 9163:9048 (LFBC Nav).
 * ------------------------------------------------------------------------- */

#mega-menu-wrap-primary {
	background: transparent;
}

/* Hide MMM's mobile hamburger and close button at lg+ — MMM's own
 * data-breakpoint is 1024, so above that the desktop nav takes over. */
@media (min-width: 1024px) {
	#mega-menu-wrap-primary > .mega-menu-toggle,
	#mega-menu-wrap-primary > button.mega-close {
		display: none;
	}
}

/* Mobile (< lg) — toggle bar styling.
 * MMM emits a horizontal bar with left/center/right block slots; we use only
 * the right slot for the hamburger and prepend a "Menu" text label via
 * ::before (Figma 11037:18884). The "Menu" pseudo-element is decorative —
 * the button retains its own aria-label="Toggle Menu" for screen readers. */
@media (max-width: 1023.98px) {
	#mega-menu-wrap-primary .mega-menu-toggle {
		background: transparent;
		min-height: 0;
		height: auto;
		padding: 0;
		justify-content: flex-end;
	}

	#mega-menu-wrap-primary .mega-toggle-blocks-left,
	#mega-menu-wrap-primary .mega-toggle-blocks-center {
		display: none;
	}

	#mega-menu-wrap-primary .mega-toggle-blocks-right {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	#mega-menu-wrap-primary .mega-toggle-blocks-right::before {
		content: "Menu";
		font-family: "Noto Sans", sans-serif;
		font-weight: 700;
		font-size: 15px;
		line-height: 1;
		color: var(--wp--preset--color--soft-black-500, #0e0e0e);
	}

	/* Hamburger bars — override MMM's generated stylesheet (which uses
	 * chained `.mega-menu-wrap` class for higher specificity). */
	#mega-menu-wrap-primary .mega-toggle-animated-inner,
	#mega-menu-wrap-primary .mega-toggle-animated-inner::before,
	#mega-menu-wrap-primary .mega-toggle-animated-inner::after {
		background-color: var(--wp--preset--color--soft-black-500, #0e0e0e) !important;
	}
}

/* Wrap shouldn't add its own inline-leading; the ul provides exact height. */
#mega-menu-wrap-primary {
	line-height: 0;
	font-size: 0;
}

#mega-menu-wrap-primary #mega-menu-primary {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: 0;
	width: auto;
	background: transparent;
	padding: 0;
	margin: 0;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
	flex: 0 0 auto;
	width: auto;
	background: transparent;
	margin: 0;
	white-space: nowrap;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: auto;
	padding: 16px;
	background: transparent;
	border: 0;
	border-bottom: 8px solid var(--wp--preset--color--white, #ffffff);
	font-family: "Noto Sans", sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.4;
	color: var(--wp--preset--color--soft-black-500, #0e0e0e);
	text-transform: none;
	text-decoration: none;
}

/* Tighten top-level item spacing in the narrow desktop band (lg → xl).
 * Below xl (1280px) the row of logo + aux row + nav doesn't have enough
 * horizontal room for the default 18px / p-16 / gap-12 sizing. MMM breaks
 * to the mobile drawer below 1024px, so this only needs to cover 1024–1280. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
		padding: 12px 10px;
		gap: 8px;
		font-size: 16px;
	}
}

/* MMM's generated stylesheet (uploads/maxmegamenu/style.css, loaded before this
 * file) highlights the open-dropdown and current-page items with its default
 * dark theme (#333 background / white text). Pin those states back to the
 * resting appearance so an active/open item is visually identical to a normal
 * one — the rotating chevron is the only open-state indicator. Equal (0,2,3,0)
 * specificity to MMM's rules, but this file loads later so it wins. Placed
 * BEFORE the :hover/:focus rule below so hover/focus still wins on a current or
 * open item (also equal specificity, later in source). */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link[aria-expanded="true"],
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-parent > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
	background: transparent !important;
	color: var(--wp--preset--color--soft-black-500, #0e0e0e);
	font-weight: 700;
	text-decoration: none;
	border-bottom-color: var(--wp--preset--color--white, #ffffff);
}

/* Hover/focus only. */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus {
	background: transparent !important;
	color: var(--wp--preset--color--poppy-500, #e8506f);
	font-weight: 700;
	text-decoration: none;
	border-bottom-color: var(--wp--preset--color--poppy-500, #e8506f);
}

/* Chevron after parent items — replaces MMM's default indicator with the
 * 20×20 chevron-down used in Figma. Inline SVG mask so it inherits color. */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link > span.mega-indicator {
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	background: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link > span.mega-indicator::after {
	content: "";
	display: block;
	width: 12px;
	height: 8px;
	background: var(--wp--preset--color--poppy-500, #e8506f);
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.15s ease;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link > span.mega-indicator::after {
	transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
 * Dropdown panels (Figma 9180:11035 — Open Navigation / Our Work, Option A)
 *
 * 1st-level dropdown: oatmeal panel, rounded bottom corners, drop shadow.
 * 2nd-level items: 16px SemiBold, p-16.
 * 3rd-level items: 15px SemiBold, indented (pl-40), always visible inline
 *   beneath their parent (no flyout box).
 * ------------------------------------------------------------------------- */

/* 1st-level dropdown panel */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu {
	background-color: var(--wp--preset--color--oatmeal-700, #e9e4d8);
	border-radius: 0 0 20px 20px;
	box-shadow: 0 16px 48px 0 rgba(0, 0, 0, 0.18);
	padding: 12px 0 32px;
	width: 269px;
	min-width: 269px;
	font-size: 16px;
	line-height: 1.4;
}

/* Right-anchor the rightmost top-level dropdown so its 269px panel extends
 * leftward from the parent <li>'s right edge instead of rightward past the
 * viewport. MMM uses position:absolute + visibility:hidden for closed
 * flyouts at ≥1025px (style.css:566), so a left-anchored panel on the
 * last item expands the page's scroll width and pushes the header off-
 * screen even when no dropdown is open. Only applied at the desktop range
 * where MMM positions absolutely; below 1024 MMM switches to position:static
 * inside the mobile drawer. */
@media (min-width: 1025px) {
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:last-child > ul.mega-sub-menu {
		left: auto;
		right: 0;
	}
}

/* "About Us" (menu item 11719) is the last top-level item that carries a
 * dropdown — News & Stories, Contact Us and Search after it have none — so it
 * sits far enough right that its left-anchored panel spills past the viewport
 * on smaller desktops. In the narrow desktop band, flip it to right-anchor so
 * it opens leftward and stays on screen. Above ~1150px there's room to open
 * left-anchored (the natural direction), so the flip is scoped to the band. */
@media (min-width: 1024px) and (max-width: 1150px) {
	#mega-menu-wrap-primary #mega-menu-primary > li#mega-menu-item-11719 > ul.mega-sub-menu {
		left: auto;
		right: 0;
	}
}

/* Take closed dropdowns out of the layer tree entirely. MMM defaults to
 * position:absolute + visibility:hidden, which keeps invisible panels as
 * hit targets for DevTools' element picker right under the header. Using
 * display:none removes them from layout; @starting-style + allow-discrete
 * preserves a fade/slide-down on open. Desktop only — mobile uses static
 * positioning inside the drawer where MMM's own toggle handles it. */
@media (min-width: 1024px) {
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu {
		display: none;
		opacity: 1;
		transform: translateY(0);
		transition:
			opacity 0.2s ease,
			transform 0.2s ease,
			display 0.2s allow-discrete;
	}

	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu {
		display: block;
	}

	@starting-style {
		#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu {
			opacity: 0;
			transform: translateY(-10px);
		}
	}
}

/* Cap dropdown link width so long labels wrap from the start rather than only
 * reflowing when hover bolds them (which shifts the layout). Scoped to
 * sub-menu links so the top-level horizontal nav labels aren't clamped. */
#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu a.mega-menu-link {
	max-width: 260px;
}

/* 2nd-level items (direct children of top-level dropdown) */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
	display: block;
	padding: 16px;
	background: transparent;
	font-family: "Noto Sans", sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.4;
	color: var(--wp--preset--color--soft-black-500, #0e0e0e);
	text-decoration: none;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus {
	background:var(--wp--preset--color--oatmeal-500, #F5F3EE);
	color: var(--wp--preset--color--poppy-500, #e8506f);
	font-weight: 700;
}

/* Hide the indicator on 2nd-level parent items — their children are always
 * visible inline, so an expand/collapse arrow would be misleading. */
#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link > span.mega-indicator {
	display: none !important;
}

/* 3rd-level submenu: render inline below its parent, not as a flyout.
 * `!important` overrides MMM's `[data-effect="fade_up"]` rule which forces
 * `opacity: 0` and `transform: translate(0, 10px)` until parent toggles open. */
#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu ul.mega-sub-menu {
	position: static !important;
	display: block !important;
	visibility: visible !important;
	/*margin-left: 32px;*/
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	width: auto;
	min-width: 0;
	pointer-events: auto;
}

/* 3rd-level items */
#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
	display: block;
	padding: 8px 12px 8px 40px;
	background: transparent;
	font-family: "Noto Sans", sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	color: var(--wp--preset--color--soft-black-500, #0e0e0e);
	text-decoration: none;
}

#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus {
	background: transparent !important;
	color: var(--wp--preset--color--poppy-500, #e8506f);
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * Mobile drawer (< lg) — Figma 11037:19941 (Mobile Nav / Level 1)
 *
 * Positioning and full-width sizing are handled by MMM itself (effect_mobile
 * = "disabled" + mobile_menu_force_width = "body" via filters in
 * functions.php). MMM's JS sets the drawer width to body width and aligns
 * its left edge with the body — we just style its contents here.
 *
 * Top-level items stack vertically with 1px white separators on an
 * oatmeal-700 panel; indicator is a Poppy-500 caret-right. Sub-menu
 * styling from above continues to apply when items expand.
 * ------------------------------------------------------------------------- */

@media (max-width: 1023.98px) {
	/* Drawer panel: visual styling only. Position/width/left are set inline
	 * by MMM's JS via toggleBarForceWidth(). */
	#mega-menu-wrap-primary #mega-menu-primary {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		padding: 40px 0;
		z-index: 100;
		/* Fill the space below the header so the oatmeal panel covers the rest
		 * of the screen even with few menu items, but never exceed it. The
		 * drawer is absolutely positioned just below the header and is out of
		 * document flow, so a panel taller than the viewport (e.g. several
		 * parents expanded) can't be reached by scrolling the page — it must
		 * scroll internally instead. Bound the height to the viewport minus the
		 * measured header height (--lfbc-header-height, published by
		 * header-scroll.js) and let overflow scroll. 100dvh = dynamic vh, which
		 * accounts for mobile browser chrome. */
		min-height: calc(100dvh - var(--lfbc-header-height, 0px));
		max-height: calc(100dvh - var(--lfbc-header-height, 0px));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		/* Keep the drawer's scroll to itself. Without this, scrolling past the
		 * drawer's top/bottom chains to the page, which fires header-scroll.js's
		 * window listener and makes the sticky header hide/show fight the
		 * drawer — felt as a laggy, non-engaging scroll when reversing
		 * direction repeatedly. `contain` stops the chain without blocking
		 * page scroll elsewhere. */
		overscroll-behavior: contain;
	}

	/* Top-level items: full-width rows with white bottom rule. */
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
		width: 100%;
		border-bottom: 1px solid var(--wp--preset--color--white, #ffffff);
		white-space: normal;
	}

	/* Top-level link styling — overrides the desktop pill/border treatment. */
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		padding: 20px;
		border: 0;
		font-size: 16px;
		line-height: 1.4;
	}

	/* Active parent: in the mobile drawer, a top-level item whose sub-menu holds
	 * the current page (mega-current-menu-parent / -ancestor) gets an Oatmeal
	 * 500 background + Poppy text, so the user can see which section they're in.
	 * This intentionally re-enables an active state that the global reset above
	 * neutralises — but only on mobile (desktop stays reset). Equal (0,2,3,0)
	 * specificity to the reset; this rule is later in source so it wins, and the
	 * `!important` background beats the reset's `transparent !important`. */
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-parent > a.mega-menu-link,
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link {
		background: var(--wp--preset--color--oatmeal-500, #f5f3ee) !important;
		color: var(--wp--preset--color--poppy-500, #e8506f);
		/* 5px Poppy accent rule; padding-left drops from the base 20px to 15px so
		 * the 5px border doesn't shift the label rightward (15 + 5 = 20). */
		border-left: 5px solid var(--wp--preset--color--poppy-500, #e8506f);
		padding-left: 15px;
	}

	/* The current page itself (the sub-menu link carrying aria-current="page")
	 * also gets Poppy text. Specificity (0,2,4,0) ties the 2nd/3rd-level base
	 * colour rules; later in source so it wins. Matches both depths. */
	#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu li.mega-menu-item a.mega-menu-link[aria-current="page"] {
		color: var(--wp--preset--color--poppy-500, #e8506f) !important;
	}

	/* Caret-right indicator (10×18 filled caret, Poppy-900). Rotates 90° to
	 * point down when the parent item is toggled open. SVG path provided by
	 * design — used as a CSS mask so colour comes from `background`. */
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link > span.mega-indicator {
		width: 24px;
		height: 24px;
	}

	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link > span.mega-indicator::after {
		width: 10px;
		height: 18px;
		background: var(--wp--preset--color--poppy-900, #e3264c);
		-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpath d='M9.42 9.42L1.92 16.92a1.13 1.13 0 0 1-1.59 0 1.13 1.13 0 0 1 0-1.59l6.7-6.7L.33 1.92a1.13 1.13 0 0 1 0-1.59 1.13 1.13 0 0 1 1.59 0l7.5 7.5a1.13 1.13 0 0 1 0 1.59z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpath d='M9.42 9.42L1.92 16.92a1.13 1.13 0 0 1-1.59 0 1.13 1.13 0 0 1 0-1.59l6.7-6.7L.33 1.92a1.13 1.13 0 0 1 0-1.59 1.13 1.13 0 0 1 1.59 0l7.5 7.5a1.13 1.13 0 0 1 0 1.59z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
		transition: transform 0.15s ease;
	}

	/* Parent open: rotate caret-right → caret-down. */
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link > span.mega-indicator::after {
		transform: rotate(90deg);
	}

	/* 2nd-level submenu on mobile: strip the desktop dropdown panel styling
	 * (oatmeal box, rounded corners, shadow, fixed 269px width) and indent
	 * 40px so children visually nest under their parent. */
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu {
		background-color: transparent;
		border-radius: 0;
		box-shadow: none;
		padding: 0;
		width: auto;
		min-width: 0;
		margin-left: 40px;
	}

	/* 3rd-level submenu on mobile: indent 32px so it nests visually under its
	 * 2nd-level parent (e.g. the About Us tree). Desktop indents via the item's
	 * own padding-left; on mobile the submenu ul carries the indent instead. */
	#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu ul.mega-sub-menu {
		margin-left: 32px;
	}
}