<%
  var _phoneLabel = String(site.phone || '').trim();
  var _tel = String(_phoneLabel || '').replace(/[^0-9+]/g, '');
  if (!_tel) _tel = '+1';
%>
<div class="fabCall" data-phone-label="<%= _phoneLabel %>" data-tel="<%= _tel %>">
  <a href="tel:<%= _tel %>" class="fab-call" aria-label="Call now" title="Call <%= _phoneLabel %>">
    <svg class="fab-call__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path fill="currentColor" d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
    </svg>
  </a>

  <div class="fabCall__popup" aria-label="Call us">
    <a class="fabCall__popupCta" href="tel:<%= _tel %>">
      <span class="fabCall__ctaTop">CALL NOW</span>
      <span class="fabCall__ctaBottom"><%= _phoneLabel %></span>
    </a>
  </div>
</div>

<script>
(function () {
  var mq = window.matchMedia("(max-width: 1024px)");
  var HEADER_SEL = ".header .nav__dropdown";
  var MENU_SEL = ".nav__menu";

  function eachDropdown(fn) {
    document.querySelectorAll(HEADER_SEL).forEach(fn);
  }

  function clearFixed(menu) {
    if (!menu || menu.dataset.navViewportFixed !== "1") return;
    menu.style.position = "";
    menu.style.left = "";
    menu.style.right = "";
    menu.style.top = "";
    menu.style.width = "";
    menu.style.maxWidth = "";
    menu.style.maxHeight = "";
    menu.style.transform = "";
    menu.style.zIndex = "";
    delete menu.dataset.navViewportFixed;
  }

  function placeMenus() {
    if (!mq.matches) {
      eachDropdown(function (dd) {
        clearFixed(dd.querySelector(MENU_SEL));
      });
      return;
    }

    eachDropdown(function (dd) {
      var menu = dd.querySelector(MENU_SEL);
      if (!menu) return;

      var open =
        dd.matches(":hover") ||
        dd.matches(":focus-within") ||
        (document.activeElement && dd.contains(document.activeElement));

      if (!open) {
        clearFixed(menu);
        return;
      }

      var trigger = dd.querySelector(".nav__link--btn") || dd;
      var r = trigger.getBoundingClientRect();
      var gap = 8;
      var inset = 24;
      var topPx = r.bottom + gap;
      /* Smaller panel: cap height (~42% viewport or 260px) and width (300px max), centered */
      var maxPanelW = Math.min(300, window.innerWidth - 2 * inset);
      var maxPanelH = Math.min(Math.floor(window.innerHeight * 0.42), 260);
      var available = window.innerHeight - topPx - 16;
      var maxH = Math.max(140, Math.min(available, maxPanelH));

      menu.style.position = "fixed";
      menu.style.left = "50%";
      menu.style.right = "auto";
      menu.style.width = "100%";
      menu.style.maxWidth = maxPanelW + "px";
      menu.style.top = topPx + "px";
      menu.style.maxHeight = maxH + "px";
      menu.style.transform = "translateX(-50%)";
      menu.style.zIndex = "300";
      menu.dataset.navViewportFixed = "1";
    });
  }

  function onWin() {
    placeMenus();
  }

  document.addEventListener("focusin", onWin, true);
  document.addEventListener("focusout", function () {
    window.setTimeout(placeMenus, 0);
  }, true);
  document.addEventListener("scroll", onWin, { passive: true });
  window.addEventListener("resize", onWin);
  if (mq.addEventListener) mq.addEventListener("change", onWin);

  eachDropdown(function (dd) {
    dd.addEventListener("mouseenter", onWin);
    dd.addEventListener("mouseleave", onWin);
    dd.addEventListener("touchstart", onWin, { passive: true });
  });

  document.addEventListener("DOMContentLoaded", onWin);
})();
</script>
