/* ==========================================================================
   Vietnam trip page — vietnam.html only
   Fonts: Cormorant Garamond (headings), Raleway (body)
   ========================================================================== */

/* ---------- Colour palette ---------- */
:root {
  --navy: #1a2942;
  --navy-deep: #0f1b2d;
  --gold: #c9a55c;
  --gold-light: #e0c893;
  --cream: #f7f3ea;
  --ink: #2a2a2a;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Raleway', sans-serif;
  line-height: 1.6;
}
h1, h2, h3 {
  font-family: 'Cormorant Garamond', serif;
  color: var(--navy);
}

/* ---------- Hero ---------- */
header.hero {
  background: var(--navy);
  color: var(--cream);
  text-align: center;
  padding: 60px 24px 50px;
}
/* Partner logos: Travelswithliam and TAL, side by side, centred.
   Shown as equal circles so the TAL logo's black square corners
   are clipped away on the navy background. */
.hero-logos {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 28px;
}
.hero-logos img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.eyebrow {
  color: var(--gold-light);
  letter-spacing: 0.15em;
  font-size: 0.85rem;
  margin-bottom: 12px;
}
header.hero h1 {
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--cream);
  max-width: 640px;
  margin: 0 auto 16px;
}
.subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.2rem;
  color: #d8dbe4;
  margin-bottom: 14px;
}
.partner-line {
  font-size: 0.95rem;
  color: var(--gold-light);
  margin-bottom: 8px;
}
/* "Travelswithliam" link to the main site: same colour as the line,
   underlined so it reads as clickable; brighter gold on hover */
.partner-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.partner-link:hover { color: var(--gold); }
.partner-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}
.dates {
  font-size: 1.1rem;
  margin-bottom: 24px;
  color: var(--cream);
}
.intro {
  max-width: 520px;
  margin: 0 auto 32px;
  color: #d8dbe4;
  font-size: 0.98rem;
}

/* ---------- Hero pricing box & buttons ---------- */
.pricing-box {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(201,165,92,0.4);
  display: inline-block;
  padding: 24px 40px;
  border-radius: 4px;
  margin-bottom: 28px;
}
.pricing-box .label { font-size: 0.8rem; letter-spacing: 0.1em; color: var(--gold-light); margin-bottom: 6px;}
.pricing-box .price { font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; color: var(--cream); }
.pricing-box .sub { font-size: 0.85rem; color: #b8bcc9; margin-top: 6px; }
.btn-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 3px;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  font-weight: 500;
}
.btn-primary { background: var(--gold); color: var(--navy-deep); }
.btn-secondary { background: transparent; border: 1px solid var(--gold-light); color: var(--gold-light); }

/* ---------- Hero price calendar ----------
   Matches the pricing box above: thin gold border, cream text */
.price-calendar {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(201,165,92,0.4);
  border-radius: 4px;
  max-width: 480px;
  margin: 0 auto 28px;
  padding: 20px 28px;
  text-align: left;
}
.price-calendar .label {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--gold-light);
  margin-bottom: 10px;
  text-align: center;
}
.price-step {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(201,165,92,0.2);
}
.step-price { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; color: var(--cream); white-space: nowrap; }
.step-date { font-size: 0.85rem; color: #b8bcc9; text-align: right; }
.room-note { font-size: 0.85rem; color: #b8bcc9; margin-top: 12px; text-align: center; }

/* ---------- Hero e-visa note ----------
   Link is bold, underlined pale gold so it reads clearly on navy */
.evisa-note {
  max-width: 480px;
  margin: 24px auto 0;
  font-size: 0.85rem;
  color: #b8bcc9;
}
.evisa-note strong { color: var(--cream); font-weight: 600; }
.evisa-note a {
  color: var(--gold-light);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Suggested flight ---------- */
.flight {
  max-width: 700px;
  margin: 0 auto;
  padding: 40px 24px;
}

/* Collapsible bar. <details>/<summary> opens and closes on its own, with
   no JavaScript. */
.flight-toggle {
  max-width: 480px; /* lines up with the flight card inside */
  margin: 0 auto;
}
/* Laid out as a block with centred text. */
.flight-toggle > summary {
  display: block;
  position: relative; /* anchors the arrow to the bar */
  min-height: 52px; /* comfortable tap target on phones */
  padding: 14px 20px;
  background: var(--navy);
  color: var(--cream);
  border: 1px solid var(--gold);
  border-radius: 6px;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-align: center;
  cursor: pointer;
  list-style: none; /* hide default triangle */
  transition: background 0.2s ease, color 0.2s ease;
}
.flight-toggle > summary::-webkit-details-marker { display: none; }
.flight-toggle > summary:hover {
  background: var(--navy-deep);
  color: var(--gold-light);
}
.flight-toggle > summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Small gold arrow drawn in CSS; flips when open.
   Pinned to the right edge rather than sitting in the text, so it can
   never be pushed onto a line of its own when the label is tight. */
.flight-toggle > summary::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -3px; /* half the triangle's height, to centre it */
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--gold);
  transition: transform 0.2s ease;
}
.flight-toggle[open] > summary::after { transform: rotate(180deg); }

/* space between the bar and the details it reveals */
.flight-toggle-body { padding-top: 28px; }

.flight-intro { text-align: center; color: #555; margin-top: 0; margin-bottom: 24px; }
.flight-photo {
  width: 100%;
  max-width: 480px;
  display: block;
  margin: 0 auto 20px;
  border-radius: 8px;
}
.flight-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  max-width: 480px;
  margin: 0 auto;
}
.flight-route { font-weight: 600; margin-bottom: 4px; }
.flight-meta { color: #777; font-size: 0.9rem; margin-bottom: 16px; }
.flight-row { display: flex; justify-content: space-between; margin-bottom: 8px; }
.flight-row.leg-end { margin-bottom: 16px; }
.flight-time { font-weight: 600; }
.flight-footer {
  border-top: 1px solid #eee;
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flight-price { font-size: 1.1rem; font-weight: 700; }
/* Navy with a gold edge, matching the collapsible bar above */
.flight-btn {
  background: var(--navy);
  color: var(--cream);
  border: 1px solid var(--gold);
  padding: 10px 18px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.flight-btn:hover {
  background: var(--navy-deep);
  color: var(--gold-light);
}
.flight-note { text-align: center; color: #555; margin-top: 16px; font-size: 0.9rem; }

/* ---------- Full-width banner photo ---------- */
.banner-photo {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}

/* ---------- What's included ---------- */
section.included {
  max-width: 700px;
  margin: 0 auto;
  padding: 50px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
section.included h3 { font-size: 1.3rem; margin-bottom: 12px; }
section.included ul { padding-left: 18px; font-size: 0.92rem; color: #444; }
section.included li { margin-bottom: 6px; }

/* ---------- Day-by-day itinerary ---------- */
.day-block {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px;
  border-top: 1px solid rgba(26,41,66,0.12);
}
.day-label {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 8px;
  font-weight: 600;
}
.day-block h2 { font-size: 1.9rem; margin-bottom: 14px; }
.day-block p { font-size: 0.98rem; color: #333; margin-bottom: 14px; }
.day-photo {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 4px;
  margin-top: 10px;
  display: block;
}

/* ---------- Crop focus for tall photos ----------
   Tall photos are cropped to a wide strip; these move the
   visible strip onto the subject. Box size is unchanged. */
.crop-basket-boats { object-position: center 65%; }
.crop-street-vendor { object-position: center 73%; }
.crop-jeep-tour { object-position: center 34%; }

/* ---------- Accommodations ---------- */
section.accommodations {
  background: var(--navy);
  color: var(--cream);
  text-align: center;
  padding: 50px 24px;
}
section.accommodations h2 { color: var(--cream); margin-bottom: 10px; }
section.accommodations p { color: #cfd3de; max-width: 480px; margin: 0 auto; font-style: italic; }
.accommodations-note { font-size: 0.85rem; color: #9aa0b0; }

/* ---------- Good to know ---------- */
section.good-to-know {
  max-width: 600px;
  margin: 0 auto;
  padding: 50px 24px;
}
section.good-to-know ul { padding-left: 18px; color: #444; font-size: 0.92rem; }
section.good-to-know li { margin-bottom: 8px; }

/* ---------- Footer ---------- */
footer {
  background: var(--navy-deep);
  color: #aab0c0;
  text-align: center;
  padding: 32px 24px;
  font-size: 0.85rem;
}
footer .brand { color: var(--gold-light); font-weight: 500; }

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  section.included { grid-template-columns: 1fr; }
  header.hero h1 { font-size: 2rem; }
  .hero-logos { gap: 14px; margin-bottom: 22px; }
  .hero-logos img { width: 84px; height: 84px; }
  /* Stack name, price and date so rows don't squeeze.
     The price name moves onto its own line and the "·" separator is
     hidden, so the longer names ("Standard Price", "Last Call Price")
     can't run past the calendar's border on narrow phones.
     Everything is centred to match the label and the room note. */
  .price-step { flex-direction: column; align-items: center; gap: 2px; text-align: center; }
  .step-name { display: block; }
  .step-sep { display: none; }
  .step-date { text-align: center; }
}