/*
 * route-map.css - styles for the interactive trip map (see route-map.js).
 * Uses the site colours (CSS variables from index.html) with fallbacks, so it also works alone.
 * Upload it together with route-map.js and index.html.
 */

/* ---------- colours and sizes (change colours here, in one place) ---------- */
.tm {
  --tm-panel: rgba(38, 58, 36, 0.93);       /* legend / totals card / buttons */
  --tm-panel-solid: #263a24;
  --tm-line: var(--line-dark, #637555);
  --tm-text: var(--ivory, #FAE4C1);
  --tm-dim: var(--ivory-dim, #DFD0AE);
  --tm-ink: var(--ink, #241E1A);
  --tm-gold: var(--mustard, #EEB359);       /* India */
  --tm-java: #8BCB74;                       /* Java dots + route */
  --tm-tea: #CFE8A9;                        /* tea plantations */
  --tm-volcano: var(--red, #CA3C36);        /* Bromo + Ijen */
  --tm-bali: #8A5A8E;                       /* Bali, a muted plum */
  --tm-sea: #1f301d;                        /* colour behind the map tiles */
  --tm-radius: 16px;

  position: relative;
  width: 100%;
  color: var(--tm-text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.tm *, .tm *::before, .tm *::after { box-sizing: border-box; }

/* ---------- the frame ---------- */
.tm-stage {
  position: relative;
  border: 1px solid var(--tm-line);
  border-radius: var(--tm-radius);
  overflow: hidden;
  background: var(--tm-sea);
  isolation: isolate;
}
.tm-canvas {
  position: relative;
  width: 100%;
  background: var(--tm-sea);
  z-index: 0;
}
.tm-canvas::after {                          /* "Loading the map..." until Leaflet is ready */
  content: attr(data-loading);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--tm-dim);
  font-size: 13px; letter-spacing: 0.08em;
  pointer-events: none;
}
.tm-ready .tm-canvas::after { display: none; }

/* Big map height. */
.tm--full .tm-canvas { height: clamp(480px, 70vh, 740px); }

/* ---------- base-map look: OpenStreetMap tiles re-coloured to deep green ---------- */
.tm .leaflet-tile-pane {
  /* fallback recolouring, used only if the SVG colour ramp below could not be created */
  filter: grayscale(1) invert(1) brightness(0.68) contrast(1.05) sepia(1) hue-rotate(58deg) saturate(1.35);
}
.tm.tm-tint .leaflet-tile-pane { filter: url(#tm-tint); }   /* the ramp is defined in route-map.js (TINT) */
.tm .leaflet-container {
  background: var(--tm-sea);
  font-family: inherit;
  outline-offset: -3px;
}

/* ---------- lines (also used by the legend swatches) ---------- */
.tm .tm-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tm .tm-casing { stroke: #142013; stroke-width: 7px; stroke-opacity: 0.55; }
.tm .tm-line--india  { stroke: var(--tm-gold); stroke-width: 3.5px; stroke-dasharray: 9 7; stroke-opacity: 1; }
.tm .tm-line--java   { stroke: var(--tm-java); stroke-width: 4px; stroke-dasharray: none; stroke-opacity: 1; }
.tm .tm-line--ferry  { stroke: var(--tm-java); stroke-width: 3.5px; stroke-dasharray: 2 7; stroke-opacity: 1; }
.tm .tm-line--flight { stroke: var(--tm-text); stroke-width: 2px; stroke-dasharray: 3 8; stroke-opacity: 0.5; }
.tm--mini .tm-line--java, .tm--mini .tm-line--ferry { stroke-width: 3px; }
.tm--mini .tm-casing { stroke-width: 5.5px; }
/* legend swatches sit on a dark panel, no casing needed */
.tm-legend .tm-line--india  { stroke-width: 3px; stroke-dasharray: 6 4; }
.tm-legend .tm-line--java   { stroke-width: 3.5px; }
.tm-legend .tm-line--flight { stroke-width: 2px; stroke-dasharray: 2 5; }

/* ---------- markers ---------- */
.tm .tm-mk {
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0;
  cursor: pointer;
}
.tm .tm-mk:focus { outline: none; }
.tm-dot {
  display: block;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2.5px solid var(--tm-text);
  background: var(--tm-java);
  box-shadow: 0 0 0 1.5px rgba(20, 32, 19, 0.7), 0 2px 6px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease;
}
.tm-dot--india { background: var(--tm-gold); }
.tm-dot--java  { background: var(--tm-java); }
.tm-mk:hover .tm-dot, .tm-mk:focus-visible .tm-dot { transform: scale(1.22); }
.tm-disc {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--tm-text);
  background: var(--tm-java);
  font-size: 16px; line-height: 1;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif;
  box-shadow: 0 0 0 1.5px rgba(20, 32, 19, 0.7), 0 3px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease;
}
.tm-disc--tea     { background: var(--tm-tea); }
.tm-disc--volcano { background: var(--tm-volcano); }
.tm-disc--bali    { background: var(--tm-bali); }
.tm-mk:hover .tm-disc, .tm-mk:focus-visible .tm-disc { transform: scale(1.12); }
.tm-plane {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(250, 228, 193, 0.7);
  background: rgba(38, 58, 36, 0.92);
  color: var(--tm-text);
  font-size: 14px; line-height: 1;
  transform: rotate(0deg);
}
.tm-mk:focus-visible .tm-dot,
.tm-mk:focus-visible .tm-disc,
.tm-mk:focus-visible .tm-plane {
  outline: 3px solid var(--tm-gold);
  outline-offset: 3px;
}

/* zoomed far out (whole-trip view): smaller markers so the Java stops do not pile up */
.tm.tm-far .tm-dot { width: 10px; height: 10px; border-width: 2px; }
.tm.tm-far .tm-disc { width: 20px; height: 20px; font-size: 11px; border-width: 1.5px; }
.tm.tm-far .tm-plane { width: 22px; height: 22px; font-size: 12px; }

/* mini map: smaller markers */
.tm--mini .tm-mk { cursor: pointer; }
.tm--mini .tm-dot { width: 10px; height: 10px; border-width: 2px; box-shadow: 0 0 0 1px rgba(20, 32, 19, 0.7); }
.tm--mini .tm-disc { width: 20px; height: 20px; font-size: 11px; border-width: 1.5px; }

/* ---------- name labels next to markers (big map only) ---------- */
.tm .leaflet-tooltip.tm-label {
  visibility: hidden;
  background: transparent; border: 0; box-shadow: none;
  padding: 0;
  color: var(--tm-text);
  font: 600 11.5px/1.2 'Inter', system-ui, sans-serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: 0 0 3px #142013, 0 0 3px #142013, 0 1px 5px #142013, 0 0 8px #142013;
  pointer-events: none;
}
.tm .leaflet-tooltip.tm-label::before { display: none; }
.tm.tm-labels .leaflet-tooltip.tm-label { visibility: visible; }
.tm .leaflet-tooltip.tm-label--tea { color: var(--tm-tea); font-weight: 500; }

/* ---------- pop-ups ---------- */
.tm .leaflet-popup-content-wrapper {
  background: var(--tm-panel-solid);
  color: var(--tm-text);
  border: 1px solid var(--tm-line);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.tm .leaflet-popup-tip {
  background: var(--tm-panel-solid);
  border: 1px solid var(--tm-line);
  box-shadow: none;
}
.tm .leaflet-popup-content { margin: 16px 18px 16px; font-size: 13.5px; line-height: 1.5; }
.tm .leaflet-container a.leaflet-popup-close-button {
  top: 4px; right: 4px;
  width: 32px; height: 32px;
  padding: 0;
  font: 400 22px/32px 'Inter', system-ui, sans-serif;
  text-align: center;
  color: var(--tm-dim);
  border-radius: 8px;
}
.tm .leaflet-container a.leaflet-popup-close-button:hover { color: var(--tm-gold); }
.tm .leaflet-container a.leaflet-popup-close-button:focus-visible { outline: 2px solid var(--tm-gold); outline-offset: -2px; }
.tm .tm-pop { min-width: 190px; padding-right: 14px; }
.tm .tm-pop-kicker {
  margin: 0 0 3px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--tm-gold);
}
.tm .tm-pop--java .tm-pop-kicker   { color: var(--tm-java); }
.tm .tm-pop--tea .tm-pop-kicker    { color: var(--tm-tea); }
.tm .tm-pop--volcano .tm-pop-kicker{ color: #F08A80; }
.tm .tm-pop--bali .tm-pop-kicker   { color: #D3A9D6; }
.tm .tm-pop--flight .tm-pop-kicker { color: var(--tm-dim); }
.tm .tm-pop-title {
  margin: 0 0 8px;
  font: italic 500 25px/1.05 'Cormorant Garamond', Georgia, serif;
  color: var(--tm-text);
}
.tm .tm-pop-meta { margin: 0 0 8px; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; }
.tm .tm-pop-meta dt {
  margin: 0;
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tm-dim); opacity: 0.75;
  padding-top: 3px;
}
.tm .tm-pop-meta dd { margin: 0; color: var(--tm-text); }
.tm .tm-pop-note { margin: 0; color: var(--tm-dim); }

/* ---------- attribution + zoom (kept visible - required by the map licences) ---------- */
.tm .leaflet-container .leaflet-control-attribution {
  background: rgba(31, 48, 29, 0.86);
  color: var(--tm-dim);
  font-size: 10.5px; line-height: 1.5;
  padding: 1px 7px;
  border-top-left-radius: 8px;
}
.tm .leaflet-container .leaflet-control-attribution a { color: var(--tm-gold); text-decoration: none; }
.tm .leaflet-container .leaflet-control-attribution a:hover { text-decoration: underline; }
.tm .leaflet-bottom.leaflet-right .leaflet-control-zoom { margin: 0 12px 8px 0; }
.tm .leaflet-container .leaflet-bar {
  border: 1px solid var(--tm-line);
  border-radius: 10px;
  box-shadow: none;
  overflow: hidden;
}
.tm .leaflet-container .leaflet-bar a {
  width: 34px; height: 34px; line-height: 34px;
  background: var(--tm-panel);
  color: var(--tm-text);
  border-bottom: 1px solid var(--tm-line);
  font-size: 20px;
}
.tm .leaflet-container .leaflet-bar a:last-child { border-bottom: 0; }
.tm .leaflet-container .leaflet-bar a:hover { background: #33502f; color: var(--tm-gold); }
.tm .leaflet-container .leaflet-bar a:focus-visible { outline: 2px solid var(--tm-gold); outline-offset: -3px; }

/* ---------- view buttons ---------- */
.tm-views {
  position: absolute; z-index: 800;
  top: 14px; left: 14px;
  display: inline-flex; gap: 4px;
  padding: 4px;
  background: var(--tm-panel);
  border: 1px solid var(--tm-line);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tm-btn {
  appearance: none; -webkit-appearance: none;
  min-width: 56px; min-height: 36px;
  padding: 0 16px;
  border: 0; border-radius: 999px;
  background: transparent;
  color: var(--tm-dim);
  font: 600 12px/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tm-btn:hover { color: var(--tm-text); background: rgba(250, 228, 193, 0.08); }
.tm-btn.is-active, .tm-btn[aria-pressed="true"] { background: var(--tm-gold); color: #241E1A; }
.tm-btn:focus-visible { outline: 2px solid var(--tm-text); outline-offset: 2px; }

/* ---------- totals card ---------- */
.tm-card {
  position: absolute; z-index: 800;
  top: 14px; right: 14px;
  min-width: 210px;
  padding: 6px 18px;
  background: var(--tm-panel);
  border: 1px solid var(--tm-line);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tm-stat {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 9px 0 8px;
  border-top: 1px solid rgba(99, 117, 85, 0.55);
}
.tm-stat:first-child { border-top: 0; }
.tm-cap {
  order: 1;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--tm-dim); opacity: 0.85;
}
.tm-num {
  order: 2;
  font: italic 500 42px/0.95 'Cormorant Garamond', Georgia, serif;
  color: var(--tm-text);
  text-align: right;
  font-variant-numeric: lining-nums;
}
.tm-stat:first-child .tm-num { color: var(--tm-gold); }

/* ---------- legend ---------- */
.tm-legend {
  position: absolute; z-index: 800;
  left: 14px; bottom: 14px;
  padding: 12px 16px 12px;
  background: var(--tm-panel);
  border: 1px solid var(--tm-line);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 12.5px; line-height: 1.3;
}
.tm-legend-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; align-content: start; }
.tm-legend-list--lines {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(99, 117, 85, 0.55);
}
.tm-legend-item { display: flex; align-items: center; gap: 10px; color: var(--tm-text); }
.tm-key { flex: none; }
.tm-key--dot {
  display: inline-block;
  width: 13px; height: 13px; border-radius: 50%;
  margin: 0 8px 0 3px;
  border: 2px solid var(--tm-text);
  box-shadow: 0 0 0 1px rgba(20, 32, 19, 0.7);
}
.tm-key--india   { background: var(--tm-gold); }
.tm-key--java    { background: var(--tm-java); }
.tm-key--volcano { background: var(--tm-volcano); }
.tm-key--bali    { background: var(--tm-bali); }
.tm-key--tea     { background: var(--tm-tea); }
.tm-key--line { display: block; overflow: visible; margin-right: 3px; }

/* ---------- "two fingers" hint on touch screens ---------- */
.tm-hint {
  position: absolute; z-index: 700;
  left: 50%; top: 14px;
  transform: translateX(-50%);
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(20, 32, 19, 0.88);
  color: var(--tm-text);
  font: 600 12.5px/1.2 'Inter', system-ui, sans-serif;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.tm-hint.is-on { opacity: 1; }

/* ---------- skip link + misc ---------- */
.tm-skip {
  position: absolute; z-index: 1000;
  left: -9999px; top: 62px;
  padding: 10px 14px;
  background: var(--tm-text); color: #241E1A;
  border-radius: 8px;
  font: 600 13px/1 'Inter', system-ui, sans-serif;
  text-decoration: none;
}
.tm-skip:focus { left: 14px; outline: 2px solid var(--tm-gold); outline-offset: 2px; }
.tm-end { display: block; height: 0; outline: 0; }

.tm-fallback {
  margin: 0; padding: 22px 24px;
  border: 1px solid var(--tm-line); border-radius: var(--tm-radius);
  background: var(--tm-panel-solid);
  color: var(--tm-text);
  font-size: 15px; line-height: 1.6;
}
.tm-fallback-link {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 120px; padding: 16px;
  border: 1px solid var(--tm-line); border-radius: var(--tm-radius);
  background: var(--tm-panel-solid);
  color: var(--tm-text);
  font-size: 14px;
}

/* ---------- mini map ---------- */
.tm--mini {
  aspect-ratio: 4 / 3;
  max-height: 520px;
  min-height: 240px;
}
.tm--mini .tm-stage, .tm--mini .tm-canvas { height: 100%; }
.tm--mini .tm-stage { cursor: pointer; }
.tm-chip {
  position: absolute; z-index: 800;
  left: 12px; top: 12px;
  max-width: calc(100% - 24px);
  display: inline-flex; align-items: center; min-height: 36px;
  padding: 0 14px;
  background: var(--tm-panel);
  border: 1px solid var(--tm-line);
  border-radius: 999px;
  color: var(--tm-text);
  font: 600 12px/1.2 'Inter', system-ui, sans-serif;
  letter-spacing: 0.03em;
  text-decoration: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tm-chip:hover { border-color: var(--tm-gold); color: var(--tm-gold); }
.tm-chip:focus-visible { outline: 2px solid var(--tm-gold); outline-offset: 2px; }

/* ---------- phones and small tablets: legend + card go BELOW the map ---------- */
@media (max-width: 899.98px) {
  .tm--full .tm-stage { display: flex; flex-direction: column; background: var(--tm-panel-solid); }
  .tm--full .tm-canvas { height: clamp(340px, 55vh, 500px); order: 2; }
  .tm-views {
    order: 1;
    position: static;
    display: flex; width: 100%;
    gap: 6px; padding: 8px 10px;
    border: 0; border-bottom: 1px solid var(--tm-line);
    border-radius: 0;
    background: var(--tm-panel-solid);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .tm-btn { flex: 1 1 0; min-height: 40px; padding: 0 8px; }
  .tm-card {
    order: 3;
    position: static;
    display: grid; grid-template-columns: repeat(3, 1fr);
    min-width: 0; padding: 4px 6px;
    border: 0; border-top: 1px solid var(--tm-line);
    border-radius: 0;
    background: var(--tm-panel-solid);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .tm-stat {
    flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 4px;
    padding: 12px 12px 10px;
    border-top: 0; border-left: 1px solid rgba(99, 117, 85, 0.55);
  }
  .tm-stat:first-child { border-left: 0; }
  .tm-num { order: 1; font-size: 38px; }
  .tm-cap { order: 2; letter-spacing: 0.18em; font-size: 10px; }
  .tm-legend {
    order: 4;
    position: static;
    padding: 14px 16px 16px;
    border: 0; border-top: 1px solid var(--tm-line);
    border-radius: 0;
    background: var(--tm-panel-solid);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    display: grid; grid-template-columns: 1fr; gap: 0;
    font-size: 13.5px;
  }
  .tm-legend-list--lines { margin-top: 12px; padding-top: 12px; }
  .tm-legend-list { gap: 10px; }
  .tm-skip { top: 56px; }
  .tm .leaflet-container .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; }
  .tm .leaflet-top.leaflet-right .leaflet-control-zoom { margin: 10px 10px 0 0; }
  .tm.tm-popup-open .leaflet-control-zoom { visibility: hidden; }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  /* roomy tablets: legend in two columns under the map */
  .tm-legend { grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .tm-legend-list--lines { margin-top: 0; padding-top: 0; border-top: 0; }
}

/* ---------- touch screens ---------- */
@media (pointer: coarse) {
  .tm .leaflet-container a.leaflet-popup-close-button { width: 40px; height: 40px; line-height: 40px; }
  .tm .leaflet-container .leaflet-control-attribution { font-size: 11px; padding: 3px 8px; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .tm *, .tm *::before, .tm *::after { transition: none !important; animation: none !important; }
}