@charset "UTF-8";

:root {
  --trail-map-height: 30rem;
  --trail-breakout: var(--breakout-xs);

  --trail-route-color: var(--dim-red);
  --trail-route-width: 4px;
  --trail-route-opacity: 1;

  --trail-chart-color: var(--dim-red);
  --trail-chart-opacity: 0.25;

  --trail-start-color: var(--green);
  --trail-finish-color: var(--red);
  --trail-loop-color: var(--blue);
}

.trail {
  box-sizing: border-box;
  width: calc(100% + 2 * var(--trail-breakout));
  max-width: 100vw;
  min-width: 0;
  margin: 2.5rem 0;
  transform: translateX(calc(-1 * var(--trail-breakout)));

  > [data-trail-map] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--foreground);
    border-radius: 0.5rem;
    background: var(--background);
  }

  > [data-trail-map] {
    position: relative;
    height: var(--trail-map-height);

    img.leaflet-tile {
      max-width: none !important;
      max-height: none !important;
    }

    .leaflet-marker-icon:focus-visible,
    .leaflet-interactive:focus-visible,
    .leaflet-control a:focus-visible {
      outline: 3px solid var(--yellow);
      outline-offset: 2px;
    }
  }

  > details {
    margin-top: 1rem;
    border: 1px solid var(--foreground);
    border-radius: 0.5rem;

    > summary {
      padding: 0.75rem 1rem;
      cursor: pointer;
      color: var(--green);
      font-weight: bold;
    }

    > div {
      display: grid;
      gap: 1rem;
      padding: 0 1rem 1rem;
    }

    [data-trail-chart] {
      box-sizing: border-box;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow: hidden;
      background: var(--background);

      .elevation-control {
        box-sizing: border-box;
        width: 100% !important;
        max-width: none !important;
        height: 100%;
        margin: 0;
        background: var(--background);
        color: var(--foreground);
        font-family: "Libre Baskerville", Georgia, serif;

        text {
          fill: var(--foreground) !important;
          font: inherit;
          font-size: 1rem;
          font-weight: normal;
          text-shadow: none !important;
          paint-order: normal;
          stroke: none !important;
        }

        .background {
          background-color: var(--background);
        }
      }

      svg {
        display: block;
        max-width: none;
      }

      text {
        fill: var(--foreground);
      }

      .area {
        fill: var(--trail-chart-color);
        fill-opacity: var(--trail-chart-opacity);
        stroke: var(--trail-chart-color);
      }

      .axis {
        path,
        line {
          stroke: var(--dim-foreground);
        }

        text {
          font-size: 0.85rem;
        }
      }

      .grid line,
      .mouse-focus-line {
        stroke: var(--dim-foreground);
      }

      .elevation-summary {
        display: none;
      }

      .mouse-focus-label-text {
        fill: var(--foreground) !important;
        font: inherit !important;
        font-size: 1rem;
        font-weight: normal !important;
        text-shadow: none !important;
        stroke: none !important;
      }

      .mouse-focus-label-rect {
        fill: var(--background);
        fill-opacity: 0.95;
        stroke: var(--foreground);
        stroke-width: 1px;
      }

      .mouse-focus-label-time,
      .mouse-focus-label-slope,
      .mouse-focus-label-speed {
        display: none;
      }
    }

    [data-trail-summary] {
      overflow: hidden;

      table {
        width: 100%;
        margin: 0.5rem 0;
        border-collapse: collapse;
        font-size: 1rem;

        tr {
          &:not(:last-of-type) {
            border-bottom: 1px solid var(--foreground);

            th,
            td {
              padding-bottom: 0.5rem;
            }
          }
          &:not(:first-of-type) {
            th,
            td {
              padding-top: 0.5rem;
            }
          }
        }

        th {
          padding-right: 0.5rem;
          color: var(--blue);
          text-align: left;
        }

        td {
          padding-right: 0.5rem;
          text-align: right;
        }
      }

      @media (max-width: 1300px) {
        table,
        tbody,
        tr {
          display: contents;
        }

        table {
          display: grid;
          grid-template-columns:
            minmax(0, 1fr)
            max-content;
          margin: 0;
        }

        th,
        td {
          box-sizing: border-box;
          padding: 0.5rem 0.75rem;
          border-bottom: 1px solid var(--foreground);
        }

        th {
          text-align: left;

          &:first-child {
            padding-left: 0.75rem;
          }
        }

        td {
          text-align: right;
        }

        tbody > tr:last-child > :last-child,
        tbody > tr:last-child > :nth-last-child(2) {
          border-bottom: 0;
        }
      }
    }

    > div > p {
      max-inline-size: none;
      margin: 0;
      text-align: center;
    }

    @media (max-width: 700px) {
      [data-trail-chart] {
        height: 18rem;
      }
    }

    a {
      font-size: 1.2rem;
    }
  }

  /*
   * Classes below are required by Leaflet or generated
   * dynamically for custom Leaflet markers.
   */

  .trail-marker {
    border: 0;
    background: transparent;

    .trail-marker-symbol {
      box-sizing: border-box;
      display: grid;
      place-items: center;
      width: 1.75rem;
      height: 1.75rem;
      border: 2px solid var(--background);
      border-radius: 50%;
      color: var(--background);
      box-shadow: 0 0 0 1px var(--foreground);
      font-family: system-ui, sans-serif;
      font-size: 0.8rem;
      font-weight: 700;
      line-height: 1;
    }

    &.trail-marker-start {
      .trail-marker-symbol {
        background: var(--trail-start-color);

        &::before {
          content: "S";
        }
      }
    }

    &.trail-marker-finish {
      .trail-marker-symbol {
        background: var(--trail-finish-color);

        &::before {
          content: "F";
        }
      }
    }

    &.trail-marker-loop {
      .trail-marker-symbol {
        background: var(--trail-loop-color);

        &::before {
          content: "↻";
        }
      }
    }
  }

  .trail-marker-hidden {
    display: none;
  }

  .trail-theme.elevation-polyline {
    stroke: var(--trail-route-color);
    stroke-width: var(--trail-route-width);
    stroke-opacity: var(--trail-route-opacity);
  }

  .trail-parking-marker {
    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.4));
  }

  @media (max-width: 500px) {
    width: 100%;
    transform: none;
  }
}