/*---------- MENY -------------*/
.menu, .menu-main-container {margin: 0;}
.menyn {display: flex; align-items: center; z-index: 9;}
.menu-main-container {display: flex; width: 100%;}
.menu {display: flex; flex-wrap: wrap; padding: 0;}
.menu .member a {display: flex; align-items: center; justify-content: center;}
.menu li, .far-right, .admin-menu li {align-items: center; box-sizing: border-box; display: flex; list-style-type: none;}
.admin-menu {padding: 0;}
.menu > li > a {padding: 0 10px; white-space: nowrap; width: 100%;}
.menyn .wp-block-site-logo, .far-right {display: flex; align-items: center; justify-content: center; padding: 0 10px; margin: 0;}
.menyn .member > a > svg {height: 24px!important; width: 24px!important;}
.menyn li a, .menu-content .contact-us {transition: background 0.6s, color 0.4s;}

.menu-item-has-children:not(:hover) > .sub-menu, 
.menu-item-has-children .menu-item-has-children:not(:hover) > .sub-menu {pointer-events: auto; transition-delay: 0.7s;}

/*---------- MENY - pil vid submeny -------------*/
.menu-item-has-children {flex-direction: row; position: relative;}
.menu-item-has-children > a:after {content: '▸'; padding-left: 4px; display: inline-block; width: 8px;}
.menu-main-container .menu-item-has-children:hover > a:after {content: '▾'; }

/*---------- SUBMENY -------------*/
.menu-main-container .menu-item-has-children .sub-menu {align-items: flex-start; display: flex; flex-direction: column; overflow:hidden; padding: 0; position: absolute; visibility: hidden; box-shadow: 0px 0px 5px currentColor; min-width: 100%;}
.menu-main-container .menu-item-has-children li {width: 100%;}
.menu .sub-menu li a {padding: 8px; width: inherit; line-height: 1.1;}
.menu .sub-menu li svg {height: 30px; width: 30x; padding: 2px auto;}
.menu .sub-menu a span {position: absolute; left: 100%; white-space: nowrap; height: 46px; display: flex; align-items: center; box-sizing: border-box; padding-right: 12px;}
.member .sub-menu a span {white-space: nowrap; opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.4s ease; padding: 8px 4px;}
.member .sub-menu a:hover span {opacity: 1; transform: translateY(0);}
.admin-sub-menu {top:0!important; left: 100%!important;}


/*---------- MENY - Submenu Utfallande åt höger eller vänster -------------*/
.RIGHT .sub-menu {right: 0;}
.LEFT .sub-menu {left: 0;}

/*---------- SUBMENY - snabb återställning av animation -------------*/
.menu-item-has-children:not(:hover) > .sub-menu, .menu-item-has-children .menu-item-has-children:not(:hover) > .sub-menu {transition: all 200ms;}

/*---------- RIGHT-ikon -----------*/
.far-right {z-index: 10;}
.contact-headline {white-space: nowrap;}


/*---------- MOBIL MENU hamburger-streck -----------*/
.checkbox, .hamburger-lines {position: absolute; top: 50%; transform: translateY(-50%); margin: 0;}
.checkbox {display: block; height: 36px; width: 36px; right: 6px; z-index: 5; opacity: 0; cursor: pointer;}

.hamburger-lines {display: none; height: 26px; width: 32px; right: 10px; z-index: 2; flex-direction: column; justify-content: space-between;}

.hamburger-lines .line {display: block; height: 4px; width: 100%; border-radius: 10px;}
.hamburger-lines .line1 {transform-origin: 0% 0%; transition: transform 0.4s ease-in-out;}
.hamburger-lines .line2 {transition: transform 0.2s ease-in-out;}
.hamburger-lines .line3 {transform-origin: 0% 100%; transition: transform 0.4s ease-in-out;}

input[type='checkbox']:checked ~ .menu-main-container {pointer-events: auto; right: 0; opacity: 1; transition: right 0.5s ease-in, opacity 0.5s ease-in;}

input[type='checkbox']:checked ~ .menu-main-container .menu .sub-menu {width: unset;}


input[type='checkbox']:checked ~ .hamburger-lines .line1 {transform: rotate(45deg);}
input[type='checkbox']:checked ~ .hamburger-lines .line2 {transform: scaleY(0);}
input[type='checkbox']:checked ~ .hamburger-lines .line3 {transform: rotate(-45deg);}

.menyn {height: 110px!important; }
.menu-main-container > ul > li > .sub-menu .sub-menu { top: 44px; }
.menudist { margin-top: 110px !important; }
.menudist-plus { margin-top: calc(110px + 3vh) !important;}

html { scroll-behavior: smooth; scroll-padding-top: 120px; }
.menu > li > a { line-height: 110px; }
.admin-menu > li > a { display: flex; align-items: center; height: 110px; }
.menyn li > .sub-menu { top: 110px; }
.menu > li svg, .admin-menu li svg { width: clamp(26px, 88px, 36px); height: clamp(26px, 88px, 36px); }
.wp-block-site-logo, .far-right, .main-item { height: 110px; }
.menyn.scroll-menu { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: transform 0.3s ease; will-change: transform; } .menyn.scroll-menu.hidden { transform: translateY(-100%); }
.menu-main-container {justify-content: flex-end; }
.menyn .wp-block-site-logo img {width: 40px; height: auto!important;}
main { margin-top: 0px; }

.menyn, .sub-menu a, .menyn .sub-menu span {background: color-mix(in srgb, var(--wp--preset--color--light-1) 100%, transparent); color: var(--wp--preset--color--dark-2); }
.hamburger-lines .line { background: var(--wp--preset--color--dark-2); }
.menyn li a:hover, .menyn li span:hover, .menu-content .contact-us:hover {background: var(--wp--preset--color--dark-2); color: var(--wp--preset--color--light-1); }

@media screen and (max-width: 955px) {

.menyn, .main-item, .far-right, .admin-menu > li > a {height: 65px!important; width: auto;}


.menu-item-has-children > a::after, .menu-main-container .menu-item-has-children:hover > a:after {content: none;}
.menu-main-container .menu-item-has-children > a::before {content: '◂'; padding-right: 8px;}
.menu .member a {padding: 0;}
.menudist {margin-top: 65px!important;}
.menudist-plus { margin-top: calc(65px + 2vh) !important; }
.menyn li > .sub-menu {top: 65px;}
.menu > li > a {line-height: 34px;}
.menu-main-container li a {padding: 8px!important;}
.menyn .wp-block-site-logo img {height: 40px!important; width: auto;}

.menu-main-container .sub-menu li a {padding: 0 10px;}
.menu-main-container .member-link a {padding: 10px!important;}

.menu-main-container {pointer-events: none;}
.menu-main-container .menu-item-has-children .sub-menu {left: unset;}
.menu .sub-menu a span {left: unset; right: 100%;}


.LEFT .sub-menu {left: unset!important;}
.far-right {position: absolute; right: 50px;}
.hamburger-lines {display: flex!important;}
.menu {align-items: flex-start; flex-direction: column; min-width: 150px;}
.menu-main-container {position: absolute; background: inherit; left: unset; right: -120px; opacity: 0; top: 65px; width: unset!important;}
.menu li {align-items: flex-start; width: 100%;}
.menu-item-has-children > a:after {position: unset!important; padding-left: 6px; width: 10px;}
.menu-item-has-children {flex-direction: column;}
.menu .sub-menu {right: 100% !important;}
.menu > li > .sub-menu {top: 0px!important;}
}

@media screen and (min-width: 956px) {
.menu-main-container {position: relative!important; right: 0!important; opacity: 1!important; pointer-events: auto!important;}
.checkbox:checked ~ .menu-main-container {position: relative!important;}
.far-right {position: relative!important; right: auto!important;}
}


/*---------- SUBMENY ANIMATION fade-in-up -------------*/
.menu-item-has-children .sub-menu {margin-top: 60px; left:0; opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.5s ease;}
.menu-item-has-children:hover > .sub-menu, .menu-item-has-children .menu-item-has-children:hover > .sub-menu {margin-top: 0; opacity: 1; overflow: visible; visibility: visible; pointer-events: auto;}