/* ============================================================
   THE BOAT WEDNESFIELD — styles.css
   Primary: #1c2748 navy  |  Secondary: #f5efe0 warm ivory
   ============================================================ */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Navigation — always solid navy ---- */
.nav-link {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240,244,255,0.6);
  font-family: 'DM Sans', system-ui, sans-serif;
  transition: color 200ms ease;
}
.nav-link:hover { color: #f0f4ff; }
.nav-link.active { color: #c9a96e; }

/* on-dark is same as default since nav is always dark */
#site-header.on-dark .nav-link { color: rgba(240,244,255,0.6); }
#site-header.on-dark .nav-link:hover { color: #f0f4ff; }
#site-header.on-dark .nav-book { background: #c9a96e; color: #0e1530; }
#site-header.on-dark .nav-bars span { background: #f0f4ff; }

/* Mobile drawer — sits on ivory bg so needs dark text */
.mobile-nav-link {
  display: block;
  padding: 0.75rem 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1c2748;
  font-family: 'DM Sans', system-ui, sans-serif;
  border-bottom: 1px solid rgba(212,204,186,0.8);
  transition: color 200ms ease;
}
.mobile-nav-link:hover { color: #c9a96e; }

/* Hamburger bars — light on dark nav */
.nav-bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: #f0f4ff;
  border-radius: 1px;
  transition: transform 280ms ease, opacity 280ms ease;
  transform-origin: center;
}
.nav-open .nav-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-open .nav-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Header — always solid #1c2748 ---- */
#site-header {
  background: #1c2748;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
#site-header.scrolled,
#site-header.solid {
  background: #1c2748;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#site-header.scrolled .nav-link,
#site-header.solid .nav-link { color: rgba(240,244,255,0.6); }
#site-header.scrolled .nav-link:hover,
#site-header.solid .nav-link:hover { color: #f0f4ff; }
#site-header.scrolled .nav-link.active,
#site-header.solid .nav-link.active { color: #c9a96e; }
#site-header.scrolled .nav-book,
#site-header.solid .nav-book { background: #c9a96e; color: #0e1530; }
#site-header.scrolled .nav-bars span,
#site-header.solid .nav-bars span { background: #f0f4ff; }

/* ---- Hero entrance animations ---- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-label { animation: fade-up 0.9s ease forwards; animation-delay: 0.2s; }
.hero-title { animation: fade-up 1s ease forwards;   animation-delay: 0.35s; }
.hero-sub   { animation: fade-up 0.9s ease forwards; animation-delay: 0.6s; }
.hero-cta   { animation: fade-up 0.8s ease forwards; animation-delay: 0.85s; }

/* ---- Scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---- Menu rows ---- */
.menu-row {
  border-bottom: 1px solid rgba(212,204,186,0.8);
  transition: background 200ms ease;
}
.menu-row:last-child { border-bottom: none; }

/* Stagger reveal delays */
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }

/* ---- Selection colour ---- */
::selection {
  background: rgba(201,169,110,0.28);
  color: #1c2748;
}

/* ---- Food image zoom-in on enter ---- */
@keyframes zoom-in {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
.food-zoom-wrap {
  animation: zoom-in 1.2s ease-out forwards;
  animation-play-state: paused;
}
.food-zoom-wrap.in-view {
  animation-play-state: running;
}

/* ---- Form inputs ---- */
.form-input {
  width: 100%;
  background: #ffffff;
  border: 1px solid #d4ccba;
  color: #1c2748;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.875rem;
  padding: 0.85rem 1rem;
  outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.form-input::placeholder { color: rgba(28,39,72,0.35); }
.form-input:focus {
  border-color: #c9a96e;
  box-shadow: 0 0 0 3px rgba(201,169,110,0.12);
}
.form-input option { background: #ffffff; color: #1c2748; }

.form-label {
  display: block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6a7080;
  margin-bottom: 0.5rem;
}

/* Date/time input picker icon */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.5;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 0.8;
}

/* ---- Event cards ---- */
.event-card {
  position: relative;
  overflow: hidden;
  cursor: default;
}
.event-card-img {
  transition: transform 600ms ease;
}
.event-card:hover .event-card-img {
  transform: scale(1.04);
}

/* ---- Newsletter form (dark section) ---- */
.newsletter-input {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #f0f4ff;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.875rem;
  padding: 0.9rem 1.2rem;
  outline: none;
  transition: border-color 200ms ease, background 200ms ease;
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
}
.newsletter-input::placeholder { color: rgba(240,244,255,0.35); }
.newsletter-input:focus {
  border-color: #c9a96e;
  background: rgba(255,255,255,0.12);
}

/* ---- Divider line ---- */
.gold-line {
  width: 2rem;
  height: 1px;
  background: rgba(201,169,110,0.55);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal        { opacity: 1; transform: none; }
  .hero-label,
  .hero-title,
  .hero-sub,
  .hero-cta      { opacity: 1; }
}