/**
 * 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;
}
/* ──────── 3. Header search field ────────
   The HFE search widget (element 5631dde in header 1346) hard-codes
   `background-color:#ededed` on the focused input — an Elementor widget
   setting, identical in both themes — while the text colour is bound to the
   Global Colour "Text" (#DDE6F9). Pale text on a light-grey field is legible in
   light mode and invisible in dark, which is what the client reported.

   The field is light in *both* themes, so one colour serves both and no
   `body.light` copy is needed — the same "skin third-party output against one
   set of values" rule the product table follows.

   Specificity: the plugin's own rule is
   `.elementor-widget-hfe-search-button .hfe-search-form__input` (0,2,0); the
   attribute selector below makes this (0,3,1), so it wins without
   `!important`. */
.hfe-search-icon-toggle input[type="search"].hfe-search-form__input,
.hfe-input-focus .hfe-search-icon-toggle input[type="search"].hfe-search-form__input {
	color: #0062E6;
	font-weight: 700;
}

.hfe-search-icon-toggle input[type="search"].hfe-search-form__input::placeholder {
	color: #7A8BAD;
}