/* CSS variables */
:root {
    --blog-color: #4385f5;
    --admin-color: #fb8c00;
    --primary-color: var(--blog-color);
    --success-color: #4caf50;
    --error-color: #f44336;
    --meta-color: #9e9e9e;
    --border-color: rgba(0, 0, 0, 0.12);
    --bg-color: #f0f0f0;
    --timeline-width: 370px;
}

/* ==========================================================================
   Normalize
   ========================================================================== */

/* Box sizing */
*,
*:before,
*:after {
    box-sizing: border-box;
}

html {
    /* Font */
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    letter-spacing: -0.1px;
    color: #333;

    /* Correct the line height in all browsers */
    line-height: 1.6;

    /* Prevent adjustments of font size after orientation changes in iOS */
    -webkit-text-size-adjust: 100%;

    /* Mapbox default background */
    background: #efe9e1;
}

body {
    margin: 0;
}

/* Title */
h1,
h2,
h3 {
    margin: 0;
    font-weight: normal;
}

/* Separator */
hr {
    /* Add the correct box sizing in Firefox */
    box-sizing: content-box;
    height: 0;

    /* Show the overflow in Edge and IE */
    overflow: visible;

    /* clem */
    width: 100%;
    border: solid;
    border-width: 1px 0 0 0;
    border-color: var(--border-color);
}
hr.vertical {
    width: 0;
    height: 14px;
    margin: 0 16px;
    border-width: 0 1px 0 0;
}

/* Bold text */
strong {
    /* Add the correct font weight in Chrome, Edge, and Safari */
    font-weight: 600;
}

/* Small text */
small,
small.meta {
    font-size: 13px;
}

/* Lists */
ul,
ol {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}

/* Paragraphs */
p {
    margin: 0 0 10px;
}

/* Images */
.img {
    position: relative;
    max-width: 100%;
    color: transparent;
    background: #eee;
}
/* Hide broken image icon */
.img:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Reset buttons */
button {
    /* Change the font styles in all browsers */
    font-family: inherit;
    font-size: 100%;
    line-height: inherit;

    /* Remove the inheritance of text transform in Edge, Firefox, and IE */
    /* select */
    text-transform: none;

    /* Reset style */
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
}

/* Correct the inability to style clickable types in iOS and Safari */
button,
[type='button'],
[type='submit'] {
    -webkit-appearance: button;
}

/* Links without href */
button:not(:disabled),
.btn:not(:disabled) {
    cursor: pointer;
}

/* ==========================================================================
   UI elements
   ========================================================================== */

/* BUTTONS
   ========================================================================== */

.btn {
    /* Size */
    min-height: 36px;

    /* Content */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Appearance */
    color: inherit;
    font-weight: 500;
    letter-spacing: 0.2px;
    text-decoration: none;
    border-radius: 4px;

    /* Transition */
    transition: filter 0.1s, box-shadow 0.1s;
}

/* Hoverable (map header trips, map legend) */
.hoverable {
    transition: filter 0.1s;
}
/* Hover (darker bg) */
.hoverable:hover,
.btn:hover:not(:disabled) {
    filter: brightness(70%);
}

/* Raised (shadow) */
.btn--raised {
    /* Style */
    background: #fff;
    padding: 0 16px;

    /* Custom focus style */
    outline: 0;

    /* Shadow (elevation 2) */
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
        0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
/* Hover */
.btn--raised:hover:not(:disabled) {
    filter: brightness(90%);
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
        0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
/* Focus (keyboard highlight) */
.btn--raised:focus:not(:disabled) {
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.2),
        0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
        0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
/* Active (mouse pressed down) */
.btn--raised:active:not(:disabled) {
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2),
        0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
}
/* Disabled */
.btn--raised:disabled {
    background: #ccc;
}

/* Primary (blue) */
.btn--primary {
    color: #fff;
}
.btn--primary:not(:disabled) {
    background: var(--primary-color);
}

/* Button icons */
.btn--primary svg.svg-icon,
.btn.primary--text svg.svg-icon {
    fill: currentColor;
}

/* Large */
.btn--large {
    height: 42px;
}
/* Wide */
.btn--wide {
    padding: 0 24px;
}

/* Icon (square) */
.btn--icon {
    padding: 0;
}
.hoverable svg,
.btn--icon svg {
    transition: fill 0.1s;
}
.hoverable:hover svg,
.btn--icon:hover svg {
    fill: rgba(0, 0, 0, 0.7);
}

/* FAB (map zoom, global map trip) */
.btn--fab {
    border-radius: 50%;
}

/* ICONS
   ========================================================================== */

.svg-icon {
    fill: rgba(0, 0, 0, 0.54);
    flex-shrink: 0;
}

/* LISTS
   ========================================================================== */

.list-item {
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
}
.list-item .svg-icon {
    margin-inline-end: 12px;
}

/* Tall (drawer, export, etc.) */
.list--tall .list-item {
    min-height: 52px;
}
.list--tall .list-item .svg-icon {
    margin-inline: 1px 20px;
}

/* Wide (drawer, maps, etc.) */
.list--wide .list-item {
    padding-inline: 24px;
}

/* Map header maps */
.map-header-maps li:last-child {
    margin-bottom: 10px;
}

/* FORMS
   ========================================================================== */

/* Form group */
.form-group {
    margin-top: 22px;
}

/* Reset fieldset */
fieldset {
    position: relative;
    margin: 0;
    padding: 0;
    border: none;
}

/* Reset input and textarea */
/* optgroup, */
input,
select,
textarea {
    margin: 0;
    line-height: inherit;
    font-family: inherit;
    letter-spacing: -0.1px;
    font-size: 100%;
}

/* Password dot style */
input[type='password'] {
    font-family: Verdana;
    letter-spacing: 0.1em;
}

/* Form field (input, select, textarea, etc.) */
.outline {
    position: relative;
}
.outline,
.form-field {
    /* Size */
    width: 100%;
    min-height: 54px;
    padding: 14px;

    /* Appearance */
    outline: none;
    border: solid 1px rgba(0, 0, 0, 0.23);
    border-radius: 4px;

    /* Transition */
    transition: border 50ms ease-out, box-shadow 50ms ease-out;
}
/* Hover */
.outline:not([disabled]):hover,
.form-field:not(:disabled):hover {
    border-color: rgba(0, 0, 0, 0.5);
}
/* Focused field */
.outline:focus-within,
.form-field:not(:disabled):focus {
    border-color: var(--primary-color);
    box-shadow: inset 0 0 0 1px var(--primary-color);
}
/* Invalid field */
/* .form-field:invalid */

/* Textarea size */
textarea.form-field {
    width: 100% !important;
    min-width: 100%;
    max-width: 100%;
    min-height: 80px;
}

/* Label */
.form-label {
    /* Position when empty (inside box) */
    position: absolute;
    inset-inline-start: 8px;
    top: 0;
    transform: translateY(15px);
    padding: 0 5px;

    /* Appearance */
    white-space: nowrap;
    color: gray;
    background: #fff;
    border-radius: 4px;
    pointer-events: none;

    /* Animation */
    transition: color 200ms cubic-bezier(0, 0, 0.2, 1),
        transform 200ms cubic-bezier(0, 0, 0.2, 1);
    transform-origin: left top;
}
[dir='rtl'] .form-label {
    transform-origin: right top;
}
/* Focused label placement */
.outline .form-label,
.form-field:focus + .form-label,
.form-field:not(:placeholder-shown) + .form-label {
    /* Position when selected/filled (on top of box) */
    transform: translateY(-9.5px) scale(0.8);
}
/* Focused label color */
.outline:focus-within .form-label,
.form-field:focus + .form-label {
    color: var(--primary-color);
}
/* Invalid label color */
/* fieldset input:invalid + label */

/* Disabled field */
.form-field:disabled,
.form-field:disabled + .form-label,
.outline[disabled],
.outline[disabled] .form-label {
    background: var(--bg-color);
}

/* Form suffix (toggle pwd visibility) */
.form-field-suffixed {
    padding-inline-end: 40px;
}
.form-suffix.btn {
    /* Position */
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    height: 100%;
    width: 46px;
}

/* Error message */
.form-error {
    margin: 6px 0;
    color: var(--error-color);
    font-size: 14px;
}

/* Desktop */
@media (min-width: 840px) {
    /* Input */
    .form-fieldset,
    input.form-field,
    select.form-field {
        max-width: 320px;
    }
}

/* ==========================================================================
   Page layout
   ========================================================================== */

.page {
    position: fixed;
    top: 0;
    right: 0;

    width: 100%;
    height: 100%;
    background: #fff;

    display: flex;
    flex-direction: column;

    overflow-x: hidden;
    overflow-y: scroll;

    /* Transition */
    opacity: 0;
    transform: translateX(50px);
    transition: transform 0.2s cubic-bezier(1, 0.5, 0.8, 1),
        opacity 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
.page.is-open {
    opacity: 1;
    transform: translateX(0);
}

/* Desktop */
@media (min-width: 840px) {
    .page {
        width: 790px;
        max-width: 75%;
    }
    /* Photos, album, map style */
    .page.page-lg {
        width: 75%;
    }
    /* Edit line */
    .page.page-timeline {
        width: var(--timeline-width);
    }
}

/* PAGE HEADER
   ========================================================================== */

.page-header {
    /* Height */
    height: 56px;
    flex-shrink: 0;

    /* Sticky */
    position: sticky;
    top: 0;
    background: #fff;

    /* Content */
    display: flex;
    align-items: center;
    padding-inline-end: 16px;

    /* Elevation transition */
    transition: box-shadow 0.2s;

    /* Z-index */
    /* Over photo albums (position: relative) */
    z-index: 10;
}

.page-header .btn--icon {
    width: 58px;
    height: 100%;
}

/* Action buttons (share or admin) */
.page-header-buttons {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-header h1 {
    flex: 1;
    margin-inline-start: 6px;
    font-size: 18px;
}

/* Page title (items) */
.page-title {
    font-size: 26px;
}
/* Page sub title (about, contact) */
.page-sub-title {
    font-size: 20px;
}

/* Desktop */
@media (min-width: 840px) {
    .page-header {
        /* Height */
        height: 64px;
    }
    .page-header .btn--icon {
        /* Button icons */
        width: 64px;
    }
    .page-header h1 {
        margin-inline-start: 0;
    }
}

/* ==========================================================================
   Components
   ========================================================================== */

/* SHEET
   ========================================================================== */

.sheet {
    /* Appearance */
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
    /* Elevation 1 */
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
        0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}

/* CARD
   ========================================================================== */

/* Item photo */
.card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Play button */
.card-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-block-start: -28px;
    margin-inline-start: -28px;
}
.card .card-icon {
    top: 40%;
}
/* Hover */
.sheet:not(:hover) .card-icon--hover,
.card:not(:hover) .card-icon--hover,
.sheet:hover .card-icon--default,
.card:hover .card-icon--default {
    display: none;
}

/* Item title and meta */
.card-info {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 16px;
    color: #fff;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
}
.card-info h2 {
    font-size: 18px;
}

/* Media (photos and videos page) */
.media {
    height: 220px;
}

/* EMPTY STATE
   ========================================================================== */

.empty-state {
    text-align: center;
}
.empty-state p {
    margin: 2px 0 0;
}

/* OVERLAY
   ========================================================================== */

.overlay {
    /* Position */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Style */
    background: rgba(0, 0, 0, 0.3);
}

/* LOADING
   ========================================================================== */

.app-loader {
    /* Size */
    width: 32px;
    height: 32px;

    /* Animation */
    animation: loader-rotate 1.4s linear infinite;
    transform-origin: center center;
    transition: all 0.2s ease-in-out;
}
.app-loader-overlay {
    animation: loader-dash 1.4s ease-in-out infinite;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-dasharray: 80, 200;
    stroke-dashoffset: 0px;
    transition: all 0.6s ease-in-out;
}

/* Keyframes */
@keyframes loader-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0px;
    }
    50% {
        stroke-dasharray: 100, 200;
        stroke-dashoffset: -15px;
    }
    100% {
        stroke-dasharray: 100, 200;
        stroke-dashoffset: -125px;
    }
}
@keyframes loader-rotate {
    100% {
        transform: rotate(360deg);
    }
}

/* CHIP
   ========================================================================== */

.chip {
    /* Position */
    flex-shrink: 0;
    padding: 4px 12px;

    /* Content */
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;

    /* Font size */
    font-size: 14px;

    /* Appearance */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border-radius: 16px;
    border: 1px solid var(--border-color);
}
.chip.chip--sm {
    /* Position */
    height: 24px;
    padding: 0 8px;

    /* Font size */
    font-size: 12px;
}
a.chip:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* ALERT (IE or noscript warning)
   ========================================================================== */

.alert {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    text-align: center;
    background: #ffc107;
}
.alert a {
    color: inherit;
}

/* LEGEND COLOR rectangle (used in map legend, spot transport modes, distance page, etc.)
   ========================================================================== */

.legend-color {
    display: inline-block;
    width: 22px;
    height: 4px;
    margin-block-end: 2px;
    margin-inline-end: 6px;
}

/* ==========================================================================
   Helpers
   ========================================================================== */

/* GRID
   ========================================================================== */

.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-gap: 16px;
}
.gap-sm {
    grid-gap: 8px;
}

/* Extra small (xs < 640px) */
/* .xs-6 {
    grid-column: span 6;
} */
.xs-12 {
    grid-column: span 12;
}

/* Small (sm >= 640px) */
@media (min-width: 640px) {
    /* .sm-1 {
        grid-column: span 1;
    }
    .sm-2 {
        grid-column: span 2;
    } */
    .sm-3 {
        grid-column: span 3;
    }
    .sm-4 {
        grid-column: span 4;
    }
    .sm-5 {
        grid-column: span 5;
    }
    .sm-6 {
        grid-column: span 6;
    }
    .sm-7 {
        grid-column: span 7;
    }
    .sm-8 {
        grid-column: span 8;
    }
    .sm-9 {
        grid-column: span 9;
    }
    .sm-10 {
        grid-column: span 10;
    }
    .sm-11 {
        grid-column: span 11;
    }
    .sm-12 {
        grid-column: span 12;
    }
}

/* Medium/desktop (md >= 840px) */
@media (min-width: 840px) {
    .md-1 {
        grid-column: span 1;
    }
    .md-2 {
        grid-column: span 2;
    }
    .md-3 {
        grid-column: span 3;
    }
    .md-4 {
        grid-column: span 4;
    }
    .md-5 {
        grid-column: span 5;
    }
    .md-6 {
        grid-column: span 6;
    }
    .md-7 {
        grid-column: span 7;
    }
    .md-8 {
        grid-column: span 8;
    }
    .md-9 {
        grid-column: span 9;
    }
    .md-10 {
        grid-column: span 10;
    }
    .md-11 {
        grid-column: span 11;
    }
    .md-12 {
        grid-column: span 12;
    }
}

/* Large (lg >= 1024px) */
@media (min-width: 1024px) {
    .lg-1 {
        grid-column: span 1;
    }
    .lg-2 {
        grid-column: span 2;
    }
    .lg-3 {
        grid-column: span 3;
    }
    .lg-4 {
        grid-column: span 4;
    }
    .lg-5 {
        grid-column: span 5;
    }
    .lg-6 {
        grid-column: span 6;
    }
    .lg-7 {
        grid-column: span 7;
    }
    .lg-8 {
        grid-column: span 8;
    }
    .lg-9 {
        grid-column: span 9;
    }
    .lg-10 {
        grid-column: span 10;
    }
    .lg-11 {
        grid-column: span 11;
    }
    .lg-12 {
        grid-column: span 12;
    }
}

/* Extra large (xl >= 1280px) */
@media (min-width: 1280px) {
    .xl-1 {
        grid-column: span 1;
    }
    .xl-2 {
        grid-column: span 2;
    }
    .xl-3 {
        grid-column: span 3;
    }
    .xl-4 {
        grid-column: span 4;
    }
    .xl-5 {
        grid-column: span 5;
    }
    .xl-6 {
        grid-column: span 6;
    }
    .xl-7 {
        grid-column: span 7;
    }
    .xl-8 {
        grid-column: span 8;
    }
    .xl-9 {
        grid-column: span 9;
    }
    .xl-10 {
        grid-column: span 10;
    }
    .xl-11 {
        grid-column: span 11;
    }
    .xl-12 {
        grid-column: span 12;
    }
}

/* 2 Extra large (2xl >= 1536px) */
@media (min-width: 1536px) {
    .\32xl-1 {
        grid-column: span 1;
    }
    .\32xl-2 {
        grid-column: span 2;
    }
    .\32xl-3 {
        grid-column: span 3;
    }
    .\32xl-4 {
        grid-column: span 4;
    }
    .\32xl-5 {
        grid-column: span 5;
    }
    .\32xl-6 {
        grid-column: span 6;
    }
    .\32xl-7 {
        grid-column: span 7;
    }
    .\32xl-8 {
        grid-column: span 8;
    }
    .\32xl-9 {
        grid-column: span 9;
    }
    .\32xl-10 {
        grid-column: span 10;
    }
    .\32xl-11 {
        grid-column: span 11;
    }
    .\32xl-12 {
        grid-column: span 12;
    }
}

/* FLEX
   ========================================================================== */

.flex {
    display: flex;
}
.flex-center {
    justify-content: center;
    align-items: center;
}
.flex-grow {
    flex-grow: 1;
}
.flex-shrink {
    flex-shrink: 1;
}

/* POSITION
   ========================================================================== */

.relative {
    position: relative;
}

.inline-block {
    display: inline-block;
}

/* CONTAINERS
   ========================================================================== */

.container {
    width: 100%;
    max-width: 684px;
    margin: 0 auto;
    padding: 16px;
}
.container-fluid {
    max-width: 100%;
}

/* TEXT ALIGNMENT
   ========================================================================== */

.text-center {
    text-align: center;
}

/* MARGINS
   ========================================================================== */

.ml-2 {
    margin-inline-start: 4px;
}

/* PADDING
   ========================================================================== */

.padding {
    padding: 16px;
}

/* ELEVATION
   ========================================================================== */

.elevation-1 {
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
        0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}
.elevation-2 {
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
        0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

/* TEXT STYLES
   ========================================================================== */

/* Text color */
.primary--text {
    color: var(--primary-color) !important;
}
.orange--text {
    color: var(--admin-color) !important;
}
.meta--text {
    color: var(--meta-color) !important;
}

/* Text size */
.meta {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0;
    color: var(--meta-color);
}
.body {
    font-size: 14px;
}

/* Text truncate */
.text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.text {
    white-space: pre-line;
}

/* Line height */
.leading-loose {
    line-height: 1.8;
}

/* Letter spacing */
.letter-spaced {
    letter-spacing: 0.2px;
}

/* Links */
.link-reset {
    color: inherit;
    text-decoration: none;
}

/* Selection */
.is-selected {
    background-color: rgba(0, 0, 0, 0.06);
}
.selectable:hover {
    background-color: rgba(0, 0, 0, 0.04);
}
.spot.is-free.selectable:hover {
    background-color: #e2e2e2; /* rgba(0, 0, 0, 0.08); */
}

/* Fade transition */
.fade {
    transition: opacity 0.2s;
}
.faded-out {
    opacity: 0;
}

/* VISIBILITY
   ========================================================================== */

.hidden,
.pswp {
    display: none;
}
@media (max-width: 839px) {
    .desktop-only {
        display: none !important;
    }
}
@media (min-width: 840px) {
    .mobile-only {
        display: none !important;
    }
}