/* ==========================================================================
   Scrollable dropdown submenus
   Any submenu taller than the space between the header and the bottom of the
   screen is capped: the items that do not fit are hidden and chevron buttons
   appear at the top / bottom edge. Hovering a chevron scrolls the submenu.
   Shared by the home hero header and the inner page header.
   ========================================================================== */

.nav-menu .submenu.submenu--managed {
    padding: 0;
}

.nav-menu .submenu.submenu--managed > .submenu-track,
.nav-menu .submenu.submenu--managed > .submenu-viewport > .submenu-track {
    padding: 8px 0;
}

.nav-menu .submenu.submenu--managed > .submenu-viewport {
    position: relative;
    overflow: visible;
}

/* Scrolling state ------------------------------------------------------- */

.nav-menu .submenu.submenu--scroll {
    display: flex;
    flex-direction: column;
}

.nav-menu .submenu.submenu--scroll > .submenu-viewport {
    flex: 1 1 auto;
    min-height: 0;
    /* Clip vertically only, so the side flyouts of nested items stay visible */
    -webkit-clip-path: inset(0 -100vw 0 -100vw);
    clip-path: inset(0 -100vw 0 -100vw);
}

.nav-menu .submenu.submenu--scroll > .submenu-viewport > .submenu-track {
    will-change: transform;
}

/* Chevron buttons -------------------------------------------------------- */

.nav-menu .submenu-scroll-btn {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    width: 100%;
    height: 26px;
    padding: 0;
    margin: 0;
    border: none;
    background: #fff;
    color: #CF1F45;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.nav-menu .submenu.submenu--scroll > .submenu-scroll-btn {
    display: flex;
    visibility: hidden;
}

.nav-menu .submenu.submenu--scroll > .submenu-scroll-btn.is-visible {
    visibility: visible;
}

.nav-menu .submenu-scroll-up {
    border-radius: 12px 12px 0 0;
    box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.25);
}

.nav-menu .submenu-scroll-down {
    border-radius: 0 0 12px 12px;
    box-shadow: 0 -6px 8px -6px rgba(0, 0, 0, 0.25);
}

.nav-menu .submenu-scroll-btn:hover {
    background: #FFF3F5;
    color: #CF1F45;
}

.nav-menu .submenu-scroll-btn svg {
    width: 14px;
    height: 14px;
    display: block;
}