/* ───────────────────────────────────────────────────────────────────────────
   Home page only — transparent navbar floating over the hero video.

   `:has(.hero-section)` is true only on the home page (the .hero-section element
   exists nowhere else), so every other page keeps the solid navbar from the
   RentalKit.Web package. This lives in a plain global stylesheet because the
   navbar is rendered by a shared layout/child component that the page-scoped
   CSS bundle cannot reliably target.
   ─────────────────────────────────────────────────────────────────────────── */

/* Navbar background: dark at the top (links stay readable), easing to a soft
   half-dark at its bottom edge — the ::after below continues the fade further
   down into the video. */
.d-flex.flex-column.min-vh-100:has(.hero-section) .navbar {
    background: linear-gradient(
        to bottom,
        var(--rk-bg, #0a0a0b) 20%,
        rgba(10, 10, 11, 0.6) 55%,
        rgba(10, 10, 11, 0.35) 100%
    ) !important;
    border-bottom: none !important;
}

/* Scrim that hangs below the navbar so the fade reaches a bit lower into the
   video. Its top alpha matches the navbar's bottom (0.35) for a seamless join. */
.d-flex.flex-column.min-vh-100:has(.hero-section) .navbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 55px;
    background: linear-gradient(to bottom, rgba(10, 10, 11, 0.35) 0%, transparent 100%);
    pointer-events: none;
}