/*
 * SDB — Menu Horizontal
 * Version: 2.0.0
 * Consumer for SDB — Design System v5.8.0.
 *
 * Design System primitives consumed:
 *   sdb-nav-strip (B+)        — visual language of the contextual strip
 *   sdb-scroll-region (B+)    — controlled horizontal scrolling (applied by JS in rail mode)
 *   sdb-u-touch-target (B)    — minimum interactive target on compact controls
 *
 * The Design System owns typography, colour and the resting look of the strip.
 * This stylesheet owns the shell layout, the three presentation modes
 * (wrap / rail / panel), the dropdown surface and the plugin-specific icons.
 * Every token used here declares a fallback so the shortcode still degrades
 * gracefully on sites where the Design System is not loaded.
 *
 * Modes are set on the shell by JS via [data-sls-hm-mode]:
 *   wrap  — items wrap on several lines, submenus open as anchored dropdowns
 *   rail  — one line with controlled horizontal scroll (sdb-scroll-region)
 *   panel — collapsed into a named control that opens a vertical panel (mobile)
 */

/* ---------------------------------------------------------------------------
 * 1. Shell — plugin-owned positioning context and token bridge
 * ------------------------------------------------------------------------ */

.sls-hm-shell {
    --sls-hm-touch-target: var(--sdb-touch-target-min, 44px);
    --sls-hm-fade: 2rem;
    --sls-hm-gap: var(--sdb-nav-strip-gap, var(--sdb-space-md, 1.25rem));
    --sls-hm-gap-mobile: var(--sdb-nav-strip-gap-mobile, var(--sdb-space-sm, .75rem));
    --sls-hm-color: var(--sdb-nav-strip-color, inherit);
    --sls-hm-color-active: var(--sdb-nav-strip-color-active, currentColor);
    --sls-hm-muted: var(--sdb-nav-strip-muted-color, var(--sdb-color-muted, inherit));
    --sls-hm-surface: var(--sdb-nav-dropdown-bg, var(--sdb-color-surface, Canvas));
    --sls-hm-border: var(--sdb-color-outline-variant, var(--sdb-color-border, rgba(0, 0, 0, .14)));
    --sls-hm-radius: var(--sdb-shape-md, var(--sdb-radius-md, 12px));
    --sls-hm-shadow: var(--sdb-nav-dropdown-shadow, var(--sdb-shadow-element, 0 8px 22px rgba(19, 39, 61, .1)));
    --sls-hm-hover-bg: var(--sdb-state-hover-bg, rgba(0, 0, 0, .04));
    --sls-hm-selected-bg: var(--sdb-state-selected-bg, rgba(0, 0, 0, .05));
    --sls-hm-duration-enter: var(--sdb-motion-duration-enter, 180ms);
    --sls-hm-duration-exit: var(--sdb-motion-duration-exit, 140ms);
    --sls-hm-duration-fast: var(--sdb-motion-duration-fast, 120ms);
    --sls-hm-easing: var(--sdb-motion-easing-standard, cubic-bezier(.2, 0, 0, 1));
    --sls-hm-mask-direction: to right;
    --sls-hm-mask-start: 0px;
    --sls-hm-mask-end: 0px;

    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    clear: both;
    margin-block: var(--sdb-space-sm, .75rem) var(--sdb-space-md, 1.25rem);
}

[dir="rtl"] .sls-hm-shell {
    --sls-hm-mask-direction: to left;
}

/* Last-resort border that still reads on a dark surface. */
@supports (color: color-mix(in srgb, currentColor 16%, transparent)) {
    .sls-hm-shell {
        --sls-hm-border: var(--sdb-color-outline-variant, var(--sdb-color-border, color-mix(in srgb, currentColor 16%, transparent)));
    }
}

/* Optional sticky behaviour. --sls-hm-sticky-offset lets a theme with a fixed
 * header push the strip below it without touching the plugin. */
.sls-hm-shell.sls-hm-is-sticky {
    position: sticky;
    top: var(--sls-hm-sticky-offset, 0px);
    z-index: 30;
    background: var(--sls-hm-surface);
    padding-block: var(--sdb-space-sm, .75rem);
}

@media screen and (min-width: 783px) {
    body.admin-bar .sls-hm-shell.sls-hm-is-sticky {
        --sls-hm-sticky-offset: 32px;
    }
}

/* ---------------------------------------------------------------------------
 * 2. Nav container — the sdb-nav-strip root stays visually transparent
 * ------------------------------------------------------------------------ */

.sls-hm-wrapper {
    display: block;
    width: 100%;
    max-width: 100%;
}

.sls-hm-wrapper.sdb-nav-strip {
    background: transparent;
    border: 0;
    outline: 0;
}

.sls-hm-wrapper.sdb-nav-strip::before,
.sls-hm-wrapper.sdb-nav-strip::after {
    display: none;
    content: none;
}

/* ---------------------------------------------------------------------------
 * 3. List — structural reset (real specificity, themes must not win)
 * ------------------------------------------------------------------------ */

.sls-hm-shell .sls-hm-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.sls-hm-shell .sls-hm-menu > li {
    display: block;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sls-hm-shell .sls-hm-menu > li::before,
.sls-hm-shell .sls-hm-menu > li::marker {
    content: none;
}

:where(.sls-hm-shell .sls-hm-menu) {
    gap: var(--sls-hm-gap);
    row-gap: var(--sdb-space-sm, .75rem);
}

:where(.sls-hm-style-2 .sls-hm-menu) {
    gap: var(--sdb-nav-strip-gap, var(--sdb-space-md, 1.25rem));
}

.sls-hm-align-left .sls-hm-menu {
    justify-content: flex-start;
}

.sls-hm-align-center .sls-hm-menu {
    justify-content: center;
}

.sls-hm-align-right .sls-hm-menu {
    justify-content: flex-end;
}

/* ---------------------------------------------------------------------------
 * 4. Links — the Design System owns typography and colour
 * ------------------------------------------------------------------------ */

.sls-hm-shell .sls-hm-link {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-decoration: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
}

:where(.sls-hm-shell .sls-hm-link) {
    min-height: var(--sls-hm-touch-target);
    padding: var(--sdb-nav-strip-link-padding-y, .5rem) var(--sdb-nav-strip-link-padding-x, 0);
    color: var(--sls-hm-color);
    line-height: 1.35;
    white-space: nowrap;
    transition:
        color var(--sls-hm-duration-fast) var(--sls-hm-easing),
        background-color var(--sls-hm-duration-fast) var(--sls-hm-easing),
        border-color var(--sls-hm-duration-fast) var(--sls-hm-easing);
}

:where(.sls-hm-style-2 .sls-hm-link) {
    padding-inline: var(--sdb-space-sm, .75rem);
}

/* 44px is the touch minimum. With a real pointer the strip keeps the editorial
 * density it had before, still far above the WCAG 2.2 target minimum. */
@media (hover: hover) and (pointer: fine) {
    :where([data-sls-hm-mode="wrap"] .sls-hm-link) {
        min-height: 38px;
    }
}

/* Hover is only an affordance where a real pointer exists. Applying it on
 * touch produces sticky states that survive the tap. */
@media (hover: hover) and (pointer: fine) {
    :where(.sls-hm-shell .sls-hm-link:hover) {
        color: var(--sls-hm-color-active);
        border-bottom-color: currentColor;
    }
}

:where(.sls-hm-shell .sls-hm-link:focus-visible),
:where(.sls-hm-shell .sls-hm-menu > li.current-menu-item > .sls-hm-link),
:where(.sls-hm-shell .sls-hm-menu > li.current-menu-ancestor > .sls-hm-link),
:where(.sls-hm-shell .sls-hm-menu > li.current-menu-parent > .sls-hm-link),
:where(.sls-hm-shell .sls-hm-menu > li.current_page_item > .sls-hm-link),
:where(.sls-hm-shell .sls-hm-menu > li.current_page_ancestor > .sls-hm-link),
:where(.sls-hm-shell .sls-hm-menu > li.current_page_parent > .sls-hm-link),
:where(.sls-hm-shell .sls-hm-menu > li > .sdb-nav-strip__link--active),
:where(.sls-hm-shell .sls-hm-menu > li > [aria-current="page"]) {
    color: var(--sls-hm-color-active);
    border-bottom-color: currentColor;
}

.sls-hm-shell a:focus-visible,
.sls-hm-shell button:focus-visible {
    outline: 2px solid var(--sdb-color-secondary, currentColor);
    outline-offset: 2px;
    border-radius: var(--sdb-shape-xs, 4px);
}

:where(.sls-hm-shell .sls-menu-back > .sdb-nav-strip__link--muted) {
    color: var(--sls-hm-muted);
}

/* ---------------------------------------------------------------------------
 * 5. Plugin icons — sls-menu-home / sls-menu-back
 * ------------------------------------------------------------------------ */

.sls-hm-shell .sls-menu-back > .sls-hm-link::before,
.sls-hm-shell .sls-menu-home > .sls-hm-link::before {
    content: '';
    display: inline-flex;
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    line-height: 1;
    transition: transform var(--sls-hm-duration-fast) var(--sls-hm-easing);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.sls-hm-shell .sls-menu-back > .sls-hm-link::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 11H6.83l5.59-5.59L11 4 3 12l8 8 1.42-1.41L6.83 13H20v-2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 11H6.83l5.59-5.59L11 4 3 12l8 8 1.42-1.41L6.83 13H20v-2Z'/%3E%3C/svg%3E");
}

.sls-hm-shell .sls-menu-home > .sls-hm-link::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 11.5 12 4l9 7.5v8a1 1 0 0 1-1 1h-5.25a1 1 0 0 1-1-1v-4.75h-3.5v4.75a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-8Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 11.5 12 4l9 7.5v8a1 1 0 0 1-1 1h-5.25a1 1 0 0 1-1-1v-4.75h-3.5v4.75a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-8Z'/%3E%3C/svg%3E");
}

@media (hover: hover) and (pointer: fine) {
    .sls-hm-shell .sls-menu-back > .sls-hm-link:hover::before {
        transform: translateX(-2px);
    }

    .sls-hm-shell .sls-menu-home > .sls-hm-link:hover::before {
        transform: translateY(-1px);
    }
}

.sls-hm-shell .sls-menu-back > .sls-hm-link:focus-visible::before {
    transform: translateX(-2px);
}

.sls-hm-shell .sls-menu-home > .sls-hm-link:focus-visible::before {
    transform: translateY(-1px);
}

/* ---------------------------------------------------------------------------
 * 6. Disclosure toggle — a real button, injected by JS
 *
 * The parent link stays a link (always navigable, always shareable) and the
 * submenu is operated by a separate control. This is the WAI-ARIA disclosure
 * navigation pattern and removes the "first tap does not navigate" trap.
 * ------------------------------------------------------------------------ */

.sls-hm-shell .sls-hm-toggle {
    box-sizing: border-box;
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: var(--sls-hm-touch-target);
    min-height: var(--sls-hm-touch-target);
    margin: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.sls-hm-js .sls-hm-item > .sls-hm-toggle {
    display: inline-flex;
}

/* Without JS the caret is drawn on the link itself, so hover/focus-within
 * still communicates that a submenu exists. */
.sls-hm-shell:not(.sls-hm-js).sls-hm-has-dropdown .menu-item-has-children > .sls-hm-link::after,
.sls-hm-shell .sls-hm-toggle::after {
    content: '';
    display: inline-block;
    flex: 0 0 auto;
    width: .5rem;
    height: .5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--sls-hm-duration-fast) var(--sls-hm-easing);
}

.sls-hm-shell:not(.sls-hm-js).sls-hm-has-dropdown .menu-item-has-children > .sls-hm-link::after {
    margin-inline-start: .375rem;
}

.sls-hm-shell .sls-hm-toggle[aria-expanded="true"]::after {
    transform: translateY(1px) rotate(-135deg);
}

/* The toggle sits inline next to the link. The submenu is out of flow, so the
 * item can be a flex row without disturbing the dropdown. */
.sls-hm-js .sls-hm-menu > li.menu-item-has-children {
    display: flex;
    align-items: center;
}

.sls-hm-js .sls-hm-item > .sls-hm-toggle {
    min-width: 1.75rem;
    margin-inline-start: .125rem;
}

/* ---------------------------------------------------------------------------
 * 7. Mode: wrap — desktop default, anchored dropdowns
 * ------------------------------------------------------------------------ */

.sls-hm-shell:not(.sls-hm-js) .sls-hm-menu,
[data-sls-hm-mode="wrap"] .sls-hm-menu {
    flex-wrap: wrap;
    overflow: visible;
}

.sls-hm-shell .sls-hm-submenu {
    box-sizing: border-box;
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    z-index: 40;
    min-width: 240px;
    max-width: min(88vw, 22rem);
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: .375rem 0 0;
    padding: .375rem;
    background-color: var(--sls-hm-surface);
    border: 1px solid var(--sls-hm-border);
    border-radius: var(--sls-hm-radius);
    box-shadow: var(--sls-hm-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(.375rem);
    /* visibility flips instantly on open and only after the fade on close, so
     * a link inside a submenu that just opened can take focus right away. */
    transition:
        opacity var(--sls-hm-duration-exit) var(--sls-hm-easing),
        transform var(--sls-hm-duration-exit) var(--sls-hm-easing),
        visibility 0s linear var(--sls-hm-duration-exit);
}

.sls-hm-shell .sls-hm-submenu.sls-hm-submenu--flip {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

/* Without JS, hover and focus-within remain the only way in. */
.sls-hm-shell:not(.sls-hm-js) .menu-item-has-children:hover > .sls-hm-submenu,
.sls-hm-shell:not(.sls-hm-js) .menu-item-has-children:focus-within > .sls-hm-submenu,
.sls-hm-js .sls-hm-item.sls-hm-is-open > .sls-hm-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
        opacity var(--sls-hm-duration-enter) var(--sls-hm-easing),
        transform var(--sls-hm-duration-enter) var(--sls-hm-easing),
        visibility 0s linear 0s;
}

.sls-hm-shell:not(.sls-hm-js) .menu-item-has-children:hover > .sls-hm-link::after,
.sls-hm-shell:not(.sls-hm-js) .menu-item-has-children:focus-within > .sls-hm-link::after {
    transform: translateY(1px) rotate(-135deg);
}

.sls-hm-shell .sls-hm-submenu li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sls-hm-shell .sls-hm-submenu li::before,
.sls-hm-shell .sls-hm-submenu li::marker {
    content: none;
}

.sls-hm-shell .sls-hm-submenu-link {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: var(--sls-hm-touch-target);
    padding: .5rem .75rem;
    border: 0;
    border-radius: var(--sdb-shape-sm, 6px);
    text-decoration: none;
}

:where(.sls-hm-shell .sls-hm-submenu-link) {
    color: var(--sls-hm-color);
    background: transparent;
    line-height: 1.45;
    text-transform: none;
    transition:
        background-color var(--sls-hm-duration-fast) var(--sls-hm-easing),
        color var(--sls-hm-duration-fast) var(--sls-hm-easing);
}

@media (hover: hover) and (pointer: fine) {
    :where(.sls-hm-shell .sls-hm-submenu-link:hover) {
        background-color: var(--sls-hm-hover-bg);
        color: var(--sls-hm-color-active);
    }
}

:where(.sls-hm-shell .sls-hm-submenu-link:focus-visible) {
    background-color: var(--sls-hm-hover-bg);
    color: var(--sls-hm-color-active);
}

:where(.sls-hm-shell .sls-hm-submenu-link[aria-current="page"]) {
    background-color: var(--sls-hm-selected-bg);
    color: var(--sls-hm-color-active);
    font-weight: var(--sdb-font-weight-semibold, 600);
}

/* ---------------------------------------------------------------------------
 * 8. Mode: rail — one line, controlled horizontal scroll
 *
 * Consumes sdb-scroll-region (added by JS) and adds the affordances the
 * Design System asks for: never hide content without a visual clue.
 * ------------------------------------------------------------------------ */

.sls-hm-shell:not(.sls-hm-js)[data-sls-hm-style="3"][data-sls-hm-has-children="false"] .sls-hm-menu {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.sls-hm-shell:not(.sls-hm-js)[data-sls-hm-style="3"][data-sls-hm-has-children="false"] .sls-hm-menu > li {
    flex: 0 0 auto;
}

@media (max-width: 782px) {
    .sls-hm-shell:not(.sls-hm-js) .sls-hm-menu {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        gap: var(--sls-hm-gap-mobile);
    }

    .sls-hm-shell:not(.sls-hm-js) .sls-hm-menu > li {
        flex: 0 0 auto;
    }
}

[data-sls-hm-mode="rail"] .sls-hm-menu {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--sls-hm-fade);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-block: 2px 6px;
    gap: var(--sls-hm-gap-mobile);
    -webkit-mask-image: linear-gradient(
        var(--sls-hm-mask-direction),
        transparent 0,
        #000 var(--sls-hm-mask-start),
        #000 calc(100% - var(--sls-hm-mask-end)),
        transparent 100%
    );
    mask-image: linear-gradient(
        var(--sls-hm-mask-direction),
        transparent 0,
        #000 var(--sls-hm-mask-start),
        #000 calc(100% - var(--sls-hm-mask-end)),
        transparent 100%
    );
}

.sls-hm-shell .sls-hm-menu::-webkit-scrollbar {
    display: none;
}

[data-sls-hm-mode="rail"] .sls-hm-menu > li {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

[data-sls-hm-overflow="start"],
[data-sls-hm-overflow="both"] {
    --sls-hm-mask-start: var(--sls-hm-fade);
}

[data-sls-hm-overflow="end"],
[data-sls-hm-overflow="both"] {
    --sls-hm-mask-end: var(--sls-hm-fade);
}

/* Arrow controls are a pointer convenience only: keyboard users already reach
 * every item with Tab, so the buttons stay out of the tab order. */
.sls-hm-shell .sls-hm-scroll-control {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: inherit;
    background-color: var(--sls-hm-surface);
    border: 1px solid var(--sls-hm-border);
    border-radius: var(--sdb-radius-pill, 999px);
    box-shadow: var(--sdb-shadow-sm, 0 4px 14px rgba(16, 40, 70, .06));
    transform: translateY(-50%);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.sls-hm-shell .sls-hm-scroll-control--prev {
    inset-inline-start: -.5rem;
}

.sls-hm-shell .sls-hm-scroll-control--next {
    inset-inline-end: -.5rem;
}

.sls-hm-shell .sls-hm-scroll-control::after {
    content: '';
    width: .5rem;
    height: .5rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.sls-hm-shell .sls-hm-scroll-control--prev::after {
    transform: rotate(-135deg);
    margin-inline-start: 3px;
}

.sls-hm-shell .sls-hm-scroll-control--next::after {
    transform: rotate(45deg);
    margin-inline-end: 3px;
}

@media (hover: hover) and (pointer: fine) {
    [data-sls-hm-mode="rail"][data-sls-hm-overflow="start"] .sls-hm-scroll-control--prev,
    [data-sls-hm-mode="rail"][data-sls-hm-overflow="both"] .sls-hm-scroll-control--prev,
    [data-sls-hm-mode="rail"][data-sls-hm-overflow="end"] .sls-hm-scroll-control--next,
    [data-sls-hm-mode="rail"][data-sls-hm-overflow="both"] .sls-hm-scroll-control--next {
        display: inline-flex;
    }
}

/* In rail mode submenus would be clipped by the scroll container, so the
 * plugin never opens them there. Parent links keep navigating normally. */
[data-sls-hm-mode="rail"] .sls-hm-item > .sls-hm-toggle {
    display: none;
}

[data-sls-hm-mode="rail"] .sls-hm-submenu {
    display: none;
}

/* ---------------------------------------------------------------------------
 * 9. Mode: panel — mobile collapse into a named control
 *
 * The Design System asks contextual navigation on small screens to collapse
 * into a named control or a short horizontal rail. A menu with a second level
 * takes the named control: one tap reveals the whole tree, vertically, with
 * full-size targets and no clipped dropdowns.
 * ------------------------------------------------------------------------ */

.sls-hm-shell .sls-hm-trigger {
    box-sizing: border-box;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    min-height: var(--sls-hm-touch-target);
    margin: 0;
    padding: .5rem .875rem;
    color: inherit;
    text-align: start;
    background-color: var(--sls-hm-surface);
    border: 1px solid var(--sls-hm-border);
    border-radius: var(--sls-hm-radius);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

[data-sls-hm-mode="panel"] .sls-hm-trigger {
    display: flex;
}

.sls-hm-trigger__text {
    display: flex;
    flex-direction: column;
    gap: .0625rem;
    min-width: 0;
}

:where(.sls-hm-trigger__eyebrow) {
    color: var(--sls-hm-muted);
    font-size: .75em;
    line-height: 1.3;
}

:where(.sls-hm-trigger__current) {
    color: var(--sls-hm-color-active);
    font-weight: var(--sdb-font-weight-semibold, 600);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sls-hm-trigger__icon {
    flex: 0 0 auto;
    width: .5rem;
    height: .5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--sls-hm-duration-fast) var(--sls-hm-easing);
}

.sls-hm-trigger[aria-expanded="true"] .sls-hm-trigger__icon {
    transform: translateY(1px) rotate(-135deg);
}

[data-sls-hm-mode="panel"] .sls-hm-wrapper {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + .375rem);
    z-index: 40;
    box-sizing: border-box;
    max-height: min(70vh, 32rem);
    padding: .375rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--sls-hm-surface);
    border: 1px solid var(--sls-hm-border);
    border-radius: var(--sls-hm-radius);
    box-shadow: var(--sls-hm-shadow);
    opacity: 0;
    transform: translateY(-.25rem);
    transition:
        opacity var(--sls-hm-duration-exit) var(--sls-hm-easing),
        transform var(--sls-hm-duration-exit) var(--sls-hm-easing);
}

[data-sls-hm-mode="panel"] .sls-hm-wrapper.sls-hm-is-open {
    opacity: 1;
    transform: translateY(0);
    transition-duration: var(--sls-hm-duration-enter);
}

/* [hidden] must win over any theme rule that sets display on nav. */
[data-sls-hm-mode="panel"] .sls-hm-wrapper[hidden] {
    display: none;
}

[data-sls-hm-mode="panel"] .sls-hm-menu {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: .125rem;
    overflow: visible;
}

[data-sls-hm-mode="panel"] .sls-hm-menu > li,
[data-sls-hm-mode="panel"] .sls-hm-menu > li.menu-item-has-children {
    display: block;
    width: 100%;
}

[data-sls-hm-mode="panel"] .sls-hm-link,
[data-sls-hm-mode="panel"] .sls-hm-submenu-link {
    justify-content: flex-start;
    width: 100%;
    min-height: var(--sls-hm-touch-target);
    padding: .5rem .75rem;
    border-bottom: 0;
    border-inline-start: 3px solid transparent;
    border-radius: var(--sdb-shape-sm, 6px);
    white-space: normal;
}

[data-sls-hm-mode="panel"] .sls-hm-menu > li > .sls-hm-link[aria-current="page"],
[data-sls-hm-mode="panel"] .sls-hm-submenu-link[aria-current="page"] {
    border-inline-start-color: currentColor;
    background-color: var(--sls-hm-selected-bg);
}

[data-sls-hm-mode="panel"] .sls-hm-item > .sls-hm-toggle {
    display: none;
}

/* Second level stays expanded: on a section menu a nested tap costs more than
 * the vertical space it saves. */
[data-sls-hm-mode="panel"] .sls-hm-submenu {
    position: static;
    display: flex;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0 0 .25rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
}

[data-sls-hm-mode="panel"] .sls-hm-submenu-item > .sls-hm-submenu-link {
    padding-inline-start: 1.75rem;
    font-size: .95em;
}

/* A hairline only after a group that has children, so the panel reads as
 * sections instead of one undifferentiated list. */
[data-sls-hm-mode="panel"] .sls-hm-menu > li:has(> .sls-hm-submenu) + li {
    margin-block-start: .25rem;
    border-block-start: 1px solid var(--sls-hm-border);
    padding-block-start: .25rem;
}

[data-sls-hm-mode="panel"] .sls-hm-scroll-control {
    display: none;
}

/* ---------------------------------------------------------------------------
 * 10. Preference queries
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .sls-hm-shell *,
    .sls-hm-shell *::before,
    .sls-hm-shell *::after {
        transition-duration: 1ms !important;
        transition-delay: 0s !important;
        animation-duration: 1ms !important;
    }

    .sls-hm-shell .sls-hm-menu {
        scroll-behavior: auto;
    }
}

@media (forced-colors: active) {
    .sls-hm-shell .sls-hm-menu {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .sls-hm-shell .sls-hm-submenu,
    .sls-hm-shell .sls-hm-trigger,
    .sls-hm-shell .sls-hm-scroll-control,
    [data-sls-hm-mode="panel"] .sls-hm-wrapper {
        background-color: Canvas;
        border: 1px solid CanvasText;
    }

    .sls-hm-shell .sls-hm-link[aria-current="page"],
    .sls-hm-shell .sls-hm-submenu-link[aria-current="page"] {
        border-color: Highlight;
        color: Highlight;
    }

    .sls-hm-shell a:focus-visible,
    .sls-hm-shell button:focus-visible {
        outline: 2px solid CanvasText;
    }
}