/* Salt Lake City.
 *
 * Loaded after style.css, so these win. The shared sheet is built for a dark
 * background with white text; the Salt Lake map is light, so the text goes
 * dark and the nav bar becomes a pane of glass over it rather than a solid bar.
 */

:root {
    --slc-ink: #09436B;
    /* The same colour as an rgb triplet, so it can be given an alpha. */
    --slc-ink-rgb: 9, 67, 107;
}

/* Text */

body,
h1,
body.destination,
body.destination h1,
body.destination a {
    color: var(--slc-ink);
}

/* Buttons. The label stays white -- the ink is the fill here, not the type. */

button {
    background-color: var(--slc-ink);
    color: #ffffff;
}

/* The map's zoom controls are white tiles rather than filled buttons, so on
   those the ink is the type and the border instead. */

.zoom-controls button,
#zoom-level {
    color: var(--slc-ink);
    border-color: var(--slc-ink);
}

/* Nav bar */

.top-nav {
    background-color: rgba(255, 255, 255, 0.25);
}

/* Frames.
 *
 * White was drawn for a dark ground and barely shows on the map. Only the
 * colour changes -- the frames themselves stay, including the one on the
 * winner page that the mascot gets pulled out of.
 */

.villain-and-mascot img,
.rescue-linky,
.mascot-thumbnail {
    border-color: var(--slc-ink);
}

/* The mascots the villain threatens on the Curses line each sit on a wash of
   the text colour, inside their own frame rather than behind the whole row.
   Both layers carry it so the wash holds steady through the crossfade. */

.mascot-thumbnail {
    background-color: rgba(var(--slc-ink-rgb), 0.30);
}

/* The quiz result panel.
 *
 * It was a purple gradient written into the markup, which no stylesheet could
 * reach; it is a class now. Here it takes the same background as the pages
 * around it, and the text colour it inherits is already the ink.
 */

.modal-card {
    background: url('images/background.jpg') center / cover;
}