/* GATLANTA shared foundation.
 *
 * Everything in here is byte-identical across every page that used it, so moving
 * it out of the six inline <style> blocks changes nothing visually. It is linked
 * BEFORE each page's inline <style>, so any page-specific rule still overrides.
 *
 * Deliberately NOT shared, because these genuinely differ per page and unifying
 * them would be a visual change, not a refactor:
 *   body, nav, .mobile-menu-btn span, .snow-container
 *
 * Edit shared nav / mobile-menu / footer / token values HERE, once.
 */

:root {
  --gold: #f5d000;
  --gold-light: #fff3b0;
  --gold-dark: #d4b200;
  --orange: #e85d04;
  --orange-light: #ffba08;
  --primary: #e87722;
  --primary-dark: #c5631c;
  --black: #1a1a1a;
  --black-pure: #000000;
  --white: #ffffff;
  --off-white: #fafafa;
  --gray: #595959;
  --gray-light: #e8e8e8;
  --gray-dark: #333333;

  /* Section backgrounds - warm cabin palette */
  --section-hero: #1a1a1a;
  --section-gallery: #1a1a1a;
  --section-video: #fff8e7;
  --section-features: #ffffff;
  --section-cabin: #1a1a1a;
  --section-payment: #f5f0e8;
  --section-extras: #ffffff;
  --section-tripinfo: #eef2f4;
  --section-faq: #faf6f0;
  --section-contact: #1a1a1a;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--black);
  color: var(--white);
  padding: 8px 16px;
  z-index: 9999;
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.js .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

nav.scrolled {
  padding: 0.7rem 4rem;
  border-bottom: 1.5px solid var(--gold);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  text-decoration: none;
}

.nav-logo img {
  height: 32px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all 0.3s ease;
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.3s ease;
}

.nav-links a:hover {
  color: var(--gold-dark);
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-cta {
  background: var(--gold);
  color: var(--black) !important;
  padding: 0.7rem 1.5rem;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.nav-cta:hover {
  background: var(--white);
  color: var(--black) !important;
}

.nav-cta::after {
  display: none !important;
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1001;
}

.mobile-menu-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 400px;
  height: 100vh;
  background: var(--white);
  z-index: 999;
  transition: right 0.4s ease;
  padding: 6rem 2rem 2rem;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
}

.mobile-menu.active {
  right: 0;
}

.mobile-menu a {
  display: block;
  padding: 1rem 0;
  font-family: "Oswald", sans-serif;
  font-size: 1.3rem;
  color: var(--black);
  text-decoration: none;
  border-bottom: 1px solid var(--gray-light);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mobile-menu a:hover {
  color: var(--gold-dark);
}

.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.mobile-overlay.active {
  opacity: 1;
  visibility: visible;
}

.snowflake {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.8),
    transparent
  );
  border-radius: 50%;
  animation: snowfall linear infinite;
  opacity: 0;
}

@keyframes snowfall {
  0% {
    transform: translateY(-10px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

/* ---------------------------------------------------------------------------
   Support for the shared fragments in partials/site.ts.

   These four classes replace per-page inline styles that had drifted: the
   active-page highlight in the mobile drawer, the drawer's Book Now button, and
   two footer paragraphs. Defined here so every page renders them the same way.
   --------------------------------------------------------------------------- */

/* The drawer sits on white. Gold-dark text on white measures 2.07:1, which
   fails WCAG AA at any size, so the active item is marked with weight and a
   gold rule instead of colour alone, and the CTA becomes a filled block. Black
   on gold measures 11.5:1, matching the hero button. */
.mobile-menu a.active {
  color: var(--black);
  font-weight: 700;
  border-left: 4px solid var(--gold);
  padding-left: 0.9rem;
}

.mobile-menu-cta {
  background: var(--gold);
  color: var(--black) !important;
  font-weight: 700;
  text-align: center;
  padding: 0.9rem 1rem !important;
  margin-top: 1.2rem;
}

.mobile-menu-cta:hover {
  background: var(--gold-light);
  color: var(--black) !important;
}

.footer-tagline {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1rem;
}

.footer-copy {
  margin-top: 1rem;
}

/* ---------------------------------------------------------------------------
   Reduced motion.

   Previously only index, events, and local-activities honored the preference,
   so about, booking, and payment kept animating. Declaring it here covers all
   six pages, and it sits last in the file so it wins over the shared .js
   .reveal rule above at equal specificity.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .snowflake {
    display: none;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   Compact nav for the band just above the mobile breakpoint.

   The nav carries nine items between 769px and 1023px, where the page still
   uses the desktop layout but there is not room for 2rem gaps at 4rem page
   padding. Without this the last item runs past the right edge. Tightening the
   gap and letter-spacing recovers roughly 90px, which is enough.
   --------------------------------------------------------------------------- */

@media (min-width: 769px) and (max-width: 1023px) {
  .nav-links {
    gap: 1.1rem;
  }

  .nav-links a {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
  }

  .nav-cta {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
}