/* Public site bar.
 *
 * A national newspaper printed app.sayph.one instead of sayph.one, so cold
 * readers land on the login page with no route to the product. This is that
 * route: one thin strip, one destination.
 *
 * Deliberately NOT a white header with the logo in it. The card below already
 * shows the logo at 200px, and a second copy 300px above it reads as a mistake
 * rather than as navigation. Navy at near-solid opacity instead, so the strip
 * belongs to the page background rather than fighting the card for attention.
 *
 * Lives in its own file because login.css is already near the 500-line limit.
 * Depends on the brand custom properties declared there.
 */

.site-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Lighter than the near-black top of the page gradient and darker than the
     * hero photo it crosses, so it reads as one strip across both panes. */
    background: rgba(19, 45, 77, 0.88);
    backdrop-filter: blur(3px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* The bar has no padding of its own: the link's 44px touch target sets the
 * height, which is the whole strip at 45px including the border. */
.site-bar__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 1rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-bar__link:hover,
.site-bar__link:focus-visible {
    color: var(--white);
}

.site-bar__link:hover .site-bar__dest,
.site-bar__link:focus-visible .site-bar__dest {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The reason comes in quieter than the destination: someone scanning needs
 * "sayph.one" first and the prompt only if they stopped to read. */
.site-bar__lead {
    color: rgba(255, 255, 255, 0.62);
}

/* Never let the action break mid-phrase: a wrapped strip is twice the height
 * and reads as a paragraph rather than a link. */
.site-bar__dest {
    font-weight: 600;
    white-space: nowrap;
}

.site-bar__link sl-icon {
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}

.site-bar__link:hover sl-icon {
    transform: translateX(3px);
}

/* The bar is fixed, so both panes have to make room for it.
 *
 * The pane is exactly 100vh (login.css pins .login-container to that), so a
 * card taller than the space left over would overflow in BOTH directions under
 * plain flex centring and its top would be unreachable — the "your session has
 * ended" alert on a short laptop window does exactly that. `safe` aligns to the
 * start instead of centring once it no longer fits, and the pane scrolls. */
.site-bar ~ .login-container .login-section {
    padding-top: 4rem;
    align-items: safe center;
    overflow-y: auto;
}

.site-bar ~ .login-container .image-overlay {
    padding-top: 4.5rem;
}

@media (max-width: 900px) {
    .site-bar ~ .login-container .login-section {
        padding-top: 3.75rem;
    }
}

/* Measured, not guessed: the whole strip is 403px wide at this size, so below
 * ~435px it cannot sit on one line with room to breathe. The prompt is what
 * goes — the action still says what it does without it. */
@media (max-width: 440px) {
    .site-bar__lead {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-bar__link,
    .site-bar__link sl-icon {
        transition: none;
    }

    .site-bar__link:hover sl-icon {
        transform: none;
    }
}