/* =========================================================
   BASE & TYPOGRAPHY
========================================================= */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }
.font-geist { font-family: 'Geist', sans-serif !important; }
.font-montserrat { font-family: 'Montserrat', sans-serif !important; }

/* =========================================================
   UTILITIES
========================================================= */
.hide-scrollbar::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar,
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.snap-x { scroll-snap-type: x mandatory; }
.snap-center { scroll-snap-align: center; }

/* =========================================================
   LAYOUT — BACKGROUND GRID LINES
========================================================= */
.grid-lines {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  pointer-events: none;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  padding: 0 1.5rem;
}

@media (min-width: 768px) {
  .grid-lines { padding: 0 3rem; }
}

.grid-line {
  width: 1px;
  height: 100%;
}

/* =========================================================
   NOTIFICATION BAR
========================================================= */
#global-notification-bar {
  z-index: 60;
  width: 100%;
}

#main-nav {
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

body.has-notification #main-nav {
  /* Set initial offset fallback; Javascript overrides this with exact height */
  top: 44px;
}

#main-nav.transition-top {
  transition: top 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* =========================================================
   NAVIGATION COMPONENTS
========================================================= */
.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  transition: background-color 0.15s ease;
  font-size: 0.875rem;
  color: inherit;
}

.nav-link:hover {
  background-color: rgb(245 245 244);
  color: inherit;
}

.nav-dropdown-wrapper {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.group:hover .nav-dropdown-wrapper {
  opacity: 1;
  visibility: visible;
}

.nav-dropdown-inner {
  display: flex;
  flex-direction: column;
  background-color: white;
  color: rgb(41 37 36);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid rgb(231 229 228);
  border-radius: 1rem;
  padding: 0.375rem;
}

.mobile-submenu-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  transition: color 0.15s;
  outline: none;
}

.mobile-submenu-btn:hover {
  color: #E8C4C8;
}

.mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}

.mobile-submenu-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 0 0.5rem 1rem;
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.7);
}

.mobile-nav-link {
  transition: color 0.15s;
}

.mobile-nav-link:hover {
  color: white;
}

#main-nav.scrolled-nav {
  background-color: #ffffff;
  color: #1c1917;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

#main-nav.scrolled-nav #mobile-menu-btn {
  background-color: #f5f5f4;
  border-color: #e7e5e4;
  color: #1c1917;
}

#main-nav.scrolled-nav #mobile-menu-btn:hover {
  background-color: #e7e5e4;
}

@media (min-width: 1024px) {
  #main-nav.scrolled-nav .desktop-nav-pill {
    background-color: #f5f5f4;
    border-color: #e7e5e4;
  }
  #main-nav.scrolled-nav .book-btn {
    background-color: #1c1917;
    color: #ffffff;
  }
  #main-nav.scrolled-nav .book-btn:hover {
    background-color: #44403c;
  }
}

/* =========================================================
   FORMS
========================================================= */
.form-label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(232, 196, 200, 0.6);
  margin-bottom: 0.5rem;
}

.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: rgba(42, 24, 29, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 300;
  color: white;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus {
  border-color: rgba(232, 196, 200, 0.5);
  box-shadow: 0 0 0 1px rgba(232, 196, 200, 0.5);
  outline: none;
}

/* =========================================================
   ANIMATIONS
========================================================= */
@keyframes animationIn { 0% { opacity: 0; transform: translateY(30px); filter: blur(8px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0px); } }
@keyframes slideUpFade { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } }
.animate-slide-up { animation: slideUpFade 1s ease-out forwards; }
@keyframes cinematicEntrance { 0% { transform: scale(1.4); filter: blur(20px) grayscale(100%); opacity: 0; } 20% { opacity: 1; } 100% { transform: scale(1); filter: blur(0px) grayscale(0%); opacity: 1; } }
.animate-cinematic { animation: cinematicEntrance 3.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.animate-on-scroll { animation-play-state: paused !important; }
.animate-on-scroll.animate { animation-play-state: running !important; }

/* =========================================================
   FAQ ACCORDIONS
========================================================= */
.faq-item { background-color: #fff; border: 1px solid rgb(231 229 228); border-radius: 1.5rem; transition: all 0.3s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.faq-item:hover, .faq-item[open] { border-color: rgb(214 211 209); }
.faq-summary { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; cursor: pointer; list-style: none; outline: none; }
.faq-summary::-webkit-details-marker { display: none; }
.faq-question { font-size: 1.25rem; font-weight: 500; color: rgb(28 25 23); letter-spacing: -0.025em; padding-right: 1rem; }
.faq-chevron, .faq-toggle { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 9999px; border: 1px solid rgba(74, 43, 51, 0.2); display: flex; align-items: center; justify-content: center; color: #4A2B33; transition: all 0.3s ease; }
details[open] .faq-chevron, .faq-item[open] .faq-toggle, .faq-item.is-open .faq-chevron, .faq-item.is-open .faq-toggle { border-color: #4A2B33; background-color: #4A2B33; color: #E8C4C8; }
.faq-chevron-icon, .faq-toggle i, .faq-toggle svg { width: 1rem; height: 1rem; transition: transform 0.3s ease; }
details[open] .faq-chevron-icon, details[open] .faq-toggle i, details[open] .faq-toggle svg, .faq-item[open] .faq-toggle i, .faq-item[open] .faq-toggle svg, .faq-item.is-open .faq-chevron-icon, .faq-item.is-open .faq-toggle i, .faq-item.is-open .faq-toggle svg { transform: rotate(180deg); }
.faq-body { padding: 0 1.5rem 1.5rem; margin-top: -0.5rem; }

@media (min-width: 768px) {
  .faq-summary { padding: 2rem; }
  .faq-body { padding: 0 2rem 2rem; }
}

/* =========================================================
   CONSOLIDATED GLOBAL STYLES (FONTS, KEYFRAMES, REVEALS)
========================================================= */

/* ── Typography Settings ── */
@font-face {
    font-family: 'Tan Mon Cheri';
    src: url('/assets/font/tan-mon-cheri-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat Semibold';
    src: url('/assets/font/Montserrat-Semibold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

h3 {
    font-family: 'Inter', sans-serif;
}

h1, h2 {
    font-family: 'Montserrat', sans-serif;
}

/* ── Infinite Marquee / Ticker ── */
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-marquee-scroll {
    animation: marquee-scroll 40s linear infinite;
}

.animate-marquee-scroll-fast {
    animation: marquee-scroll 20s linear infinite;
}

.animate-marquee-scroll:hover,
.animate-marquee-scroll-fast:hover {
    animation-play-state: paused;
}

/* ── Scroll Reveal Utilities ── */
.reveal, .reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible, .reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-100 { transition-delay: 0.1s; }
.reveal-delay-200 { transition-delay: 0.2s; }
.reveal-delay-300 { transition-delay: 0.3s; }