/**
 * Mechanc — site header behaviour.
 *
 * Two things the header needs that neither the generated design system nor the
 * Elementor output supplies on its own.
 *
 * ──────── 1. Sticky on scroll ────────
 * design-system.css already declares `.site-header { position: sticky; top: 0 }`
 * and mechanc.js already toggles `.scrolled` on it, yet the header scrolled
 * away like any other block. Neither was broken: Header Footer Elementor
 * renders the whole header inside `#masthead`, and `.site-header` is an
 * Elementor container *within* it.
 *
 * A sticky element can only travel inside its own containing block, and here
 * that block is `#masthead` — exactly as tall as the header itself. So it stuck
 * to a box it already filled and had nowhere to go. The declaration was correct
 * and the element it sat on was wrong.
 *
 * `#masthead` is a child of `#page` and free to travel the length of the
 * document, so the sticky position belongs there. The design's own rule is left
 * alone: it does no harm, and it is what makes the header sticky in the
 * standalone mockup, which has no `#masthead`.
 *
 * `z-index: 150` matches the design system's value for `.site-header`, above
 * Elementor's own stacking contexts and below the mega menu's flyouts.
 *
 * The selector is `body.ehf-header #masthead` rather than the plain `#masthead`
 * it deserves to be, because Header Footer Elementor ships
 * `.ehf-header #masthead { position: relative }` — one class more specific than
 * an ID on its own, so a bare `#masthead` rule lost silently. Adding `body`
 * wins by specificity rather than by `!important`, which leaves the declaration
 * overridable in the ordinary way.
 *
 * Note `body` carries `overflow-x: hidden`, which in some browsers disables a
 * descendant's sticky positioning. Verified on the live header instead of
 * assumed: scrolled to 711px, `#masthead` stayed at top 0.
 *
 * ──────── 2. One logo per theme ────────
 * The header carries two logo widgets, both editable in Elementor:
 *
 *   `.mc-logo-dark`  — the Site Logo widget, still bound to the WordPress
 *                      customizer logo, so changing it there keeps working.
 *   `.mc-logo-light` — an Image widget holding the dark-on-light artwork.
 *
 * Swapping the file with CSS `content` or a background image was the other
 * option and is worse: it would take the logo out of the client's reach in the
 * editor and out of the accessibility tree. Two real widgets cost one hidden
 * image and keep both versions editable.
 */

body.ehf-header #masthead,
body #masthead {
	position: sticky;
	top: 0;
	z-index: 150;
}

.main-nav .mega-sub-menu.mega-menu {
	opacity: 0;
	visibility: hidden;
	display: none;
}

/* The admin bar is itself fixed at the top of the viewport, so an unadjusted
   sticky header slides underneath it for logged-in users only. */
body.admin-bar #masthead {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar #masthead {
		top: 46px;
	}
}

/* Dark is the default scheme, so the light logo starts hidden and the pair
   swaps under `body.light` — the same scoping every other light correction
   uses, which keeps dark mode untouched by all of this. */
.mc-logo-light {
	display: none;
}

body.light .mc-logo-light {
	display: block;
}

body.light .mc-logo-dark {
	display: none;
}