@import url("base-theme.css");

:root {
--jinks-base-font-family: "Albert Sans", Poppins, sans-serif;
--jinks-content-font-family: "Albert Sans", Poppins, sans-serif;

--jinks-color-inverse: var(--jinks-text-color-medium);
--jinks-header-background-image: url("../images/map_light.png");
}

/* App-specific custom CSS rules should go here */

main.browse {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
}

/* more space between facets */
.facets div {
    margin-bottom: 1em;
}

.banner-spacer.not-visible ~ .page-header  div {
    background-image: url("../images/map_light.png");
}

.body-normal .page-header > div {
    background-image: url("../images/map_light.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}

.logo {
    margin-right: 2rem;
}

section {
    margin: 0 !important;
    padding: 0 !important;
}


main > section, section {
    width: 100vw;
    margin: 0;
    padding: 0;
    background-size: cover;

}

section > div, main > section > div {
    max-width: 1100px;
    margin: auto;
    padding: 4rem 1rem;

    /* sections are normally based on two-column grid */
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
}

section > div.browse {
    width: 100vw;
    max-width: 100vw;
}


/* thin footer section with license */

#itinerary-bottom {
    background-image: none;
    background-color: var(--jinks-colors-700);
    width: 100vw;
    max-width: 100vw;
}

footer {
    margin: 0;
    padding: 0;
}

footer > div {
    width: 100%;
    max-width: 1100px;
    margin: auto;

    display: flex;
    flex-direction: row;
    
    justify-content: space-between;
    justify-items: center;
}

/* overwrite landing page */
footer img {
    min-height: 0 !important;
    margin: 0 !important;
}

span.license {
    a {
        display: inline-block;
        margin-top: 0.3rem;
    }
}

/* end license footer */

/* credits footer */


#credits {
    background-image: url("../images/map_dark.png");
}

.credits, .highlights {
    a, a:active, a:visited {
        color: var(--jinks-text-color-medium);
    }

    img {
        margin-left: 1rem;
    }

    div {
        margin-bottom: 1rem;
    }
}

.small, .inverse .small {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--jinks-text-color-medium);
}


/* end credits */

/* facets */

.facet-dimension {
    margin-top: 3rem;
}
/* 
.ts-control::after {
    content: '🔎';
} */

span[slot] {
    margin-right: 1rem;
}