/* ---------- Antetul fix: apare când antetul paginii iese de pe ecran ----------
   Bara e creată de js/sticky-header.js dintr-o copie a navigării din antet. Coboară de sus când
   antetul nu se mai vede și urcă înapoi când antetul revine pe ecran. Folosit pe toate paginile. */

.sticky-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: .7rem var(--gutter, 1.5rem);
    background: var(--crimson, #A50E16);
    border-bottom: 3px solid var(--crimson-deep, #7C0A10);
    box-shadow: 0 10px 30px -12px rgba(31, 46, 44, .55);
    transform: translateY(calc(-100% - 12px));
    visibility: hidden;
    transition:
        transform .45s cubic-bezier(.2, .7, .2, 1),
        visibility 0s linear .45s;
}

.sticky-bar.is-visible {
    transform: none;
    visibility: visible;
    transition:
        transform .45s cubic-bezier(.2, .7, .2, 1),
        visibility 0s;
}

/* Navigarea din bară: aceeași ca în antet, doar mai compactă și mereu pe un singur rând */
.sticky-bar .site-nav {
    width: 100%;
    flex-wrap: nowrap;
}

.sticky-bar .site-nav img {
    width: 34px;
    height: 34px;
}

.sticky-bar .site-nav :focus-visible { outline-color: #fff; }

/* Logo și numele revistei, unul lângă altul */
.sticky-bar .home-link {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.sticky-bar-name {
    font-family: var(--display, 'Marcellus', Georgia, serif);
    font-size: 1.3rem;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* Orice salt la o ancoră duce sub antet, deci bara va fi la vedere: lăsăm mereu loc pentru ea */
html { scroll-padding-top: var(--sticky-bar-height, 0px); }

/* Cât timp bara e la vedere, elementele lipite de sus coboară sub ea */

.rail {
    top: var(--sticky-offset, 0px);
    max-height: calc(100vh - var(--sticky-offset, 0px));
    transition: top .45s cubic-bezier(.2, .7, .2, 1);
}

.aside {
    top: calc(2rem + var(--sticky-offset, 0px));
    transition: top .45s cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
    .sticky-bar, .sticky-bar.is-visible, .rail, .aside { transition: none; }
}
