/* Header Styles */
header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--Primary-100, #680144);
  pointer-events: none;
}

header > * {
  pointer-events: auto;
}

#header {
  position: relative;
  z-index: 20;
  background: var(--Primary-100, #680144);
  display: flex;
  align-items: center;
  max-height: 80px;
}


/* Menu Toggle Button - Desktop */
.menu-toggle-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.menu-button-wrapper {
  position: relative;
  z-index: 24;
}

.menu-toggle-text {
  color: var(--Tertiary-100, #F6E0DF);
  text-align: center;
  font-family: Calluna, serif;
  font-size: 30px;
  font-style: italic;
  font-weight: 400;
  line-height: 120%; /* 36px */
  letter-spacing: -0.6px;
  transition: color 0.3s ease;
}

.menu-toggle-button:hover .menu-toggle-text {
  color: var(--Tertiary-80, #F8E6E5);
}

/* Desktop Menu Container */
.desktop-menu-container {
  position: relative;
  z-index: 25;
}

/* Ensure menu items are clickable */
.desktop-nav-menu a,
.desktop-nav-menu button,
.desktop-nav-menu > * {
  pointer-events: auto !important;
  position: relative;
  z-index: 26;
  cursor: pointer;
}

/* Desktop Navigation Menu */
.desktop-nav-menu {
  display: none;
  justify-content: flex-end;
  align-items: center;
  background: transparent;
  margin-right: 3rem;
  transform-origin: right center;
  position: relative;
  z-index: 25;
  pointer-events: none;
  opacity: 1;
}

.desktop-nav-menu.menu-visible {
  display: flex;
  pointer-events: auto;
}

/* Desktop nav menu items - underline with spacing */
.desktop-nav-menu a:not([href*="contact"]),
.desktop-nav-menu button {
  text-underline-offset: 0.5rem;
}

.desktop-nav-menu a:not([href*="contact"]):hover,
.desktop-nav-menu button:hover {
  text-decoration: underline;
}

/* Active items in desktop nav */
.desktop-nav-menu a.border-b,
.desktop-nav-menu button.border-b {
  text-decoration: underline;
  border-bottom: none;
}

/* Menu items hidden by default */
.desktop-nav-menu > * {
  opacity: 0;
  pointer-events: none;
}

/* ============================================
   OPENING ANIMATION - Right to Left
   ============================================ */
.desktop-nav-menu.menu-open > * {
  animation: fadeInMenuItem 0.6s ease-out forwards;
  pointer-events: auto;
}

/* Rightmost item (nearest to menu button) appears first */
.desktop-nav-menu.menu-open > *:nth-last-child(1) {
  animation-delay: 0.1s;
}

.desktop-nav-menu.menu-open > *:nth-last-child(2) {
  animation-delay: 0.2s;
}

.desktop-nav-menu.menu-open > *:nth-last-child(3) {
  animation-delay: 0.3s;
}

.desktop-nav-menu.menu-open > *:nth-last-child(4) {
  animation-delay: 0.4s;
}

.desktop-nav-menu.menu-open > *:nth-last-child(5) {
  animation-delay: 0.5s;
}

.desktop-nav-menu.menu-open > *:nth-last-child(6) {
  animation-delay: 0.6s;
}

.desktop-nav-menu.menu-open > *:nth-last-child(7) {
  animation-delay: 0.7s;
}

.desktop-nav-menu.menu-open > *:nth-last-child(8) {
  animation-delay: 0.8s;
}

/* ============================================
   CLOSING ANIMATION - Left to Right (reverse)
   ============================================ */
/* When closing (not open), start items visible then fade out */
.desktop-nav-menu.menu-closing:not(.menu-open) > * {
  opacity: 1;
  pointer-events: none;
  animation: fadeOutMenuItem 0.4s ease-in forwards;
  animation-delay: 0s;
}

/* Leftmost item (furthest from menu button) disappears first */
.desktop-nav-menu.menu-closing:not(.menu-open) > *:nth-last-child(6) {
  animation: fadeOutMenuItem 0.4s ease-in forwards;
  animation-delay: 0s;
}

.desktop-nav-menu.menu-closing:not(.menu-open) > *:nth-last-child(5) {
  animation: fadeOutMenuItem 0.4s ease-in forwards;
  animation-delay: 0.08s;
}

.desktop-nav-menu.menu-closing:not(.menu-open) > *:nth-last-child(4) {
  animation: fadeOutMenuItem 0.4s ease-in forwards;
  animation-delay: 0.16s;
}

.desktop-nav-menu.menu-closing:not(.menu-open) > *:nth-last-child(3) {
  animation: fadeOutMenuItem 0.4s ease-in forwards;
  animation-delay: 0.24s;
}

.desktop-nav-menu.menu-closing:not(.menu-open) > *:nth-last-child(2) {
  animation: fadeOutMenuItem 0.4s ease-in forwards;
  animation-delay: 0.32s;
}

.desktop-nav-menu.menu-closing:not(.menu-open) > *:nth-last-child(1) {
  animation: fadeOutMenuItem 0.4s ease-in forwards;
  animation-delay: 0.4s;
}

.desktop-nav-menu.menu-closing:not(.menu-open) > *:nth-last-child(7) {
  animation: fadeOutMenuItem 0.4s ease-in forwards;
  animation-delay: 0.48s;
}

.desktop-nav-menu.menu-closing:not(.menu-open) > *:nth-last-child(8) {
  animation: fadeOutMenuItem 0.4s ease-in forwards;
  animation-delay: 0.56s;
}

@keyframes fadeInMenuItem {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOutMenuItem {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Mobile Menu Panel */
.mobile-menu-panel {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  padding: 0.5rem;
}

.mobile-menu-panel[x-cloak] {
  display: none !important;
}

.mobile-menu-bg {
  background: #680144;
}

/* Mobile Menu Navigation */
.mobile-menu-nav {
  text-align: right;
}

.mobile-menu-item-link,
.mobile-menu-item-button {
  color: var(--Tertiary-100, #F6E0DF);
  text-align: right;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 22.4px */
  letter-spacing: -0.32px;
  transition: color 0.3s ease;
}

.mobile-menu-item-link:hover,
.mobile-menu-item-button:hover {
  color: var(--Tertiary-80, #F8E6E5);
}

.mobile-menu-contact-button {
  color: var(--Tertiary-100, #F6E0DF);
  border: 1px solid var(--Tertiary-100, #F6E0DF);
  border-radius: 8px;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 22.4px */
  letter-spacing: -0.32px;
  transition: background-color 0.3s ease, color 0.3s ease;
  display: inline-block;
  width: auto;
}

.mobile-menu-contact-button:hover {
  background: var(--Tertiary-100, #F6E0DF);
  color: #680144 !important;
}

/* Legacy styles for desktop navigation */
#header nav a,
#header nav button {
  color: var(--Tertiary-100, #F6E0DF);
  text-align: center;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 22.4px */
  letter-spacing: -0.32px;
  transition: color 0.3s ease, text-decoration 0.3s ease;
  text-underline-offset: 0.5rem;
}

/* Hover underline - exclude contact button */
#header nav a:hover:not([href*="contact"]),
#header nav button:hover {
  text-decoration: underline;
}

/* Active items with underline */
#header nav a.border-b,
#header nav button.border-b {
  text-decoration: underline;
  border-bottom: none;
}

/* Contact button - no underline, keep border */
#header nav a[href*="contact"]:hover {
  text-decoration: none;
}

/* Mobile: Right align navigation links */
@media (max-width: 767px) {
  /* On mobile, make header relative so it takes up space and content starts after it */
  header {
    position: relative;
  }
  
  #header nav a,
  #header nav button {
    text-align: right;
  }
  
  #header nav button {
    justify-content: flex-end;
  }
}

/* Contact button in header */
#header nav a.cta-button {
  color: var(--Tertiary-100, #F6E0DF);
  border: 1px solid var(--Tertiary-100, #F6E0DF);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#header nav a.cta-button:hover {
  background: var(--Tertiary-100, #F6E0DF);
  color: var(--Primary-100, #680144);
}

/* Desktop contact button hover - no underline */
.desktop-nav-menu a[href*="contact"]:hover {
  color: #680144 !important;
  text-decoration: none !important;
}