/* ===== BASE & SELECTION ===== */
::selection { background: #c9a84c; color: #2c2c2c; }

/* ===== SCROLLBAR HIDE (carousel) ===== */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ===== NAV ===== */
.nav-transparent { background: transparent; border-bottom: 1px solid transparent; }
.nav-scrolled {
  background-color: rgba(245, 240, 232, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.nav-transparent .nav-link { color: #ffffff; }
.nav-transparent .nav-link:hover { color: #c9a84c; }
.nav-scrolled .nav-link { color: #2c2c2c; }
.nav-scrolled .nav-link:hover { color: #6b1d35; }

/* Nav logo - full color always, with drop shadow over hero for visibility */
.nav-transparent .nav-logo {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}
.nav-scrolled .nav-logo { filter: none; }

.nav-transparent .nav-hamburger { color: #ffffff; }
.nav-scrolled .nav-hamburger { color: #2c2c2c; }

/* Nav link underline draw */
.nav-link-draw { position: relative; }
.nav-link-draw::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #c9a84c;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.nav-link-draw:hover::after { transform: scaleX(1); }

/* ===== HERO ===== */
.hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(44, 44, 44, 0.5) 0%,
    rgba(44, 44, 44, 0.35) 50%,
    rgba(245, 240, 232, 1) 95%
  );
}

/* Hero Video Background */
.hero-video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.hero-video-wrapper iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw; /* 16:9 aspect ratio */
  min-height: 100vh;
  min-width: 177.77vh; /* 16:9 inverse */
  transform: translate(-50%, -50%);
}

/* Cover YouTube title flash during load */
.hero-video-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2c2c2c;
  z-index: 10;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.6s ease;
}
.hero-video-ready .hero-video-wrapper::after {
  opacity: 0;
}

/* Hide fallback once video is playing */
.hero-video-loaded #hero-fallback {
  opacity: 0;
  transition: opacity 1s ease;
}

/* ===== LITERARY DIVIDER ===== */
.literary-divider { text-align: center; padding: 3rem 0; }
.literary-divider span {
  font-family: 'Playfair Display', serif;
  color: #c9a84c;
  font-size: 1.5rem;
  letter-spacing: 0.5em;
}

/* ===== MENU CARDS ===== */
.menu-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border-bottom: 2px solid transparent;
}
.menu-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  border-bottom-color: #c9a84c;
}

/* Menu cards with background images */
.menu-card-img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: block;
}
.menu-card-img:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* ===== FORM INPUTS ===== */
.form-input {
  background: #ffffff;
  border: 1px solid rgba(44, 44, 44, 0.15);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-input:focus {
  border-color: #c9a84c;
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
  outline: none;
}

/* ===== FOOTER LINKS ===== */
.footer-link-hover {
  transition: transform 0.3s ease, color 0.3s ease;
}
.footer-link-hover:hover {
  transform: translateX(4px);
  color: #c9a84c !important;
}

/* ===== FULL BLEED IMAGE ===== */
.full-bleed-image {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== MATERIAL SYMBOLS ===== */
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  vertical-align: middle;
}

/* ===== MOBILE NAV OVERLAY ===== */
.mobile-nav-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-nav-overlay.active {
  opacity: 1;
  pointer-events: auto;
}