﻿/* ================================
   NAVBAR + MENU (Bootstrap 3)
   - Outer header is fixed
   - Inner menu stays static
   - Pills: one line, more vertical padding, responsive shrink
   - Dropdown labels scale down on smaller screens
   ================================ */

/* ---- Global ---- */
html, body {
    margin: 0;
}

body {
    /* fallback; your bump() script will set exact padding-top */
    padding-top: 90px;
    font-family: "Source Sans 3", sans-serif;
}

@media (max-width:1199px) {
    body {
        padding-top: 82px;
    }
}

@media (max-width: 991px) {
    body {
        padding-top: 74px;
    }
}

@media (max-width: 767px) {
    body {
        padding-top: 64px;
    }
}

/* Prevent wrapper transforms/overflow from breaking position:fixed */
.main-content-wrap,
.bodyWrapper {
    transform: none !important;
    perspective: none !important;
    overflow: visible !important;
}

/* ---- Fixed outer header bar ---- */
.navbar.has-bg.navbar-fixed-top {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    width: 100%;
    margin: 0; /* remove BS3 default 20px bottom margin */
}

/* Header appearance */
.navbar.has-bg {
    box-shadow: 0 5px 30px 0 rgba(0,0,0,.3);
    background-color: rgba(40,40,40,.5);
}

    .navbar.has-bg .container-fluid,
    .navbar.has-bg .navbar-collapse {
        background: transparent !important;
        border: 0;
        box-shadow: none;
    }

/* Logo sizing */
.navbar-header img {
    max-height: 80px;
    width: auto;
}

/* No stray inline spacing */
.navbar-header.text-right {
    margin-top: 0 !important;
}

/* Spacing between pills and dropdowns */
.cart-menu {
    margin-bottom: 8px;
}

.top-nav {
    margin-top: 4px;
}

    /* ---- Neutralize nested navbar inside .top-nav ---- */
    .top-nav > nav.navbar {
        position: static !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ---- Top-level dropdown labels ---- */
    .top-nav .navbar-nav > li > a {
        color: #fff !important;
        font-weight: 700;
        letter-spacing: .02em;
        text-transform: uppercase;
        background: transparent !important;
        text-shadow: none !important;
        white-space: nowrap;
        font-size: 16px;
        line-height: 1.4;
        padding: 12px 14px;
    }

        .top-nav .navbar-nav > li > a:hover,
        .top-nav .navbar-nav > li > a:focus {
            color: #ddd !important;
        }

    .top-nav .navbar-nav > .dropdown > a .caret {
        border-top-color: #fff !important;
        border-bottom-color: #fff !important;
    }

/* Scale down before mobile so titles don’t wrap */
@media (max-width:1200px) {
    .top-nav .navbar-nav > li > a {
        font-size: 15px;
        padding: 12px 12px;
    }
}

@media (max-width:1100px) {
    .top-nav .navbar-nav > li > a {
        font-size: 14px;
        padding: 10px 10px;
    }
}

@media (max-width: 991px) {
    .top-nav .navbar-nav > li > a {
        font-size: 13px;
        padding: 9px 9px;
    }

    .top-nav .dropdown-menu > li > a {
        font-size: 14px;
    }
}

@media (max-width: 900px) {
    .top-nav .navbar-nav > li > a {
        font-size: 12px;
        padding: 8px 8px;
    }
}

/* Dropdown menus */
.top-nav .dropdown-menu {
    background: #fff !important;
    border: none;
    border-radius: 0;
    min-width: 200px;
}

    .top-nav .dropdown-menu > li > a {
        color: #333 !important;
    }

        .top-nav .dropdown-menu > li > a:hover {
            background: #f5f5f5 !important;
            color: #000 !important;
        }

.top-nav .navbar-nav > li.dropdown .dropdown-menu {
    right: 0;
    left: auto;
}

/* Optional: open on hover for desktops */
@media (min-width: 992px) {
    .top-nav .navbar-nav > li.dropdown:hover > .dropdown-menu {
        display: block;
    }
}

/* ---- Pill Links (.cart-menu) — single line, responsive shrink ---- */
.cart-menu {
    display: flex;
    flex-wrap: nowrap; /* never stack */
    justify-content: flex-end;
    align-items: center;
    gap: 12px; /* room between pills */
    margin-top: 0;
    padding-top: 0;
    overflow-x: visible;
    min-width: 0;
}
    /* If a UL/.nav/.menu is rendered inside, make it a single flex row too */
    .cart-menu > ul, .cart-menu > .nav, .cart-menu > .menu {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
        min-width: 0;
    }
    /* Neutralize BS3 floats inside pills */
    .cart-menu .nav > li, .cart-menu .menu > li {
        display: flex;
        float: none !important;
    }

/* Pill look (with a touch more vertical padding) */
.navbar .cart-menu a,
.navbar .cart-menu .nav > li > a,
.navbar .cart-menu .menu > li > a {
    display: inline-block;
    white-space: nowrap;
    padding: 9px 28px 13px !important; /* TOP | SIDES | BOTTOM  (more vertical) */
    border-radius: 0 0 20px 20px !important;
    background: #0a5aa3 !important;
    color: #fff !important;
    border: 1px solid #0a5aa3 !important;
    line-height: 1.2 !important;
    font-weight: 600 !important; /* match live site weight */
    font-size: 14px !important; /* match live site size */
    letter-spacing: .06em !important; /* a touch more tracking */
    text-transform: uppercase;
    text-decoration: none !important;
    transition: all .15s ease;
}

    .navbar .cart-menu a:hover,
    .navbar .cart-menu a:focus {
        background: #fff !important;
        color: #0a5aa3 !important;
        border-color: #0a5aa3 !important;
    }

.navbar .cart-menu li {
    background: transparent !important;
    margin: 0;
}

/* Pill shrink ladder (keep one line) */
@media (max-width:1200px) {
    .cart-menu, .cart-menu > ul, .cart-menu > .nav, .cart-menu > .menu {
        gap: 10px;
    }

    .navbar .cart-menu a, .navbar .cart-menu .nav > li > a, .navbar .cart-menu .menu > li > a {
        padding: 8px 24px 12px !important;
        font-size: 13.5px !important;
        border-radius: 0 0 18px 18px !important;
    }
}

@media (max-width:1024px) {
    .cart-menu, .cart-menu > ul, .cart-menu > .nav, .cart-menu > .menu {
        gap: 9px;
    }

    .navbar .cart-menu a, .navbar .cart-menu .nav > li > a, .navbar .cart-menu .menu > li > a {
        padding: 7px 20px 11px !important;
        font-size: 13px !important;
        border-radius: 0 0 16px 16px !important;
    }
}

@media (max-width:900px) {
    .cart-menu, .cart-menu > ul, .cart-menu > .nav, .cart-menu > .menu {
        gap: 8px;
    }

    .navbar .cart-menu a, .navbar .cart-menu .nav > li > a, .navbar .cart-menu .menu > li > a {
        padding: 6px 16px 10px !important;
        font-size: 12.5px !important;
        border-radius: 0 0 14px 14px !important;
    }
}

/* Hide pills on phones */
@media (max-width: 767px) {
    .cart-menu {
        display: none !important;
    }
}
