.masterbar-mobile,
.masterbar {
    background: var(--color-masterbar-background);
    font-size: 16px;
    display: flex;
    height: 80px;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--height-topbar) + var(--height-noticebar)); /* offset the top-bar + any notice bar above it */
    width: 100%;
    z-index: 200;
    max-width: var(--max-width);
    margin: 0 auto;
    transition: top 0.28s ease;
}
.masterbar-mobile {
    top: var(--height-noticebar); /* top-bar is hidden on mobile, so only offset by the notice bar */
    display: none;
}

/* "Stay visible while scrolling" notice bar (.notice-bar--fixed) leaves normal document
   flow, so the top-bar needs pushing down explicitly here instead of relying on flow —
   and the scroll-triggered sticky nav needs to sit below it rather than at the very top. */
.notice-bar--fixed ~ .top-bar {
    margin-top: var(--height-noticebar);
}
.notice-bar--fixed ~ .masterbar.sticky {
    top: var(--height-noticebar);
}
.masterbar__content {
    max-width: var(--max-width);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 20px;
    flex: 1;
    height: 100%;
}
.masterbar__section {
    display: flex;
    flex-direction: row;
}
.masterbar__logo {
    height: 44px;
    position: relative;
    display: flex;
    align-items: center;
}

.masterbar__logo-img {
   width: 63px;
}

ul.masterbar__links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /* Bootstrap's own .nav class (also loaded on this page) sets flex-wrap:wrap, which
       this bar was never designed to handle — its fixed 80px height doesn't leave room
       for a second line, so items that wrap end up overlapping the content below instead
       of appearing on a visible second row. Force single-row and rely on the breakpoint
       below to hand off to the mobile menu once there's genuinely not enough width. */
    flex-wrap: nowrap;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.masterbar__link-item, .masterbar__links li, .masterbar__links li a {
    /*margin: 0 28px 0 0;*/
    margin: 0 15px 0 0;
}

.masterbar__link, .masterbar__links li, .masterbar__links li a {
    color: var(--color-masterbar-text);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
}



.masterbar-mobile-nav {
    background: rgba(0,0,0,0.95);
    height: 0;
    overflow-y: scroll;
    -webkit-transition: height 0.5s ease-in;
    transition: height 0.5s ease-in;
}


ul.masterbar-mobile-nav__links {
    padding: 55px 35px;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    list-style-type: none;
}
.masterbar-mobile-nav__link-item, .masterbar-mobile-nav__links li, 
.masterbar-mobile-nav__links li a {
    text-decoration: none;
    color: inherit;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    /*justify-content: space-between;*/
    height: 40px;
    width: 100%;
    border-bottom: 1px solid #595B5D;

    /* move this */
    text-transform: uppercase;
    font-weight: 800;
    font-size: 13px;
}

.masterbar-mobile-nav__link, .masterbar-mobile-nav__links li a {
    color: #fff;
}

.masterbar-mobile-nav__link-text {
}

/* The menu content itself is flat (all 10 items, edited in one place in the Menu
   Manager) -- nav-overflow.js measures the row at runtime and dynamically collapses
   whichever trailing items don't fit into a JS-built "More" dropdown, so the desktop
   bar can gracefully shrink across a much wider range of widths than a fixed cutover
   would need. This breakpoint is just "below this, give up on the desktop bar
   entirely and use the mobile hamburger nav instead" -- a standard tablet/small-
   desktop value, not a measured overflow point. Kept in sync with the top-bar's own
   full-hide breakpoint (see _topbar.css) -- letting them drift apart leaves a gap
   where the mobile masterbar and the still-visible top-bar overlap. */
@media only screen and (max-width: 992px) {
    .masterbar {
        display: none;
    }
    .masterbar-mobile {
        display: inline-block;
    }
}

/* Bootstrap's .nav class (also present on .mod-menu) defaults to flex-wrap:wrap --
   without overriding it here the browser wraps overflowing items onto extra lines
   by itself before nav-overflow.js ever gets a chance to measure/collapse them,
   which produces multi-line, squashed items instead of a clean "More". */
#masterbar .mod-menu {
    flex-wrap: nowrap;
}

/* flex-wrap:nowrap alone stops items dropping to a new row, but a flex item can
   still shrink below its own content width and wrap its text internally instead
   (e.g. "How can we help you?" breaking across lines) -- that also makes
   nav-overflow.js's width measurements meaningless, since a shrunk item reports a
   compressed offsetWidth rather than what it actually needs. Forcing natural width
   means the row either genuinely fits, or nav-overflow.js correctly sees the
   overflow and moves the item into "More". */
#masterbar .mod-menu > li {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Joomla 6's own mod_menu toggle button only opens submenus via click/keyboard --
   its Nav JS has no hover fallback at all. Hide the button and bring back the
   classic hover-to-open (plus :focus-within for keyboard users tabbing to the
   parent link) behavior this nav has always used instead. Positioning only --
   no color/spacing redesign here. */
#masterbar .mod-menu .mod-menu__toggle-sub {
    display: none;
}

#masterbar .mod-menu li.parent {
    position: relative;
}

#masterbar .mod-menu .mod-menu__sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
}

#masterbar .mod-menu li.parent:hover > .mod-menu__sub,
#masterbar .mod-menu li.parent:focus-within > .mod-menu__sub {
    display: block;
}

/* A JS-built (nav-overflow.js) or Heading-type "More" item renders as
   <span class="mod-menu__heading nav-header">, not an <a>, so it never picks up
   .masterbar__link's white/uppercase/bold link styling and would otherwise fall
   back to Bootstrap's muted .nav-header look -- match the other top-level items
   here so it reads the same as a normal nav entry. */
#masterbar .mod-menu .mod-menu__heading {
    display: inline-block;
    color: var(--color-masterbar-text);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}