/* Custom styles for Gelimex café website */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Navbar styles */
#navbar {
  background: rgba(250, 250, 248, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(216, 213, 204, 0.5);
}

#navbar.scrolled {
  box-shadow: 0 4px 24px rgba(26, 39, 68, 0.08);
}

/* Menu tabs */
.menu-tab {
  color: #1a2744;
  background: transparent;
  border: none;
  cursor: pointer;
}

.menu-tab.active {
  background: #1a2744;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(26, 39, 68, 0.2);
}

.menu-tab:hover:not(.active) {
  background: #f0f3f9;
}

/* Menu panels */
.menu-panel {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scroll reveal animations */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: none;
}

/* Mobile menu */
#mobile-menu {
  animation: slideDown 0.25s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  .reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }
  
  .menu-panel {
    animation: none;
  }
  
  #mobile-menu {
    animation: none;
  }
  
  .rounded-2xl img,
  .rounded-3xl img {
    transition: none;
  }
}

/* Focus styles */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #d4a017;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #fafaf8;
}

::-webkit-scrollbar-thumb {
  background: #d8d4cc;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #b8b4ac;
}
</styles.css>

<sm-file path="script.js">
(function () {
  'use strict';

  // --- Navbar scroll effect ---
  const navbar = document.getElementById('navbar');
  let lastScroll = 0;

  function handleScroll() {
    const currentScroll = window.pageYOffset;
    if (currentScroll > 10) {
      navbar.classList.add('scrolled');
    } else {
      navbar.classList.remove('scrolled');
    }
    lastScroll = currentScroll;
  }

  window.addEventListener('scroll', handleScroll, { passive: true });

  // --- Mobile menu ---
  const menuBtn = document.getElementById('menu-btn');
  const mobileMenu = document.getElementById('mobile-menu');
  const menuIconOpen = document.getElementById('menu-icon-open');
  const menuIconClose = document.getElementById('menu-icon-close');

  menuBtn.addEventListener('click', function () {
    const isOpen = !mobileMenu.classList.contains('hidden');
    mobileMenu.classList.toggle('hidden');
    menuIconOpen.classList.toggle('hidden');
    menuIconClose.classList.toggle('hidden');
  });

  // Close mobile menu when a link is clicked
  mobileMenu.querySelectorAll('a').forEach(function (link) {
    link.addEventListener('click', function () {
      mobileMenu.classList.add('hidden');
      menuIconOpen.classList.remove('hidden');
      menuIconClose.classList.add('hidden');
    });
  });

  // --- Menu tabs ---
  const tabs = document.querySelectorAll('.menu-tab');
  const panels = document.querySelectorAll('.menu-panel');

  tabs.forEach(function (tab) {
    tab.addEventListener('click', function () {
      const target = tab.getAttribute('data-tab');

      tabs.forEach(function (t) {
        t.classList.remove('active');
      });
      tab.classList.add('active');

      panels.forEach(function (panel) {
        panel.classList.add('hidden');
        panel.classList.remove('active');
      });

      const targetPanel = document.querySelector('.menu-panel[data-panel="' + target + '"]');
      if (targetPanel) {
        targetPanel.classList.remove('hidden');
        targetPanel.classList.add('active');
      }
    });
  });

  // --- Contact form ---
  const form = document.getElementById('contact-form');
  const formSuccess = document.getElementById('form-success');

  if (form) {
    form.addEventListener('submit', function (e) {
      e.preventDefault();

      // Simple validation
      const inputs = form.querySelectorAll('input[required], textarea[required]');
      let valid = true;

      inputs.forEach(function (input) {
        if (!input.value.trim()) {
          valid = false;
          input.style.borderColor = '#ef4444';
        } else {
          input.style.borderColor = '';
        }
      });

      if (valid) {
        form.querySelector('button[type="submit"]').disabled = true;
        form.querySelector('button[type="submit"]').textContent = 'Sending...';

        // Simulate submission
        setTimeout(function () {
          form.reset();
          formSuccess.classList.remove('hidden');
          form.querySelector('button[type="submit"]').disabled = false;
          form.querySelector('button[type="submit"]').textContent = 'Send Message';

          // Hide success message after 5 seconds
          setTimeout(function () {
            formSuccess.classList.add('hidden');
          }, 5000);
        }, 800);
      }
    });
  }

  // --- Scroll reveal (progressive enhancement) ---
  // Only apply if the user prefers motion and JS is enabled
  if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    const revealElements = document.querySelectorAll('.reveal');

    function checkReveal() {
      const windowHeight = window.innerHeight;
      const revealPoint = 120;

      revealElements.forEach(function (el) {
        const elementTop = el.getBoundingClientRect().top;
        if (elementTop < windowHeight - revealPoint) {
          el.classList.add('revealed');
        }
      });
    }

    window.addEventListener('scroll', checkReveal, { passive: true });
    // Run once on load to catch elements already in view
    checkReveal();
  } else {
    // If reduced motion is preferred, make all reveals immediately visible
    document.querySelectorAll('.reveal').forEach(function (el) {
      el.classList.add('revealed');
    });
  }

  // --- Active nav link highlighting ---
  const sections = document.querySelectorAll('section[id]');
  const navLinks = document.querySelectorAll('nav a[href^="#"]');

  function highlightNav() {
    const scrollY = window.pageYOffset;

    sections.forEach(function (section) {
      const sectionTop = section.offsetTop - 100;
      const sectionHeight = section.offsetHeight;
      const sectionId = section.getAttribute('id');

      if (scrollY >= sectionTop && scrollY < sectionTop + sectionHeight) {
        navLinks.forEach(function (link) {
          link.classList.remove('text-navy-500');
          link.classList.add('text-navy-500/70');
          if (link.getAttribute('href') === '#' + sectionId) {
            link.classList.remove('text-navy-500/70');
            link.classList.add('text-navy-500');
          }
        });
      }
    });
  }

  window.addEventListener('scroll', highlightNav, { passive: true });
  highlightNav();
})();
</script>