/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:0 Unexpected "<"
Line 21:51 Expected identifier but found "%"
Line 21:84 Unexpected "="
Line 21:114 Expected identifier but found "%"
Line 21:128 Unexpected "<"
Line 22:61 Expected identifier but found "%"
Line 22:94 Unexpected "="
Line 22:124 Expected identifier but found "%"
... and 32 more hidden warnings

**/
{% assign theme_mode = settings.color_scheme | default: 'light' %}
<div id="menu-drawer" class="offcanvas offcanvas-end {% if theme_mode == 'dark' %}dark-theme{% endif %}" tabindex="-1">
  <button class="btn-close" type="button" aria-label="Close" data-bs-dismiss="offcanvas"></button>
  
  <nav class="mobile-nav">
    <a href="/pages/art" class="mobile-nav__item" {% if theme_mode == 'dark' %}style="color: #ffffff !important;"{% endif %}>Art</a>
    <a href="/pages/collaboration" class="mobile-nav__item" {% if theme_mode == 'dark' %}style="color: #ffffff !important;"{% endif %}>Collaboration</a>
    <a href="/pages/galerie" class="mobile-nav__item" {% if theme_mode == 'dark' %}style="color: #ffffff !important;"{% endif %}>Galerie</a>
    <a href="/pages/about" class="mobile-nav__item" {% if theme_mode == 'dark' %}style="color: #ffffff !important;"{% endif %}>About</a>
    
    <div class="mobile-nav__social">
      <a href="https://instagram.com/gigiguttersen" class="mobile-nav__social-item" {% if theme_mode == 'dark' %}style="color: #ffffff !important;"{% endif %}>@gigiguttersen</a>
      <a href="mailto:gguttersen@gmail.com" class="mobile-nav__social-item" {% if theme_mode == 'dark' %}style="color: #ffffff !important;"{% endif %}>gguttersen@gmail.com</a>
    </div>
  </nav>
</div>

<style>
#menu-drawer {
  background-color: #fff;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1050;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}

#menu-drawer.dark-theme {
  background-color: #121212;
}

#menu-drawer.show {
  visibility: visible;
  transform: translateX(0);
}

.header__icon--menu {
  position: initial;
}

.btn-close {
  position: fixed;
  top: 1.8125rem;
  left: 0.875rem;
  z-index: 1060;
  padding: 0.75rem;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.dark-theme .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  position: relative;
}

.mobile-nav__item {
  color: #000000;
  text-decoration: none;
  font-size: 18px;
  font-weight: 400;
  font-family: 'Times New Roman', Times, serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 41.25px;
  width: 90%;
  text-align: center;
  text-transform: uppercase;
}

.mobile-nav__social {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mobile-nav__social-item {
  color: #000000;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  font-family: 'Times New Roman', Times, serif;
  margin: 5px 0;
}

/* Strengthen selector specificity and add multiple ways to target dark mode */
.dark-theme .mobile-nav__item,
#menu-drawer.dark-theme .mobile-nav__item,
.dark-theme .mobile-nav .mobile-nav__item,
.dark-theme .mobile-nav__social-item,
#menu-drawer.dark-theme .mobile-nav__social-item,
.dark-theme .mobile-nav .mobile-nav__social-item {
  color: #ffffff !important;
}

/* Add a hover state for better user experience */
.dark-theme .mobile-nav__item:hover,
.dark-theme .mobile-nav__social-item:hover {
  color: #cccccc !important;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const menuDrawer = document.getElementById('menu-drawer');
  const menuToggle = document.querySelector('.header__icon--menu');
  const btnClose = menuDrawer.querySelector('.btn-close');
  
  if (menuDrawer) {
    const preventTouch = function(e) {
      e.preventDefault();
    };
    
    function showMenuDrawer() {
      menuDrawer.classList.add('show');
      document.body.style.overflow = 'hidden';
      document.body.style.position = 'fixed';
      document.body.style.width = '100%';
      
      document.addEventListener('touchmove', preventTouch, { passive: false });
      document.addEventListener('gesturestart', preventTouch, { passive: false });
      document.addEventListener('gesturechange', preventTouch, { passive: false });
      document.addEventListener('gestureend', preventTouch, { passive: false });
      
      // Run color update with small delay
      setTimeout(updateTextColors, 100);
    }
    
    function hideMenuDrawer() {
      menuDrawer.classList.remove('show');
      document.body.style.overflow = '';
      document.body.style.position = '';
      document.body.style.width = '';
      
      document.removeEventListener('touchmove', preventTouch);
      document.removeEventListener('gesturestart', preventTouch);
      document.removeEventListener('gesturechange', preventTouch);
      document.removeEventListener('gestureend', preventTouch);
    }
    
    // Function to update text colors based on background
    function updateTextColors() {
      // Force check the actual computed background color
      const bgColor = window.getComputedStyle(menuDrawer).backgroundColor;
      const menuItems = document.querySelectorAll('.mobile-nav__item, .mobile-nav__social-item');
      
      // Parse the background color to determine if it's dark
      const rgb = bgColor.match(/\d+/g);
      if (rgb && rgb.length >= 3) {
        const [r, g, b] = rgb.map(Number);
        // If background is dark (using simple luminance formula)
        const isDark = (r*0.299 + g*0.587 + b*0.114) < 128;
        
        menuItems.forEach(item => {
          // Directly set style with !important equivalent
          item.style.setProperty('color', isDark ? '#ffffff' : '#000000', 'important');
        });
        
        // Log for debugging
        console.log('Background color:', bgColor, 'Is dark:', isDark);
      }
    }
    
    // Toggle menu when menu icon is clicked
    if (menuToggle) {
      menuToggle.addEventListener('click', function(e) {
        e.preventDefault();
        showMenuDrawer();
      });
    }
    
    // Close menu when close button is clicked
    if (btnClose) {
      btnClose.addEventListener('click', hideMenuDrawer);
    }
    
    // Run once at load
    setTimeout(updateTextColors, 100);
    
    // Add a mutation observer to detect class changes
    const observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        if (mutation.attributeName === 'class') {
          setTimeout(updateTextColors, 100);
        }
      });
    });
    
    observer.observe(menuDrawer, { attributes: true });
    
    // Close when clicking outside the menu
    document.addEventListener('click', function(e) {
      if (menuDrawer.classList.contains('show') && !menuDrawer.contains(e.target) && !menuToggle.contains(e.target)) {
        hideMenuDrawer();
      }
    });
    
    // Add ESC key listener
    document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape' && menuDrawer.classList.contains('show')) {
        hideMenuDrawer();
      }
    });
  }
});
</script>