/* The announcement bar and the phone's sticky action bar (M6).
   ---------------------------------------------------------------------------
   Linked by _Layout only, like site-header.css: the admin never loads it.
   Colours come from the theme's variables, so a brand colour set on the
   Brand page carries through. */

/* The accent button (M6). The Brand page's accent colour writes the real rule
   (ThemeCss, after this file); without one it falls back to Bootstrap's
   warning yellow, so an "accent" header button is never a bare link. After
   the Bootswatch theme, whose own .btn would otherwise win. */
.btn-accent {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--bs-warning);
    --bs-btn-hover-border-color: var(--bs-warning);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--bs-warning);
    --bs-btn-active-border-color: var(--bs-warning);
}

/* Announcement bar ---------------------------------------------------------- */

.site-announcement {
    position: relative;
    z-index: 1031;
    font-size: .9375rem;
    line-height: 1.3;
}

.site-announcement--primary { background-color: var(--bs-primary); color: #fff; }
.site-announcement--secondary { background-color: var(--bs-secondary); color: #fff; }
.site-announcement--accent { background-color: var(--site-accent, var(--bs-warning)); color: var(--site-accent-contrast, #000); }
.site-announcement--dark { background-color: var(--bs-dark); color: #fff; }

.site-announcement__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-height: 2.5rem;
    padding-block: .375rem;
}

.site-announcement__text {
    color: inherit;
    text-align: center;
    flex: 1 1 auto;
}

a.site-announcement__text {
    text-decoration: underline;
    text-underline-offset: .2em;
}

a.site-announcement__text:hover,
a.site-announcement__text:focus-visible {
    color: inherit;
    text-decoration-thickness: 2px;
}

.site-announcement__countdown {
    font-weight: 600;
    white-space: nowrap;
}

/* White on the dark grounds, dark on the accent: btn-close is drawn as an
   SVG mask whose colour is set by its filter. */
.site-announcement--primary .site-announcement__dismiss,
.site-announcement--secondary .site-announcement__dismiss,
.site-announcement--dark .site-announcement__dismiss {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.site-announcement__dismiss {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background-size: .75rem;
}

/* Sticky action bar --------------------------------------------------------- */

.site-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1029;
    display: flex;
    align-items: stretch;
    gap: .25rem;
    min-height: 3.5rem;
    padding: .25rem .25rem calc(.25rem + env(safe-area-inset-bottom));
    background-color: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    box-shadow: 0 -.25rem 1rem rgba(0, 0, 0, .1);
    transition: transform .2s ease;
}

.site-sticky-bar.is-hidden {
    transform: translate3d(0, 110%, 0);
}

.site-sticky-bar__button {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .125rem;
    min-height: 2.75rem;
    border-radius: var(--bs-border-radius);
    color: var(--bs-primary);
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
}

.site-sticky-bar__button .bi {
    font-size: 1.25rem;
    line-height: 1;
}

.site-sticky-bar__button--main {
    background-color: var(--site-accent, var(--bs-primary));
    color: var(--site-accent-contrast, #fff);
}

.site-sticky-bar__button:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Room at the foot of the page, so the bar never covers the footer's last line. */
@media (max-width: 991.98px) {
    body.has-sticky-bar {
        padding-bottom: calc(3.5rem + env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-sticky-bar {
        transition: none;
    }
}

@media print {
    .site-announcement,
    .site-sticky-bar {
        display: none !important;
    }
}

/* The analytics cookie question (Q11): over the foot of the page until answered. */
.cookie-consent {
    position: fixed;
    inset-inline: 1rem;
    bottom: 1rem;
    z-index: 1080;
    max-width: 44rem;
    margin-inline: auto;
}