/* vTourist — layered over site.css, never replacing it.
 *
 * The palette is the site's own, read off the 1999 archive rather than invented:
 * `bgcolor="#d0d0d0"` for the ground, `#999999` and `#666666` for the bars,
 * `#7B0000` oxblood for furniture, `#000099` for links. Those five values appear
 * on every captured page from the homepage to /North_America/USA/, so they are
 * the house style and not one designer's afternoon.
 *
 * Modernised only where 1999 fails a contrast check — white on #999999 is 3.5:1,
 * so the sub-bar takes the #6F6F6F that the same pages already used elsewhere and
 * clears 5:1. Nothing else is second-guessed.
 *
 * Chrome uses the network's own `:root[data-site=...]` convention: same token
 * names, same rules, so a change to the header layout still lands here. This file
 * loads after site.css, so an identical (0,2,0) selector wins on source order.
 *
 * Dark mode is `prefers-color-scheme` only, because that is all site.css
 * implements - there is no `data-theme` anywhere in this codebase. A theme file
 * that honoured a manual toggle would flip its own tokens while the shared
 * stylesheet stayed light, which renders dark ink on a dark ground.
 */

/* ---------- chrome: the 1999 greys, with the oxblood accent ---------- */

:root[data-site="vtourist"] {
  --header-bg: #dfeaf3;          /* pale steel blue */
  --header-line: #bcd2e4;
  --subbar-bg: #2f5f7a;          /* deep enough that white on it is 6.0:1 */
  --subbar-line: #244c62;
  --subbar-ink: #ffffff;
  --subbar-label: #d5e3f2;       /* the accent, lifted until it reads on the strip */
  --hero-bg: #e8f1f7;
  --drawer-bg: #dfeaf3;
  --drawer-line: #bcd2e4;
  --drawer-field: #f6fafd;
  --rail-surface: #eef5fa;
  --rail-line: #cfe0ec;
  --rail-head: #123a6b;
  --accent: #123a6b;             /* the wordmark's blue; one accent, one place */
  --accent-soft: #e4ecf6;
  --accent-ink: #0d2b4f;
  --brand-word-ink: #000000;

  /* Map surface. Both themes resolve from one place. */
  --vt-land: #6d8ea6;            /* the map is furniture: the sub-bar blue, muted */
  --vt-graticule: #cddfeb;
  --vt-pill: #ffffff;
  --vt-pill-line: #bcd2e4;
  --vt-pill-ink: #17242c;
}

@media (prefers-color-scheme: dark) {
  :root[data-site="vtourist"] {
    --header-bg: #1b2630;
    --header-line: #2f4453;
    --subbar-bg: #141d25;
    --subbar-line: #2f4453;
    --subbar-ink: #e8eff5;
    --subbar-label: #a9c8f0;
    --hero-bg: #18222b;
    --drawer-bg: #18222b;
    --drawer-line: #2f4453;
    --drawer-field: #223040;
    --rail-surface: #1b2630;
    --rail-line: #2f4453;
    --rail-head: #8ab4e8;
    /* Oxblood at #7B0000 is 1.4:1 on a dark ground — unusable. Lifted along its
       own hue until it clears, so it still reads as the same colour family. */
    --accent: #8ab4e8;
    --accent-soft: #1a2635;
    --accent-ink: #a9c8f0;
    --brand-word-ink: #eef3f8;

    --vt-land: #7d9db4;
    --vt-graticule: #263544;
    --vt-pill: #223040;
    --vt-pill-line: #3f5468;
    --vt-pill-ink: #e8eff5;
    /* Softer on a dark ground: full-strength white stripes glare. */
  }
}
/* ---------- the wordmark ---------- */

.brand-vt {
  text-decoration: none;
  color: var(--brand-word-ink);
  font-size: 1.32rem;
  letter-spacing: -.015em;
  line-height: 1;
}
.brand-vt .vt-v {
  font-style: italic;
  font-weight: 700;
  color: var(--accent);
  /* The italic leans away from the T and opens a gap the upright letters do not
     have; a hair of negative tracking closes it without the two touching. */
  margin-right: -.012em;
}
.brand-vt .vt-word {
  font-weight: 700;
  color: var(--brand-word-ink);
}

.brand-vt:hover .vt-v { color: var(--accent-ink); }
.brand-vt:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ---------- the map ---------- */

.vt-map-hero {
  /* White, not the tinted hero band the rest of the site uses. The map is the
     subject of this page and a coloured ground competes with it - the landmasses
     are already a blue, so a blue behind them flattens the coastline. `--paper`
     rather than a literal so dark mode still gets its own ground. */
  background: var(--paper);
  border-bottom: 1px solid var(--header-line);
  padding: 2.25rem 0 2.75rem;
}
.vt-eyebrow {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 .5rem;
}
.vt-map-hero h1 { margin: 0 0 .4rem; text-wrap: balance; }
.vt-standfirst {
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 0 1.75rem;
}

.vt-worldmap {
  position: relative;
  margin: 0;
  /* Matches the generated frame's aspect so a hotspot's percentage lands on the
     coastline it names. Cropped at source to 78N–58S: the full -90..90 frame
     spent a fifth of its height on empty poles. */
  aspect-ratio: 654 / 246;
}
.vt-worldmap-svg { display: block; width: 100%; height: 100%; }
.vt-graticule path { fill: none; stroke: var(--vt-graticule); stroke-width: 1; }
/* Filled country polygons. `nonzero` is the default and is what makes an
   island inside a bay fill rather than punch a hole. */
.vt-stipple { fill: var(--vt-land); }

.vt-hotspots {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
}
.vt-hotspots li { position: absolute; transform: translate(-50%, -50%); margin: 0; }
.vt-hotspots a {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .3em .65em;
  border: 1px solid var(--vt-pill-line);
  border-radius: 2em;
  background: var(--vt-pill);
  color: var(--vt-pill-ink);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(23, 38, 46, .16);
  transition: border-color .12s ease, color .12s ease, transform .12s ease;
}
.vt-hotspots a:hover,
.vt-hotspots a:focus-visible {
  border-color: var(--accent);
  color: var(--accent-ink);
  transform: translateY(-1px);
}
.vt-hotspots a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vt-hotspot-dot {
  width: .42em; height: .42em;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
@media (prefers-reduced-motion: reduce) {
  .vt-hotspots a { transition: none; }
  .vt-hotspots a:hover, .vt-hotspots a:focus-visible { transform: none; }
}

/* Below ~640px eight pills on a 320px map is unreadable whatever you do with
   them. The map stays as the illustration it is; the directory below carries the
   navigation, which it does at every width anyway. */
@media (max-width: 640px) {
  .vt-hotspots { display: none; }
}

/* ---------- the directory ---------- */

.vt-directory {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.75rem 2rem;
  margin: 2.5rem 0 3rem;
}
.vt-region h2 {
  font-size: .95rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 0 0 .55rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--line);
}
.vt-region h2 a { color: var(--ink); text-decoration: none; }
.vt-region h2 a:hover { color: var(--accent-ink); }
.vt-region ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .3rem;
}
.vt-region li { margin: 0; }
.vt-region a { color: var(--ink-soft); }
.vt-region a:hover { color: var(--accent-ink); }

/* The top bar carries geography on this site, so the section links (eSIM,
   Guides, Tools) come out of it on desktop. They are NOT removed - they stay in
   the menu drawer, where the mobile layout puts everything anyway, so nothing
   becomes unreachable and the markup is identical for a crawler. */
@media (min-width: 861px) {
  .nav .nav-section { display: none; }
}

/* ---------- the map page's reading furniture ---------- */

.vt-map-credit {
  margin-top: .6rem;
  color: var(--ink-faint);
  font-size: .78rem;
}
.vt-directory-head {
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 2.5rem 0 0;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
/* Cards, not a bare list: each region gets its blurb, a count and its own way
   in, so the page reads as an index of the gazetteer rather than a legend. */
.vt-region {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  background: var(--rail-surface);
  border: 1px solid var(--rail-line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1.1rem;
}
.vt-region h3 {
  font-size: 1.05rem;
  margin: 0 0 .4rem;
  letter-spacing: 0;
  text-transform: none;
  border: 0;
  padding: 0;
}
.vt-region-blurb {
  margin: 0 0 .6rem;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- mobile: the regions stay visible ---------- */

/* site.css hides `.header-inner .nav` below 900px and moves it into the
   hamburger, which is right for a site whose top bar is three section links and
   wrong for this one, where the top bar IS the navigation. On a phone the
   regions vanished entirely and the map's own labels were hidden too, so the
   only way to reach a continent was to open the menu.

   So on small screens the regions come back as a horizontal strip under the
   masthead - the same pattern the destinations bar already uses on phones - and
   the section links (eSIM, Guides, Tools) stay in the drawer where they belong. */
@media (max-width: 900px) {
  .site-header .header-inner .nav {
    display: flex;
    order: 3;
    flex: 0 0 100%;
    gap: .9rem;
    margin: .15rem -1.1rem -.35rem;
    padding: .5rem 1.1rem .6rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .site-header .header-inner .nav::-webkit-scrollbar { display: none; }
  .site-header .header-inner { flex-wrap: wrap; }
  /* Only the regions travel; the sections stay in the menu. */
  .site-header .header-inner .nav .nav-section { display: none; }
  .site-header .header-inner .nav .nav-region {
    white-space: nowrap;
    font-size: .92rem;
    font-weight: 600;
  }
}

/* The map's own labels: below 640px eight pills on a 320px-wide map overlap into
   an unreadable pile, so they stay hidden - but the strip above and the region
   cards below both carry the same links, so nothing is unreachable. */