/* Passports Abroad. One typeface (Atkinson Hyperlegible Next, chosen because its
   numerals and letters are hard to misread, which matters for fees and form
   numbers), ink navy on white, and one accent: the violet of a rubber stamp. */

:root {
  --paper: #ffffff;
  --tint: #eef2f6;
  --ink: #14233b;
  --slate: #4a5a70;
  --line: #cbd4df;
  --stamp: #4b3aa6;
  --warn-ink: #6b4100;
  --warn-bg: #fff3d6;
  --warn-line: #dfb256;
  --measure: 68ch;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
}

.wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.25rem; }

a { color: var(--stamp); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--stamp); outline-offset: 2px; border-radius: 2px; }

.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 0.5rem 1rem; }
.skip:focus { left: 0; z-index: 10; }

/* Masthead */
.masthead { border-bottom: 1px solid var(--line); }
.masthead-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1.5rem; padding-top: 0.9rem; padding-bottom: 0.9rem; }
.brand { color: var(--ink); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; text-decoration: none; }
.independent { margin: 0; color: var(--slate); font-size: 0.9rem; }

/* Breadcrumb */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 1.25rem 0 0; padding: 0; font-size: 0.9rem; color: var(--slate); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--line); }

/* Headings */
h1, h2, h3 { line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(2rem, 6vw, 3rem); font-weight: 800; letter-spacing: -0.02em; margin: 1.5rem 0 1rem; }
h2 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; margin: 2.75rem 0 0.75rem; }
h3 { font-size: 1.15rem; font-weight: 600; margin: 1.75rem 0 0.4rem; }
p, ul, ol, dl, table { max-width: var(--measure); }
p { margin: 0 0 1rem; }
.lead { font-size: 1.3rem; line-height: 1.45; color: var(--ink); }
.home-head h1 { max-width: 18ch; }

/* The dated facts panel: laid out like a passport data page, with the
   "checked" stamp struck across its corner. */
.facts-panel { position: relative; margin: 2rem 0 0.5rem; padding: 1.25rem 1.25rem 0.5rem; background: var(--tint); border-top: 3px solid var(--ink); }
.glance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; margin: 0; max-width: none; }
.glance > div { padding: 0.75rem 0; border-top: 1px solid var(--line); }
.glance dt { font-size: 0.85rem; color: var(--slate); }
.glance dd { margin: 0.1rem 0 0; font-weight: 600; font-size: 1.15rem; line-height: 1.3; }
.glance dd::first-letter, .cell::first-letter, .contact dd::first-letter { text-transform: uppercase; }
.cell { display: inline-block; }
.stamp {
  display: inline-flex; flex-direction: column; align-items: center;
  margin: 0 0 1rem; padding: 0.4rem 0.9rem;
  color: var(--stamp); border: 2px solid var(--stamp); border-radius: 6px;
  outline: 1px solid var(--stamp); outline-offset: 2px;
  transform: rotate(-3deg); transform-origin: left center;
  font-weight: 800; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase;
  opacity: 0.9;
}
.stamp-top { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; }
.stamp time { font-size: 1.05rem; }

/* Content blocks */
ul, ol { padding-left: 1.4rem; margin: 0 0 1.25rem; }
li { margin-bottom: 0.4rem; }
article ul > li::first-letter { text-transform: uppercase; }
.steps { list-style: none; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding: 0 0 0.25rem 3rem; margin-bottom: 1rem; min-height: 2.2rem; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  background: var(--ink); color: #fff; border-radius: 50%;
  font-weight: 800; font-size: 1rem;
}
.steps li strong { display: block; }

.table-scroll { overflow-x: auto; margin: 0 0 1.5rem; }
table { border-collapse: collapse; width: 100%; font-size: 1rem; }
caption { text-align: left; color: var(--slate); font-size: 0.9rem; padding-bottom: 0.4rem; }
th, td { text-align: left; vertical-align: top; padding: 0.6rem 0.9rem 0.6rem 0; border-bottom: 1px solid var(--line); }
thead th { font-size: 0.85rem; font-weight: 600; color: var(--slate); border-bottom: 2px solid var(--ink); }
tbody th { font-weight: 600; }

.note { margin: 1.5rem 0; padding: 0.9rem 1.1rem; border-left: 4px solid var(--ink); background: var(--tint); max-width: var(--measure); }
.note p { margin: 0; }
.note-warn { background: var(--warn-bg); border-left-color: var(--warn-line); color: var(--warn-ink); }
.note-warn a { color: inherit; }

.contact { margin: 0 0 1.5rem; }
.contact > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.contact dt { color: var(--slate); font-size: 0.95rem; }
.contact dd { margin: 0; overflow-wrap: anywhere; }

.unconfirmed { color: var(--warn-ink); font-weight: 400; font-size: 0.9em; }

/* Paid pack offer */
.offer { margin: 2.5rem 0; padding: 1.25rem 1.25rem 0.5rem; border: 2px solid var(--ink); max-width: var(--measure); }
.offer h2 { margin-top: 0; font-size: 1.35rem; }
.button { display: inline-block; padding: 0.7rem 1.1rem; background: var(--ink); color: #fff; font-weight: 800; text-decoration: none; border-radius: 4px; }
.button:hover { background: var(--stamp); }
.offer-small { font-size: 0.9rem; color: var(--slate); }

/* Sources and related */
.sources { margin-top: 3rem; padding-top: 0.25rem; border-top: 3px solid var(--ink); }
.sources ul { list-style: none; padding: 0; font-size: 0.95rem; }
.sources li { padding: 0.7rem 0; border-bottom: 1px solid var(--line); margin: 0; }
.source-facts { display: block; color: var(--slate); }
.related ul, .guide-list { list-style: none; padding: 0; }
.guide-list li { padding: 0.9rem 0; border-top: 1px solid var(--line); margin: 0; }
.guide-list a { display: block; font-weight: 800; font-size: 1.2rem; }
.guide-list span { display: block; color: var(--slate); font-size: 1rem; }
.country-list a { font-size: 1.6rem; letter-spacing: -0.01em; }

/* Footer */
.footer { margin-top: 4rem; padding: 2rem 0 2.5rem; background: var(--tint); font-size: 0.95rem; color: var(--slate); }
.footer strong { color: var(--ink); }

@media (max-width: 34rem) {
  body { font-size: 1.0625rem; }
  /* Tables stack into one block per row, each cell labelled by its column. */
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  tbody tr { display: block; padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
  tbody tr:first-child { border-top: 2px solid var(--ink); }
  tbody th, tbody td { display: block; padding: 0.1rem 0; border: 0; }
  tbody td::before { content: attr(data-label); display: block; margin-top: 0.4rem; font-size: 0.85rem; color: var(--slate); }
  .glance { grid-template-columns: 1fr; }
  .contact > div { grid-template-columns: 1fr; gap: 0.1rem; }
  .lead { font-size: 1.2rem; }
}

@media print {
  .masthead, .footer, .crumbs, .related, .skip { display: none; }
  body { font-size: 11pt; }
  a { color: inherit; }
}