/*
 * Distance Navigator responsive overrides
 *
 * This file is intentionally separate from the generated bundle so it remains
 * easy to replace or audit when the app is rebuilt.
 */

html,
body,
#root {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body {
  overflow-x: hidden;
}

.noise-overlay {
  width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.noise-overlay main,
.noise-overlay header > div,
.noise-overlay footer > div {
  min-width: 0;
}

.noise-overlay h1,
.noise-overlay h2,
.noise-overlay h3,
.noise-overlay p,
.noise-overlay span {
  overflow-wrap: break-word;
}

[data-testid="section-route-planner"],
[data-testid="section-route-map"],
[data-testid="section-travel-brief"],
[data-testid^="metric-"] {
  min-width: 0;
}

[data-testid="section-route-map"] > div,
[data-testid="map-route"] {
  min-width: 0;
}

/* Keep long city names inside the map instead of pushing the page wider. */
[data-testid="map-route"] > div[class~="absolute"][class~="left-4"][class~="top-4"],
[data-testid="map-route"] > div[class~="absolute"][class~="bottom-4"][class~="right-4"] {
  max-width: calc(100% - 2rem);
}

[data-testid="map-route"] > div[class~="absolute"][class~="left-4"][class~="top-4"] > div,
[data-testid="map-route"] > div[class~="absolute"][class~="bottom-4"][class~="right-4"] > div {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-testid="map-route"] .leaflet-control-attribution {
  max-width: calc(100vw - 2rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Phones and narrow embedded frames. */
@media (max-width: 639px) {
  .noise-overlay header > div {
    height: 64px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .noise-overlay main {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 24px;
    padding-bottom: 40px;
  }

  .noise-overlay h1 {
    max-width: 100%;
    font-size: clamp(2.25rem, 12vw, 3.2rem);
  }

  .noise-overlay main > div:first-child {
    margin-bottom: 24px;
  }

  [data-testid="section-route-planner"] {
    padding: 16px;
    border-radius: 16px;
  }

  [data-testid="section-route-planner"] > div:first-child {
    margin-bottom: 20px;
  }

  [data-testid="section-route-planner"] input {
    /*
     * Prevent iOS Safari from zooming the page when a place field receives
     * focus. The surrounding UI remains visually smaller.
     */
    font-size: 16px;
  }

  [data-testid="section-route-map"] {
    min-height: 360px;
    border-radius: 16px;
  }

  [data-testid="section-route-map"] > div[class~="relative"] {
    min-height: 0;
  }

  [data-testid="section-route-map"] [data-testid="map-route"],
  [data-testid="section-route-map"] [data-testid="error-route"] {
    min-height: 310px;
  }

  [data-testid="section-route-map"] [data-testid="error-route"] {
    padding: 20px;
  }

  [data-testid="section-route-map"] .leaflet-control-zoom {
    margin-right: 8px;
    margin-bottom: 8px;
  }

  [data-testid="section-route-map"] .leaflet-control-attribution {
    font-size: 9px;
  }

  [data-testid^="metric-"] {
    padding: 12px;
  }

  [data-testid^="text-metric-value-"] {
    overflow-wrap: anywhere;
  }

  [data-testid="section-travel-brief"] > div:first-child {
    gap: 12px;
    padding: 16px;
  }

  [data-testid="section-travel-brief"] > div:first-child h2 {
    font-size: 1.25rem;
    line-height: 1.2;
  }

  [data-testid="section-travel-brief"] > div:last-child {
    gap: 16px;
    padding: 16px;
  }

  [data-testid="section-travel-brief"] > div:last-child > div:last-child {
    min-width: 0;
    gap: 6px;
  }

  [data-testid="section-travel-brief"] > div:last-child > div:last-child > div {
    min-width: 0;
    padding: 10px;
  }

  [data-testid="section-travel-brief"] [data-testid^="text-brief-"] {
    overflow-wrap: anywhere;
  }

  [data-testid="section-how-it-works"] {
    margin-top: 40px;
  }

  [data-testid="section-how-it-works"] h2 {
    font-size: 1.75rem;
  }
}

/* Extra-tight phones such as 320px-wide devices. */
@media (max-width: 375px) {
  .noise-overlay header > div {
    padding-left: 12px;
    padding-right: 12px;
  }

  .noise-overlay main {
    padding-left: 12px;
    padding-right: 12px;
  }

  [data-testid="section-route-planner"] {
    padding: 14px;
  }

  [data-testid="section-route-map"] {
    min-height: 340px;
  }

  [data-testid="section-route-map"] [data-testid="map-route"],
  [data-testid="section-route-map"] [data-testid="error-route"] {
    min-height: 290px;
  }
}

/* Embed mode should not reintroduce the desktop gutters on a phone. */
html.embed-mode .noise-overlay main {
  width: 100%;
  max-width: 1440px;
}

@media (max-width: 639px) {
  html.embed-mode .noise-overlay main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 375px) {
  html.embed-mode .noise-overlay main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}