/* =========================================================
   Rusty Rhinos - shared route page styles
   Used by every event's route.html for the Leaflet map.
   Pairs with /shared/route.js which boots Leaflet.
   ========================================================= */

/* ---- MAP CONTAINER ---- */

.route-main {
  max-width: 1200px;
  margin: 2rem auto 0;
  padding: 0 1.5rem 1rem;
}

.route-map-wrap {
  position: relative;
  /* isolation: isolate creates a new stacking context so Leaflet's
     internal z-indexes (up to 800) stay contained within the map
     wrapper and can't float above the sticky site nav (z-index: 100). */
  isolation: isolate;
  background: var(--blog-card-bg);
  border-radius: var(--blog-radius);
  box-shadow: var(--blog-card-shadow);
  overflow: hidden;
  transition: background 0.3s ease;
}

.route-map {
  width: 100%;
  height: 55vh;
  min-height: 380px;
  max-height: 600px;
  background: var(--blog-placeholder-bg);
}

@media (max-width: 600px) {
  .route-main { padding: 0 0.5rem 1rem; margin-top: 1rem; }
  .route-map-wrap { border-radius: var(--blog-radius-sm); }
  .route-map {
    height: 55vh;
    min-height: 320px;
  }
}

/* Brighten the dark CartoDB tiles slightly so dark mode doesn't feel
   like a black hole. The base tiles are quite dark; a brightness filter
   on the tile pane lifts the land/sea contrast without changing provider. */
[data-theme="dark"] .leaflet-tile-pane {
  filter: brightness(1.45) contrast(0.92);
}

/* ---- MAP OVERLAY: route stats badge ---- */

.route-stats-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 500;
  display: flex;
  align-items: stretch;
  padding: 0.6rem 0.4rem;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  font-family: var(--blog-font-heading);
  max-width: calc(100% - 2rem);
}

.route-stats-badge .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  padding: 0 0.95rem;
  border-right: 1px solid rgba(0, 0, 0, 0.15);
}

.route-stats-badge .stat:last-child {
  border-right: none;
}

.route-stats-badge .stat-num {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--blog-accent);
}

.route-stats-badge .stat-label {
  font-size: 0.62rem;
  letter-spacing: 1.5px;
  color: rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
  margin-top: 0.3rem;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .route-stats-badge {
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.5rem 0.6rem;
    gap: 0.6rem;
  }
  .route-stats-badge .stat-num { font-size: 1.05rem; }
  .route-stats-badge .stat-label { font-size: 0.55rem; letter-spacing: 1px; }
}

/* ---- COUNTRY TAGS BELOW MAP ---- */

.route-info {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.route-section-heading {
  font-family: var(--blog-font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--blog-text-muted);
  margin-bottom: 1rem;
}

.country-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.country-tags li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  background: var(--blog-card-bg);
  color: var(--blog-text);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: var(--blog-card-shadow);
}

.country-tags li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blog-accent);
}

/* ---- ROUTE NARRATIVE ----
   Prose migrated from each event's original route page. Sits below
   the map and the country tag list. Styled to match the shared blog
   body type so it reads comfortably alongside the journal posts. */

.route-narrative {
  max-width: 820px;
  margin: 1rem auto 2rem;
  padding: 2rem 1.5rem;
  background: var(--blog-card-bg);
  border-radius: var(--blog-radius);
  box-shadow: var(--blog-card-shadow);
  transition: background 0.3s ease;
}

.route-narrative .route-section-heading {
  margin-bottom: 1.25rem;
  color: var(--blog-accent);
}

.route-narrative-body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--blog-text);
}

.route-narrative-body p {
  margin: 0 0 1rem 0;
}

.route-narrative-body p:last-child {
  margin-bottom: 0;
}

.route-narrative-body a {
  color: var(--blog-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.route-narrative-body a:hover {
  border-bottom-color: currentColor;
}

/* Dated update subheading for timeline-style narratives (Beijing 2014
   has multiple 'Update: Month Year' sections showing how the route
   plan evolved). Drawn with a top rule for clear separation. */
.route-narrative-subheading {
  font-family: var(--blog-font-heading);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blog-accent);
  margin: 2.25rem 0 0.9rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--blog-border);
}

.route-narrative-body > .route-narrative-subheading:first-child {
  margin-top: 0.5rem;
  padding-top: 0;
  border-top: none;
}

/* Figure (image + caption) migrated from the old route pages
   e.g. "Overview of our intended route" static map on Morocco 2012. */
.route-narrative-figure {
  margin: 1.75rem auto 0.25rem;
  max-width: 100%;
  text-align: center;
}

.route-narrative-figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--blog-radius-sm);
  box-shadow: var(--blog-img-shadow);
}

.route-narrative-figure figcaption {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--blog-text-muted);
  line-height: 1.5;
}

@media (max-width: 600px) {
  .route-narrative {
    padding: 1.5rem 1.25rem;
    margin: 0.75rem 0.5rem 1.5rem;
  }
  .route-narrative-body { font-size: 0.95rem; }
  .route-narrative-figure { margin-top: 1.25rem; }
  .route-narrative-figure figcaption { font-size: 0.8rem; }
}

/* ---- STAGE LIST ----
   Used on multi-stage routes (Taiwan Pedal.360 2026) to break the
   circumnavigation into its ten individual stages. Each card carries
   a stage number, from/to title, distance & climb pills, a GPX
   download button, and a short review written from the journal. */

.route-stages {
  max-width: 820px;
  margin: 0.5rem auto 2rem;
  padding: 0 1.5rem;
}

.route-stages-heading {
  font-family: var(--blog-font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--blog-accent);
  margin: 2.5rem 0 0.5rem;
}

.route-stages-sub {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--blog-text-muted);
  margin: 0 0 1.75rem;
}

.route-stage-card {
  position: relative;
  background: var(--blog-card-bg);
  border-radius: var(--blog-radius);
  box-shadow: var(--blog-card-shadow);
  padding: 1.75rem 1.75rem 1.5rem 2rem;
  margin-bottom: 1.25rem;
  overflow: hidden;
  transition: background 0.3s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

/* Thin accent bar on the left edge of each stage card in the event's
   accent colour. Ladders the stages together visually without needing
   a heavy border. */
.route-stage-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--blog-accent);
}

.route-stage-number {
  font-family: var(--blog-font-heading);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--blog-accent);
  margin: 0 0 0.35rem;
}

.route-stage-title {
  font-family: var(--blog-font-heading);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--blog-heading);
  margin: 0 0 1rem;
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.route-stage-title .arrow {
  display: inline-block;
  margin: 0 0.4rem;
  color: var(--blog-accent);
  opacity: 0.75;
  font-weight: 400;
}

.route-stage-stats {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.route-stage-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  background: var(--blog-placeholder-bg);
  border-radius: 999px;
  font-family: var(--blog-font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blog-text-muted);
}

.route-stage-stat .num {
  color: var(--blog-accent);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.route-stage-download {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1rem;
  border: 1.5px solid var(--blog-accent);
  border-radius: 6px;
  color: var(--blog-accent);
  font-family: var(--blog-font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  margin-bottom: 1.1rem;
}

.route-stage-download:hover,
.route-stage-download:focus-visible {
  background: var(--blog-accent);
  color: var(--blog-card-bg);
}

.route-stage-download:focus-visible {
  outline: 2px solid var(--blog-card-bg);
  outline-offset: 2px;
}

.route-stage-download svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.route-stage-review {
  border-top: 1px solid var(--blog-border);
  padding-top: 1rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--blog-text);
}

.route-stage-review p {
  margin: 0 0 0.75rem;
}

.route-stage-review p:last-child {
  margin-bottom: 0;
}

/* Full-route card at the end of the stage list. Visually distinct
   from the 10 stage cards: filled accent background, no left bar,
   centred layout so it reads as a summary/total rather than another
   stage. */
.route-stage-card.is-full-route {
  background: var(--blog-accent);
  color: #fff;
  text-align: center;
  padding: 2rem 1.75rem;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.route-stage-card.is-full-route::before {
  display: none;
}

.route-stage-card.is-full-route .route-stage-number,
.route-stage-card.is-full-route .route-stage-title {
  color: #fff;
}

.route-stage-card.is-full-route .route-stage-title {
  margin-bottom: 0.5rem;
}

.route-stage-card.is-full-route .route-stage-full-sub {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 auto 1.25rem;
  max-width: 520px;
  opacity: 0.9;
}

.route-stage-card.is-full-route .route-stage-download {
  border-color: #fff;
  color: #fff;
  background: transparent;
  margin-bottom: 0;
}

.route-stage-card.is-full-route .route-stage-download:hover,
.route-stage-card.is-full-route .route-stage-download:focus-visible {
  background: #fff;
  color: var(--blog-accent);
}

@media (max-width: 600px) {
  .route-stages { padding: 0 1rem; }
  .route-stages-heading { margin-top: 2rem; }
  .route-stage-card { padding: 1.35rem 1.25rem 1.15rem 1.5rem; }
  .route-stage-card::before { width: 4px; }
  .route-stage-title { font-size: 1.25rem; }
  .route-stage-stat { font-size: 0.64rem; padding: 0.4rem 0.75rem; }
  .route-stage-stat .num { font-size: 0.85rem; }
  .route-stage-download { font-size: 0.68rem; padding: 0.5rem 0.85rem; }
  .route-stage-review { font-size: 0.9rem; }
  .route-stage-card.is-full-route { padding: 1.5rem 1.25rem; }
}

/* ---- "Coming soon" placeholder used when no route.geojson exists ---- */

.route-coming-soon {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--blog-card-bg);
  border-radius: var(--blog-radius);
  box-shadow: var(--blog-card-shadow);
  border: 2px dashed var(--blog-border);
  max-width: 720px;
  margin: 2rem auto;
}

.route-coming-soon h2 {
  font-family: var(--blog-font-heading);
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--blog-heading);
  margin-bottom: 1rem;
}

.route-coming-soon p {
  color: var(--blog-text-muted);
  line-height: 1.6;
}

/* ---- MAP MARKER STYLES ----
   Custom div icons rendered by route.js. Start = filled circle,
   Finish = filled square, both in the event accent colour. */

.map-marker {
  border: 2px solid #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.map-marker.start {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.map-marker.finish {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  transform: rotate(45deg);
}

/* ---- LEAFLET ATTRIBUTION TWEAKS ---- */

.leaflet-control-attribution {
  font-size: 0.65rem !important;
  background: rgba(255, 255, 255, 0.8) !important;
  color: rgba(0, 0, 0, 0.55) !important;
}

.leaflet-control-attribution a {
  color: rgba(0, 0, 0, 0.55) !important;
  text-decoration: underline !important;
}

.leaflet-control-attribution a:hover {
  color: rgba(0, 0, 0, 0.85) !important;
}

[data-theme="dark"] .leaflet-control-attribution {
  background: rgba(0, 0, 0, 0.6) !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

[data-theme="dark"] .leaflet-control-attribution a {
  color: rgba(255, 255, 255, 0.55) !important;
}

[data-theme="dark"] .leaflet-control-attribution a:hover {
  color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="dark"] .route-stats-badge {
  background: rgba(28, 24, 20, 0.92);
}

[data-theme="dark"] .route-stats-badge .stat {
  border-right-color: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .route-stats-badge .stat:last-child {
  border-right: none;
}

[data-theme="dark"] .route-stats-badge .stat-label {
  color: rgba(255, 255, 255, 0.6);
}

/* ---- ZOOM CONTROL CUSTOMISATION ---- */

.leaflet-control-zoom {
  border: none !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
}

.leaflet-control-zoom a {
  background: var(--blog-card-bg) !important;
  color: var(--blog-text) !important;
  border-color: var(--blog-border) !important;
}

.leaflet-control-zoom a:hover {
  background: var(--blog-bg) !important;
}

/* ---- FULLSCREEN BUTTON ----
   Custom Leaflet control. Stacks below the zoom buttons in the top-left
   so it shares the same visual group. The icon swaps when in fullscreen. */

.leaflet-control-fullscreen {
  background: var(--blog-card-bg) !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
  width: 30px;
  height: 30px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--blog-text);
  margin-top: 6px !important;
  transition: background 0.2s ease;
}

.leaflet-control-fullscreen:hover {
  background: var(--blog-bg) !important;
}

.leaflet-control-fullscreen svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* When the document is in fullscreen, the map fills the viewport.
   Hide the page chrome (nav, etc.) is browser-handled, but we ensure
   the map container has no border radius / shadow so it looks clean. */
.route-map-wrap:fullscreen,
.route-map:fullscreen {
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100vw;
  height: 100vh;
  max-height: none;
}

.route-map-wrap:fullscreen .route-map,
.route-map:fullscreen {
  height: 100vh !important;
  max-height: none !important;
}

/* NOTE: The portal world map legend styles live in /styles.css (the
   portal's own stylesheet) because the portal doesn't load this shared
   route stylesheet. See .portal-legend-* rules in styles.css. */