/**
 * MS Side Menu
 *
 * Desktop:
 * - Permanent sidebar beside the main page content.
 * - Sticky relative to the viewport.
 * - Its navigation area scrolls when the menu is too tall.
 *
 * Mobile:
 * - Custom slide-in drawer.
 * - No mmenu or Bootstrap JavaScript dependency.
 *
 * Theme values may be overridden through the component variables below.
 */


/* ==================================================
   Suggested page layout
   ================================================== */

/**
 * Apply this class to the wrapper containing:
 *
 * 1. The MS side-menu component.
 * 2. The page's <main> element.
 */
.ms-page-with-side-menu {
    --ms-side-menu-width: 375px;
    --ms-side-menu-top: 0px;

    display: grid;
    grid-template-columns:
        var(--ms-side-menu-width)
        minmax(0, 1fr);

    align-items: stretch;

    min-height:
            calc(
                    100dvh -
                    var(--ms-side-menu-top)
            );
}

/**
 * Prevent wide content from forcing the main grid column beyond the
 * available viewport width.
 */
.ms-page-with-side-menu__main {
    min-width: 0;
}


/* ==================================================
   Component configuration
   ================================================== */

.ms-side-menu-component {
    /**
     * Desktop and mobile widths.
     */
    --ms-side-menu-width: 375px;
    --ms-side-menu-mobile-width: min(375px, 88vw);

    /**
     * Height of a sticky site header.
     *
     * Override this value in the main theme stylesheet when necessary.
     */
    --ms-side-menu-top: 0px;

    /**
     * Brand colors.
     */
    --ms-side-menu-background:
            var(--ms-skog-2-60, #91967b);

    --ms-side-menu-text:
            var(--ms-skog-1-100, #444e36);

    --ms-side-menu-active:
            #ffffff;

    --ms-side-menu-hover:
            rgba(255, 255, 255, 0.12);

    --ms-side-menu-focus:
            rgba(255, 255, 255, 0.45);

    position: relative;

    width: var(--ms-side-menu-width);
    min-height: 100%;

    align-self: stretch;

    background-color:
            var(--ms-side-menu-background);
}


/* ==================================================
   Desktop sidebar
   ================================================== */

.ms-side-menu__panel {
    position: sticky;
    top: var(--ms-side-menu-top);

    width: 100%;
    height:
            calc(
                    100dvh -
                    var(--ms-side-menu-top)
            );

    display: flex;
    flex-direction: column;

    color: var(--ms-side-menu-text);
    background-color:
            var(--ms-side-menu-background);

    outline: 0;
    padding: 3.5em 0;
}

/**
 * The drawer header is needed only on mobile.
 */
.ms-side-menu__mobile-header {
    display: none;
}

/**
 * This section receives its own scrollbar when the menu is taller than
 * the available viewport height.
 */
.ms-side-menu__scroll {
    min-height: 0;
    flex: 1 1 auto;

    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}


/* ==================================================
   Menu-list reset
   ================================================== */

.ms-side-menu__list,
.ms-side-menu__submenu {
    margin: 0;
    padding: 0;

    list-style: none;
}

/**
 * JavaScript and the initial PHP output control this attribute.
 */
.ms-side-menu__submenu[hidden] {
    display: none;
}


/* ==================================================
   Individual menu item
   ================================================== */

.ms-side-menu__item {
    margin: 0;
    padding: 0;
}

/**
 * A parent row has two distinct interactive areas:
 *
 * 1. The page link.
 * 2. The submenu-toggle button.
 *
 * An item without children has only the first column.
 */
.ms-side-menu__row {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: stretch;
}


/* ==================================================
   Page links
   ================================================== */

.ms-side-menu__link {
    position: relative;

    min-height: 44px;

    display: flex;
    align-items: center;

    /**
     * Indentation increases according to the menu depth supplied by PHP.
     */
    padding:
            0.65rem
            0.35rem
            0.65rem
            calc(3rem + var(--ms-side-menu-indent));
    color: var(--ms-side-menu-text);
    font-size: 1em;
    line-height: 1.7;
    text-decoration: none;
    transition:
            color 160ms ease,
            background-color 160ms ease;
}

@media (max-width: 768px) {
    .ms-side-menu__link {
        padding:
                0.65rem
                0.35rem
                0.65rem
                calc(1.5rem + var(--ms-side-menu-indent));
    }
}
/**
 * Nested items receive a small leading arrow to reinforce hierarchy.
 *
 * This arrow is decorative and is not the submenu control.
 */
.ms-side-menu__item:not(
    .ms-side-menu__item--depth-0
) > .ms-side-menu__row > .ms-side-menu__link::before {
    content: "›";
    position: absolute;
    left:
            calc(1rem + var(--ms-side-menu-indent));
    line-height: 1;
}


.ms-side-menu__item:is(
    .ms-side-menu__item--depth-2
) > .ms-side-menu__row > .ms-side-menu__link::before {
    content: "››";
}

@media (max-width: 768px) {
    .ms-side-menu__item:not(.ms-side-menu__item--depth-0) > .ms-side-menu__row > .ms-side-menu__link::before {
        content: "›";
        position: absolute;
        left: calc( 0.25rem + var(--ms-side-menu-indent) );
        line-height: 1;
    }
}

/**
 * Only the link portion changes when the link is hovered.
 *
 * The right-side toggle remains a separate control.
 */
.ms-side-menu__link:hover {
    color: var(--ms-side-menu-active);
    background-color: var(--ms-side-menu-hover);
}

.ms-side-menu__link:focus {
    outline: 0;
}

.ms-side-menu__link:focus-visible {
    color: var(--ms-side-menu-active);
    background-color: var(--ms-side-menu-hover);

    box-shadow:
            inset 0 0 0 2px
            var(--ms-side-menu-focus);
}


/* ==================================================
   Current navigation path
   ================================================== */

/**
 * Parents and ancestors of the current page form the current path.
 *
 * They receive a lighter emphasis than the exact current page.
 */
.current-menu-parent
> .ms-side-menu__row
> .ms-side-menu__link,

.current-menu-ancestor
> .ms-side-menu__row
> .ms-side-menu__link,

.current_page_parent
> .ms-side-menu__row
> .ms-side-menu__link,

.current_page_ancestor
> .ms-side-menu__row
> .ms-side-menu__link {
    color: var(--ms-side-menu-active);
    font-weight: 500;
}

/**
 * The exact current page receives the strongest emphasis.
 */
.current-menu-item
> .ms-side-menu__row
> .ms-side-menu__link,

.current_page_item
> .ms-side-menu__row
> .ms-side-menu__link {
    color: var(--ms-side-menu-active);
    font-weight: 400;
}


/* ==================================================
   Submenu-toggle button
   ================================================== */

/**
 * This is a separate action from the page link.
 *
 * It has a minimum 88px target area for comfortable pointer and touch use.
 */
.ms-side-menu__toggle {
    width: 88px;
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    color: inherit;
    background: transparent;
    border: 0;

    cursor: pointer;

    transition:
            color 160ms ease,
            background-color 160ms ease;
}

.ms-side-menu__toggle:hover {
    color: var(--ms-side-menu-active);
    background-color: var(--ms-side-menu-hover);
}
.ms-is-open .ms-side-menu__toggle[aria-expanded="true"] {
    color: var(--ms-side-menu-active);
}
.ms-current-path-ancestor
> .ms-side-menu__row
> .ms-side-menu__link {
    color: var(--ms-side-menu-active);
    font-weight: 500;
}
.ms-side-menu__toggle:focus {
    outline: 0;
}

.ms-side-menu__toggle:focus-visible {
    color: var(--ms-side-menu-active);

    box-shadow:
            inset 0 0 0 2px
            var(--ms-side-menu-focus);
}

@media (max-width: 768px) {
    .ms-side-menu__toggle {
        width: 48px;
        min-height: 48px;

    }
}
/**
 * A right-facing chevron means the submenu is closed.
 * A downward-facing chevron means it is open.
 */
.ms-side-menu__chevron {
    transition: transform 180ms ease;
}

.ms-side-menu__toggle[aria-expanded="true"]
.ms-side-menu__chevron {
    transform: rotate(90deg);
}


/* ==================================================
   Mobile menu-open button
   ================================================== */

/**
 * Hidden on desktop and displayed below the mobile breakpoint.
 */
.ms-side-menu__open {
    display: none;

    min-height: 48px;
    align-items: center;
    gap: 0.65rem;

    padding: 0.65rem 1rem;

    color: var(--bs-body-color, #333333);
    background-color:
            var(--bs-body-bg, #ffffff);

    border:
            var(--bs-border-width, 1px)
            solid
            var(--bs-border-color, #dee2e6);

    border-radius:
            var(--bs-border-radius, 0.375rem);

    cursor: pointer;
}

.ms-side-menu__open:focus {
    outline: 0;
}

@media (max-width: 768px) {
    .ms-side-menu__open {
        padding: 0;
        background-color: transparent;
        border: 0;
        outline: none;
        box-shadow: none;
    }
    .ms-side-menu__open svg {
        width: 32px;
        height: 32px;
    }
    .ms-side-menu__open svg path {
        stroke-width: 1.5px;
        stroke: #38484e;
    }
    .ms-side-menu__open:hover svg path {
        stroke: #ca4d37;
    }

}
/**
 * Avoid a persistent pointer-focus effect.
 */
.ms-side-menu__open:focus:not(:focus-visible) {
    box-shadow: none;
}

.ms-side-menu__open:focus-visible {
    box-shadow:
            0 0 0 0.25rem
            rgba(145, 150, 123, 0.35);
}


/* ==================================================
   Mobile backdrop
   ================================================== */

.ms-side-menu__backdrop {
    display: none;
}

.ms-side-menu__backdrop[hidden] {
    display: none;
}


/* ==================================================
   Mobile drawer
   ================================================== */

@media (max-width: 768px) {
    /**
     * The side menu no longer occupies a permanent grid column.
     */
    .ms-page-with-side-menu {
        display: block;
    }

    .ms-side-menu-component {
        width: auto;
        min-height: 0;

        align-self: auto;

        background: transparent;
    }

    .ms-side-menu__open {
        display: inline-flex;
    }

    /**
     * Off-screen drawer.
     *
     * visibility:hidden prevents interaction while the drawer is closed.
     */
    .ms-side-menu__panel {
        position: fixed;

        top: 0;
        bottom: 0;
        left: 0;

        z-index: 1060;

        width: var(--ms-side-menu-mobile-width);
        height: 100dvh;

        overflow: hidden;

        visibility: hidden;

        transform: translateX(-100%);

        box-shadow:
                0.75rem 0 2rem
                rgba(0, 0, 0, 0.24);

        transition:
                transform 240ms ease,
                visibility 240ms ease;
    }

    /**
     * JavaScript adds ms-is-open to the component wrapper.
     */
    .ms-side-menu-component.ms-is-open
    .ms-side-menu__panel {
        visibility: visible;
        transform: translateX(0);
    }
   .admin-bar .ms-side-menu-component.ms-is-open
    .ms-side-menu__panel {
        top: 46px;
    }

    /**
     * The mobile header remains visible while the menu content scrolls.
     */
    .ms-side-menu__mobile-header {
        min-height: 64px;

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;

        flex: 0 0 auto;

        padding: 0.75rem 1rem;

        color: var(--ms-side-menu-active);

        border-bottom:
                1px solid
                rgba(255, 255, 255, 0.18);
    }

    .ms-side-menu__mobile-title {
        font-size: 1.125rem;
        font-weight: 400;
    }

    .ms-side-menu__close {
        width: 44px;
        height: 44px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        padding: 0;

        color: inherit;
        background: transparent;
        border: 0;
        border-radius: 50%;

        cursor: pointer;
    }

    .ms-side-menu__close:hover {
        background-color:
                var(--ms-side-menu-hover);
    }

    .ms-side-menu__close:focus {
        outline: 0;
    }

    .ms-side-menu__close:focus:not(:focus-visible) {
        box-shadow: none;
    }

    .ms-side-menu__close:focus-visible {
        box-shadow:
                0 0 0 0.2rem
                var(--ms-side-menu-focus);
    }

    /**
     * Only the navigation content scrolls.
     */
    .ms-side-menu__scroll {
        min-height: 0;
        flex: 1 1 auto;

        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    /**
     * Full-page mobile backdrop.
     */
    .ms-side-menu__backdrop {
        position: fixed;
        inset: 0;

        z-index: 1050;

        display: block;

        background-color:
                rgba(48, 46, 47, 0.62);
    }

    .ms-side-menu__panel {
        padding: .5em 0;
    }
}
@media (max-width: 375px) {
    .ms-side-menu-component.ms-is-open .ms-side-menu__panel {
        width: 100%;
    }
}

/* ==================================================
   Page scroll lock
   ================================================== */

/**
 * Added by JavaScript while the mobile drawer is open.
 */
body.ms-side-menu-open {
    overflow: hidden;
}


/* ==================================================
   Reduced-motion preference
   ================================================== */

@media (prefers-reduced-motion: reduce) {
    .ms-side-menu__panel,
    .ms-side-menu__chevron,
    .ms-side-menu__link,
    .ms-side-menu__toggle {
        transition: none;
    }
}


/**
 * Side-menu scrollbar
 */
.ms-side-menu__panel {
    scrollbar-width: thin;
    scrollbar-color:
            rgba(255, 255, 255, 0.45)
            transparent;
}


/**
 * Chrome, Edge and Safari
 */
.ms-side-menu__panel::-webkit-scrollbar {
    width: 8px;
}


.ms-side-menu__panel::-webkit-scrollbar-track {
    background: transparent;
}


.ms-side-menu__panel::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.38);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}


.ms-side-menu__panel::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.58);
}