/* Mobile Menu
   The same file on every site. Plain CSS, no Tailwind needed.
   To theme a site, set these variables in the drawer's style attribute or on :root: see README.md.
   Sizes are in px because some sites set html { font-size: 62.5% }, which shrinks rem values. */
:where(:root) {
    --mobile-menu-bg: #1f2937;
    --mobile-menu-bg-opacity: 1;
    --mobile-menu-blur: 8px;
    --mobile-menu-text: #fff;
    /* Shades follow the text color, so they suit light and dark backgrounds */
    --mobile-menu-line: color-mix(in srgb, currentColor 12%, transparent);
    --mobile-menu-sub-bg: color-mix(in srgb, currentColor 8%, transparent);
    --mobile-menu-width: 320px;
    --mobile-menu-speed: .25s;
    --mobile-menu-home: none;
    --mobile-menu-logo-height: 64px;
    --mobile-menu-logo-filter: none;
}

/* Toggle: only sets what can't clash. Display, size and spacing stay with the site,
   because this file is unlayered and would otherwise override Tailwind's lg:hidden. */
.mobile-menu-toggle {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
}

/* Drawer */
.mobile-menu {
    --mobile-menu-offscreen: -100%;
    position: fixed;
    inset: 0 auto 0 0;
    flex-direction: column;
    width: min(var(--mobile-menu-width), 85vw);
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: none;
    backdrop-filter: blur(var(--mobile-menu-blur));
    color: var(--mobile-menu-text);
    box-shadow: 0 0 32px rgb(0 0 0 / .3);
    transform: translateX(var(--mobile-menu-offscreen));
    transition: transform var(--mobile-menu-speed) ease,
        display var(--mobile-menu-speed) allow-discrete,
        overlay var(--mobile-menu-speed) allow-discrete;
}

/* Separate layer, so opacity fades the background but not the menu's content */
.mobile-menu::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--mobile-menu-bg);
    opacity: var(--mobile-menu-bg-opacity);
}

.mobile-menu[data-side="right"] {
    --mobile-menu-offscreen: 100%;
    inset: 0 0 0 auto;
}

.mobile-menu[open] {
    display: flex;
    transform: none;
}

@starting-style {
    .mobile-menu[open] {
        transform: translateX(var(--mobile-menu-offscreen));
    }
}

.mobile-menu::backdrop {
    background: var(--mobile-menu-backdrop, rgb(0 0 0 / .4));
}

.mobile-menu,
.mobile-menu * {
    box-sizing: border-box;
}

/* Header and scroll area */
.mobile-menu-head {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 16px;
}

/* The height cap is on the slot, so size classes on the copied link or a wrapper can't stretch the head */
.mobile-menu .mobile-menu-logo {
    flex: 1;
    min-width: 0;
    max-height: var(--mobile-menu-logo-height);
    overflow: hidden;
    filter: var(--mobile-menu-logo-filter);
}

/* Resets the size and spacing classes the logo carries in the site header */
.mobile-menu .mobile-menu-logo a {
    display: block;
    width: auto;
    max-width: 192px;
    height: auto;
    margin: 0;
    color: inherit;
    text-decoration: none;
}

.mobile-menu .mobile-menu-logo img,
.mobile-menu .mobile-menu-logo svg {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: var(--mobile-menu-logo-height);
    margin: 0;
    filter: brightness(0) invert(1);
}

/* Buttons: a full reset, because sites often style every <button> */
.mobile-menu [data-mobile-menu-close],
.mobile-menu .mobile-menu-expand {
    all: unset;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: 44px;
    cursor: pointer;
}

.mobile-menu [data-mobile-menu-close] {
    flex: none;
    height: 44px;
    margin-left: auto;
    font-size: 28px;
    line-height: 1;
}

.mobile-menu-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    padding: 0 8px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: color-mix(in srgb, currentColor 20%, transparent) transparent;
}

/* Nav rows. li > span covers CMS pages, li > a covers shop category trees. */
.mobile-menu ul,
.mobile-menu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-menu li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}

/* One layer behind the whole row, so the divider, hover and current page shading
   are a single effect across the link and the expand button */
.mobile-menu li::before {
    content: "";
    position: static;
    grid-area: 1 / 1 / 2 / -1;
    border-bottom: 1px solid var(--mobile-menu-line);
}

.mobile-menu li > span {
    display: contents;
}

.mobile-menu .lc,
.mobile-menu .rc,
.mobile-menu .aw {
    display: none;
}

.mobile-menu li.default {
    display: var(--mobile-menu-home);
}

.mobile-menu li > a,
.mobile-menu li > span > a {
    display: flex;
    align-items: center;
    gap: 8px;
    grid-area: 1 / 1;
    min-height: 48px;
    padding: 8px;
    color: inherit;
    line-height: 1.25;
    text-decoration: none;
}

.mobile-menu a.selected {
    font-weight: 600;
}

.mobile-menu li:has(> a.selected, > span > a.selected)::before {
    background: var(--mobile-menu-sub-bg);
}

@media (hover: hover) {
    .mobile-menu li:has(> :not(ul):hover)::before {
        background: var(--mobile-menu-sub-bg);
    }

    .mobile-menu-expand:hover::before {
        background: color-mix(in srgb, currentColor 20%, transparent);
    }
}

.mobile-menu:focus {
    outline: 0;
}

.mobile-menu :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

/* Expand button */
.mobile-menu .mobile-menu-expand {
    grid-area: 1 / 2;
    align-self: stretch;
    min-height: 44px;
}

.mobile-menu-expand::before {
    content: "+";
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mobile-menu-sub-bg);
    font-family: monospace;
    font-size: 16px;
}

.mobile-menu-expand[aria-expanded="true"]::before {
    content: "\2212";
}

/* Submenus. The indent and shading build up on their own at every level. */
.mobile-menu ul ul {
    display: none;
    grid-column: 1 / -1;
    padding-left: 12px;
    background: var(--mobile-menu-sub-bg);
}

.mobile-menu .mobile-menu-expand[aria-expanded="true"] ~ ul {
    display: block;
}

/* Cloned extras such as phone and social */
.mobile-menu [data-mobile-menu-clone]:not(.mobile-menu-nav, .mobile-menu-logo) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-inline: 8px;

    /* Overrides hidden classes on the copies */
    > * {
        display: flex;
    }

    a:not(.button) {
        color: inherit;
    }

    svg {
        width: 20px;
        height: 20px;
    }

    /* In the head, a full-width row under the logo that stays put while the nav scrolls */
    .mobile-menu-head & {
        order: 1;
        flex-basis: 100%;
        padding-inline: 0;
    }
}

.mobile-menu [data-mobile-menu-clone]:empty {
    display: none;
}

/* Stop the page scrolling behind the open menu */
html:has(.mobile-menu[open]),
html:has(.mobile-menu[open]) body {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu {
        transition: none;
    }
}