/* WM HF Builder — frontend wrapper styles */

/* .wm-hf-header and .wm-hf-footer have no visual styles of their own;
   all layout and appearance come from the Elementor template inside.   */


/* ── Transparent header utility ──────────────────────────────────────────────
 *
 * Makes a header float transparently over page content (e.g. a full-width
 * CPT slider) while keeping nav links, logo, and the hamburger button fully
 * clickable. Slider arrows, dots, and drag work as normal.
 *
 * Usage
 * ─────
 * 1. Remove any z-index: -1 you may have added to the slider widget.
 * 2. In the Elementor editor, open your header template.
 * 3. Click the top-level Section / Container → Advanced → CSS Classes.
 * 4. Add:  wm-transparent-header
 * 5. Make sure the section background is transparent (or semi-transparent).
 * 6. Give it a high z-index (e.g. 100) in the section's Advanced settings.
 *
 * How it works
 * ────────────
 * pointer-events: none on the section makes all transparent gaps invisible
 * to the browser's hit-testing, so mouse clicks and touch events pass
 * straight through to the slider behind. The rules below re-enable
 * pointer-events on every real interactive element so navigation still works.
 * ──────────────────────────────────────────────────────────────────────────── */

.wm-hf-header .wm-transparent-header {
    pointer-events: none;
}

/* Standard interactive HTML elements */
.wm-hf-header .wm-transparent-header a,
.wm-hf-header .wm-transparent-header button,
.wm-hf-header .wm-transparent-header input,
.wm-hf-header .wm-transparent-header select,
.wm-hf-header .wm-transparent-header textarea,
.wm-hf-header .wm-transparent-header [role="button"],
.wm-hf-header .wm-transparent-header [onclick] {
    pointer-events: auto;
}

/* WM Nav Menu widget — re-enable on the whole widget so the mobile
   drawer toggle, dropdowns, and close overlay all work correctly       */
.wm-hf-header .wm-transparent-header .wm-nav-menu,
.wm-hf-header .wm-transparent-header .wm-nav-menu * {
    pointer-events: auto;
}