:root {
    color-scheme: light dark;

    /* BSA Primary Colors */
    --scouting-red: #CE1126;
    --scouting-blue: #003F87;
    --scouting-tan: #D6CEBD;
    --scouting-warm-gray: #515354;
    --scouting-olive: #243E2C;
    --scouting-gold: #FDC116;

    /* BSA Secondary Colors */
    --scouting-pale-blue: #9AB3D5;
    --scouting-dark-blue: #036;
    --scouting-light-tan: #E9E9E4;
    --scouting-dark-tan: #AD9D7B;
    --scouting-pale-gray: #858787;
    --scouting-dark-gray: #232528;

    /* Preferred colors */
    --footer-background: var(--scouting-blue);
    --h2-color: var(--scouting-blue);
    --navbar-background: rgb(0 63 135 / 80%); /* scouting-blue as rgba */
    --packmate-promo-background: var(--scouting-red);
}

@media (prefers-color-scheme: dark) {
    :root {
        --footer-background: var(--scouting-dark-blue);
        --h2-color: var(--scouting-pale-blue);
        --navbar-background: rgb(0 51 102 / 80%); /* scouting-dark-blue as rgba */
        --packmate-promo-background: #A50E1E; /* scouting-red, dimmed for dark mode */
    }
}


@font-face {
    font-family: Cooper;
    font-style: normal;
    font-weight: 900;
    src: url("/static/webfonts/CooperBlackStd.07cc4698e386.woff2") format('woff2'),
         url("/static/webfonts/CooperBlackStd.4ef46cc00048.woff") format('woff');
}

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

h1 {
    color: var(--scouting-red);
}

h2 {
    color: var(--h2-color);
}

footer {
    margin-top: auto;
    background-color: var(--footer-background);
    color: var(--scouting-pale-blue);
}

.card.member-detail {
    max-width: 322px;
}

#banner {
    position: relative;
    z-index: 1020;
    background-image: url("/static/img/jumbotron.f4c21cf0a697.jpg");
    background-size: cover;
}

.packmate-icon {
    /* Sized and nudged to sit on the same line as the Font Awesome fa-fw icons
       it shares the profile dropdown with. */
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.25em;
}

#packmate-promo {
    background-color: var(--packmate-promo-background);
    color: #FFF;
}

#packmate-promo[hidden] {
    display: none;
}

/* The strip pitches an app you carry, so it only earns its space where the
   primary input is touch — a phone or tablet. A desktop reads as `fine` even
   with the window dragged narrow, which a width breakpoint would get wrong.
   The profile menu keeps PackMate reachable from a computer. */
@media not all and (pointer: coarse) {
    #packmate-promo {
        display: none;
    }
}

#packmate-promo-icon {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 0.6rem;
    background-color: #FFF;
    color: var(--packmate-promo-background);
    font-size: 1.25rem;
}

#packmate-promo-title {
    font-weight: 700;
}

#packmate-promo-tagline {
    font-size: 0.875rem;
    opacity: 0.9;
}

#den-patches {
    height: 80px;
}

#rank-patches {
    height: 80px;
}

/* stylelint-disable-next-line selector-id-pattern */
#contact-form #div_id_url {
    display: none;
}

.navbar {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background-color: var(--navbar-background);
}

/* Bootstrap's navbar JS forces dropdown menus inside `.navbar-nav` to
   `position: static` so they render in-flow, pushing the navbar taller
   instead of floating over the page below. Restore the normal floating
   overlay behavior for all of our nav dropdowns (Pack Info, About,
   Dashboards, the avatar menu, etc.). */
.navbar-nav .dropdown-menu {
    position: absolute;
}

/* Likewise, the collapsed hamburger menu is in-flow content by default, so
   opening it grows the navbar's height and pushes the page content down.
   Below the breakpoint where it's actually collapsible, float it as an
   overlay panel instead, anchored to the navbar (which Bootstrap already
   makes `position: relative`). This applies regardless of the collapse/show
   state (not just `.show`) so the position doesn't change mid-animation,
   which caused a jarring jump partway through the open/close transition. */
@media (max-width: 1199.98px) {
    #navbarCollapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1030;
        padding: 0.5rem 1rem;
        background-color: var(--navbar-background);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
}

.prize-details{
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background-color: rgb(255 255 255 / 80%);
}

.navbar-brand {
    color: var(--scouting-light-tan);
    font-family: Cooper, serif;
    line-height: 1.1;
    text-shadow: 0 0 0.3rem var(--scouting-dark-gray);
}

.navbar-brand #pack-name {
    color: var(--scouting-gold);
    font-weight: bold;
    -webkit-text-stroke-color: var(--scouting-blue);
    -webkit-text-stroke-width: 1px;
}

.navbar-brand #pack-location, #pack-tagline {
    color: var(--scouting-light-tan);
}

.scroll-area {
    overflow-y: auto;
}

.cost-display {
    max-width: 114px;
    margin-left: 2rem;
}

#member-search-form #member-search {
    border-bottom-left-radius: 10rem;
    border-top-left-radius: 10rem;
}

#member-search-form button {
    border-bottom-right-radius: 10rem;
    border-top-right-radius: 10rem;
}

#mail-client {
    display: flex;
    flex: 1;
    overflow-y: hidden;
}

#mail-client #folder-sidebar {
    max-width: 240px;
}

#mail-client #message-list-column {
    flex-basis: 33%;
    flex-direction: column;
}

#message-detail-column {
    flex-basis: 66%;
    flex-direction: column;
}

.read-marker {
    flex: 0 0 1rem;
}

.resizer { width: 2px; height: 100%; background-color: #dee2e6;
    cursor: col-resize;
}

table.sortable {
    counter-reset: rowNumber;
}

table.sortable tr:not(:first-child) {
    counter-increment: rowNumber;
}

table.sortable tr td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

table.sortable th[aria-sort="descending"] span::after {
    content: " ▼";
    color: currentcolor;
    font-size: 100%;
    top: 0;
}

table.sortable th[aria-sort="ascending"] span::after {
    content: " ▲";
    color: currentcolor;
    font-size: 100%;
    top: 0;
}