/* ==========================================================================
   Navbar fit, spacing & rhythm.

   The nav labels are uppercase Barlow Condensed at 15px with 3px letter-
   spacing. Once the "Events" item was added, the eight labels plus the 250px
   logo were wider than the container, so Bootstrap wrapped the multi-word
   ones onto a second line ("Restaurant &" / "Bar", "Things To" / "Do",
   "Book" / "Now") and pushed the dropdown carets underneath their label.

   The space has to come from somewhere, so it is taken from inside the words
   (letter-spacing) and given back between the items (padding) — tracking is
   what made the labels oversized, while the gap between items is what makes
   the bar readable. Spacing is applied as symmetrical padding rather than the
   theme's 3px margin so the items sit on an even rhythm.

   Width budget at 1140px container, 250px logo → 890px for the nav:
     72 characters + 2 carets ≈ 633px, leaving ~32px of gap per item.
   ========================================================================== */

.navbar .navbar-nav .nav-link {
    white-space: nowrap;
}

/* Keep the dropdown caret on the same line as its label, optically centred
   and a touch lighter so it reads as a caret rather than a glyph. */
.navbar .dropdown .nav-link i {
    display: inline-block;
    margin-left: 7px;
    font-size: 9px;
    line-height: 1;
    vertical-align: middle;
    opacity: .75;
    transition: opacity .3s, transform .3s;
}

.navbar .dropdown:hover .nav-link i {
    opacity: 1;
    transform: translateY(1px);
}

/* Large desktops — comfortable, evenly spaced. */
@media (min-width: 1200px) {
    .navbar .navbar-nav .nav-link {
        font-size: 15px;
        letter-spacing: 1.5px;
        margin: 3px 0;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Small desktops / landscape tablets — 960px container is the tightest fit,
   so the type steps down slightly to buy back the gaps between items. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar .navbar-nav .nav-link {
        font-size: 13px;
        letter-spacing: 0.8px;
        margin: 3px 0;
        padding-left: 11px;
        padding-right: 11px;
    }
}

/* The last item ("Book Now") sits flush to the container edge. */
@media (min-width: 992px) {
    .navbar .navbar-nav .nav-item:last-child .nav-link {
        padding-right: 0;
    }
}

/* Below 992px the menu collapses into the mobile drawer, where items stack
   one per row — restore generous spacing and give each row room to breathe. */
/* --------------------------------------------------------------------------
   Mobile drawer (below the 992px collapse point).

   The theme opens submenus with `.dropdown:hover`. iOS applies :hover on the
   first tap, so with js/nav-mobile.js also toggling `.is-open` there were two
   mechanisms fighting: one tap opened via hover, the next closed via JS, the
   drawer height changed under the finger and the tap landed on a neighbouring
   link. Below this breakpoint the hover rules are switched off outright so
   the JS class is the single source of truth.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    .navbar .navbar-nav .nav-link {
        letter-spacing: 2px;
        padding-top: 11px;
        padding-bottom: 11px;
    }

    /* Hover must not open anything on touch — JS owns this entirely. */
    .navbar .dropdown:hover > .dropdown-menu,
    .navbar .dropdown:hover > .mega-menu,
    .navbar .dropdown .dropdown-menu:hover .sub-menu {
        display: none;
    }

    .navbar .dropdown.is-open > .dropdown-menu,
    .navbar .dropdown-menu .dropdown-item.is-open > .sub-menu {
        display: block;
    }

    /* Caret points up while its menu is open. */
    .navbar .dropdown .nav-link i {
        transition: transform .25s ease;
    }
    .navbar .dropdown.is-open > .nav-link i {
        transform: rotate(180deg);
    }

    /* Room for the longest expanded menu without clipping. */
    .navbar .navbar-collapse {
        max-height: 78vh;
    }

    /* Toggles are spans, not links: make them behave like buttons under a
       thumb — full-row target, no double-tap zoom delay, no text selection
       when the tap is held a fraction too long. */
    .navbar .dropdown > .nav-link,
    .navbar .dropdown-menu .dropdown-item > span {
        display: block;
        touch-action: manipulation;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
}