.gray {
    color: gray;
}

/*
 * Responsive background images for each region. The images
 * are referenced from the static directory and will be added
 * later. Each background covers the viewport so it works on
 * desktop and mobile screens.
 */
body {
    min-height: 100vh;
    margin: 0;
    padding-top: 2.5em;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
@media (max-width: 600px) {
    body { font-size: 1.2em; }
}
@media (max-width: 600px) {
    #searching-list,
    .searching-sublist,
    #found-list {
        column-width: 8em;
    }
}
body[data-region="all"] {
    /* Placeholder image shown when all regions are selected */
    background-image: url('/static/images/all.png');
}
body[data-region="europe"] {
    background-image: url('/static/images/europe.png');
}
body[data-region="north_america"] {
    background-image: url('/static/images/north_america.png');
}
body[data-region="north_america_usa"] {
    background-image: url('/static/images/USA.png');
}
body[data-region="north_america_canada"] {
    background-image: url('/static/images/canada.png');
}
body[data-region="north_america_mexico"] {
    background-image: url('/static/images/mexico.png');
}
body[data-region="central_america"] {
    background-image: url('/static/images/central_america.png');
}
body[data-region="south_america"] {
    background-image: url('/static/images/south_america.png');
}
body[data-region="middle_east"] {
    background-image: url('/static/images/middle_east.png');
}
body[data-region="africa"] {
    background-image: url('/static/images/africa.png');
}
body[data-region="australia_new_zealand"] {
    background-image: url('/static/images/australia_new_zealand.png');
}
body[data-region="asia"] {
    background-image: url('/static/images/asia.png');
}

/*
 * Allow lists to automatically flow into multiple columns based on
 * available width. Each list adjusts independently as the window
 * size changes.
 */
#searching-list,
.searching-sublist,
#found-list {
    column-width: 12em;
    column-gap: 1em;
    list-style: none;
    padding-left: 0;
}

#searching-list li,
.searching-sublist li,
#found-list li {
    break-inside: avoid;
}

/*
 * Add a light background behind each item so the text stands out
 * against the regional images.
 */
#searching-list label,
.searching-sublist label,
#found-list label {
    display: inline-block;
    background: rgba(255, 255, 255, 0.8);
    padding: 0.1em 0.25em;
    border-radius: 0.25em;
}

/*
 * Improve readability for other text elements by giving them the same
 * subtle background as the list items.
 */
#app-title,
h1,
h2,
h3,
#region-label,
#action-buttons button {
    display: inline-block;
    background: rgba(255, 255, 255, 0.8);
    padding: 0.1em 0.25em;
    border-radius: 0.25em;
}

#menu {
    position: fixed;
    top: 0;
    right: 0;
    text-align: right;
    margin: 0;
    padding: 0.5em;
    z-index: 1000;
}

#menu-toggle {
    display: inline-block;
    background: rgba(255, 255, 255, 0.8);
    padding: 0.1em 0.25em;
    border-radius: 0.25em;
    border: none;
    cursor: pointer;
}

#action-buttons {
    margin-top: 0.5em;
    display: flex;
    justify-content: center;
    gap: 0.5em;
    flex-direction: row;
    flex-wrap: wrap;
}

#action-buttons button {
    margin: 0;
}

#app-title {
    display: block;
    margin: 0.5em auto;
    text-align: center;
}


#region-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-bottom: 0.5em;
}