From dd4e00093d0be00fc36c8fd410031e35d41b82ea Mon Sep 17 00:00:00 2001
From: Faster Marketplace <marketplace@fasterhq.com>
Date: Fri, 16 Jan 2026 11:48:11 +0000
Subject: [PATCH] Publish theme: new_hbs_test - components/header.hbs

---
 components/header.hbs | 704 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 704 insertions(+)
 create mode 100644 components/header.hbs

diff --git a/components/header.hbs b/components/header.hbs
new file mode 100644
index 0000000..e11034b
--- /dev/null
+++ b/components/header.hbs
@@ -0,0 +1,704 @@
+
+<header
+  id="ai_header"
+  class="fixed top-0 left-0 right-0 w-full z-50"
+ data-hbs-id="km4id95">
+  <div
+    id="overlay"
+    class="fixed inset-0 bg-black opacity-0 pointer-events-none transition-opacity duration-600 -left-full z-50"
+   data-hbs-id="fjkpnds"></div>
+
+  <div class="container mx-auto px-4 py-4 lg:py-0" data-hbs-id="0t4nstl">
+    <div class="flex items-center justify-between" data-hbs-id="qpdaplu">
+      <div class="block lg:hidden" data-hbs-id="86be873">
+        <button
+          id="mobile-menu-button"
+          class="mobile-toggle cms-text-dark focus:outline-none"
+          aria-label="menu"
+          aria-expanded="false"
+         data-hbs-id="w51gcfg">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-menu"
+           data-hbs-id="e7huk6j">
+            <line x1="4" x2="20" y1="12" y2="12" />
+            <line x1="4" x2="20" y1="6" y2="6" />
+            <line x1="4" x2="20" y1="18" y2="18" />
+          </svg>
+        </button>
+      </div>
+
+      <div class="flex-shrink-0" data-hbs-id="rv7rmpm">
+        <a
+          href="/"
+          class="cms-link flex items-center"
+          aria-label="Main navigation logo link"
+         data-hbs-id="cdvpm8u">
+          <img
+            src="https://static.fasterhq.com/favicon.png"
+            alt=""
+            class="h-8 site-logo"
+          / data-hbs-id="sd2ztmi">
+        </a>
+      </div>
+
+      <nav
+        class="header-nav hidden lg:flex lg:items-center lg:justify-between lg:flex-1 ml-8"
+       data-hbs-id="ke8fqdv">
+        <ul class="flex space-x-6 site-navigation" data-hbs-id="f5ngu06">
+          <li class="relative group nav-item dummy" data-hbs-id="z050hsp">
+            <a
+              href="/"
+              class="nav-link flex items-center py-6 cms-text-dark hover:cms-text-accent font-medium text-sm"
+             data-hbs-id="n17kafd">
+              Products
+              <span
+                class="dropdown-arrow ml-1 opacity-70 group-hover:opacity-100 transition-transform duration-200 transform group-hover:rotate-180"
+               data-hbs-id="2ah6ynl">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="12"
+                  height="12"
+                  viewBox="0 0 256 256"
+                  fill="currentColor"
+                 data-hbs-id="ju79c3i">
+                  <rect width="256" height="256" fill="none"></rect>
+                  <polyline
+                    points="208 96 128 176 48 96"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="24"
+                  ></polyline>
+                </svg>
+              </span>
+            </a>
+
+            <ul
+              class="dropdown-menu absolute left-0 mt-0 w-56 rounded-md bg-white shadow-lg opacity-0 invisible transition-all duration-200 z-50 cms-border-light"
+             data-hbs-id="6iq6cwo">
+              <li class="cms-border-light" data-hbs-id="0yud899">
+                <a
+                  href="/"
+                  class="block px-5 py-3 text-sm cms-text-dark hover:cms-bg-light hover:cms-text-accent transition-all"
+                   data-hbs-id="seraz2p">All Products</a
+                >
+              </li>
+              <li class="cms-border-light" data-hbs-id="4k3fruf">
+                <a
+                  href="/"
+                  class="block px-5 py-3 text-sm cms-text-dark hover:cms-bg-light hover:cms-text-accent transition-all"
+                   data-hbs-id="y9e557l">Categories</a
+                >
+              </li>
+              <li data-hbs-id="6bty7ge">
+                <a
+                  href="/"
+                  class="block px-5 py-3 text-sm cms-text-dark hover:cms-bg-light hover:cms-text-accent transition-all"
+                   data-hbs-id="bka8wiq">Special Deals</a
+                >
+              </li>
+            </ul>
+          </li>
+          <li class="relative group nav-item dummy" data-hbs-id="zjhtn9g">
+            <a
+              href="/deals/"
+              class="nav-link flex items-center py-6 cms-text-dark hover:cms-text-accent font-medium text-sm"
+             data-hbs-id="e5bldeo">
+              Deals
+            </a>
+          </li>
+          <li class="relative group nav-item dummy" data-hbs-id="5g805aw">
+            <a
+              href="/Test/"
+              class="nav-link flex items-center py-6 cms-text-dark hover:cms-text-accent font-medium text-sm"
+             data-hbs-id="x8a3ama">
+              Satest
+            </a>
+          </li>
+        </ul>
+      </nav>
+
+      <div class="flex items-center space-x-4" data-hbs-id="u1uotob">
+        <button
+          type="button"
+          class="cms-text-dark hover:cms-text-accent"
+          aria-label="Search this site"
+          data-ghost-search
+         data-hbs-id="m3ow90b">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-search"
+           data-hbs-id="hhix62r">
+            <circle cx="11" cy="11" r="8" />
+            <path d="m21 21-4.3-4.3" />
+          </svg>
+        </button>
+
+        <div class="hidden lg:flex items-center space-x-3" data-hbs-id="znliioa">
+          <a
+            href="#/portal/signin"
+            class="cms-btn bg-transparent cms-text-primary cms-border-primary border hover:cms-bg-primary hover:text-white header-signin site-button px-5 py-2 text-sm rounded-none transition-colors"
+            data-portal="signin"
+             data-hbs-id="ebbjw2h">Sign in</a
+          >
+          <a
+            href="#/portal/signup"
+            class="cms-btn cms-bg-primary text-white cms-border-primary border hover:cms-bg-dark header-subscribe site-button px-4 py-2 text-sm rounded-none transition-colors"
+            data-portal="signup"
+             data-hbs-id="bhyib0v">Subscribe</a
+          >
+          <a
+            href="#/portal/account"
+            class="cms-btn cms-bg-accent text-white cms-border-accent border hover:cms-bg-primary header-account site-button px-4 py-2 hidden text-sm rounded-none transition-colors"
+            data-portal="account"
+             data-hbs-id="u3k20g8">Account</a
+          >
+          <!-- HTML Cart Button -->
+          <a
+            class="flex items-center rounded-md p-2 text-sm transition-colors hover:cms-text-accent focus:outline-none"
+            href="/cart"
+           data-hbs-id="0cw765p">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              aria-hidden="true"
+              class="h-6 w-6"
+             data-hbs-id="crv2iml">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+            ></path>
+            </svg>
+            <span
+              class="text-sm font-medium inline-block faster-header-cart-quantity"
+              style="margin-left: var(--space-1);"
+               data-hbs-id="fujo194">0</span
+            >
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div
+    id="mobile-menu"
+    class="fixed inset-y-0 left-0 w-full max-w-xs bg-white shadow-xl transform -translate-x-full transition-transform duration-300 ease-in-out z-50 lg:hidden"
+   data-hbs-id="2kagh9q">
+    <div class="flex flex-col h-full" data-hbs-id="m0wg6sm">
+      <div
+        class="flex items-center justify-between p-4 cms-border-light"
+       data-hbs-id="zpksxa3">
+        <div class="flex items-center" data-hbs-id="g4ejayb">
+          <button
+            id="close-mobile-menu"
+            class="mr-4 cms-text-dark hidden"
+            aria-label="Close menu"
+           data-hbs-id="rsgx90n">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="lucide lucide-menu"
+             data-hbs-id="t5pxea5">
+              <line x1="4" x2="20" y1="12" y2="12" />
+              <line x1="4" x2="20" y1="6" y2="6" />
+              <line x1="4" x2="20" y1="18" y2="18" />
+            </svg>
+          </button>
+          <a href="/" class="cms-link flex-shrink-0" data-hbs-id="yf473xs">
+            <img
+              src="https://static.fasterhq.com/favicon.png"
+              alt=""
+              class="h-8 site-logo"
+            / data-hbs-id="0qgq163">
+          </a>
+        </div>
+        <button
+          class="cms-text-dark hover:cms-text-accent absolute right-0 top-0 mt-4 mr-4"
+          id="close-sidebar-button"
+          aria-label="Close sidebar"
+         data-hbs-id="dbfeymb">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-x"
+           data-hbs-id="ivolhzh">
+            <path d="M18 6 6 18" />
+            <path d="m6 6 12 12" />
+          </svg>
+        </button>
+      </div>
+
+      <div class="flex-1 overflow-y-auto py-6 px-8" data-hbs-id="ffp0djd">
+        <nav data-hbs-id="tu91ppd">
+          <ul class="space-y-6 site-navigation" data-hbs-id="2tnaqbq">
+            <li class="mobile-menu-item dummy" data-hbs-id="ub9qqcc">
+              <div class="flex items-center justify-between" data-hbs-id="ifapll5">
+                <a href="#" class="cms-text-dark text-base hover:cms-text-accent"
+                   data-hbs-id="r0kan1l">Home</a
+                >
+                <button
+                  class="mobile-submenu-toggle cms-text-neutral hover:cms-text-accent focus:outline-none"
+                  aria-label="Toggle submenu"
+                 data-hbs-id="a58jajb">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="15"
+                    height="15"
+                    viewBox="0 0 256 256"
+                    fill="currentColor"
+                   data-hbs-id="fet0kjb">
+                    <rect width="256" height="256" fill="none"></rect>
+                    <polyline
+                      points="208 96 128 176 48 96"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="24"
+                    ></polyline>
+                  </svg>
+                </button>
+              </div>
+              <ul class="mobile-submenu dropdown-menu mt-2 ml-4 pl-4 hidden" data-hbs-id="qflj2cg">
+                <li style="padding: var(--space-2) 0;" data-hbs-id="1j7yowe">
+                  <a href="/" class="cms-text-neutral text-base hover:cms-text-accent"
+                     data-hbs-id="wv1xj9u">Welcome</a
+                  >
+                </li>
+                <li style="padding: var(--space-2) 0;" data-hbs-id="gtyu8rb">
+                  <a href="/" class="cms-text-neutral text-base hover:cms-text-accent"
+                     data-hbs-id="2xeetrf">Featured Content</a
+                  >
+                </li>
+                <li style="padding: var(--space-2) 0;" data-hbs-id="1i54bhn">
+                  <a href="/" class="cms-text-neutral text-base hover:cms-text-accent"
+                     data-hbs-id="p5asuel">What's New</a
+                  >
+                </li>
+              </ul>
+            </li>
+
+            <li class="mobile-menu-item dummy" data-hbs-id="0qgb1e9">
+              <div class="flex items-center justify-between" data-hbs-id="gydrzuy">
+                <a href="#" class="text-gray-800 hover:text-accent text-base"
+                   data-hbs-id="jb9cxi8">About Us</a
+                >
+                <button
+                  class="mobile-submenu-toggle cms-text-neutral hover:cms-text-accent focus:outline-none"
+                  aria-label="Toggle submenu"
+                 data-hbs-id="pb9hmru">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="15"
+                    height="15"
+                    viewBox="0 0 256 256"
+                    fill="currentColor"
+                   data-hbs-id="zvb0cww">
+                    <rect width="256" height="256" fill="none"></rect>
+                    <polyline
+                      points="208 96 128 176 48 96"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="24"
+                    ></polyline>
+                  </svg>
+                </button>
+              </div>
+              <ul
+                class="mobile-submenu dropdown-menu mt-2 ml-4 pl-4 cms-border-light hidden"
+               data-hbs-id="d5jbhqt">
+                <li style="padding: var(--space-2) 0;" data-hbs-id="d8ifcd2">
+                  <a href="/" class="cms-text-neutral text-base hover:cms-text-accent"
+                     data-hbs-id="ydl1g21">Company</a
+                  >
+                </li>
+                <li style="padding: var(--space-2) 0;" data-hbs-id="b8p1zbf">
+                  <a href="/" class="cms-text-neutral text-base hover:cms-text-accent"
+                     data-hbs-id="ekjssit">Our Team</a
+                  >
+                </li>
+                <li style="padding: var(--space-2) 0;" data-hbs-id="wr4mdmk">
+                  <a href="/" class="cms-text-neutral text-base hover:cms-text-accent"
+                     data-hbs-id="nfwp3cw">Careers</a
+                  >
+                </li>
+              </ul>
+            </li>
+
+            <li class="mobile-menu-item dummy" data-hbs-id="gcusa4l">
+              <div class="flex items-center justify-between" data-hbs-id="7lzcro4">
+                <a href="#" class="text-gray-800 hover:text-accent text-base"
+                   data-hbs-id="9a09whg">Products</a
+                >
+                <button
+                  class="mobile-submenu-toggle dropdown-menu text-gray-400 hover:text-accent focus:outline-none"
+                  aria-label="Toggle submenu"
+                 data-hbs-id="4d9l7f4">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="15"
+                    height="15"
+                    viewBox="0 0 256 256"
+                    fill="currentColor"
+                   data-hbs-id="buee78p">
+                    <rect width="256" height="256" fill="none"></rect>
+                    <polyline
+                      points="208 96 128 176 48 96"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="24"
+                    ></polyline>
+                  </svg>
+                </button>
+              </div>
+              <ul
+                class="mobile-submenu mt-2 ml-4 pl-4 border-l border-gray-200 hidden"
+               data-hbs-id="rrycko9">
+                <li style="padding: var(--space-2) 0;" data-hbs-id="1x2z6bj">
+                  <a href="/" class="cms-text-neutral text-base hover:cms-text-accent"
+                     data-hbs-id="bmgn6zg">All Products</a
+                  >
+                </li>
+                <li style="padding: var(--space-2) 0;" data-hbs-id="6sjq04m">
+                  <a href="/" class="cms-text-neutral text-base hover:cms-text-accent"
+                     data-hbs-id="pfmnkpb">Categories</a
+                  >
+                </li>
+                <li style="padding: var(--space-2) 0;" data-hbs-id="9nr2b6z">
+                  <a href="/" class="cms-text-neutral text-base hover:cms-text-accent"
+                     data-hbs-id="gqfk13g">Special Deals</a
+                  >
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </nav>
+      </div>
+
+      <div class="cms-border-light p-4 flex justify-center gap-4" data-hbs-id="0foj3s4">
+        <a
+          href="#/portal/signin"
+          class="cms-btn bg-transparent cms-text-primary cms-border-primary border hover:cms-bg-primary hover:text-white w-1/2 px-4 py-2 text-sm text-center transition-colors"
+          data-portal="signin"
+           data-hbs-id="ky4ny4t">Sign in</a
+        >
+        <a
+          href="#/portal/signup"
+          class="cms-btn cms-bg-primary text-white cms-border-primary border hover:cms-bg-dark w-1/2 px-4 py-2 text-sm text-center transition-colors"
+          data-portal="signup"
+           data-hbs-id="nllqspw">Subscribe</a
+        >
+        <a
+          href="#/portal/account"
+          class="cms-btn cms-bg-accent text-white cms-border-accent border hover:cms-bg-primary w-1/2 hidden px-4 py-2 text-sm text-center transition-colors"
+          data-portal="account"
+           data-hbs-id="rz4jhb9">Account</a
+        >
+        <a
+          class="flex items-center rounded-md p-2 text-sm transition-colors hover:cms-text-accent focus:outline-none"
+          href="/cart"
+         data-hbs-id="n9ckpi3">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            aria-hidden="true"
+            class="h-6 w-6"
+           data-hbs-id="9cl6xvg">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+            ></path>
+          </svg>
+          <span
+            class="text-sm font-medium inline-block faster-header-cart-quantity"
+            style="margin-left: var(--space-1);"
+             data-hbs-id="89e4ytz">0</span
+          >
+        </a>
+      </div>
+    </div>
+  </div>
+</header>
+
+
+<style>
+  /* Dropdown Menu */
+  .group:hover .dropdown-menu {
+    display: block;
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  /* Active Navigation Link */
+  .site-navigation .active {
+    color: var(--brand-accent) !important;
+    font-weight: 600;
+    position: relative;
+  }
+
+  .site-navigation .active::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 32px;
+    height: 2px;
+    background-color: var(--brand-accent);
+    border-radius: 1px;
+  }
+
+  /* Header States - Applied to ALL pages */
+
+  /* Base State: Transparent background at top of page */
+  #ai_header {
+    transition: all 300ms ease;
+  }
+
+  body:not(.scrolled) #ai_header {
+    background-color: transparent !important;
+    border-color: transparent !important;
+  }
+
+  body:not(.scrolled) #ai_header .nav-link,
+  body:not(.scrolled) #ai_header .site-button,
+  body:not(.scrolled) #ai_header svg,
+  body:not(.scrolled) #ai_header .mobile-toggle {
+    color: white !important;
+  }
+
+  /* Scrolled State: White background */
+  body.scrolled #ai_header {
+    background-color: white !important;
+    border-color: #e5e7eb !important;
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
+  }
+
+  body.scrolled #ai_header .nav-link,
+  body.scrolled #ai_header .site-button,
+  body.scrolled #ai_header svg,
+  body.scrolled #ai_header .mobile-toggle {
+    color: var(--dark-gray) !important;
+  }
+
+  /* Hover Effects */
+  .nav-link:hover {
+    color: var(--brand-accent) !important;
+  }
+
+  /* Active Links Override - Always Brand Accent */
+  .site-navigation .active {
+    color: var(--brand-accent) !important;
+  }
+
+  .site-navigation .active:hover {
+    color: var(--brand-accent) !important;
+  }
+
+  /* Ensure active links stay accent color in all states */
+  body:not(.scrolled) .site-navigation .active,
+  body.scrolled .site-navigation .active {
+    color: var(--brand-accent) !important;
+  }
+</style>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const mobileMenuButton = document.getElementById('mobile-menu-button');
+    const closeSidebarButton = document.getElementById('close-sidebar-button');
+    const closeMobileMenuButton = document.getElementById('close-mobile-menu');
+    const mobileMenu = document.getElementById('mobile-menu');
+    const overlay = document.getElementById('overlay');
+    const submenuToggles = document.querySelectorAll('.mobile-submenu-toggle');
+    const header = document.getElementById('ai_header');
+
+    // Scroll state management for all pages
+    function handleScroll() {
+      if (window.scrollY > 0) {
+        document.body.classList.add('scrolled');
+      } else {
+        document.body.classList.remove('scrolled');
+      }
+    }
+
+    // Add scroll listener
+    window.addEventListener('scroll', handleScroll);
+
+    // Check initial scroll position
+    handleScroll();
+
+    function toggleMobileMenu() {
+      const isOpen = mobileMenu.classList.contains('translate-x-0');
+
+      if (isOpen) {
+        mobileMenu.classList.remove('translate-x-0');
+        mobileMenu.classList.add('-translate-x-full');
+        overlay.classList.remove('opacity-50', 'pointer-events-auto');
+        overlay.classList.add('opacity-0', 'pointer-events-none');
+        document.body.classList.remove('overflow-hidden');
+      } else {
+        mobileMenu.classList.remove('-translate-x-full');
+        mobileMenu.classList.add('translate-x-0');
+        overlay.classList.remove('opacity-0', 'pointer-events-none');
+        overlay.classList.add('opacity-50', 'pointer-events-auto');
+        document.body.classList.add('overflow-hidden');
+      }
+    }
+
+    function toggleSubmenu(event) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      const parentItem = event.currentTarget.closest('.mobile-menu-item');
+      const submenu = parentItem.querySelector('.mobile-submenu');
+      const toggle = event.currentTarget;
+
+      if (submenu) {
+        submenu.classList.toggle('hidden');
+        toggle.classList.toggle('active');
+
+        const isExpanded = !submenu.classList.contains('hidden');
+        toggle.setAttribute('aria-expanded', isExpanded);
+      }
+    }
+
+    mobileMenuButton.addEventListener('click', toggleMobileMenu);
+    closeSidebarButton.addEventListener('click', toggleMobileMenu);
+    closeMobileMenuButton.addEventListener('click', toggleMobileMenu);
+    overlay.addEventListener('click', toggleMobileMenu);
+
+    submenuToggles.forEach(toggle => {
+      toggle.addEventListener('click', toggleSubmenu);
+      toggle.addEventListener('touchstart', toggleSubmenu, { passive: false });
+      toggle.setAttribute('aria-expanded', 'false');
+    });
+
+    window.addEventListener('resize', function() {
+      if (window.innerWidth >= 1024 && mobileMenu.classList.contains('translate-x-0')) {
+        toggleMobileMenu();
+      }
+    });
+
+    function setActiveNavLink() {
+      const currentPath = window.location.pathname;
+      const currentHash = window.location.hash;
+      const currentSearch = window.location.search;
+
+      const normalizedCurrentPath = currentPath === '/' ? '/' : currentPath.replace(/\/$/, '').toLowerCase();
+
+      const navLinks = document.querySelectorAll('.site-navigation a:not(.dropdown-menu a)');
+
+      navLinks.forEach(link => {
+        const linkHref = link.getAttribute('href') ? link.getAttribute('href').toLowerCase() : "";
+
+        link.classList.remove('active');
+        if (!linkHref) return;
+
+        let isActive = false;
+
+        if (linkHref.startsWith('#')) {
+          isActive = currentHash === linkHref;
+        } else if (linkHref.startsWith('http')) {
+          isActive = false;
+        } else {
+          const normalizedLinkPath = linkHref === '/' ? '/' : linkHref.replace(/\/$/, '').toLowerCase();
+
+          if (normalizedLinkPath === '/' && normalizedCurrentPath === '/') {
+            isActive = true;
+          }
+          else if (normalizedLinkPath !== '/' && normalizedCurrentPath.startsWith(normalizedLinkPath)) {
+            const nextChar = normalizedCurrentPath[normalizedLinkPath.length];
+            isActive = !nextChar || nextChar === '/' || nextChar === '?' || nextChar === '#';
+          }
+          else {
+            const linkText = link.textContent.trim().toLowerCase();
+            const pathSegments = normalizedCurrentPath.split('/').filter(Boolean);
+
+            if (pathSegments.length > 0) {
+              isActive = pathSegments.some(segment =>
+                segment.toLowerCase() === linkText ||
+                linkText === segment.toLowerCase().replace(/[-_]/g, ' ')
+              );
+            }
+          }
+        }
+
+        if (isActive) {
+          link.classList.add('active');
+        }
+      });
+
+      const dropdownLinks = document.querySelectorAll('.dropdown-menu a');
+      dropdownLinks.forEach(link => {
+        const linkHref = link.getAttribute('href');
+        link.classList.remove('active');
+
+        if (linkHref && linkHref !== '#') {
+          const normalizedLinkPath = linkHref === '/' ? '/' : linkHref.replace(/\/$/, '');
+
+          if (normalizedLinkPath === normalizedCurrentPath) {
+            link.classList.add('active');
+            const parentNav = link.closest('.group')?.querySelector('a');
+            if (parentNav) {
+              parentNav.classList.add('active');
+            }
+          }
+        }
+      });
+    }
+
+    setActiveNavLink();
+
+    setTimeout(() => {
+      const firstNavLink = document.querySelector('.site-navigation .nav-link');
+      if (firstNavLink) {
+        firstNavLink.classList.add('active');
+      }
+    }, 100);
+  });
+</script>