/* ==========================================================================
   Modern CSS Reset & Global Normalize
   ========================================================================== */

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 2. Remove default margin */
/**:not(dialog) {
  margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0 !important;
}*/

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Increase line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* 10. Create a root stacking context */
#root, #__next {
  isolation: isolate;
}

/* Scroll reveal helper styles */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-on-scroll.is-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Header transition */
#main-header.scrolled {
  background-color: var(--color-brand-cream);
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5) !important;
}

/* ==========================================================================
   Mobile Full Screen Overlay Menu Styles
   ========================================================================== */
#mobile-menu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background-color: rgba(17, 17, 17, 0.98) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  z-index: 100000 !important;
  padding: 1.25rem 1.5rem 2.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow-y: auto !important;
}

#mobile-menu.hidden {
  display: none !important;
}

.mobile-menu__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.mobile-menu__close {
  background: none !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 1.75rem !important;
  cursor: pointer !important;
  padding: 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.3s ease, transform 0.3s ease !important;
}

.mobile-menu__close:hover {
  color: #FFD800 !important;
  transform: rotate(90deg) !important;
}

.mobile-menu__body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  padding: 2.5rem 0 !important;
}

.mobile-menu__nav {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.75rem !important;
  width: 100% !important;
  text-align: center !important;
}

.mobile-link {
  text-decoration: none !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.5rem 1rem !important;
  transition: color 0.3s ease, transform 0.3s ease !important;
  display: block !important;
}

.mobile-link:hover,
.mobile-link.active {
  color: #FFD800 !important;
  transform: translateY(-2px) !important;
}

.mobile-menu__footer {
  width: 100% !important;
  padding-top: 1rem !important;
  display: flex !important;
  justify-content: center !important;
}

.mobile-menu__cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  background-color: #FFD800 !important;
  color: #111111 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  padding: 0.875rem 2rem !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.05em !important;
  transition: all 0.3s ease !important;
}

.mobile-menu__cta:hover {
  background-color: #FFDD21 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 25px -5px rgba(255, 216, 0, 0.4) !important;
}

/* Mobile hamburger visibility */
.mobile-hamburger {
  cursor: pointer !important;
}

@media (min-width: 768px) {
  .mobile-hamburger {
    display: none !important;
  }
  #mobile-menu {
    display: none !important;
  }
}

/* ==========================================================================
   Smart Header Scroll Hide / Show Behavior
   ========================================================================== */
#main-header,
.main-header {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
  will-change: transform;
}

#main-header.nav-hidden,
.main-header.nav-hidden {
  transform: translateY(-100%) !important;
  pointer-events: none !important;
}

#main-header.scrolled,
.main-header.scrolled {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}