/* on this one page, we want the navbar flush to the top content */
nav.navbar {
    margin-bottom: 0 !important;
}


/*
 * the big Explore The Trail banner with a select input, a link, a banner background, ...
 * the select2 element and the button have a lot of customizations, so they fit snugly together,
 * have matching white halos, don't have internal borders, matches the width of the select-and-search wrapper and its borders, ...
*/
#explore-trail-banner {
    background-image: url(./images/explore-banner.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: rgba(0,0,0,0.5);
    background-blend-mode: multiply;

    color: white;
    height: 375px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#explore-trail-banner > div {
    width: 400px;
    max-width: 100%;
}

#explore-trail-banner h1 {
    color: white;
    font-size: 40px;
}
#explore-trail-banner a {
    color: white;
}

#explore-trail-banner div.input-group {
    padding: 5px 10px;
    background-color: white;
    border-radius: 4px;
}

#explore-trail-banner a span { text-decoration: none; }
#explore-trail-banner button {
}

#explore-trail-banner .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
    font-size: 13px;
    line-height: 3;
}
#explore-trail-banner .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
    font-size: 12px;
}

#explore-trail-banner .input-group>.select2-container--bootstrap4:not(:last-child) .select2-selection {
    border: 0 none transparent;
}

#explore-trail-banner .select2-container--bootstrap4 .select2-dropdown.select2-dropdown--below {
    width: 400px !important;  /* in conjunction with dropdownParent, match the width of the whole search + button + white padding */
    margin-left: -10px;
}
#explore-trail-banner .select2-container--bootstrap4 .select2-results__option {
    color: black;  /* in conjunction with dropdownParent; set their color since we have other colors set on this area of the page */
}

#explore-trail-banner .select2-container--bootstrap4 .select2-results__option--highlighted,
#explore-trail-banner .select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected="true"] {
    background-color: #3A6269;
    color: white;
}