/* Primary navigation - the yellow bar, its drop-downs and the phone menu.
   Markup: Views/Partials/umbTopNavigation.cshtml (the bar, language, search) and
   TopNavMenu.cshtml (the menus, cached per language). Behaviour: js/nav.js.
   Replaced the Universal Mega Menu stylesheet (mgmenu2.css, 2013) in 2026-10; the
   content classes it kept (.main-nav-block-brakepads, ul.topNavLanguageSelect,
   .icon-bar) are styled in site.css and foundation.css as before.

   One breakpoint, 768px: the bar with its items on the desktop side, a 48px bar
   with a logo, a search button and a menu button on the phone side, the items in
   a panel below it. --nav-bp is read by nav.js so the script and the stylesheet
   can never disagree. */

:root {
    --nav-bp: 768px;
    --nav-bar-h: 74px;
    --nav-bar-h-phone: 48px;
    --nav-yellow: #ffe600;
    --nav-yellow-phone: #fce400;
    --nav-dark: #282828;
}

/* ── the bar: sticky; nav.js slides it away on the way down and brings it back on an
      intentional scroll up (.mgmenu_hidden) ── */

#mgmenu1 {
    position: sticky;
    top: 0;
    z-index: 40;
    width: 100%;
    background: var(--nav-yellow);
    transition: transform .25s ease-in-out;
}

#mgmenu1.mgmenu_hidden {
    transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
    #mgmenu1 {
        transition: none;
    }
}

.mgmenu-bar {
    position: relative;
    display: flex;
    align-items: stretch;
    height: var(--nav-bar-h);
    font-family: 'orgonmedium', sans-serif;
    line-height: 1;
}

.mgmenu-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.mgmenu-logo img {
    display: block;
    height: auto;
}

ul.mgmenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mgmenu > li {
    margin: 0;
    padding: 0;
    position: static;
}

/* a top item is a button when it opens a menu, a link when it is a page */

.mgmenu-bar .mgmenu-toggle,
.mgmenu > li > a {
    /* the weight and size the menu has always had (orgonmedium 15px), not the body font; two
       classes so Foundation's later "button {font-size:1rem}" does not win the tie */
    font: 400 15px/1 'orgonmedium', sans-serif;
    color: #000;
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: 0;
    margin: 0;
    cursor: pointer;
    outline: 0;
    -webkit-appearance: none;
    appearance: none;
}

/* Foundation paints any hovered or focused <button> white on blue; these are not that kind of button */

.mgmenu-toggle:hover,
.mgmenu-toggle:focus,
.mgmenu-burger:hover,
.mgmenu-burger:focus {
    background: none;
    color: #000;
}

.mgmenu-toggle:focus-visible,
.mgmenu > li > a:focus-visible,
.mgmenu-burger:focus-visible,
.mgmenu-logo:focus-visible {
    outline: 2px solid #000;
    outline-offset: -2px;
}

.mgmenu .mega_dropdown {
    display: none;
}

.mgmenu > li.is-open > .mega_dropdown {
    display: block;
}

.mgmenu .mega_dropdown[hidden] {
    display: none;
}

/* drop-down content: the headings and links of the menu blocks */

.mgmenu .mega_dropdown h3 {
    margin: 16px 8px 21px 0;
    padding: 0;
    color: #000;
    font-family: 'orgonextralight', sans-serif;
    font-size: 1.2rem;
    line-height: 1.4rem;
    font-weight: 400;
}

.mgmenu .mega_dropdown a {
    color: #222;
    text-decoration: none;
    transition: color .3s;
}

.mgmenu .mega_dropdown a:hover,
.mgmenu .mega_dropdown a:focus {
    color: #777;
    background: none;
}

.mgmenu-burger,
.mgmenu-bar .siteSearchMobile {
    display: none;
}

/* ── desktop, 768px and up ──
   One fluid layout: the bar's content box is the site's standard content column
   ("small-12 medium-11 medium-centered large-10 large-centered columns"): 11/12 of
   the width, then 10/12 from Foundation's large breakpoint (1025px). The logo starts
   where that column's content starts and the search icon ends where it ends, the
   items spread across it edge to edge. The type scales with that width and never
   wraps: the nine items with their .75em padding need 56.9em after the logo in the
   longest language (German; measured 2026-11-01 with #GRAVELBRAKE), 57em with the
   rounding. Another item or a longer label needs this number raised. Container query
   units (cqw) measure the bar itself, so a scrollbar never counts as width. */

@media only screen and (min-width: 768px) {
    .mgmenu_container {
        container-type: inline-size;
    }

    .mgmenu-bar {
        --nav-w: calc(91.66667cqw - 1.875rem);
        --nav-logo: clamp(120px, calc(var(--nav-w) * .15), 183px);
        justify-content: space-between;
        padding: 0 calc((100cqw - var(--nav-w)) / 2);
        --nav-font: clamp(10px, calc((var(--nav-w) - var(--nav-logo)) / 57), 15px);
        font-size: var(--nav-font);
        white-space: nowrap;
    }

    /* img/SwissStop_Logo.png (the vector original at 3x) is 186/183 the width of
       the old 366 x 70 file for the same height: scaled so the lettering stays put */

    .mgmenu-logo img {
        width: calc(var(--nav-logo) * 1.0164);
    }

    /* the items are laid out by the bar itself, so the gaps either side of the logo
       and the search icon are the same as between the items (role="list" on the ul
       keeps its list semantics while it has no box) */

    ul.mgmenu {
        display: contents;
    }

    .mgmenu > li {
        display: flex;
        flex: 0 0 auto;
    }

    .mgmenu-toggle,
    .mgmenu > li > a {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 .75em;
    }

    /* the items take the bar's fluid size (15px from about 1100px up), so the row fits
       the bar at every width; the same selectors as the 15px rule above, later (the
       list and its drop-downs keep their own size) */

    .mgmenu-bar .mgmenu-toggle,
    .mgmenu > li > a {
        font-size: var(--nav-font);
    }

    /* the search icon keeps no padding, so it ends on the content edge */

    .mgmenu > li.siteSearchItem > a {
        padding: 0;
    }

    .mgmenu-toggle > span,
    .mgmenu > li > a > span {
        position: relative;
    }

    /* a hovered item and the open one: a 2px rule under the text; the open one also
       takes the white highlight its drop-down continues */

    .mgmenu > li:not(.siteSearchItem):hover > .mgmenu-toggle > span::before,
    .mgmenu > li:not(.siteSearchItem):hover > a > span::before,
    .mgmenu > li.is-open > .mgmenu-toggle > span::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -4px;
        border-bottom: 2px solid #000;
    }

    .mgmenu > li.is-open > .mgmenu-toggle,
    .mgmenu > li.is-open > .mgmenu-toggle:hover,
    .mgmenu > li.is-open > .mgmenu-toggle:focus {
        background: #fff;
        color: #000;
    }

    .mgmenu .mega_dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        margin: 0;
        padding: 40px 0 0;
        background: #fff;
        color: #000;
        z-index: 8;
        white-space: normal;
    }

    /* the language menu: a small panel under its own item */

    .mgmenu .dropdown_container {
        left: auto;
        width: auto;
        min-width: 11em;
        padding: 20px 24px 8px;
    }

    .mgmenu .dropdown_container h3 {
        margin-top: 0;
    }

    #mainsubNav {
        display: none !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 967px) {
    .mgmenu .mega_dropdown h3 {
        font-size: .8rem;
        line-height: 1rem;
    }
}

@media only screen and (min-width: 968px) and (max-width: 1200px) {
    .mgmenu .mega_dropdown h3 {
        font-size: 18px;
    }
}

@media only screen and (min-width: 1025px) {
    .mgmenu-bar {
        --nav-w: calc(83.33333cqw - 1.875rem);
    }

    /* large-10 */
}

/* ── phone, up to 767px ──
   A 48px bar: logo left, search and menu buttons right. The items live in a panel
   below the bar (html.mgmenu-open), full height, scrolling on its own while the page
   behind stays put; a top item with a menu expands in place, its blocks reduced to
   a list of links. */

@media only screen and (max-width: 767px) {
    #mgmenu1 {
        background: var(--nav-yellow-phone);
    }

    .mgmenu-bar {
        height: var(--nav-bar-h-phone);
        align-items: center;
        padding: 0 0 0 14px;
    }

    .mgmenu-logo img {
        width: 170px;
        max-width: 48vw;
    }

    .mgmenu-bar__tools {
        display: flex;
        align-items: stretch;
        height: 100%;
        margin-left: auto;
    }

    /* the search button in the bar (siteSearch.css styles its icon); in flow, not absolute */

    #mgmenu1 .siteSearchMobile {
        display: flex;
        position: static;
        width: 48px;
        height: var(--nav-bar-h-phone);
    }

    .mgmenu-burger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: var(--nav-bar-h-phone);
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }

    /* three bars drawn in CSS; the open state is a cross */

    .mgmenu-burger span,
    .mgmenu-burger span::before,
    .mgmenu-burger span::after {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--nav-dark);
        transition: transform .2s, background .2s;
    }

    .mgmenu-burger span {
        position: relative;
    }

    .mgmenu-burger span::before,
    .mgmenu-burger span::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .mgmenu-burger span::before {
        top: -7px;
    }

    .mgmenu-burger span::after {
        top: 7px;
    }

    .mgmenu-burger[aria-expanded="true"] span {
        background: transparent;
    }

    .mgmenu-burger[aria-expanded="true"] span::before {
        transform: translateY(7px) rotate(45deg);
    }

    .mgmenu-burger[aria-expanded="true"] span::after {
        transform: translateY(-7px) rotate(-45deg);
    }

    ul.mgmenu {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        top: var(--nav-bar-h-phone);
        bottom: 0;
        z-index: 39;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--nav-dark);
        padding-bottom: 2rem;
    }

    html.mgmenu-open ul.mgmenu {
        display: block;
    }

    html.mgmenu-open,
    html.mgmenu-open body {
        overflow: hidden;
    }

    .mgmenu > li {
        display: block;
        border-bottom: 1px solid #3a3a3a;
    }

    .mgmenu > li.siteSearchItem {
        display: none;
    }

    .mgmenu-toggle,
    .mgmenu > li > a {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        padding: 18px;
        color: #fff;
        font-size: 14px;
        text-align: left;
    }

    .mgmenu-toggle::after {
        content: "";
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        margin-left: 1em;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(45deg);
        transition: transform .2s;
    }

    .mgmenu-toggle:hover,
    .mgmenu-toggle:focus,
    .mgmenu > li.is-open > .mgmenu-toggle,
    .mgmenu > li.is-open > .mgmenu-toggle:hover,
    .mgmenu > li.is-open > .mgmenu-toggle:focus {
        color: #fff;
    }

    .mgmenu > li.is-open > .mgmenu-toggle {
        background: #000;
    }

    .mgmenu > li.is-open > .mgmenu-toggle::after {
        transform: rotate(-135deg);
    }

    .mgmenu .mega_dropdown {
        position: static;
        width: auto;
        margin: 0;
        padding: 0 0 8px;
        background: var(--nav-dark);
        color: #fff;
    }

    /* the menu blocks as a plain list: no pictures, the headings become rows */

    .mgmenu .mega_dropdown .row {
        margin: 0;
        max-width: none;
    }

    .mgmenu .mega_dropdown .columns {
        float: none;
        width: 100%;
        padding: 0;
    }

    .mgmenu .mega_dropdown [class*="block-grid-"] {
        margin: 0;
    }

    .mgmenu .mega_dropdown [class*="block-grid-"] > li {
        float: none;
        width: 100%;
        padding: 0;
        clear: none;
    }

    .mgmenu .mega_dropdown img {
        display: none;
    }

    .mgmenu .mega_dropdown .main-nav-block-brakepads {
        width: auto;
        margin: 0;
        min-height: 0;
    }

    .mgmenu .mega_dropdown h3 {
        margin: 0;
        font-family: 'orgonmedium', sans-serif;
        font-size: 14px;
        line-height: 1;
    }

    .mgmenu .mega_dropdown h3 a {
        display: block;
        padding: 14px 18px 14px 34px;
        color: #ddd;
        text-transform: uppercase;
    }

    .mgmenu .mega_dropdown h3 a:hover,
    .mgmenu .mega_dropdown h3 a:focus {
        color: #fff;
        background: #000;
    }

    /* the language menu: the five codes in a row */

    .mgmenu .dropdown_container .col_1 {
        float: none;
        width: auto;
        padding: 0;
    }

    .mgmenu .dropdown_container h3 {
        display: none;
    }

    .mgmenu ul.topNavLanguageSelect {
        display: flex;
        flex-wrap: wrap;
        margin: 0;
        padding: 4px 18px 10px 26px;
    }

    .mgmenu ul.topNavLanguageSelect li {
        width: auto;
    }

    .mgmenu ul.topNavLanguageSelect li a {
        display: block;
        width: auto;
        padding: 12px 10px;
        color: #ddd;
    }

    .mgmenu ul.topNavLanguageSelect li a:hover,
    .mgmenu ul.topNavLanguageSelect li a:focus,
    .mgmenu ul.topNavLanguageSelect li a[aria-current] {
        color: #fff;
        background: #000;
    }

    /* the three-up bar of shortcuts under the yellow bar */

    #mainsubNav {
        text-transform: uppercase;
        font-family: 'orgonregular', sans-serif;
    }

    #mainsubNav label {
        font-size: .6rem;
    }

    #mainContent {
        margin-top: -7px;
    }
}

/* the page behind an open drop-down is dimmed, so the white panel stands out; the sheet sits
   just under the bar (z-index 40) and a click on it is an outside click, which closes the menu */

@media (min-width: 768px) {
    html.mgmenu-dropdown-open body::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 39;
    }
}