/* Cafe Header - Minimal CSS for animations only (Tailwind handles layout/spacing) */

/* Scrolled state - toggled by JS */
#global-header.scrolled {
  background-color: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.08);
}

/* Nav link underline animation */
#menu-list a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1.5px;
  background-color: #CD4242;
  transition: width 0.25s ease;
  border-radius: 1px;
}

#menu-list a:hover::after {
  width: 100%;
}

/* Hamburger animation */
#menu-button span {
  display: block;
  position: absolute;
  height: 1.5px;
  width: 100%;
  background: #1d1d1f;
  border-radius: 1px;
  transition: all 0.25s ease-in-out;
}

#menu-button span.top { top: 0; }
#menu-button span.middle { top: 6px; }
#menu-button span.bottom { bottom: 0; }

#menu-button.clicked span.top {
  top: 6px;
  transform: rotate(45deg);
}

#menu-button.clicked span.middle {
  opacity: 0;
}

#menu-button.clicked span.bottom {
  bottom: 6px;
  transform: rotate(-45deg);
}

/* Mobile overlay */
@media screen and (max-width: 768px) {
  #menu-list {
    display: none;
    position: fixed;
    inset: 0;
    height: 100dvh;
    background-color: rgba(255, 255, 255, 0.97);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    gap: 0;
  }

  #menu-list.clicked {
    display: flex;
    opacity: 1;
    visibility: visible;
  }

  #menu-list li { text-align: center; }

  #menu-list a {
    font-size: 17px !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    padding: 14px 0 !important;
    letter-spacing: -0.01em !important;
  }

  #menu-list a::after { display: none !important; }
  #menu-list a:hover { color: #CD4242; }
}