/* Floating landing navbar.

   Everything here is scoped under .bk-navbar, never bare .landing-navbar.
   Five partials render .landing-navbar, but only the three landing ones opt in
   by adding .bk-navbar - the two RV Park booking-page navbars must keep their
   current appearance, so a bare .landing-navbar rule would be a regression.

   The nav is a transparent positioning shell; the .navbar inside it is the
   visible floating card. The shell keeps Bootstrap's sticky-top behaviour and
   stays in normal flow, so page content sits BELOW the navbar and is never
   covered - several landing pages open with a plain white section. */

.bk-navbar {
    --bk-nav-gap: 1rem;
    --bk-nav-radius: 1rem;
    --bk-nav-pad-y: 0.5rem;
    --bk-nav-shadow: 0 6px 24px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
    --bk-nav-shadow-scrolled: 0 10px 30px rgba(16, 24, 40, 0.14), 0 2px 6px rgba(16, 24, 40, 0.06);

    /* The shell must not paint - the card does. Overrides bg-white and
       border-bottom, which stay on the element for non-opted-in partials. */
    background: transparent !important;
    border-bottom: 0 !important;
    padding-top: var(--bk-nav-gap);
    padding-bottom: 0.25rem;
    /* Not position:fixed - sticky keeps it in flow so nothing is overlapped. */
    transition: padding-top 0.25s ease;
}

/* The container is only a width constraint; the card is the .navbar. */
.bk-navbar > .container-lg {
    background: transparent !important;
}

/* ------------------------------- The card ------------------------------- */
.bk-navbar .landing-navbar {
    background-color: #fff;
    border: 1px solid rgba(16, 24, 40, 0.06);
    border-radius: var(--bk-nav-radius);
    box-shadow: var(--bk-nav-shadow);
    padding-top: var(--bk-nav-pad-y);
    padding-bottom: var(--bk-nav-pad-y);
    /* Named properties only. `all` would also animate the .nav-link colour,
       fighting the hover transition the partials already define. */
    transition:
        padding-top 0.25s ease,
        padding-bottom 0.25s ease,
        box-shadow 0.25s ease,
        border-radius 0.25s ease;
}

/* ------------------ Card without a .container-lg wrapper ----------------- */
/* navbar.blade.php wraps its card in .container-lg, which is what insets it
   from the viewport edges. In market-segment-navbar and real-estate-navbar
   that wrapper is COMMENTED OUT, so the card is a direct child of <nav> and
   stretched edge to edge with no left/right margin.

   Rather than restructure those two partials, give the direct-child case the
   same constraints .container-lg would have applied. Values mirror Bootstrap's
   own container-lg breakpoints in vendor/css/core.css (960 / 1140 / 1440) plus
   its 1.625rem gutter, so both structures inset identically. */
.bk-navbar > .landing-navbar {
    width: calc(100% - 1.625rem);
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 992px) {
    .bk-navbar > .landing-navbar {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .bk-navbar > .landing-navbar {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .bk-navbar > .landing-navbar {
        max-width: 1440px;
    }
}

@media (max-width: 575.98px) {
    .bk-navbar > .landing-navbar {
        width: calc(100% - 1.5rem);
    }
}

/* ------------------- Viewport pinning (overflow immunity) ---------------- */
/* The theme wins the position battle on these pages:

     core.css  .layout-navbar                          position: relative
     bootstrap .sticky-top                             position: sticky
     core.css  .layout-navbar-fixed .layout-navbar     position: fixed; left: 0; right: 0   <-- wins

   <html> carries .layout-navbar-fixed, so this nav is FIXED, not sticky, and it
   sizes to the initial containing block. When any page content overflows
   horizontally, mobile Chrome widens that containing block to the document
   width - and the navbar silently grows with it, hanging off the right edge
   while the page below stays put. That is a page bug showing up ON the navbar.

   Page overflow gets fixed at its source, but the navbar should not amplify
   someone else's bug, so pin it to the viewport. Confined to the mobile range
   deliberately: 100vw includes the classic scrollbar, so applying it on desktop
   would push the card a scrollbar-width wider than the content beside it. */
@media (max-width: 991.98px) {
    .bk-navbar.layout-navbar {
        max-width: 100vw;
    }
}

/* --------------------------- Scrolled state ----------------------------- */
/* Toggled by landing/navbar.js past a small scroll threshold. */
.bk-navbar.is-scrolled {
    padding-top: 0.375rem;
}

.bk-navbar.is-scrolled .landing-navbar {
    --bk-nav-pad-y: 0.25rem;
    box-shadow: var(--bk-nav-shadow-scrolled);
    border-radius: 0.75rem;
}

/* ------------------------------ Responsive ------------------------------ */
/* Small screens: keep the float but claw back horizontal room. */
@media (max-width: 575.98px) {
    .bk-navbar {
        --bk-nav-gap: 0.5rem;
        --bk-nav-radius: 0.75rem;
    }

    .bk-navbar > .container-lg {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .bk-navbar .landing-navbar {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

@media (min-width: 1400px) {
    .bk-navbar {
        --bk-nav-gap: 1.25rem;
    }
}

/* ------------------- Containing-block neutralisation --------------------- */
/* The drawer and its backdrop are position:fixed, which must resolve against
   the VIEWPORT. Two theme rules on this navbar's own ancestors would otherwise
   capture them and confine the drawer inside the navbar card:

     theme-default.css  .layout-navbar         backdrop-filter: saturate(200%) blur(6px)
     core.css           .layout-navbar .navbar transform: translate3d(0, 0, 0)

   Any transform / filter / backdrop-filter / perspective / will-change on an
   ancestor makes it the containing block for fixed descendants. Both are
   cleared here. The translate3d was only a GPU-compositing hint and the blur
   is invisible behind an opaque white card, so neither affects appearance.

   Specificity is raised deliberately so these win over the theme rules
   regardless of stylesheet order. */
.bk-navbar.layout-navbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.bk-navbar.layout-navbar .navbar.landing-navbar {
    transform: none !important;
}

/* ---------------------------- Mobile drawer ----------------------------- */
/* Below Bootstrap's lg breakpoint the collapse becomes a slide-in panel.
   Everything is inside this query, so desktop keeps Bootstrap's own layout. */
@media (max-width: 991.98px) {

    .bk-navbar .navbar-collapse.landing-nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(20rem, 86vw);
        max-width: 86vw;
        background-color: #fff;
        box-shadow: -8px 0 32px rgba(16, 24, 40, 0.18);
        padding: 1rem 1.25rem 2rem;
        /* The panel can be taller than the viewport on small phones. */
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        transition: transform 0.28s ease;
        z-index: 10001;
    }

    /* Bootstrap's .collapse sets display:none, which would defeat the slide.
       Keep the panel rendered and move it off-canvas instead. */
    .bk-navbar .navbar-collapse.landing-nav-menu,
    .bk-navbar .navbar-collapse.landing-nav-menu.collapse:not(.show) {
        display: block !important;
    }

    .bk-navbar .navbar-collapse.landing-nav-menu.is-open {
        transform: translateX(0);
    }

    /* Backdrop. The element already exists in all five partials but had no
       rules anywhere in the codebase, so it rendered as an empty div. */
    .bk-navbar .landing-menu-overlay {
        position: fixed;
        inset: 0;
        background-color: rgba(16, 24, 40, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.28s ease, visibility 0.28s ease;
        /* Below the panel, above everything else. */
        z-index: 10000;
    }

    .bk-navbar .landing-menu-overlay.is-open {
        opacity: 1;
        visibility: visible;
    }

    /* Give the drawer's links room to be tapped. */
    .bk-navbar .navbar-collapse.landing-nav-menu .navbar-nav {
        width: 100%;
    }

    .bk-navbar .navbar-collapse.landing-nav-menu .nav-link {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }

    /* Dropdowns inside the drawer read as nested lists, not popovers. */
    .bk-navbar .navbar-collapse.landing-nav-menu .dropdown-menu {
        border: 0;
        box-shadow: none;
        padding-left: 0.75rem;
    }

    /* position was the missing half of that, and only for the nav links.
       Bootstrap's own `.navbar-nav .dropdown-menu { position: static }` is
       outspecified here, so these menus stayed absolutely positioned: opening
       Industries floated a 186px-tall card OVER the links below it instead of
       pushing them down, which inside a 320px drawer left the other nav items
       unreachable. !important because the competing declaration can also arrive
       inline from Popper.

       Confined to .navbar-nav deliberately. real-estate-navbar renders its
       "Book a Demo" .demo-dropdown-menu inside this same panel but outside the
       nav list, and already styles it for the drawer itself (that partial's own
       rules, ~L153) - it must keep its card padding and top margin. */
    .bk-navbar .navbar-collapse.landing-nav-menu .navbar-nav .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin: 0 0 0.25rem;
        background-color: transparent;
    }

    /* Submenu links need the same tap target as the links above them. */
    .bk-navbar .navbar-collapse.landing-nav-menu .navbar-nav .dropdown-item {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        white-space: normal;
    }
}

/* Body scroll lock while the drawer is open. */
body.bk-nav-open {
    overflow: hidden;
}

/* --------------------------- Reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
    .bk-navbar,
    .bk-navbar .landing-navbar,
    .bk-navbar .navbar-collapse.landing-nav-menu,
    .bk-navbar .landing-menu-overlay {
        transition: none !important;
    }
}