/* ============================================================
   Navbar compatibility fix
   ------------------------------------------------------------
   The navbar markup was ported 1:1 from the original Bootstrap 3
   MVC site (classes: navbar-default, navbar-toggle, navbar-right,
   .collapse, .navbar-ex1-collapse ...), but this project loads
   Bootstrap 5 where those classes behave differently:
     - .collapse sets display:none, hiding the menu so only the
       hamburger icon shows.
     - .navbar-default .navbar-brand colour rule no longer exists,
       so the brand title renders too dark.
     - data-toggle/data-target no longer wire up the toggle.
   These rules reproduce the original Bootstrap 3 navbar layout
   and appearance under Bootstrap 5.
   ============================================================ */

/* Stack the navbar above the contact bar so the contact bar's
   all-around box-shadow is only visible at the bottom (matching
   the original site) instead of also bleeding up under the brand. */
.navbar-default {
    position: relative;
    z-index: 11;
    background: #fff;
}

/* Brand title colours (Bootstrap 3 .navbar-default .navbar-brand) */
.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #777;
}

.navbar-default .navbar-brand .text-blue {
    color: var(--c700);
}

/* Menu links (original inline style: .nav a { font-size: 18px }) */
.navbar-default .nav a {
    font-size: 18px;
    color: var(--c600);
}

.navbar-default .nav a:hover {
    color: #333;
}

/* Reset Bootstrap 5 list/flex defaults for the menu */
.navbar-default .navbar-nav {
    margin: 0;
    padding-left: 0;
    list-style: none;
    align-items: center;
}

.navbar-default .navbar-nav > li > a {
    display: block;
    padding: 12px 15px 15px;
}

/* ---------- Desktop (>= 768px): inline menu on the right ---------- */
@media (min-width: 768px) {
    .navbar-default > .container {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
    }

    .navbar-default .navbar-brand {
        margin-right: auto;
        flex-shrink: 0;
    }

    /* Hide the header (hamburger toggle button) on desktop */
    .navbar-default .navbar-header {
        display: none;
    }

    /* Show the menu on desktop */
    .navbar-default .navbar-ex1-collapse.collapse {
        display: flex !important;
        flex-basis: auto;
        width: auto;
    }

    .navbar-default .navbar-nav {
        flex-direction: row;
        margin-left: auto;
    }

    /* Bootstrap 3 navbar-right: float right on desktop */
    .navbar-default .navbar-nav.navbar-right {
        margin-left: auto;
        margin-right: -15px;
    }
}

/* ---------- Mobile (< 768px): hamburger toggles the menu ---------- */
@media (max-width: 767px) {
    .navbar-default > .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .navbar-default .navbar-brand {
        margin-right: auto;
    }

    .navbar-default .navbar-header {
        display: block;
        order: 2;
    }

    .navbar-default .navbar-toggle {
        display: block;
        background: transparent;
    }

    /* Hide menu by default on mobile */
    .navbar-default .navbar-ex1-collapse.collapse {
        display: none !important;
        flex-basis: 100%;
        order: 3;
    }

    /* Show menu when .in class is added */
    .navbar-default .navbar-ex1-collapse.collapse.in {
        display: block !important;
    }

    .navbar-default .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .navbar-default .navbar-nav.navbar-right {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Header contact bar - reproduce Bootstrap 3 helpers (pull-left / hidden-*) */
.header-contact .pull-left {
    float: left;
}

@media (max-width: 767px) {
    .header-contact .hidden-xs {
        display: none !important;
    }

    .header-contact .col-xs-12 {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .header-contact .hidden-sm.hidden-md.hidden-lg {
        display: none !important;
    }
}