<style>
  html {
    scroll-behavior: smooth;
  }

  /* Leave room above anchored sections */
  #services,
  #about,
  #pricing {
    scroll-margin-top: 110px;
  }

  /* Header layout */
  .theme-header > .zpcontainer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 30px !important;
  }

  /* Desktop navigation */
  .iassist-navigation {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-left: auto;
    font-family: Arial, Helvetica, sans-serif;
  }

  .iassist-navigation a {
    color: #27356f;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .iassist-navigation a:hover,
  .iassist-navigation a:focus-visible {
    color: #19b9d0;
  }

  .iassist-navigation .iassist-book-button {
    padding: 13px 19px;
    background: #19b9d0;
    color: #ffffff;
    border-radius: 3px;
  }

  .iassist-navigation .iassist-book-button:hover,
  .iassist-navigation .iassist-book-button:focus-visible {
    background: #3184b2;
    color: #ffffff;
  }

  /* Mobile menu button */
  .iassist-menu-button {
    display: none;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .iassist-menu-button span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 5px auto;
    background: #27356f;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  @media only screen and (max-width: 767px) {
    .theme-header {
      position: relative;
    }

    .theme-header > .zpcontainer {
      min-height: 90px !important;
      padding: 10px 20px !important;
    }

    .theme-header .theme-logo-parent img[data-zs-logo] {
      width: 200px !important;
      height: auto !important;
    }

    .iassist-menu-button {
      display: block;
      flex: 0 0 44px;
    }

    .iassist-navigation {
      display: none;
      position: absolute;
      z-index: 9999;
      top: 100%;
      right: 0;
      left: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      margin: 0;
      padding: 12px 20px 22px;
      background: #f5f8fb;
      border-top: 1px solid rgba(39, 53, 111, 0.14);
      box-shadow: 0 12px 24px rgba(39, 53, 111, 0.12);
    }

    .iassist-navigation.is-open {
      display: flex;
    }

    .iassist-navigation a {
      padding: 15px 4px;
      border-bottom: 1px solid rgba(39, 53, 111, 0.12);
    }

    .iassist-navigation .iassist-book-button {
      margin-top: 14px;
      padding: 15px 19px;
      border: 0;
      text-align: center;
    }

    .iassist-menu-button[aria-expanded="true"] span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    .iassist-menu-button[aria-expanded="true"] span:nth-child(2) {
      opacity: 0;
    }

    .iassist-menu-button[aria-expanded="true"] span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }
  }
</style>

<script>
(function () {
  function initialiseIAssistNavigation() {
    var header = document.querySelector(".theme-header > .zpcontainer");

    if (!header || document.querySelector(".iassist-navigation")) {
      return;
    }

    /*
     * Find the Zoho section containing specific text,
     * then give it the appropriate anchor ID.
     */
    function assignSectionId(searchText, sectionId) {
      var headings = document.querySelectorAll("h1, h2, h3, h4");

      for (var i = 0; i < headings.length; i++) {
        var headingText = headings[i].textContent
          .replace(/\s+/g, " ")
          .trim()
          .toLowerCase();

        if (headingText.indexOf(searchText.toLowerCase()) !== -1) {
          var section = headings[i].closest(".zpsection");

          if (section) {
            section.id = sectionId;
            return;
          }
        }
      }
    }

    assignSectionId("Practical support", "services");
    assignSectionId("Your hands-on partner", "about");
    assignSectionId("Start small", "pricing");

    var menuButton = document.createElement("button");
    menuButton.className = "iassist-menu-button";
    menuButton.type = "button";
    menuButton.setAttribute("aria-label", "Open navigation");
    menuButton.setAttribute("aria-expanded", "false");
    menuButton.innerHTML =
      "<span></span><span></span><span></span>";

    var navigation = document.createElement("nav");
    navigation.className = "iassist-navigation";
    navigation.setAttribute("aria-label", "Main navigation");

    navigation.innerHTML =
      '<a href="#services">Services</a>' +
      '<a href="#about">About</a>' +
      '<a href="#pricing">Pricing</a>' +
      '<a class="iassist-book-button" ' +
      'href="https://bookings.iassist.services/matteberlein">' +
      'Book a Call</a>';

    header.appendChild(menuButton);
    header.appendChild(navigation);

    menuButton.addEventListener("click", function () {
      var isOpen = navigation.classList.toggle("is-open");

      menuButton.setAttribute(
        "aria-expanded",
        isOpen ? "true" : "false"
      );

      menuButton.setAttribute(
        "aria-label",
        isOpen ? "Close navigation" : "Open navigation"
      );
    });

    navigation.querySelectorAll("a").forEach(function (link) {
      link.addEventListener("click", function () {
        navigation.classList.remove("is-open");
        menuButton.setAttribute("aria-expanded", "false");
        menuButton.setAttribute("aria-label", "Open navigation");
      });
    });
  }

  if (document.readyState === "loading") {
    document.addEventListener(
      "DOMContentLoaded",
      initialiseIAssistNavigation
    );
  } else {
    initialiseIAssistNavigation();
  }
})();
</script>