/* =====================================================================
   Navbar layout
   =====================================================================

   Why this file exists: every navbar rule otherwise lives in the 542 KB
   assets/css/style.css, which is served unversioned and sits behind
   LiteSpeed's cache. An edit there can take days to reach a visitor. This
   one is cache-busted by mtime from includes/header_navbar.php.

   What it fixes:

   - On a phone the hamburger dropped onto a second row underneath the
     quote button. Bootstrap lays the header out with flex-wrap, and
     .navbar-collapse carries flex-basis:100% — so the collapse forced a
     line break immediately after the logo, and everything after it went
     to the next row. Ordering the collapse last puts the logo, the
     button and the hamburger on one line and drops the menu panel below
     them, which is where a menu panel belongs.

   - "Private Safaris", "About Us" and "Contact Us" each wrapped onto two
     lines on desktop. They are two-word labels; they should never wrap.

   The duplicate id="navbarCollapse" and the second toggler that went
   with all this are fixed in includes/header_navbar.php itself.
   ===================================================================== */

/* ── Below the xl breakpoint: logo · quote button · hamburger, one line ── */
@media (max-width: 1199.98px) {
    .navbar > .container-fluid,
    .navbar > .container {
        align-items: center;
        column-gap: .5rem;
    }

    /* The menu panel goes last, so it wraps to its own row instead of
       pushing the controls off theirs. */
    .navbar > .container-fluid > .navbar-collapse,
    .navbar > .container > .navbar-collapse {
        order: 5;
        width: 100%;
    }

    .navbar-brand      { order: 1; margin-right: 0; flex: 0 0 auto; }
    .kb-nav-cta        { order: 2; margin-left: auto; min-width: 0; }
    .navbar-toggler    { order: 3; flex: 0 0 auto; }
}

/* ── xl and up: the original reading order, logo · links · button ─────── */
@media (min-width: 1200px) {
    .navbar > .container-fluid > .navbar-collapse,
    .navbar > .container > .navbar-collapse { order: 1; }
    .kb-nav-cta { order: 2; }
}

/* ── Nav links never wrap ─────────────────────────────────────────────── */
.navbar-nav .nav-link {
    white-space: nowrap;
}

/* Tighten the gaps between the xl breakpoint and roughly 1400px, where the
   six labels plus the logo plus the button are close to the container's
   width. Fewer pixels between items beats a wrapped label. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar-nav > .nav-item > .nav-link { padding-left: .55rem; padding-right: .55rem; font-size: .95rem; }
    .kb-nav-cta .btn { padding-left: 1rem; padding-right: 1rem; font-size: .95rem; }
}

/* ── The quote button ─────────────────────────────────────────────────── */
.kb-nav-cta .btn {
    white-space: nowrap;
}

/* The long label whenever it fits; a short one on a narrow phone, so the
   button never grows wide enough to push the hamburger onto its own row. */
.kb-nav-cta__short { display: none; }

@media (max-width: 575.98px) {
    .kb-nav-cta__long  { display: none; }
    .kb-nav-cta__short { display: inline; }
    .kb-nav-cta .btn   { padding: .6rem 1rem; font-size: .92rem; }
}

/* ── The inner wrapper that used to be a second collapse ──────────────── */
.kb-nav-main {
    display: flex;
    align-items: center;
    width: 100%;
}

@media (max-width: 1199.98px) {
    /* Stacked inside the open menu panel, as the collapse expects. */
    .kb-nav-main { display: block; }
    .kb-nav-main .navbar-nav { width: 100%; }
}

/* ── Compact height ───────────────────────────────────────────────────────
   The logo was 100px wide with 28px of padding around it, which made the
   header 130px tall plus a 40px top bar - well over a fifth of a laptop
   screen before any content. The logo shrinks, the padding goes, and the
   links, button and spacing are left exactly as they were. */
.kb-topalert { padding-top: .2rem !important; padding-bottom: .2rem !important; font-size: .9rem; }
.kb-topalert .btn-close { padding: .6rem 1rem; }

.navbar { padding-top: 0; padding-bottom: 0; }
.navbar-brand { padding-top: .25rem !important; padding-bottom: .25rem !important; }
.navbar-brand .navbar-brand-item { width: 60px !important; height: auto; }
@media (max-width: 767.98px) {
    .navbar-brand .navbar-brand-item { width: 50px !important; }
}