/**
 * Full-screen mobile navigation overlay.
 *
 * Markup: views/partials/mobile-menu.twig (+ the toggle in views/partials/header.twig)
 * Behaviour: baker50/assets/js/mobile-menu.js
 * Enqueued in lib/scripts.php.
 *
 * Breakpoint note: every media query here is keyed to 992/993px so it lines up exactly with
 * Max Mega Menu's `responsive_breakpoint` in lib/custom/mega-menu-theme.php. Bootstrap's
 * `d-lg-none` switches at 992px (>=), which is one pixel off from MMM and leaves a dead zone
 * at exactly 992px where neither menu is reachable — hence the hand-written queries.
 *
 * Colours are the site brand tokens: #231F20 (nav bar / near-black) and #F48F24 (orange).
 */

/* ==========================================================================
   1. Hamburger toggle (lives in the header bar)
   ========================================================================== */

.baker-mobile-nav-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	margin-left: 8px;
	background: transparent;
	border: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* Focus rings are drawn with box-shadow, not outline. The theme's base CSS carries
   `a:hover, a:focus, a:active, button:hover, button:focus, button:active { outline: none
   !important }` (main.css ~7176) — a global !important that no amount of specificity can
   beat, so every `outline` declaration in this file would render as nothing. box-shadow is
   out of that rule's reach. Verified in-browser: outline-style computed to `none` on the
   focused close button before this changed. */
.baker-mobile-nav-toggle:focus-visible,
.baker-mobile-nav__close:focus-visible,
.baker-mobile-nav__link:focus-visible,
.baker-mobile-nav__expand:focus-visible,
.baker-mobile-nav__sublink:focus-visible {
	box-shadow: inset 0 0 0 2px #F48F24;
}

.baker-mobile-nav-toggle__bar {
	display: block;
	width: 26px;
	height: 2px;
	background: #FFFFFF;
	border-radius: 1px;
	transition: background-color 0.2s ease;
}

.baker-mobile-nav-toggle:hover .baker-mobile-nav-toggle__bar {
	background: #F48F24;
}

/* ==========================================================================
   2. Overlay shell
   ========================================================================== */

.baker-mobile-nav {
	/* Horizontal gutter, matched to #main-nav .container-fluid so the overlay's logo lands
	   exactly on top of the header's when the menu opens. 15px is Bootstrap's
	   .container-fluid padding; mobile-menu.js re-measures the real header on open, so this
	   value only has to carry until then. */
	--baker-mobile-nav-gutter: 15px;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/* Above .sticky-top (1020) and the Bootstrap modal backdrop (1040); the search modal
	   (1050) is never open at the same time. */
	z-index: 1060;
	background: #231F20;
	opacity: 0;
	visibility: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	/* visibility is stepped, not eased: held until the fade-out finishes on the way out (the
	   0.25s delay), flipped instantly on the way in. Easing it in both directions leaves the
	   overlay inside a visibility transition for 250ms after opening, and the browser refuses
	   to move focus into a subtree it still considers hidden — mobile-menu.js focuses the
	   close button the moment the menu opens. */
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.baker-mobile-nav.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.baker-mobile-nav__panel {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding-bottom: 48px;
}

/* The theme's base styles put `transition: all .2s ease-out` on links. `all` sweeps up the
   visibility this overlay inherits down to its children, and an anchor left mid-visibility-
   transition is one the browser will not focus — it stranded the logo link outside the tab
   order. Naming the properties keeps visibility out of it. Deliberately not on
   .baker-mobile-nav__panel-wrap, whose own stepped visibility transition is what closes
   collapsed sub-menus to the keyboard. */
.baker-mobile-nav a,
.baker-mobile-nav button {
	transition-property: color, background-color, border-color;
}

/* Scroll lock while the overlay is open. Set on <html> by the JS. */
.baker-mobile-nav-is-open,
.baker-mobile-nav-is-open body {
	overflow: hidden;
}

/* ==========================================================================
   3. Top bar: logo + close
   ========================================================================== */

/* The vertical padding and the right padding are both overwritten inline by
   mobile-menu.js on open — see the bar-alignment block there. */
.baker-mobile-nav__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px var(--baker-mobile-nav-gutter, 15px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.baker-mobile-nav__logo {
	display: block;
	width: auto;
	max-width: 200px;
	max-height: 52px;
}

.baker-mobile-nav__wordmark {
	color: #FFFFFF;
	font-size: 20px;
	font-weight: 700;
}

.baker-mobile-nav__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	color: #F48F24;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color 0.2s ease;
}

/* Hover only. The JS parks focus on this button every time the menu opens, and Chrome will
   match :focus-visible on that programmatic focus whenever the previous interaction looked
   like a keypress — so any focus-driven colour change leaves the X looking permanently
   hovered. Keyboard users get the outline instead, which is the affordance that matters. */
.baker-mobile-nav__close:hover {
	color: #FFFFFF;
}


/* ==========================================================================
   4. Search
   ========================================================================== */

.baker-mobile-nav__search {
	padding: 20px var(--baker-mobile-nav-gutter, 15px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* search.css supplies the look (white input flush against an orange button) via the
   .searchwp-form class on the form. Only the touch sizing changes here: its 38px height is a
   desktop control, below the 44px minimum tap target. */
.baker-mobile-nav__search .swp-input--search,
.baker-mobile-nav__search .swp-button,
.baker-mobile-nav__search .search-submit {
	height: 48px;
}

/* ==========================================================================
   5. Menu list
   ========================================================================== */

.baker-mobile-nav__nav {
	flex: 1 1 auto;
	padding: 8px 0 0;
}

.baker-mobile-nav__list,
.baker-mobile-nav__sublist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.baker-mobile-nav__item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.baker-mobile-nav__row {
	display: flex;
	align-items: stretch;
}

/* The link is also the accordion trigger when the item has no real destination, so the two
   share a single set of box rules. */
.baker-mobile-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 18px var(--baker-mobile-nav-gutter, 15px);
	background: transparent;
	border: 0;
	color: #FFFFFF;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-align: left;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color 0.2s ease;
}

.baker-mobile-nav__link:hover,
.baker-mobile-nav__link:focus,
.baker-mobile-nav__item.is-current > .baker-mobile-nav__link,
.baker-mobile-nav__item.is-current > .baker-mobile-nav__row > .baker-mobile-nav__link {
	color: #F48F24;
	text-decoration: none;
}

/* When a parent has a real destination the chevron is a separate control so the label stays
   tappable as a link. */
.baker-mobile-nav__row > .baker-mobile-nav__link {
	width: auto;
	flex: 1 1 auto;
	padding-right: 8px;
}

.baker-mobile-nav__expand {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 60px;
	padding: 0;
	background: transparent;
	border: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.12);
	color: #F48F24;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.baker-mobile-nav__chevron {
	flex: 0 0 auto;
	color: #F48F24;
	font-size: 18px;
	transition: transform 0.25s ease;
}

[aria-expanded="true"] .baker-mobile-nav__chevron {
	transform: rotate(180deg);
}

.baker-mobile-nav__link:focus,
.baker-mobile-nav__expand:focus {
	outline: 2px solid #F48F24;
	outline-offset: -2px;
}

.baker-mobile-nav__link:focus:not(:focus-visible),
.baker-mobile-nav__expand:focus:not(:focus-visible) {
	outline: none;
}

/* ==========================================================================
   6. Sub-menu accordion
   ========================================================================== */

/* Collapsed by default so the panel is closed before the JS runs; the JS drives max-height
   off scrollHeight so the panel can be any length.

   visibility, stepped the same way as the overlay itself, is what actually takes a collapsed
   panel's links out of the tab order. max-height:0 + overflow:hidden only clips them
   visually — they keep their layout boxes and stay focusable, so Tab would walk through a
   dozen invisible links. Held visible until the collapse finishes on the way out. */
.baker-mobile-nav__panel-wrap {
	max-height: 0;
	overflow: hidden;
	visibility: hidden;
	transition: max-height 0.3s ease, visibility 0s linear 0.3s;
}

.baker-mobile-nav__panel-wrap.is-open {
	visibility: visible;
	transition: max-height 0.3s ease, visibility 0s linear 0s;
}

.baker-mobile-nav__sublist {
	padding: 4px 0 16px;
	background: rgba(255, 255, 255, 0.04);
}

.baker-mobile-nav__sublink {
	display: block;
	padding: 11px var(--baker-mobile-nav-gutter, 15px) 11px calc(var(--baker-mobile-nav-gutter, 15px) + 21px);
	color: rgba(255, 255, 255, 0.85);
	font-size: 16px;
	line-height: 1.3;
	text-decoration: none;
	transition: color 0.2s ease;
}

.baker-mobile-nav__sublink:hover,
.baker-mobile-nav__sublink:focus,
.baker-mobile-nav__subitem.is-current > .baker-mobile-nav__sublink {
	color: #F48F24;
	text-decoration: none;
}

.baker-mobile-nav__sublist--nested {
	padding: 0 0 8px;
	background: transparent;
}

.baker-mobile-nav__sublist--nested .baker-mobile-nav__sublink {
	padding-left: calc(var(--baker-mobile-nav-gutter, 15px) + 37px);
	font-size: 15px;
	color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   7. Breakpoint switching
   ========================================================================== */

/* Mobile: Max Mega Menu's own toggle and panels are replaced by this overlay. MMM still
   prints its markup — hiding the wrap is what takes it out of play.
   Scoped to .has-baker-mobile-nav (added by _usdp_mobile_nav_body_class in
   lib/custom/filters.php) so that if the Mobile Navigation menu is ever missing or emptied,
   MMM's own mobile menu stays reachable instead of phones losing navigation entirely. */
@media (max-width: 992px) {
	.has-baker-mobile-nav #mega-menu-wrap-primary-navigation {
		display: none !important;
	}
}

/* Desktop: the mega menu takes over, so the toggle and the overlay go away entirely. */
@media (min-width: 993px) {
	.baker-mobile-nav-toggle,
	.baker-mobile-nav {
		display: none !important;
	}
}

/* Reduced motion: keep the state changes, drop the animation.
   The .is-open variants have to be listed too. They are two-class selectors (0,2,0) against
   this block's one (0,1,0), and a media query adds no specificity — so without them the
   opening fade and the accordion expand still animated, i.e. every transition the user
   actually triggers. Only the reverse direction was being suppressed. */
@media (prefers-reduced-motion: reduce) {
	.baker-mobile-nav,
	.baker-mobile-nav.is-open,
	.baker-mobile-nav__panel-wrap,
	.baker-mobile-nav__panel-wrap.is-open,
	.baker-mobile-nav__chevron {
		transition: none;
	}
}