/* Vanilla replacements for the Elementor/HFE JS behaviours the static blog needs.
   Keeps the build free of jQuery + Elementor frontend JS. */

/* Elementor popups are normally hidden + modalised by JS. Hide by default so the
   popup template (e.g. the contact form) doesn't render inline in the page. */
.elementor-location-popup { display: none; }

/* --- popup modal (opened by CTA buttons) --- */
.blog-popup-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.blog-popup-box {
  position: relative; width: 100%; max-width: 640px;
  max-height: 90vh; overflow: auto; background: #fff;
}
.blog-popup-box .elementor-location-popup { display: block; }
.blog-popup-close {
  position: absolute; top: 8px; inset-inline-end: 12px; z-index: 10;
  background: none; border: 0; font-size: 30px; line-height: 1;
  cursor: pointer; color: #1f2124;
}

/* --- mobile/tablet menu dropdown (HFE full-width, normally JS-positioned) --- */
/* position:fixed escapes Elementor's nested positioned containers; the `top`
   offset is set inline by blog-interactions.js to the header's bottom edge.
   !important is required because this file loads before the HFE stylesheets. */
.hfe-nav-menu__toggle.hfe-active-menu + .hfe-nav-menu__layout-horizontal {
  position: fixed !important; left: 0 !important; right: 0 !important; width: 100% !important;
  background: #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
  z-index: 9999; padding: 8px 24px; max-height: 80vh; overflow: auto;
}
.hfe-nav-menu__toggle.hfe-active-menu + .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
  flex-direction: column !important; width: 100% !important; align-items: flex-start;
}
.hfe-nav-menu__toggle.hfe-active-menu + .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li {
  width: 100% !important;
}

/* --- sticky header (Elementor sticky:top, applied on scroll) --- */
.blog-sticky-active {
  position: fixed !important; top: 0; left: 0; width: 100%; z-index: 9999;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}