#vb-menu-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 9998;
}
#vb-menu-overlay.visible {
    opacity: 1;
}
html {
  scrollbar-gutter: stable; 
}
body.menu-overlay-active {
    overflow: hidden;
}


#dynamic-menu {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100%;
    background: var(--bg);
    overflow-y: auto;
    /*box-shadow: -2px 0 5px rgba(0,0,0,0.2);*/
    box-shadow: 0 20px 40px rgba(0,0,0,.18);
    z-index: 9999;
    padding: 1em;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}
#dynamic-menu.open {
    right: 0;
}

/* Bredd desktop / mobil */
@media (min-width: 720px) {
    #dynamic-menu { 
        width: 491px;
        padding: 32px 32px; 
    }
}
@media (max-width: 719px) {
    #dynamic-menu { 
        width: 100%; 
        padding: 32px 16px;
    }
}


#dynamic-menu {   
}
#dynamic-menu li a {
    display: block;
}
#dynamic-menu a:focus-visible {
    outline: 2px solid var(--focus-ring-color);
    border-radius: 2px;
}    
#dynamic-menu ul {
    list-style: none;
    padding: 0;
    /*margin: 40px 0 0 0;*/
}
#dynamic-menu a { 
    text-decoration: none;
    color: var(--grey-dark); /* #121212 */
    font-family: var(--font-sans-2); /* Archivo */
    font-weight: var(--w-semibold); /*600*/
}
#dynamic-menu .menu-header a {
    font-size: var(--fs-body1); /*16px */
    line-height: var(--lh-body1); /*28px */
}

/* Header med back och close */
.menu-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: var(--space-64);
}
#dynamic-menu .menu-header .close-button {
    font-family: var(--font-sans-1); /* Roboto */
    font-weight: 500; /* Medium */
    text-decoration: underline;
}

.menu-header .back-button {
    font-family: var(--font-sans-1); /* Roboto */
    font-weight: 400; /* Regular */
    margin-right: auto; 
    position: relative; 
    padding-left: 28px;         
}
.menu-header .back-button[hidden] {
    display: none; 
}
.menu-header .back-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml;utf8,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M15.8333 10L4.16665 10' stroke='%23707070' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/><path d='M10 15.8333L4.16667 9.99998L10 4.16665' stroke='%23707070' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}


#main-menu li {
    padding: 6px 0
}

#main-menu a {
    font-size: var(--fs-h3); /*20px*/
    line-height: var(--lh-h3); /*30px*/      
    display: inline-block;
}


#main-menu li.secondary,
#dynamic-menu .submenu li {
  padding: 16px 0;
  border-top: none;
  margin-top: 32px;
}
#dynamic-menu .submenu li {
    margin-top: 16px;
}
#main-menu li.secondary ~ li.secondary,
#dynamic-menu .submenu li ~ li {
  border-top: 1px solid var(--grey-light); /*#e0e0e0*/
  margin-top: 0;
}
#main-menu li.secondary a,
#dynamic-menu .submenu li a {
    font-family: var(--font-sans-1); /* Roboto */
    font-weight: var(--w-regular); /*400*/
    font-size: var(--fs-body1);
    line-height: 24px
}
#main-menu li.has-children > a, 
#main-menu li.secondary > a {
    position: relative; 
    padding-right: 28px; 
}

#main-menu li.has-children > a::after, 
#main-menu li.secondary > a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;

    background-repeat: no-repeat;
    background-size: contain;

    background-image: url("data:image/svg+xml;utf8,<svg width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22><path d=%22M7.5 15L12.5 10L7.5 5%22 stroke=%22%23707070%22 stroke-width=%221.25%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/></svg>");
}

.submenu {}
.submenu[hidden] { display: none; }
.submenu p.subheader {
    font-family: var(--font-sans-2); /* Archivo */
    font-weight: var(--w-semibold); /*600*/
    font-size: var(--fs-h4); /*16px*/     
}

/* Dark Theme */
@media (prefers-color-scheme: dark) {
    #main-menu li.has-children > a::after, 
    #main-menu li.secondary > a::after {
        background-image: url("data:image/svg+xml;utf8,<svg width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22><path d=%22M7.5 15L12.5 10L7.5 5%22 stroke=%22%23A0A0A0%22 stroke-width=%221.25%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/></svg>");
    }
    .menu-header .back-button::before {
        background-image: url("data:image/svg+xml;utf8,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M15.8333 10L4.16665 10' stroke='%23A0A0A0' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/><path d='M10 15.8333L4.16667 9.99998L10 4.16665' stroke='%23A0A0A0' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    }
}