/* The downloadable itinerary document.

   This is NOT the web page reflowed for print. It is its own plain document, built
   by _build_itinerary_doc.py from the same data, because the two jobs are different:
   the page has to sell, the document has to be read, forwarded and compared against
   somebody else's quotation. No photographs, no infographics, one column, lots of air.

   ponytail: the running header and footer are a <thead> and <tfoot> on a table that
   wraps the whole document. Chromium repeats both across every printed page - that is
   the only mechanism in print CSS that does. position:fixed does not repeat, it is
   laid out once against the viewport. Known ceiling: this makes the entire document
   one table row, so nothing can use CSS multi-column or fragmentation-aware layout
   inside it. Upgrade path if that is ever needed: paginate server-side.

   @page has no left or right margin: the horizontal page padding lives on the cells
   instead, so the header rule and the footer rule run the same width as the text. The
   9mm top and bottom margins are there so that if the reader has the browser's own
   "Headers and footers" option switched on, Chrome's URL and page number land in the
   margin and not on top of ours. */

@page { size: A4; margin: 9mm 0; }

:root {
  --gold: #f5b800;
  --gold-dark: #9a6c00;
  --gold-soft: #fff3c7;
  --bronze: #5f4e38;
  --ink: #342f28;
  --ink-soft: #6b6257;
  --paper: #f8f4ec;
  --mist: #e6ddcf;
  --pad: 16mm;
}

* { box-sizing: border-box; }

html {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font: 10pt/1.6 "DM Sans", Arial, Helvetica, sans-serif;
  orphans: 3;
  widows: 3;
}

h1, h2, h3, h4 { font-family: "Fraunces", Georgia, serif; font-weight: 600; }

.doc { width: 100%; border-collapse: collapse; }
/* the two lines Chromium repeats on every sheet */
.doc > thead { display: table-header-group; }
.doc > tfoot { display: table-footer-group; }
.doc th, .doc td { padding: 0; font-weight: inherit; text-align: left; }

/* ---------- running header ---------- */
.hd {
  display: flex;
  align-items: center;
  gap: 3mm;
  margin: 0 var(--pad) 7mm;
  padding-bottom: 2.5mm;
  border-bottom: .8pt solid var(--gold);
}
.hd img { width: 9mm; height: 9mm; object-fit: contain; }
/* stacked, same lockup as the site logo - inline they run into each other */
.hd > div { display: flex; flex-direction: column; line-height: 1.25; }
.hd b { font-size: 9.5pt; letter-spacing: -.01em; }
.hd span { color: var(--ink-soft); font-size: 7.5pt; }
.hd em { margin-left: auto; color: var(--bronze); font-size: 8pt; font-style: normal; font-weight: 600; }

/* ---------- running footer ---------- */
.ft {
  margin: 8mm var(--pad) 0;
  padding-top: 2.5mm;
  border-top: .6pt solid var(--mist);
  color: var(--ink-soft);
  font-size: 7pt;
  line-height: 1.5;
}
.ft b { color: var(--ink); }
.ft p { margin: 1mm 0 0; }

/* ---------- body ---------- */
.body { padding: 0 var(--pad); }

.title { margin-bottom: 8mm; }
.title .eyebrow { display: block; margin-bottom: 1.5mm; color: var(--gold-dark); font-size: 8pt; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.title h1 { margin: 0 0 2mm; font-size: 25pt; line-height: 1.06; letter-spacing: -.025em; }
.title .lede { margin: 0; max-width: 135mm; color: var(--ink-soft); font-size: 10pt; }

.headline {
  display: flex;
  gap: 8mm;
  margin: 6mm 0 0;
  padding: 5mm 6mm;
  background: var(--gold-soft);
  border: .8pt solid #efdca6;
  border-radius: 2mm;
  break-inside: avoid;
}
.headline .amt { flex: 0 0 auto; }
.headline .amt small { display: block; color: var(--gold-dark); font-size: 7.5pt; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.headline .amt b { display: block; margin: .5mm 0; font-family: "Fraunces", Georgia, serif; font-size: 21pt; line-height: 1.05; }
.headline .amt span { color: var(--ink-soft); font-size: 8pt; }
.headline ul { margin: 0; padding-left: 5mm; column-count: 2; column-gap: 8mm; font-size: 8.8pt; }
.headline li { margin-bottom: 1mm; break-inside: avoid; }

h2.sec {
  margin: 11mm 0 5mm;
  padding-bottom: 2mm;
  border-bottom: .8pt solid var(--gold);
  font-size: 15pt;
  letter-spacing: -.015em;
  break-after: avoid;
}
p.seclead { margin: -3mm 0 5mm; color: var(--ink-soft); font-size: 9pt; break-after: avoid; }

/* ---------- itinerary ---------- */
.day { margin-bottom: 7mm; }
.day h3 {
  display: flex;
  align-items: baseline;
  gap: 3mm;
  margin: 0 0 1mm;
  font-size: 12.5pt;
  break-after: avoid;
}
.day h3 i { flex: 0 0 auto; padding: .8mm 2mm; color: #fff; background: var(--bronze); border-radius: 1mm; font-family: "DM Sans", Arial, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.day > p.route { margin: 0 0 3.5mm; color: var(--ink-soft); font-size: 8.5pt; break-after: avoid; }

.stop {
  display: flex;
  gap: 5mm;
  padding: 2.5mm 0;
  border-top: .5pt solid var(--mist);
  break-inside: avoid;
}
.stop .t { flex: 0 0 20mm; padding-top: .3mm; }
.stop .t b { display: block; color: var(--gold-dark); font-size: 9.5pt; }
.stop .t span { display: block; color: var(--ink-soft); font-size: 7.5pt; }
.stop .c { flex: 1 1 auto; }
.stop .c b { display: block; margin-bottom: .8mm; font-family: "Fraunces", Georgia, serif; font-size: 11pt; }
.stop .c p { margin: 0; color: var(--ink-soft); font-size: 9pt; }

p.drive { margin: 0; padding: 1.5mm 0 1.5mm 25mm; color: var(--ink-soft); font-size: 8pt; font-style: italic; break-inside: avoid; }

p.daymeta {
  margin: 2mm 0 0;
  padding: 2mm 3mm;
  background: var(--paper);
  border-left: 1.2pt solid var(--gold);
  font-size: 8.5pt;
  break-inside: avoid;
}
p.daymeta b { color: var(--ink); }

/* ---------- flights ---------- */
table.flights { width: 100%; border-collapse: collapse; font-size: 9.5pt; break-inside: avoid; }
table.flights th { padding: 0 0 1.5mm; border-bottom: .6pt solid var(--mist); color: var(--ink-soft); font-family: "DM Sans", Arial, sans-serif; font-size: 7.5pt; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
table.flights td { padding: 3mm 0; border-bottom: .5pt solid var(--mist); vertical-align: top; }
table.flights td b { font-size: 11pt; }
table.flights td span { display: block; color: var(--ink-soft); font-size: 8pt; }

/* ---------- plain numbered steps (visa) ---------- */
ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
ol.steps li { display: flex; gap: 4mm; padding: 3mm 0; border-top: .5pt solid var(--mist); break-inside: avoid; }
ol.steps li::before { counter-increment: step; content: counter(step); flex: 0 0 6mm; height: 6mm; color: var(--bronze); background: var(--gold-soft); border-radius: 50%; font-size: 9pt; font-weight: 700; line-height: 6mm; text-align: center; }
ol.steps b { display: block; margin-bottom: .5mm; font-family: "Fraunces", Georgia, serif; font-size: 10.5pt; }
ol.steps p { margin: 0; color: var(--ink-soft); font-size: 9pt; }
ol.steps em { color: var(--gold-dark); font-size: 8.5pt; font-style: normal; font-weight: 700; }

dl.facts { display: flex; flex-wrap: wrap; gap: 3mm 10mm; margin: 4mm 0 0; padding: 3mm 4mm; background: var(--paper); border-radius: 2mm; break-inside: avoid; }
dl.facts dt { color: var(--ink-soft); font-size: 7.5pt; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
dl.facts dd { margin: .5mm 0 0; font-size: 9.5pt; font-weight: 600; }

/* ---------- places, inclusions, hotels ---------- */
ul.places { margin: 0; padding: 0; list-style: none; }
ul.places li { padding: 3mm 0; border-top: .5pt solid var(--mist); break-inside: avoid; }
ul.places b { font-family: "Fraunces", Georgia, serif; font-size: 11pt; }
ul.places i { color: var(--gold-dark); font-size: 8pt; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
ul.places p { margin: .8mm 0 0; color: var(--ink-soft); font-size: 9pt; }
ul.places small { display: block; margin-top: 1mm; color: var(--ink-soft); font-size: 8pt; }

.twocol { display: flex; gap: 10mm; }
.twocol > div { flex: 1 1 0; }
.twocol h3 { margin: 0 0 2.5mm; font-size: 11.5pt; }
ul.ticks { margin: 0; padding: 0; list-style: none; font-size: 9pt; }
ul.ticks li { padding: 1.6mm 0 1.6mm 5mm; border-top: .5pt solid var(--mist); text-indent: -5mm; break-inside: avoid; }
ul.ticks li::before { display: inline-block; width: 5mm; text-indent: 0; content: "\2713"; color: var(--gold-dark); font-weight: 700; }
ul.ticks.no li::before { content: "\2715"; color: #a8a094; }

.hotel { padding: 4mm 0; border-top: .5pt solid var(--mist); break-inside: avoid; }
.hotel h3 { margin: 0 0 1mm; font-size: 12pt; }
.hotel .where { color: var(--gold-dark); font-size: 8pt; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hotel p { margin: 1.5mm 0 0; color: var(--ink-soft); font-size: 9pt; }
.hotel a { color: var(--gold-dark); font-weight: 700; text-decoration: none; }

.note { margin: 5mm 0 0; padding: 3mm 4mm; background: var(--paper); border-left: 1.2pt solid var(--gold); color: var(--ink-soft); font-size: 8.5pt; break-inside: avoid; }
.note b { color: var(--ink); }

.book { margin-top: 6mm; padding: 5mm 6mm; background: var(--paper); border: .8pt solid var(--mist); border-radius: 2mm; break-inside: avoid; }
.book h3 { margin: 0 0 2mm; font-size: 12pt; }
.book p { margin: 0; color: var(--ink-soft); font-size: 9pt; }
.book a { color: var(--bronze); text-decoration: none; }

/* ---------- on screen, show it as a sheet of paper ---------- */
@media screen {
  body { padding: 10mm 0; background: #efeae0; }
  .doc { width: 210mm; margin: 0 auto; background: #fff; box-shadow: 0 6px 30px rgb(52 47 40 / 18%); }
  .hd { margin-top: 9mm; }
  .ft { margin-bottom: 9mm; }
}