/* drive pages: leaflet map, locate button, turn list, osmand steps.
   ported from the 944fest rally app (rally.css), recolored to the camp palette.
   plain css, not run through tailwind. */

/* map */

.camp-body #driveMap {
    /* own stacking context, so leaflet's z-index 1000 controls stay under the fixed nav */
    position: relative;
    z-index: 0;
    height: 62vh;
    min-height: 340px;
    border: 2px solid var(--cb-ink);
    border-radius: 14px;
    box-shadow: 5px 5px 0 0 var(--cb-ink);
    background: var(--cb-cream-deep);
    font-family: 'Archivo', system-ui, sans-serif;
}

/* phones: the map runs edge to edge (out past the section's 1.5rem side
   padding) and takes most of the screen. it stops short of full height so
   there is still page above and below it to grab and scroll with. */
@media (max-width: 767px) {
    .camp-body #driveMap {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        height: 78vh;
        height: 78svh;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

.camp-body #preloadStatus {
    display: block;
    min-height: 1.3rem;
    font-family: 'Archivo Narrow', 'Archivo', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--cb-pine);
}

/* locate control button */

.camp-body .locate-btn {
    display: block;
    width: 44px;
    height: 44px;
    background: var(--cb-cream);
    border: 2px solid var(--cb-ink);
    border-radius: 10px;
    box-shadow: 2px 2px 0 0 var(--cb-ink);
    cursor: pointer;
    padding: 0;
    line-height: 0;
}

.camp-body .locate-btn svg {
    width: 24px;
    height: 24px;
    margin: 8px;
    stroke: var(--cb-ink);
    fill: none;
    stroke-width: 2;
}

.camp-body .locate-btn.on svg {
    stroke: var(--cb-pine);
}

.camp-body .locate-btn.follow {
    background: var(--cb-pine);
}

.camp-body .locate-btn.follow svg {
    stroke: #fff;
}

/* turn list fold: a details element with a card for its summary */
.camp-body details.turns-fold > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.camp-body details.turns-fold > summary::-webkit-details-marker {
    display: none;
}
.camp-body details.turns-fold .fold-icon::before {
    content: '+';
}
.camp-body details.turns-fold[open] .fold-icon::before {
    content: '\2212';
}

/* turn list */

.camp-body ol.turns {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    border: 2px solid var(--cb-ink);
    border-radius: 14px;
    box-shadow: 5px 5px 0 0 var(--cb-ink);
    background: var(--cb-cream);
    overflow: hidden;
}

.camp-body li.turn {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
    padding: 0.85rem 1rem;
    border-top: 1px solid rgba(33, 29, 20, 0.18);
    min-height: 3.4rem;
}

.camp-body li.turn:first-child {
    border-top: 0;
}

.camp-body .t-dist {
    font-family: 'Anton', sans-serif;
    font-size: 1.6rem;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    flex: 0 0 auto;
}

.camp-body .t-unit {
    font-size: 0.6em;
}

.camp-body .t-arrow {
    font-size: 1.25rem;
    color: var(--cb-ember);
    flex: 0 0 auto;
}

.camp-body .t-act {
    font-family: 'Archivo Narrow', 'Archivo', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cb-pine);
    flex: 0 0 auto;
}

.camp-body .t-road {
    font-size: 1.1rem;
    font-weight: 600;
    flex: 1 1 100%;
}

.camp-body .t-mile {
    flex: 1 1 100%;
    font-family: 'Archivo Narrow', 'Archivo', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5f574a;
    text-align: right;
}

.camp-body li.turn-start,
.camp-body li.turn-arrive {
    background: var(--cb-cream-deep);
    border-left: 6px solid var(--cb-pine);
}

.camp-body li.turn-start .t-act,
.camp-body li.turn-arrive .t-act {
    font-family: 'Anton', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
}

.camp-body li.turn-becomes .t-act {
    color: #5f574a;
}

.camp-body li.turn-breather,
.camp-body li.turn-note {
    display: block;
    background: var(--cb-cream-deep);
    color: #5f574a;
    font-style: italic;
    font-size: 0.95rem;
    min-height: 0;
    padding: 0.6rem 1rem;
}

.camp-body li.turn-note {
    background: var(--cb-sand);
    color: var(--cb-ink);
    font-style: normal;
    font-weight: 600;
}

.camp-body li.turn-note .t-mile {
    display: block;
}

@media (min-width: 46rem) {
    .camp-body .t-road {
        flex: 1 1 auto;
    }

    .camp-body .t-mile {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .camp-body li.turn-note .t-mile {
        display: inline;
        float: right;
    }
}

/* osmand setup steps */

.camp-body ol.steps {
    list-style: none;
    counter-reset: step;
    margin: 2rem 0 0;
    padding: 0;
}

.camp-body ol.steps li {
    counter-increment: step;
    position: relative;
    padding: 0 0 0 3.2rem;
    margin-bottom: 1.6rem;
    min-height: 2.4rem;
}

.camp-body ol.steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.4rem;
    height: 2.4rem;
    border: 2px solid var(--cb-ink);
    border-radius: 50%;
    background: var(--cb-ember);
    font-family: 'Anton', sans-serif;
    font-size: 1.15rem;
    line-height: 2.2rem;
    text-align: center;
}

.camp-body .store-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.9rem;
}

.camp-body .store-badges img {
    height: 44px;
    width: auto;
}

.camp-body .store-badges .app-tile {
    height: 56px;
    border-radius: 12px;
    border: 2px solid var(--cb-ink);
}

/* gpx download list */

.camp-body .gpx-list {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    border-top: 2px solid var(--cb-ink);
    border-bottom: 2px solid var(--cb-ink);
}

.camp-body .gpx-list li + li {
    border-top: 1px solid rgba(33, 29, 20, 0.18);
}

.camp-body .gpx-list a {
    display: block;
    padding: 0.95rem 0;
    font-family: 'Archivo Narrow', 'Archivo', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--cb-ink);
}

.camp-body .gpx-list a:hover {
    color: var(--cb-pine);
}

.camp-body .gpx-list a::after {
    content: ' \2193';
    color: var(--cb-ember);
}

/* send-to-osmand share buttons (drive-share.js adds them next to each gpx link) */

.camp-body .gpx-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
}

.camp-body .gpx-list a {
    flex: 1 1 auto;
}

.camp-body .share-link {
    font-family: 'Archivo Narrow', 'Archivo', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cb-ink);
    background: var(--cb-ember);
    border: 2px solid var(--cb-ink);
    border-radius: 999px;
    box-shadow: 2px 2px 0 0 var(--cb-ink);
    padding: 0.4rem 0.95rem;
    margin: 0.3rem 0;
    cursor: pointer;
}

.camp-body .share-link:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 0 var(--cb-ink);
}