/* Travels — layered on top of tufte.css + custom.css (which provide the nav/body).
   Only the map + trip panel are styled here. */

body { overflow-x: hidden; }                 /* contain the full-width map breakout */

/* full-viewport-width map, sitting below the standard navbar + title */
#map {
  position: relative; left: 50%; margin-left: -50vw; width: 100vw;
  height: auto; margin-top: 0.25rem; background: transparent; overflow: hidden;   /* height is set by travels.js to fit the visited latitude band */
}
#map svg { width: 100%; height: 100%; display: block; }
/* land: outline only. pointer-events:none is CRUCIAL — a transparent fill still
   captures clicks in SVG, so un-visited countries drawn on top would otherwise
   swallow the hover/click meant for a visited country beneath them. */
.country { fill: transparent; stroke: #c9c5ba; stroke-width: .5px; pointer-events: none; }
.country.visited { fill: #0099FF; stroke: #2f8fd8; cursor: pointer; pointer-events: auto; transition: fill .15s; }
.country.visited:hover { fill: #1f7cc4; }
.country.active { fill: #12659f; }

/* slide-in trip panel */
#panel {
  position: fixed; top: 0; right: 0; height: 100%; width: min(430px, 92vw); z-index: 30;
  box-sizing: border-box;                       /* keep padding inside the width (never exceed the viewport) */
  background: #fbfaf7; box-shadow: -3px 0 24px rgba(0,0,0,.14);
  transform: translateX(100%); transition: transform .32s ease; overflow-y: auto;
  padding: 2.4rem 1.9rem;
}
#panel.open { transform: translateX(0); }
#panel.resizing { transition: none; }            /* no lag while dragging */

/* left-edge drag handle to resize the panel */
#panel .resizer {
  position: absolute; top: 0; left: 0; width: 10px; height: 100%; z-index: 3; cursor: ew-resize;
}
#panel .resizer::before {
  content: ""; position: absolute; left: 3px; top: 0; width: 2px; height: 100%;
  background: transparent; transition: background .15s;
}
#panel .resizer:hover::before { background: #c9c5ba; }
body.resizing { cursor: ew-resize; user-select: none; }
#panel .close {
  position: absolute; top: .8rem; right: 1.1rem; width: 2rem; height: 2rem;
  font-size: 1.7rem; line-height: 1; color: #8a877e; background: none; border: none; cursor: pointer;
}
#panel .close:hover { color: #1b1a17; }
#panel h2 {
  font-family: "et-book-display-italic", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 2.4rem; margin: .2rem 0 .3rem; line-height: 1.1;
}
#panel .yr {
  font-family: "Gill Sans", "Gill Sans MT", "Lato", Calibri, sans-serif;
  font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: #a4a29a; margin-bottom: 1.3rem;
}
#panel img { width: 100%; border-radius: 5px; margin: 0 0 1rem; display: block; }

/* photo carousel */
.gallery { position: relative; margin: 0 0 1rem; }
.gallery .slide { margin: 0; }
.gallery .gnav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2rem; height: 2rem; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(27,26,23,.5); color: #fff; font-size: 1.4rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.gallery .gnav:hover { background: rgba(27,26,23,.82); }
.gallery .prev { left: .55rem; }
.gallery .next { right: .55rem; }
.gallery .counter {
  position: absolute; bottom: .6rem; right: .6rem;
  background: rgba(27,26,23,.55); color: #fff; border-radius: 999px; padding: .1rem .6rem;
  font-family: "Gill Sans", "Gill Sans MT", "Lato", Calibri, sans-serif; font-size: .85rem;
}
#panel p { width: auto; font-size: 1.4rem; line-height: 1.5; margin: 0 0 1rem; }