/* ==========================================================================
   Gasch Family Travels — shared site styles
   Drop this file next to any page and link it:
     <link rel="stylesheet" href="site.css">

   Each page sets its own hero photo via an inline custom property, e.g.:
     <div class="hero" id="hero" style="--hero-image:url('photo.jpg')">
   ========================================================================== */

:root {
  --ink: #f7f4ee;
  --ink-dim: rgba(247, 244, 238, 0.78);
  --line: rgba(247, 244, 238, 0.4);
  --ground: #17130f;
  --card: #241d16;
  --accent: #c98a4b;
  --link-visited: #b8836f;
}

:target {
  scroll-margin-top: 6rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--ground);
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  color: var(--ink);
}

/* ---------- Hamburger nav ---------- */

.site-nav {
  position: fixed;
  top: 1.6rem;
  right: 1.6rem;
  z-index: 20;
}

.menu-toggle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(247, 244, 238, 0.25);
  background: rgba(23, 19, 15, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.menu-toggle:hover {
  border-color: rgba(201, 138, 75, 0.6);
}

.menu-toggle .bar {
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-toggle[aria-expanded="true"] .bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.menu-panel {
  position: absolute;
  top: 58px;
  right: 0;
  min-width: 240px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  background: rgba(23, 19, 15, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(247, 244, 238, 0.12);
  border-radius: 12px;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.menu-panel[hidden] {
  display: none;
}

.menu-panel a {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  text-decoration: none;
  padding: 0.75rem 0.9rem;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}

.menu-panel a:hover,
.menu-panel a:focus-visible {
  background: rgba(201, 138, 75, 0.15);
  color: var(--ink);
}

/* Groups menu links — e.g. site-wide nav from this page's own anchors, or
   (on pages with no .overview-map link to make that distinction by color)
   off-page links from on-page jumps. */
.menu-panel hr.menu-divider {
  width: 100%;
  border: none;
  border-top: 1px solid var(--line);
  margin: 0.4rem 0;
}

/* ---------- Hero (fixed, fades on scroll) ---------- */

.hero {
  position: fixed;
  inset: 0;
  height: 100vh;
  width: 100%;
  /* Heroes are full-bleed at background-size: cover, so a 1x display and a 2x
     display want genuinely different renditions -- ~1440px vs the original.
     image-set() lets the browser pick, so a 1x visitor never downloads the
     3-4MB original to show it at 1440px.

     The 2x fallback matters: heroes migrated before this carry only
     --hero-image, and an image-set() naming an undefined custom property is
     invalid at computed-value time, which would blank them. Falling back to
     the 1x url keeps those rendering untouched. */
  background-image:
    linear-gradient(180deg, rgba(20, 18, 14, 0.15) 0%, rgba(20, 18, 14, 0.05) 35%, rgba(15, 13, 10, 0.75) 100%),
    image-set(var(--hero-image) 1x,
              var(--hero-image-2x, var(--hero-image)) 2x);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 0;
  will-change: opacity;
}

.hero-frame {
  padding: 6vw 6vw 5vw;
}

.eyebrow {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 0.9rem;
}

.hero h1 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
  max-width: 16ch;
}

.rule {
  width: 64px;
  height: 1px;
  background: var(--line);
  margin: 1.6rem 0;
}

.hero .tagline {
  margin: 0;
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--ink-dim);
  max-width: 48ch;
}

.scroll-cue {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  animation: bob 2.4s ease-in-out infinite;
}

.scroll-cue .stem {
  width: 1px;
  height: 26px;
  background: var(--line);
}

@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

/* On a day hero, clear the pinned .day-label that overlaps the hero's
   bottom 4.5rem (its negative margin) and sits at z-index 5. */
.day-hero .scroll-cue {
  bottom: 5.5rem;
  z-index: 6;
}

/* ---------- Day sections (per-day hero photo, scrolls normally, label pins on arrival) ---------- */

.day {
  position: relative;
}

.day-hero {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  /* Same 1x/2x split as .hero above, including the --hero-image-2x fallback
     that keeps already-migrated heroes rendering. */
  background-image:
    linear-gradient(180deg, rgba(20, 18, 14, 0.15) 0%, rgba(20, 18, 14, 0.05) 35%, rgba(15, 13, 10, 0.78) 100%),
    image-set(var(--hero-image) 1x,
              var(--hero-image-2x, var(--hero-image)) 2x);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  z-index: 0;
}

.day-hero-frame {
  padding: 6vw 6vw 4.5rem;
}

.day-hero h2 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  line-height: 1.15;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
  max-width: 26ch;
}

.day-hero .day-sub {
  margin: 0.9rem 0 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  max-width: 50ch;
}

.day-label-map {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: #7ec8e3;
  text-decoration: none;
  border-bottom: 1px solid rgba(126, 200, 227, 0.4);
  align-self: baseline;
}
.day-label-map:hover {
  color: #a8daf0;
  border-bottom-color: #a8daf0;
}

/* Sits right at the bottom edge of the hero (tucked slightly into its gradient),
   scrolls up together with the photo, then sticks to the top of the viewport the
   moment it would otherwise scroll past — and stays pinned there through the rest
   of that day's content, since its containing block is the whole .day section. */

.day-label {
  position: sticky;
  top: 0;
  z-index: 5;
  margin-top: -4.5rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.7rem;
  padding: 1.1rem 6vw;
  background: rgba(23, 19, 15, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(247, 244, 238, 0.08);
}

.day-label-date {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.day-label-title {
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-size: 1rem;
  color: var(--ink);
}

.day-panel {
  position: relative;
  z-index: 1;
  background: var(--ground);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -40px 80px rgba(0, 0, 0, 0.45);
}

/* ---------- Editorial photo pairing (one photo + caption, side by side) ---------- */

.aside-photo {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 1.8rem;
  align-items: center;
  margin: 2.5rem 0;
}

.aside-photo.reverse {
  grid-template-columns: 1.3fr 1fr;
}

.aside-photo.reverse .aside-photo-caption {
  order: 2;
}

.aside-photo img {
  width: 100%;
  display: block;
  border-radius: 10px;
  /* Unlike the scroller/category thumbnails, aside photos aren't cropped to
     a fixed aspect ratio by default — they show the whole image. So
     --focal-point has no effect here on its own; it only matters as the
     zoom's anchor point once --zoom is set (e.g. style="--focal-point: 30%
     70%; --zoom: 1.3"), via transform-origin. .zoomable (below) clips the
     overflow --zoom produces, same as the scroller items. Default 1 = no-op. */
  transform: scale(var(--zoom, 1));
  transform-origin: var(--focal-point, center);
  /* Per-photo color correction, e.g. style="--saturate: 1.2; --contrast: 1.1;
     --brightness: 0.9". Defaults (1) are a no-op. */
  filter: saturate(var(--saturate, 1)) contrast(var(--contrast, 1)) brightness(var(--brightness, 1));
}

.aside-photo-caption {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(247, 244, 238, 0.55);
}

/* ---------- Inline text links (in paragraphs, callouts, captions) ----------
   Previously unstyled, which meant the browser default blue/purple showed
   through — low contrast and off-palette against the dark background. */

.content a,
.callout a,
.aside-photo-caption a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(201, 138, 75, 0.4);
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.content a:visited,
.callout a:visited,
.aside-photo-caption a:visited {
  color: var(--link-visited);
}

.content a:hover,
.content a:focus-visible,
.callout a:hover,
.callout a:focus-visible,
.aside-photo-caption a:hover,
.aside-photo-caption a:focus-visible {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

@media (max-width: 700px) {
  .aside-photo,
  .aside-photo.reverse {
    grid-template-columns: 1fr;
  }
  .aside-photo.reverse .aside-photo-caption {
    order: 0;
  }
}

/* ---------- Horizontal scrolling photo gallery ---------- */

.gallery {
  position: relative;
  margin: 2.5rem 0;
}

.photo-scroller {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.4rem 0.2rem;
  scrollbar-width: none;  /* Firefox, Chrome 121+ */
  -ms-overflow-style: none;  /* legacy IE/Edge */
}

.photo-scroller::-webkit-scrollbar {
  display: none;   /* Safari, Chrome < 121, Samsung Internet */
}

.photo-scroller-item {
  flex: 0 0 auto;
  width: min(78vw, 320px);
  scroll-snap-align: start;
}

.photo-scroller-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--focal-point, center);
  /* Per-photo zoom, e.g. style="--zoom: 1.4" — scales the already-cropped
     image further inward around the focal point. Box size, aspect ratio,
     and crop style (still object-fit: cover) are untouched; the .zoomable
     wrapper (below) clips the overflow this produces. Default 1 = no-op. */
  transform: scale(var(--zoom, 1));
  transform-origin: var(--focal-point, center);
  /* Per-photo color correction, e.g. style="--saturate: 1.2; --contrast: 1.1;
     --brightness: 0.9". Defaults (1) are a no-op. */
  filter: saturate(var(--saturate, 1)) contrast(var(--contrast, 1)) brightness(var(--brightness, 1));
  display: block;
  border-radius: 10px;
}

.photo-scroller-item figcaption {
  margin: 0.6rem 0.1rem 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(247, 244, 238, 0.55);
}

.gallery-arrow {
  position: absolute;
  top: calc(50% - 0.9rem);
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(247, 244, 238, 0.22);
  background: rgba(23, 19, 15, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.gallery-arrow:hover {
  border-color: rgba(201, 138, 75, 0.6);
}

.gallery-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.gallery-arrow-prev { left: -8px; }
.gallery-arrow-next { right: -8px; }

@media (max-width: 640px) {
  .gallery-arrow-prev { left: 4px; }
  .gallery-arrow-next { right: 4px; }
}

.gallery-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.gallery-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(247, 244, 238, 0.25);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.gallery-dot:hover {
  background: rgba(247, 244, 238, 0.5);
}

.gallery-dot.active {
  background: var(--accent);
  transform: scale(1.3);
}

/* ---------- Callout boxes ---------- */

.callout {
  border-left: 5px solid var(--accent);
  background: rgba(247, 244, 238, 0.04);
  border-radius: 0 10px 10px 0;
  padding: 1.1rem 1.4rem;
  margin: 2rem 0;
}

.callout-label {
  display: block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.callout.observation {
  border-left-color: rgba(247, 244, 238, 0.4);
}

.callout.observation .callout-label {
  color: rgba(247, 244, 238, 0.6);
}

.callout.mapLink {
  border-left-color: #6E92BC;
}

.callout.mapLink .callout-label {
  color: #6E92BC;
}

.callout p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--ink-dim);
}

/* ---------- Spacer that reveals the hero, then content scrolls over it ---------- */

.spacer {
  height: 100vh;
  position: relative;
  z-index: 1;
}

main {
  position: relative;
  z-index: 1;
  background: var(--ground);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -40px 80px rgba(0, 0, 0, 0.45);
}

.content {
  max-width: 860px;
  margin: 0 auto;
  padding: 5rem 6vw 6rem;
}

.content h2.section-title {
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.6rem;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.content h1.welcome {
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin: 0 0 1.6rem;
}

.content p {
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--ink-dim);
  margin: 0 0 1.4rem;
  max-width: 68ch;
}

/* ---------- Lists ---------- */

.content ul {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  max-width: 68ch;
}

.content li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--ink-dim);
}

.content li::before {
  content: "\25B4";
  position: absolute;
  left: 0.1rem;
  top: 0.05em;
  color: var(--accent);
}

.divider {
  width: 64px;
  height: 1px;
  background: var(--line);
  margin: 3.5rem 0 2.5rem;
}

/* ---------- Trip cards ---------- */

.trips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.6rem;
  margin-top: 2rem;
}

.trip-card {
  background: var(--card);
  border: 1px solid rgba(247, 244, 238, 0.08);
  border-radius: 14px;
  padding: 1.4rem;
  text-align: center;
  transition: transform 0.35s ease, border-color 0.35s ease;
}

.trip-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 138, 75, 0.5);
}

.trip-card a.trip-link {
  text-decoration: none;
  color: var(--ink);
}

.trip-card h3 {
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 0 0 1rem;
}

.trip-card h3 a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}

.trip-card h3 a:hover {
  border-color: var(--accent);
}

.trip-card img {
  width: 100%;
  display: block;
  border-radius: 8px;
  filter: saturate(0.9);
}

.placeholder-img {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  border: 1px dashed rgba(247, 244, 238, 0.22);
  background: rgba(247, 244, 238, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(247, 244, 238, 0.32);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.5rem;
}

.caption {
  display: block;
  margin-top: 0.7rem;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.75rem;
  color: rgba(247, 244, 238, 0.5);
}

.caption a {
  color: rgba(247, 244, 238, 0.6);
}

/* ---------- Travel Tips index page ---------- */

.tips-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.6rem 0 0.6rem;
}

.tips-filter-btn {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  background: rgba(247, 244, 238, 0.04);
  border: 1px solid rgba(247, 244, 238, 0.18);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.tips-filter-btn:hover {
  border-color: rgba(201, 138, 75, 0.5);
  color: var(--ink);
}

.tips-filter-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ground);
}

.tips-filter-count {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.78rem;
  color: rgba(247, 244, 238, 0.45);
  margin: 0 0 1.4rem;
}

.tips-category.is-hidden {
  display: none;
}

.tips-category-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin: 0 0 1.6rem;
  padding: 1rem 0;
  background: rgba(23, 19, 15, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(247, 244, 238, 0.1);
}

.tips-category-media {
  flex: 0 0 auto;
  width: 130px;
}

.tips-category-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--focal-point, center);
  filter: saturate(var(--saturate, 1)) contrast(var(--contrast, 1)) brightness(var(--brightness, 1));
  display: block;
  border-radius: 10px;
}

.tips-category-heading h2.section-title {
  margin-bottom: 0.5rem;
}

.tips-category-desc {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(247, 244, 238, 0.55);
  margin: 0;
  max-width: 52ch;
}

.tips-inbox-section .tips-category-desc {
  font-style: italic;
}

/* Tip cards live in <li>s so the collector script (extract_travel_tips.py)
   can find them via a plain `soup.find_all("li")`, but they should read as
   cards, not a bulleted list — override the generic .content list styling. */
.content .tips-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Direct-child selector only — a tip's own text can contain a real bulleted
   list (e.g. tip-021b2611), which should keep the normal .content li bullet
   styling rather than being swept up by the tip-card override below it. */
.content .tips-list > li {
  padding-left: 0;
}

.content .tips-list > li::before {
  content: none;
}

.tips-list .tip-card.callout {
  margin: 0;
  padding-left: 2rem;
}

.tips-list .tip-card p {
  margin-bottom: 0;
}

.tip-card.is-hidden {
  display: none;
}

.tip-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
}

.tip-location-badge {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.5);
  border: 1px solid rgba(247, 244, 238, 0.2);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
}

.tips-list .tip-card a.tip-source-link {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.82rem;
}

@media (max-width: 640px) {
  .tips-category-head {
    /* Stacked layout makes a pinned image+heading too tall to leave
       parked at the top of a small screen — let it scroll normally. */
    position: static;
    flex-direction: column;
    align-items: flex-start;
  }
  .tips-category-media {
    width: 100%;
    max-width: 200px;
  }
}

footer {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: rgba(247, 244, 238, 0.35);
}

/* Footer is rendered from the menu by site.js (see "Site footer" there).
   Desktop = "Option B": nav grouped and centered, About pinned far right. */
.site-footer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2.5rem 1.5rem 3rem;
}

.site-footer a {
  color: rgba(247, 244, 238, 0.5);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.site-footer a:hover {
  color: var(--ink);
  border-color: var(--accent);
}

/* Overview Map link — blue, matching the local .day-label-map globe links in
   the day headers, in both the menu and the rendered footer. */
.menu-panel a.overview-map,
.site-footer a.overview-map {
  color: #7ec8e3;
}
.menu-panel a.overview-map:hover,
.site-footer a.overview-map:hover {
  color: #a8daf0;
  border-color: rgba(168, 218, 240, 0.4);
}

.footer-mid {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.footer-sep { opacity: 0.4; }

/* About lives inside .footer-mid in the DOM (so it wraps with the group on
   phones); on desktop it is lifted out of flow and pinned to the far right. */
.footer-about {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}
.footer-about-sep { display: none; }

/* Phone: Prev / Next drop to the corners, everything else stacks under a
   hairline divider (About rejoins the middle group, in-flow). */
@media (max-width: 640px) {
  .site-footer.footer-has-ends {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "prev next"
      "mid  mid";
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.4rem;
    padding: 1.75rem 1.25rem 2.5rem;
  }
  .footer-prev { grid-area: prev; justify-self: start; }
  .footer-next { grid-area: next; justify-self: end; }
  .footer-has-ends .footer-mid {
    grid-area: mid;
    justify-self: stretch;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(247, 244, 238, 0.12);
  }
  .site-footer > .footer-sep { display: none; }
  .footer-about { position: static; transform: none; }
  .footer-about-sep { display: inline; }
}

@media (max-width: 760px) {
  .trips { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue { animation: none; }
}

/* ---------- Zoomable photos + lightbox ----------
   Applied automatically (via site.js) to photos in .photo-scroller-item and
   .aside-photo. Each image gets wrapped in .zoomable with a small "expand"
   badge for discoverability.

   Discoverability on touch vs. mouse: we can't reliably detect "touch device"
   vs "mouse device" from the UA, but we CAN detect pointer *capability* via
   the hover/pointer media features. So the badge is always visible by default
   (safe baseline for touch, trackpad, or anything without hover) and only on
   a device with a precise pointer AND real hover support do we hide it until
   hover — paired with a zoom-in cursor, which is the discoverability signal
   for mouse users instead. */

.zoomable {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
}

.zoom-badge {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(23, 19, 15, 0.65);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(247, 244, 238, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  pointer-events: none;
  opacity: 0.9;
}

.zoom-badge svg {
  width: 14px;
  height: 14px;
}

@media (hover: hover) and (pointer: fine) {
  .zoomable {
    cursor: zoom-in;
  }
  .zoom-badge {
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .zoomable:hover .zoom-badge {
    opacity: 0.95;
  }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
  background: rgba(10, 8, 6, 0.92);
  cursor: zoom-out;
  animation: lightbox-fade 0.18s ease;
}

.lightbox[hidden] {
  display: none;
}

@keyframes lightbox-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  cursor: default;
}

.lightbox-close {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(247, 244, 238, 0.25);
  background: rgba(23, 19, 15, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: border-color 0.2s ease;
}

.lightbox-close:hover {
  border-color: rgba(201, 138, 75, 0.6);
}

/* Prev/next arrows inside the lightbox — same glassy circular treatment as the
   close button and in-page gallery arrows, sized up and pinned to the side
   edges. Hidden (via [hidden]) at the clamped ends of a gallery. */

.lightbox-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(247, 244, 238, 0.25);
  background: rgba(23, 19, 15, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: border-color 0.2s ease;
}

.lightbox-arrow:hover {
  border-color: rgba(201, 138, 75, 0.6);
}

.lightbox-arrow[hidden] {
  display: none;
}

.lightbox-arrow-prev { left: 1.5rem; }
.lightbox-arrow-next { right: 1.5rem; }

@media (max-width: 640px) {
  .lightbox-arrow-prev { left: 0.6rem; }
  .lightbox-arrow-next { right: 0.6rem; }
}

/* Position dots that briefly render on each navigation then auto-fade
   (see site.js). Reuses the .gallery-dot styling for the dots themselves. */

.lightbox-dots {
  position: fixed;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  background: rgba(23, 19, 15, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.lightbox-dots.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-dots:empty {
  display: none;
}

.breakout-tour {
  width: 90vw;                  /* Takes up 90% of the screen width */
  max-width: 1050px;            /* Caps the width on wide monitors so it doesn't get ridiculously wide */
  position: relative;
  left: 50%;                    /* Shifts the iframe's left edge to the center of the viewport */
  transform: translateX(-50%);  /* Shifts it back by half its own width, perfectly centering it */
  display: block;
  margin-block: 2rem;           /* Adds some vertical breathing room */
  border: none;                 /* no border */
  height: 600px;
}

/* Mobile-specific adjustments for .breakout_tour */
@media (max-width: 640px) {
  .breakout-tour {
    /* Height is restricted so users don't get trapped,
       but matches the inner page's min-height requirements */
    height: 500px;
  }
}