/* ============================================================
   GUIDE BARS
   Usage: Views/Guides/Get.cshtml; guide-bars.js sets --guide-bar-top, --guide-bar-height and scroll-padding-top on the root and toggles --shown.
   ============================================================ */
.guide-bar {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1020;
    background-color: var(--bs-body-bg);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
}

.guide-bar--top {
    top: var(--guide-bar-top, 0);
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
    transform: translateY(-100%);
}

.guide-bar--bottom {
    bottom: 0;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    border-top: var(--bs-border-width) solid var(--bs-border-color);
    transform: translateY(100%);
}

.guide-bar--shown {
    visibility: visible;
    transform: none;
    transition: transform 0.2s ease;
}

.guide-bar__progress {
    height: 2px;
    background-color: var(--bs-primary);
    transform: scaleX(0);
    transform-origin: left;
}

.back-to-top-container--raised {
    bottom: calc(50px + var(--guide-bar-bottom-height, 0px));
}

/* guide-bars.js offsets jumps with scroll-padding-top, which site.css's 90px h1-h6[id]:before offset would add to. */
.guide-article :is(h1, h2, h3, h4, h5, h6)[id]::before {
    content: none;
}

@media (prefers-reduced-motion: reduce) {
    .guide-bar,
    .guide-bar--shown {
        transition: none;
    }
}