/*!
@file Home page styling.
*/

/*
.............................................
fonts, variables, and helpers
.............................................
*/

/* font-family: _default, sans-serif; */
@font-face {
    font-display: swap;
    font-family: _default;
    src: url('./font/WorkSans-VariableFont_wght.woff2') format('woff2 supports variations'),
        url('./font/WorkSans-VariableFont_wght.woff2') format('woff2-variations');
}

/* variables */
:root {
    /* color palette
        https://coolors.co/00264c-777777-79a97d
        https://coolors.co/00264c
        https://coolors.co/777777
        https://coolors.co/79a97d
    */
    --_color-banner1: #00264c;
    --_color-banner2: #666666;
    --_color-heading: #79a97d;
    --_font-default: _default, sans-serif;
}

/* helpers */
._text-bg-banner1 {
    background: var(--_color-banner1);
    color: white;
}
._text-bg-banner2 {
    background: var(--_color-banner2);
    color: white;
}

/* waterbody map layer */
._map-layers-waterbodies {
    fill: #0074E7;
    stroke: #00458A;
    transition: fill 150ms linear;
}
._map-layers-waterbodies:hover {
    fill: #00eeee;
}

/*
.............................................
elements and layout
.............................................
*/

h1,
h2,
h3,
h4,
h5 {
    color: var(--_color-heading);
}

/* rem page scaling */
html {
    font-size: 100%;
}
/* < 576px sm (landscape phones) */
@media (max-width: 576px) {
    html {
        font-size: 80%;
    }
}

/*
.............................................
./lib/bootstrap
.............................................
*/
:root {
    --bs-font-sans-serif: var(--_font-default);
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: var(--bs-info);
}

/* components */
.nav {
    --bs-nav-link-color: var(--bs-success);
    --bs-nav-link-font-size: 110%;
    --bs-nav-link-hover-color: var(--bs-teal);
    --bs-nav-link-padding-y: 0.8rem;
}
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-success);
}

/*
.............................................
./lib/leaflet
.............................................
*/

/* fonts */
.leaflet-container {
    font-family: var(--bs-body-font-family);
}
/* popups */
.leaflet-popup-tip {
    display: none;
}

/*
.............................................
./lib/sorttable
.............................................
*/

/* sort up-down arrows */
table.sortable thead td:not(.sorttable_nosort) {
    cursor: pointer;
    padding-right: 1.5rem;
    position: relative;
}
table.sortable thead td:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
    content: '\25B4\25BE';
}
table.sortable thead td:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after,
#sorttable_sortfwdind,
#sorttable_sortrevind {
    font-family: monospace;
    font-size: 130%;
    position: absolute;
    right: 3px;
    top: -3px;
}
#sorttable_sortfwdind,
#sorttable_sortrevind {
    color: var(--bs-orange);
}