/* Hop On Hop Off — header/footer interactions (child theme). Ported from the mockup's main.js: burger menu, Tours submenu, sticky header over a hero (solid otherwise), and the footer "back to top" button. */ (function () { "use strict"; var header = document.getElementById("siteHeader"); var nav = document.getElementById("primaryNav"); var burger = document.getElementById("burger"); var navToggle = nav && nav.querySelector(".nav__toggle"); var mqDesktop = window.matchMedia("(min-width: 60.0625rem)"); /* ---------- mobile menu ---------- */ function closeMenu() { if (!nav || !burger) return; nav.classList.remove("is-open"); burger.setAttribute("aria-expanded", "false"); } if (burger && nav) { burger.addEventListener("click", function () { var open = nav.classList.toggle("is-open"); burger.setAttribute("aria-expanded", String(open)); }); document.addEventListener("click", function (e) { if (mqDesktop.matches) return; if (!nav.contains(e.target) && !burger.contains(e.target)) closeMenu(); }); nav.addEventListener("click", function (e) { if (!mqDesktop.matches && e.target.closest("a")) closeMenu(); }); } document.addEventListener("keydown", function (e) { if (e.key !== "Escape") return; closeMenu(); if (navToggle) navToggle.setAttribute("aria-expanded", "false"); }); mqDesktop.addEventListener("change", function (e) { if (e.matches) closeMenu(); }); /* ---------- Tours submenu ---------- */ if (navToggle) { navToggle.addEventListener("click", function () { var open = navToggle.getAttribute("aria-expanded") === "true"; navToggle.setAttribute("aria-expanded", String(!open)); }); } /* ---------- header: sticky over a hero, solid elsewhere ---------- */ var hero = document.querySelector(".hero, .hero-tour, .hero--archive"); if (header) { if (hero && "IntersectionObserver" in window) { var sentinel = document.createElement("div"); sentinel.setAttribute("aria-hidden", "true"); sentinel.style.cssText = "position:absolute;top:0;left:0;width:1px;height:60vh;pointer-events:none"; hero.appendChild(sentinel); new IntersectionObserver(function (entries) { header.classList.toggle("is-stuck", !entries[0].isIntersecting); }, { threshold: 0 }).observe(sentinel); } else { /* No hero to overlay — show a readable solid header from the start. */ header.classList.add("is-solid"); } } /* ---------- header search: expand, then submit ---------- */ var search = document.querySelector(".header__search"); if (search) { var searchInput = search.querySelector(".header__search-input"); var searchBtn = search.querySelector(".header__search-btn"); if (searchInput && searchBtn) { searchBtn.addEventListener("click", function (e) { if (!search.classList.contains("is-open")) { e.preventDefault(); search.classList.add("is-open"); searchInput.focus(); } else if (!searchInput.value.trim()) { e.preventDefault(); search.classList.remove("is-open"); /* empty → collapse instead of submit */ } /* open + has text → let the form submit to the tours archive (?vc_q=) */ }); document.addEventListener("click", function (e) { if (!search.contains(e.target) && !searchInput.value.trim()) { search.classList.remove("is-open"); } }); } } /* ---------- footer: back to top ---------- */ var toTop = document.querySelector(".ring-badge--top"); if (toTop) { toTop.addEventListener("click", function (e) { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }); } })();