/* ============================================================
   Surf China — the site nav, one stylesheet.

   This block used to be pasted into the top of every page's inline <style>.
   Nobody kept the copies in step: by Sep 2026 there were SIX versions of it
   across 39 pages — square 2px CTA buttons on the older blog posts against the
   980px pills everywhere else, half of them with no .nav-buyout rule at all, so
   the Private Buyout link rendered as plain grey body text. The markup is
   stamped by tools/stamp_nav.py; this is the matching stylesheet, and
   tools/check_publish.py fails if a page carries the nav without linking it.

   LOAD IT BEFORE THE PAGE'S OWN <style>. A page can still override a nav rule
   in its inline stylesheet (a few do, for prefers-reduced-motion), and that
   only works while this file comes first.

   index.html does not use this file — its nav rules live in Assets/site.css,
   which it already loads.
   ============================================================ */

/* Tokens the nav needs. Each page defines its palette in its own :root, which
   loads after this file and therefore wins; these are only here so the older
   pages that never declared --ease-out / --ease-in-out / --ocean-deep stop
   dropping the dropdown transition and the buyout hover colour on the floor. */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ocean-deep: #092e3e;
}

nav {
  position: sticky; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 1rem 0;
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  transition: all 0.4s var(--transition);
}
nav.scrolled { padding: 0.7rem 0; }
@media (prefers-reduced-transparency: reduce) {
  nav { background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.nav-inner {
  max-width: 1600px; margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
  display: flex; align-items: center; justify-content: space-between; gap: 2.5rem;
}
.nav-logo {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: 'Inter', sans-serif; font-size: 1.02rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--charcoal); text-decoration: none; transition: color 0.4s;
}
.nav-logo-mark { width: 38px; height: 38px; flex-shrink: 0; display: block; }
.nav-logo-text { white-space: nowrap; }
.nav-links { display: flex; gap: 1.5rem; align-items: center; }
.nav-links > a, .nav-dropdown-toggle { white-space: nowrap; }
/* 1120–1600px: 6 top-level links + 2 dropdowns + 2 buttons need ~1420px at full spacing — tighten. */
@media (min-width: 1121px) and (max-width: 1600px) { .nav-links { gap: 1rem; } .nav-inner { padding-left: 1.25rem; padding-right: 1.25rem; } .nav-logo-text { display: none; } .nav-cta, .nav-buyout { padding-left: 1rem; padding-right: 1rem; } }
/* ≥1601px: full nav with the logo text; buttons stay a touch tighter so it fits inside 1600px. */
@media (min-width: 1601px) { .nav-cta, .nav-links a.nav-buyout { padding-left: 1.2rem; padding-right: 1.2rem; } }
.nav-links a {
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--charcoal); text-decoration: none;
  transition: all 0.3s; position: relative;
}
.nav-links a:hover { opacity: 0.7; }
.nav-cta {
  font-size: 0.75rem; padding: 0.6rem 1.4rem;
  background: var(--ocean); color: var(--white);
  border: 1px solid var(--ocean); border-radius: 980px;
  text-decoration: none; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; transition: all 0.3s;
}
.nav-cta:hover { background: var(--ocean-light); border-color: var(--ocean-light); color: var(--white); }
/* Plan Your Trip dropdown */
.nav-links a.nav-buyout {
  font-size: 0.75rem; padding: 0.6rem 1.4rem;
  color: #8a6a2f; border: 1px solid #c4a265; border-radius: 980px;
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(196,162,101,0.08);
}
.nav-links a.nav-buyout:hover { background: var(--gold); color: var(--ocean-deep); opacity: 1; }
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--charcoal); background: none; border: none; cursor: pointer; font-family: inherit;
  padding: 0; display: inline-flex; align-items: center; gap: 0.35rem; transition: opacity 0.3s;
}
.nav-dropdown:hover .nav-dropdown-toggle, .nav-dropdown:focus-within .nav-dropdown-toggle { opacity: 0.7; }
.nav-dropdown-toggle .caret { font-size: 0.6rem; transition: transform 0.25s var(--ease-in-out); }
.nav-dropdown:hover .nav-dropdown-toggle .caret, .nav-dropdown:focus-within .nav-dropdown-toggle .caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 50%; margin-top: 12px; transform: translateX(-50%);
  background: var(--white); border: 1px solid rgba(0,0,0,0.08); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12); padding: 0.4rem 0; min-width: 210px;
  opacity: 0; visibility: hidden; scale: 0.97; translate: 0 -4px; transform-origin: top center;
  transition: opacity 0.22s var(--ease-out), visibility 0.22s, scale 0.22s var(--ease-out), translate 0.22s var(--ease-out); z-index: 1001;
}
.nav-dropdown-menu::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; scale: 1; translate: 0 0; }
.nav-dropdown-menu a {
  display: block; padding: 0.65rem 1.4rem; font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--charcoal); white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: var(--sand); opacity: 1; }
.mobile-menu-label {
  display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--warm-gray); padding: 1.4rem 0 0.4rem; border: none;
}
.mobile-menu-group { border-bottom: 1px solid rgba(0,0,0,0.06); }
.mobile-menu-group summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  font-size: 1.35rem; font-family: 'Montserrat', sans-serif; font-weight: 600; letter-spacing: -0.02em; color: var(--charcoal); padding: 1rem 0; }
.mobile-menu-group summary::-webkit-details-marker { display: none; }
.mobile-menu-group summary::after { content: '\25BE'; font-size: 1rem; color: var(--warm-gray); transition: rotate 0.2s; }
.mobile-menu-group[open] summary::after { rotate: 180deg; }
.mobile-menu-group a { font-size: 1.05rem; font-weight: 500; padding: 0.6rem 0 0.6rem 1rem; border-bottom: none; }
.mobile-menu-group a:last-child { padding-bottom: 1rem; }
.nav-mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px 4px; }
.nav-mobile-toggle span { display: block; width: 24px; height: 2px; background: var(--charcoal); margin: 5px 0; transition: transform 0.3s var(--ease-in-out), opacity 0.3s; }
.nav-mobile-cta {
  display: none;
  font-size: 0.7rem; padding: 0.5rem 0.95rem;
  background: var(--ocean); color: var(--white);
  border: 1px solid var(--ocean); border-radius: 980px;
  text-decoration: none; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; transition: all 0.3s;
  white-space: nowrap;
}
.nav-mobile-cta:hover { background: var(--ocean-light); border-color: var(--ocean-light); }
.mobile-menu {
  display: none; position: fixed; inset: 0;
  background: rgba(255,255,255,0.98); backdrop-filter: blur(20px);
  z-index: 999; padding: 6rem 2rem 2rem; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.mobile-menu { opacity: 0; translate: 0 14px;
  transition: opacity 0.3s var(--ease-out), translate 0.3s var(--ease-out), display 0.3s allow-discrete; }
.mobile-menu.open { display: flex; opacity: 1; translate: 0 0; }
@starting-style { .mobile-menu.open { opacity: 0; translate: 0 14px; } }
.mobile-menu a {
  display: block; font-size: 1.35rem; font-family: 'Montserrat', sans-serif; font-weight: 600; letter-spacing: -0.02em;
  color: var(--charcoal); text-decoration: none; padding: 1rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.mobile-close { position: absolute; top: 1.2rem; right: 1.5rem; background: none; border: none; font-size: 2rem; color: var(--charcoal); cursor: pointer; line-height: 1; }
/* Nav: 6 top-level links stop fitting below ~1100px — switch to the mobile menu there. */
@media (max-width: 1120px) {
  .nav-links { display: none; }
  .nav-mobile-toggle { display: flex; flex-direction: column; justify-content: center; justify-self: start; order: 1; }
  .nav-mobile-cta { display: inline-flex; align-items: center; justify-self: end; order: 3; }
  .nav-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem; }
  .nav-logo { order: 2; justify-self: center; }
}
@media (max-width: 768px) {
}
@media (max-width: 480px) {
  .nav-logo-mark { width: 30px; height: 30px; }
  .nav-logo { font-size: 0.82rem; gap: 0.4rem; }
  .nav-mobile-cta { font-size: 0.65rem; padding: 0.45rem 0.75rem; }
}
@media (max-width: 360px) {
  .nav-logo-text { display: none; }
}