/* ==========================================================================
   Thailand trip page — thailand.html only
   Fonts: Cormorant Garamond (headings), Raleway (body), Noto Sans Thai (Thai words)
   ========================================================================== */

:root {
  --navy: #1a2942;
  --navy-deep: #0f1b2d;
  --gold: #c9a55c;
  --gold-light: #e0c893;
  --cream: #fbf6ec;
  --ink: #2a2a2a;
  --coral: #e8735a;
  --lagoon: #2a9d9a;
  --jungle: #4f8a4b;
  --mango: #f2b544;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Raleway', sans-serif;
  line-height: 1.65;
}
h1, h2, h3 { font-family: 'Cormorant Garamond', serif; color: var(--navy); }
.hand { font-family: 'Cormorant Garamond', serif; font-style: italic; }

/* ---------- HERO ---------- */
/* Top padding is 54px less than the original design because the
   "Day 1, Day 2…" bar now sits in the page above the hero instead of
   floating over it, so the hero looks the same. */
header.hero {
  position: relative;
  isolation: isolate; /* keeps the photo and tint behind the hero text */
  color: var(--cream);
  text-align: center;
  padding: 76px 24px 70px;
}
/* Hero photo is a real <img> (so it can have a description), placed
   behind the text with the same crop as the design's background. */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  z-index: -2;
}
/* dark navy tint over the photo, as in the design */
header.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(15,27,45,0.62) 0%, rgba(15,27,45,0.5) 40%, rgba(15,27,45,0.88) 100%);
}
.eyebrow {
  display: inline-block;
  color: var(--navy-deep);
  background: var(--mango);
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
header.hero h1 {
  font-size: 3.3rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.05;
  margin: 0 auto 8px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.6rem;
  color: var(--gold-light);
  margin-bottom: 18px;
  max-width: 760px; margin-left: auto; margin-right: auto;
}
.dates { font-size: 1.05rem; margin-bottom: 20px; color: #fff; font-weight: 500; }
.intro { max-width: 540px; margin: 0 auto 30px; color: #eef0f5; font-size: 1rem; }
.btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 13px 30px;
  border-radius: 999px;
  font-size: 0.92rem;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--mango); color: var(--navy-deep); }
.btn-secondary { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.6); color: #fff; }



/* ---------- "DAY 1, DAY 2…" JUMP BAR ----------
   On this page the site nav bar is not pinned: it scrolls away, and
   this bar pins to the very top of the screen once you reach it, on
   every screen size. Jump links land just below it: 54px jump bar +
   12px breathing room. */
html { scroll-behavior: smooth; scroll-padding-top: 66px; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1, "onum" 0; }
body, h1, h2, h3, h4, .num, .price, .day-num, .base .n, .code { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1, "onum" 0; }
.topnav { position: sticky; top: 0; z-index: 50; height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: rgba(15,27,45,0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(224,200,147,0.25); }
.nav-links { flex: 1; display: flex; gap: 2px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a { color: #e6e9f0; text-decoration: none; font-size: 0.82rem; font-weight: 600; padding: 7px 11px; border-radius: 999px; }
.nav-links a:hover { background: rgba(255,255,255,0.1); }
.nav-links a.day { color: var(--gold-light); }
.nav-apply { flex: none; background: var(--mango); color: var(--navy-deep); font-weight: 700; font-size: 0.88rem; padding: 9px 20px; border-radius: 999px; text-decoration: none; }
/* ---------- CLICKABLE TIERS ---------- */
a.tier { display: block; text-decoration: none; color: inherit; cursor: pointer; }
a.tier:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(26,41,66,0.15); }
.tier-cta { margin-top: 14px; font-weight: 700; font-size: 0.88rem; color: var(--coral); }
.tier.past { pointer-events: none; }
.tier.past .tier-cta { display: none; }
/* ---------- CTA BAND ---------- */
.cta-band { margin: 50px 0 0; padding: 56px 24px; text-align: center; background: linear-gradient(120deg, var(--navy), var(--navy-deep)); }
.cta-band h3 { color: #fff; font-size: 2.4rem; margin-bottom: 6px; }
.cta-band p { color: var(--gold-light); font-size: 1.05rem; margin-bottom: 24px; }
.btn-big { font-size: 1.15rem; padding: 18px 46px; box-shadow: 0 8px 24px rgba(242,181,68,0.35); }
footer a { color: #d8dbe4; text-decoration: none; }

/* ---------- HERO ROUTE ---------- */
.route {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  max-width: 780px; margin: 26px auto 22px;
  padding: 22px 14px 18px;
  background: rgba(15,27,45,0.45);
  border: 1px solid rgba(224,200,147,0.35);
  border-radius: 18px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.route::before {
  content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 30px;
  border-top: 2px dashed rgba(242,181,68,0.7);
}
.stop { position: relative; padding: 0 8px; }
.stop .dot { display: block; width: 16px; height: 16px; margin: 0 auto 10px; border-radius: 50%; background: var(--mango); box-shadow: 0 0 0 4px rgba(242,181,68,0.25); position: relative; z-index: 1; }
.stop .city { font-family: 'Cormorant Garamond', serif; font-size: 1.55rem; font-weight: 700; color: #fff; line-height: 1.1; }
.stop .what { font-size: 0.85rem; color: #e6e9f0; margin-top: 4px; line-height: 1.4; }
.closer { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.3rem; color: var(--gold-light); margin: 0 auto 22px; max-width: 520px; }

/* ---------- AT A GLANCE ---------- */
.glance {
  max-width: 860px;
  margin: -34px auto 0;
  position: relative;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(26,41,66,0.12);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  text-align: center;
  padding: 22px 12px;
}
.glance div { padding: 4px 8px; }
.glance .num { font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; font-weight: 700; color: var(--coral); line-height: 1; }
.glance .lbl { font-size: 0.8rem; color: #555; margin-top: 4px; }

/* ---------- HIGHLIGHTS ---------- */
section.highlights { max-width: 760px; margin: 0 auto; padding: 60px 24px 20px; text-align: center; }
section.highlights h3 { font-size: 2rem; margin-bottom: 6px; }
.section-hand { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.3rem; color: #6b6b6b; margin-bottom: 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip {
  background: #fff;
  border: 1px solid rgba(26,41,66,0.1);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.9rem;
  color: var(--navy);
  box-shadow: 0 2px 6px rgba(26,41,66,0.05);
}
.coming-soon {
  max-width: 520px;
  margin: 36px auto 0;
  border: 2px dashed var(--gold);
  border-radius: 14px;
  padding: 20px 24px;
  background: rgba(201,165,92,0.07);
}
.coming-soon h4 { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; color: var(--navy); margin-bottom: 4px; }
.coming-soon p { font-size: 0.9rem; color: #6b5d3e; font-style: italic; }



.incl {
  max-width: 720px; margin: 36px auto 0; text-align: left;
  background: #fff; border-radius: 18px; box-shadow: 0 6px 20px rgba(26,41,66,0.08);
  display: grid; grid-template-columns: 1.4fr 1fr; overflow: hidden;
}
.incl > div { padding: 24px 26px; }
.incl h4 { font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; color: var(--navy); margin-bottom: 10px; }
.incl ul { list-style: none; }
.incl li { position: relative; padding-left: 26px; margin-bottom: 8px; font-size: 0.93rem; color: #444; }
.incl .yes li::before { content: "✓"; position: absolute; left: 0; color: var(--lagoon); font-weight: 700; }
.incl .no { background: rgba(26,41,66,0.04); }
.incl .no li::before { content: "–"; position: absolute; left: 4px; color: #999; font-weight: 700; }

/* ---------- PRICING ---------- */
section.pricing { max-width: 900px; margin: 0 auto; padding: 50px 24px 10px; text-align: center; }
section.pricing h3 { font-size: 2.2rem; margin-bottom: 4px; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; align-items: stretch; }
.tier {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 30px 20px 24px;
  box-shadow: 0 6px 20px rgba(26,41,66,0.08);
  border: 2px solid transparent;
  transition: transform 0.2s ease;
}
.tier .emoji { font-size: 2rem; line-height: 1; }
.tier .tname { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; font-weight: 700; color: var(--navy); }
.tier .ttype { font-size: 0.72rem; letter-spacing: 0.14em; font-weight: 700; color: #8a8a8a; }
.tier .price { font-family: 'Cormorant Garamond', serif; font-size: 2.8rem; font-weight: 700; color: var(--coral); line-height: 1.1; margin-top: 12px; }
.tier .pp { font-size: 0.8rem; color: #777; }
.tier .until { display: inline-block; margin-top: 14px; font-size: 0.85rem; font-weight: 600; color: var(--navy); background: rgba(42,157,154,0.12); padding: 6px 14px; border-radius: 999px; }
.tier .badge {
  display: none;
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--mango); color: var(--navy-deep);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
.tier.active { border-color: var(--mango); transform: translateY(-6px); box-shadow: 0 14px 30px rgba(242,181,68,0.25); }
.tier.active .badge { display: inline-block; }
/* Pricing is fixed (no JavaScript). The current tier has class "active".
   When a tier's deadline passes, give it class "past" and change its
   badge text to ENDED; then make the next tier "active" and give it a
   CURRENT PRICE badge. Also update the hero pill. */
.tier.past { opacity: 0.45; }
.tier.past .price { text-decoration: line-through; color: #999; }
.tier.past .badge { display: inline-block; background: #ddd; color: #666; }
.price-foot { margin-top: 22px; font-size: 0.92rem; color: #555; }
.price-foot strong { color: var(--coral); }
.hero-pill {
  display: inline-block; margin-bottom: 26px;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(242,181,68,0.7);
  color: #fff; font-size: 0.88rem; font-weight: 600;
  padding: 7px 16px; border-radius: 999px;
}
.hero-pill b { color: var(--mango); }

/* ---------- CHAPTERS ---------- */
.chapter {
  margin-top: 50px;
  padding: 34px 24px;
  text-align: center;
  color: #fff;
}
.chapter .part { font-size: 0.78rem; letter-spacing: 0.18em; font-weight: 700; opacity: 0.85; }
.chapter h2 { color: #fff; font-size: 2.6rem; line-height: 1.1; }
.chapter .hand { font-size: 1.5rem; opacity: 0.95; }
.ch-bkk { background: linear-gradient(120deg, var(--coral), #d4583f); }
.ch-cnx { background: linear-gradient(120deg, var(--jungle), #3b6f3a); }
.ch-hkt { background: linear-gradient(120deg, var(--lagoon), #1f7b84); }

/* ---------- DAYS ---------- */
.day-block {
  max-width: 740px;
  margin: 0 auto;
  padding: 44px 24px;
  border-bottom: 1px dashed rgba(26,41,66,0.15);
}
.day-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.day-num {
  flex: none;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--mango);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 1.5rem;
}
.day-label { font-size: 0.78rem; letter-spacing: 0.1em; color: var(--coral); font-weight: 700; }
.day-block h2 { font-size: 2rem; line-height: 1.15; }
.day-block p { font-size: 0.98rem; color: #333; margin: 12px 0; }
.thai-big { margin-left: auto; font-family: 'Noto Sans Thai', sans-serif; font-weight: 600; font-size: 2.8rem; line-height: 1; color: var(--gold); opacity: 0.9; }
.thai { font-family: 'Noto Sans Thai', 'Raleway', sans-serif; font-size: 0.95rem; color: var(--gold); font-weight: 600; margin-top: 2px; }
.thai span { font-family: 'Raleway', sans-serif; color: #888; font-weight: 500; font-size: 0.82rem; margin-left: 6px; }
.day-note { font-size: 0.85rem !important; font-style: italic; color: #7a7a7a !important; }
.vibes { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.vibe { font-size: 0.8rem; background: rgba(242,181,68,0.18); color: #6b4d0e; padding: 4px 12px; border-radius: 999px; font-weight: 600; }

.photo-grid { display: grid; gap: 10px; margin-top: 16px; }
.photo-grid.three { grid-template-columns: 1.3fr 1fr 1fr; }
.photo-grid.two { grid-template-columns: 1.6fr 1fr; }
.photo-grid.four { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.photo-grid img { width: 100%; height: 340px; object-fit: cover; border-radius: 12px; display: block; }
.photo-grid img.top { object-position: 72% 30%; }
.photo-grid.one { grid-template-columns: 1fr; }
.photo-grid.one img { height: 420px; }

.placeholder-img {
  width: 100%;
  height: 280px;
  margin-top: 16px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.92);
  font-size: 0.85rem; letter-spacing: 0.08em; text-align: center; padding: 20px;
}
.ph-cnx { background: linear-gradient(135deg, var(--jungle) 0%, var(--navy) 120%); }
.ph-hkt { background: linear-gradient(135deg, var(--lagoon) 0%, var(--navy) 120%); }

.shabbos { background: linear-gradient(180deg, rgba(201,165,92,0.10), rgba(201,165,92,0.02)); border-radius: 18px; border-bottom: none; margin: 20px auto; }
.shabbos .day-num { background: var(--gold); color: var(--navy-deep); }

/* ---------- HOME BASE ---------- */
section.accommodations { background: var(--navy); color: var(--cream); text-align: center; padding: 56px 24px; margin-top: 50px; }
section.accommodations h2 { color: #fff; font-size: 2.2rem; margin-bottom: 18px; }
.bases { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.base { background: rgba(255,255,255,0.07); border: 1px solid rgba(224,200,147,0.35); border-radius: 14px; padding: 14px 22px; min-width: 150px; }
.base .n { font-family: 'Cormorant Garamond', serif; font-size: 2rem; color: var(--mango); font-weight: 700; line-height: 1; }
.base .c { font-size: 0.9rem; color: #dfe3ec; }
section.accommodations em { font-size: 0.85rem; color: #9aa0b0; }

/* ---------- FLIGHTS ---------- */
section.flights { max-width: 760px; margin: 0 auto; padding: 56px 24px 10px; }
section.flights h3 { font-size: 2rem; text-align: center; }
.flight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; }
.pass {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(26,41,66,0.08);
  overflow: hidden;
  font-size: 0.9rem;
  color: #444;
}
.pass-top { background: var(--navy); color: var(--gold-light); padding: 10px 18px; font-size: 0.75rem; letter-spacing: 0.14em; font-weight: 700; }
.pass-route { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px; }
.pass-route .code { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 700; color: var(--navy); }
.pass-route .plane { color: var(--coral); font-size: 1.2rem; }
.pass-body { padding: 0 18px 16px; border-top: 2px dashed rgba(26,41,66,0.12); margin-top: 8px; padding-top: 12px; }
.pass-body p { margin-bottom: 4px; }
.flight-sub { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--navy); text-align: center; margin: 34px 0 4px; }
.flight-intro { text-align: center; max-width: 600px; margin: 6px auto 26px; font-size: 0.95rem; color: #444; }
.book-row { text-align: center; margin-top: 16px; }
.entry-box { margin: 36px auto 0; max-width: 640px; background: #fff; border-left: 4px solid var(--lagoon); border-radius: 12px; padding: 20px 24px; box-shadow: 0 4px 14px rgba(26,41,66,0.06); font-size: 0.92rem; color: #444; }
.entry-box h4 { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; color: var(--navy); margin-bottom: 8px; }
.entry-box p { margin-bottom: 8px; }
.entry-box a { color: var(--lagoon); font-weight: 600; }
.book-btn { display: inline-block; margin-top: 12px; background: var(--mango); color: var(--navy-deep); font-weight: 600; font-size: 0.85rem; padding: 8px 18px; border-radius: 999px; text-decoration: none; }
.book-btn:hover { filter: brightness(1.05); }
.pass-note { font-size: 0.82rem; color: #888; font-style: italic; margin-top: 6px; }
.flight-foot { text-align: center; font-size: 0.85rem; font-style: italic; color: #777; margin-top: 16px; }

/* ---------- GOOD TO KNOW ---------- */
section.good-to-know { max-width: 640px; margin: 0 auto; padding: 56px 24px; }
section.good-to-know h3 { font-size: 2rem; text-align: center; margin-bottom: 18px; }
.gtk { list-style: none; }
.gtk li { display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; font-size: 0.92rem; color: #444; box-shadow: 0 2px 8px rgba(26,41,66,0.05); }
.gtk .ico { font-size: 1.3rem; line-height: 1.3; }

/* ---------- CTA + FOOTER ---------- */
.final-cta { text-align: center; padding: 10px 24px 60px; }
.final-cta .hand { font-size: 1.9rem; font-weight: 600; color: var(--coral); display: block; margin-bottom: 14px; }
footer { background: var(--navy-deep); color: #aab0c0; text-align: center; padding: 34px 24px; font-size: 0.85rem; }
footer .tagline { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.4rem; color: var(--gold-light); margin-bottom: 6px; }
footer .brand { color: var(--gold-light); font-weight: 600; }

@media (max-width: 640px) {
  header.hero { padding: 50px 20px 64px; }
  .cta-band h3 { font-size: 1.9rem; }
  .nav-links a { font-size: 0.78rem; padding: 7px 9px; }
  header.hero h1 { font-size: 2.4rem; }
  .subtitle { font-size: 1.25rem; }
  .glance { grid-template-columns: repeat(2, 1fr); margin: -30px 16px 0; row-gap: 14px; }
  .glance div:last-child { grid-column: 1 / -1; }
  .flight-grid { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; gap: 24px; }
  .incl { grid-template-columns: 1fr; }
  .tier.active { transform: none; }
  .photo-grid.three { grid-template-columns: 1fr 1fr; }
  .photo-grid.three img:first-child { grid-column: 1 / -1; }
  .photo-grid.two { grid-template-columns: 1fr; }
  .photo-grid.four { grid-template-columns: 1fr 1fr; }
  .photo-grid img { height: 240px; }
  .chapter h2 { font-size: 2.1rem; }
  .route { grid-template-columns: 1fr; text-align: left; padding: 18px 18px 8px; max-width: 340px; }
  .route::before { left: 25px; right: auto; top: 30px; bottom: 34px; border-top: none; border-left: 2px dashed rgba(242,181,68,0.7); }
  .stop { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; padding: 0 0 14px; }
  .stop .dot { grid-row: 1 / 3; margin: 6px 0 0; }
  .stop .city { font-size: 1.35rem; }
  .stop .what { margin-top: 0; }
  .closer { font-size: 1.15rem; }

  .thai-big { font-size: 1.9rem; }
}

/* NAV BAR
   Site navigation, matching the homepage bar (copied from
   dominican-republic.css). On this page only, the bar is NOT pinned:
   it scrolls away and the "Day 1, Day 2…" jump bar pins instead.
   Brand colours are written out in full (not this page's variables)
   so the bar looks identical on every page. */
.site-nav {
  position: relative; /* not pinned on this page; stays layered above the
                         jump bar so the Past Trips dropdown opens over it */
  z-index: 100;
  background: #0B2545;
  line-height: 1.6;
}

.site-nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.site-nav-logo { display: block; line-height: 0; }

.site-nav-logo img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #C9A24B;
}

.site-nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 28px;
}

.site-nav-links a,
.site-nav-dropdown summary {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #FBF6EC;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* hover, and the page you're on, show in gold */
.site-nav-links a:hover,
.site-nav-dropdown summary:hover,
.site-nav-links a[aria-current="page"],
.site-nav-dropdown.site-nav-current summary {
  color: #C9A24B;
}

.site-nav-links a:focus-visible,
.site-nav-dropdown summary:focus-visible,
.site-nav-logo:focus-visible {
  outline: 2px solid #C9A24B;
  outline-offset: 4px;
  border-radius: 2px;
}

/* "Past Trips" dropdown */
.site-nav-dropdown { position: relative; }

.site-nav-dropdown summary {
  cursor: pointer;
  list-style: none; /* hide default triangle */
}

.site-nav-dropdown summary::-webkit-details-marker { display: none; }

/* small gold arrow drawn in CSS; flips when open */
.site-nav-dropdown summary::after {
  content: "";
  display: inline-block;
  margin-left: 7px;
  vertical-align: 3px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #C9A24B;
  transition: transform 0.2s ease;
}

.site-nav-dropdown[open] summary::after { transform: rotate(180deg); }

/* panel floats over the page instead of pushing content down */
.site-nav-dropdown ul {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 160px;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  background: #0B2545;
  border: 1px solid #C9A24B;
  border-radius: 6px;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.45);
}

.site-nav-dropdown ul a {
  display: block;
  padding: 8px 18px;
  white-space: nowrap; /* keeps longer names like "Dominican Republic" on one line */
}

/* phones: links sit under the logo */
@media (max-width: 760px) {
  .site-nav-inner { flex-direction: column; gap: 10px; padding: 10px 16px; }
  /* one row of four links under the logo, evenly spread */
  .site-nav-links {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    gap: 0 10px;
    width: 100%;
    max-width: 420px;
  }
  .site-nav-links a,
  .site-nav-dropdown summary { font-size: 13px; }
  /* a little invisible padding keeps the smaller links easy to tap */
  .site-nav-links > li > a,
  .site-nav-dropdown summary { display: block; padding: 4px 0; }
}

/* NAV BAR, narrow phones (under 355px): links as a two-by-two grid */
@media (max-width: 354px) {
  .site-nav-links {
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    row-gap: 2px;
  }
}