/* QA - står som section vertical padding small men den är satt t 24px o variabeln är 80px på 1920 skärm och den är inte fokuserad */
header {
    padding: var(--gap-xl) var(--padding-section-horiz-s);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: transparent;
    transition: top .45s cubic-bezier(.4,0,.2,1), background-color .45s cubic-bezier(.4,0,.2,1);
    z-index: 5000;
    transition: top .45s cubic-bezier(.4,0,.2,1), background-color .45s cubic-bezier(.4,0,.2,1);
}

.header-show {
  background-color: white; /* fallback */
}

.header-show a, .header-show .header-logo {
    color:var(--brand-dark_blue) !important;
    fill:var(--brand-dark_blue) !important;
}

.header-show .hamburger-button:before, .header-show .hamburger-button:after {
    background-color: var(--brand-dark_blue) ;
}

.header-show .link-underlined-grow a:after {
    background: var(--brand-dark_blue);
}

header ul {
    display: flex;
    flex-direction: row;
/*     align-items: center;
    justify-content: center; */
    list-style: none;
    margin: 0;
    padding: 0;
    gap:var(--gap-xl);
}

header ul li {
    padding:0 var(--gap-s);
}

header ul a {
    font-family: 'Depot New Bold', sans-serif !important;
    font-weight:500 !important;
}

.header-nav-links {
    display:none;
}

.header-hidden {
    top: -6rem;
}

.divider-hamburger {
    
}

.header-darkmode, .header-darkmode svg, .header-darkmode a, .header-darkmode ul li {
    fill:var(--brand-white) !important;
    color:var(--brand-white) !important;
}

.header-darkmode button:before, .header-darkmode button:after {
    background-color: var(--brand-white) !important;
}




@media(min-width: 1020px) {
   .header-navbar {
        display: flex;
        flex-direction: row;
        gap: var(--gap-2xl);
    }

    .header-nav-links {
        display:flex;
    }
}

#hamburgerMenu-desktop {
    display:none;
    overflow: scroll;
}

@media(min-width: 1020px) {
    #hamburgerMenu-desktop {
        display:flex;
    }

    #hamburgerMenu-mobile {
        display:none;
    }

}

@media(max-width: 1020px) {
    .hamburgerMenu-secondary-menu-container {
        padding:var(--padding-section-vert-s);
    }
}

.header-navbar a {
    font-size: clamp(12px,.1877934272vw + .7059859155rem,14px)
}

@media(min-width: 1300px) {
    .header-navbar a {
        font-size:clamp(14px,.1785714286vw + .7142857143rem,16px)
    }
}

.hamburger-button {
    position: relative;
    border: 0;
    padding: 0;
    background-color: transparent;
    display: flex;
    align-items: center;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    cursor: pointer;
}


@media(min-width: 1440px) {
    .hamburger-button {
        margin-top:4px
    }
}

@media(min-width: 3000px) {
    .hamburger-button {
        margin-top:8px
    }
}

.hamburger-button:after,.hamburger-button:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    transition: transform .25s ease-in;
    background-color: var(--brand-dark_blue);
}

.header--dark .hamburger-button:after,.header--dark .hamburger-button:before {
    content: "";
    background-color: var(--brand-dark_blue);
}

.header--light .hamburger-button:after,.header--light .hamburger-button:before {
    content: "";
    background-color: #fff
}

.hamburger-button:before {
    transform: translateY(-4px)
}

.hamburger-button:after,.hamburger-button:hover:before {
    transform: translateY(4px)
}

.hamburger-button:hover:after {
    transform: translateY(-4px)
}


.link-underlined-grow a {
    position: relative;
    text-decoration: none;
    color: var(--brand-dark_blue);
}

.link-underlined-grow a:after {
    content: "";
    background: none repeat scroll 0 0 transparent;
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: var(--brand-dark_blue);;
    transition: width .3s ease 0s,left .3s ease 0s;
    width: 0
}

.link-underlined-grow a:hover:after {
    width: 100%;
    left: 0
}

.active-link-underlined a {
    position: relative;
    text-decoration: none;
    color: var(--brand-dark_blue);
}

.header-text {
    color:var(--brand-dark_blue);
}

.active-link-underlined a:after {
    content: "";
    background: none repeat scroll 0 0 transparent;
    display: block;
    height: 2px;
    left: 0;
    position: absolute;
    background: var(--brand-dark_blue);;
    transition: width .3s ease 0s,left .3s ease 0s;
    width: 100%
}

.text-link-hover a {
    color: inherit;
    text-decoration: none;
    transition: color .3s ease-out
}

.text-link-hover a:hover {
    color: #fdca29
}

.hamburgerMenu-links {
    display:flex;
    flex-direction: row;
    position: relative;
    display: flex;
    justify-content: space-between;
}

#hamburgerMenu-mobile {
    gap:var(--margin-s);
    width:100dvw;
}

@media (max-width: 767px) {
  #hamburgerMenu-mobile {
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* for smoother scrolling on iOS */
  }
}

.hamburgerMenu-sub-menu {
    display:flex;
    flex-direction: column;
    gap:var(--gap-xl);
    gap:var(--gap-m);
}

@media(max-width: 1020px) {
    .hamburgerMenu-sub-menu {
        padding:0 var(--padding-xl);
        padding-bottom:var(--padding-xl);
    }

    .hamburgerMenu-links {
        justify-content: space-between;
        align-items: center;
    }

    .hamburgerMenu-large-links {
        justify-content: space-between;
        padding:var(--padding-xl);
        gap: var(--gap-xl);
        align-items: center;
        border-bottom:1px solid var(--gray-10);
        display:flex;
    }

    /* Highlight the active main mobile link container */
    .hamburgerMenu-large-links.active {
        background-color: var(--gray-10);
        border-bottom: none !important;
    }

    .hamburgerMenu-mobile-secondary {
        background-color: var(--gray-10);
    }

}

.hamburgerMenu-mobile-main-link {
    width:100%;
}

.hamburgerMenu-links:hover {
    cursor: pointer;
}

.hamburgerMenu-link {
    font-family: "Depot New Bold", sans-serif !important;
    font-weight:300;
    line-height:1;
}
    
.hamburgerMenu-text-xlarge .hamburgerMenu-link {
    font-size: clamp(26px,.5633802817vw + 1.4929577465rem,32px);
}

.hamburgerMenu-text-medium .hamburgerMenu-link {
    font-size: clamp(18px,.1877934272vw + 1.0809859155rem,20px);
}

.hamburgerMenu-text-large .hamburgerMenu-link {
    font-size: clamp(20px,.5633802817vw + 1.1179577465rem,26px);
}

.hamburgerMenu-text-small .hamburgerMenu-link {
    font-size: clamp(20px,.1877934272vw + 1.2059859155rem,22px);
}

.hamburgerMenu-text-xsmall .hamburgerMenu-link {
    font-size: clamp(18px,.1877934272vw + 1.0809859155rem,20px);
}

.hamburgerMenu-text-small  {
    line-height:1;
}

@media(min-width: 1440px) {
    .hamburgerMenu-text-xlarge .hamburgerMenu-link {
        font-size:clamp(32px,1.0714285714vw + 1.0357142857rem,44px)
    }
}


.hamburgerMenu-close-button {
    position: absolute;
    top: 28px;
    right: 32px;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
}

.hamburgerMenu-mobile-close-button {
    padding-right:0;
}

/* Overlay background */
.hamburgerMenu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 4999;
}

/* The menu itself */
.hamburgerMenu-container {
  position: fixed;
  top: 0;
  right: -104%;
  /* width: 100%;  */
  height: 100%;
  background-color: white;
  transition: right 0.5s ease;
  z-index: 5000;
  display: flex;
  flex-direction: row;
}

@media(min-width: 767px) {
    .hamburgerMenu-container {
        right:-102%;
    }
}

@media(max-width: 1020px) {
    .hamburgerMenu-container {
        flex-direction: column;
    }
}

.hamburgerMenu-secondary-menu {
    width:0;
    transition: width .5s ease;
    min-height: 100%;
    background-color: var(--brand-gray);
}

/* When menu is active */
body.hamburger-open .hamburgerMenu-overlay {
  opacity: 1;
  visibility: visible;
}

body.hamburger-open .hamburgerMenu-container {
  right: 0;
  transition: right 0.4s ease;
}

.hamburgerMenu-secondary-wrapper {
    /* Keep your existing styles */
    flex-direction: column;
    
    /* Add these new properties */
    width: 500px; /* Fixed width to prevent text stretching */
    min-width: 500px; /* Ensure it never goes below this width */
    flex-shrink: 0; /* Prevent it from shrinking during animation */
    background-color: var(--brand-gray);
}

@media(max-width: 1024px) {
    .hamburgerMenu-secondary-wrapper {
        min-width: 380px;
    }
}


@media(min-width: 1024px) {
    .hamburgerMenu-wrapper {
       /*  padding: var(--padding-section-horiz-l) var(--padding-section-horiz-m);
        padding:var(--padding-section-horiz-m); */

        display:flex;
        flex-direction: column;
    }

    .hamburgerMenu-secondary-wrapper {
        /* display:none; */
        padding: var(--padding-section-horiz-l) var(--padding-section-horiz-m);
        padding:var(--padding-section-horiz-m);
        background
        flex-direction: column;
        /* display:none; */
    }
}


.hamburgerMenu-secondary-small-title {
    margin-bottom:var(--gap-s);
    margin-top:var(--padding-xl);
    font-size:16px;
}

.hamburgerMenu-icon {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    line-height: 0;
    pointer-events: none;
}

.hamburgerMenu-secondary-link {
    line-height:1;
}

@media(min-width: 1024px) {
    /* Hover animations */
    .hamburgerMenu-links:hover .hamburgerMenu-link {
        transition: padding .4s ease-out;
        padding-left:var(--padding-transition-left-l);
    }

    .hamburgerMenu-button-icon {
        transform: translate(-100%, 100%);
        transition: transform 0.4s ease-in-out;
    }

    .hamburgerMenu-links:hover .hamburgerMenu-button-icon {
        transform: translate(0, 0);
    }

    .hamburgerMenu-links:hover .hamburgerMenu-sub-link {
        transition: padding .4s ease-out;
        padding-left:var(--padding-transition-left-s);
    }

    .hamburgerMenu-links:hover .hamburgerMenu-secondary-link {
        transition: padding .4s ease-out;
        padding-left:var(--padding-transition-left-m);
    }

    .hamburgerMenu-secondary-small-title {
        margin-top:var(--gap-2xl);
        margin-bottom:var(--gap-m);
    }
}

/* Reverse animations when not hovering */
/* .hamburgerMenu-links:not(:hover) .hamburgerMenu-link{
    transition: padding .6s ease-in-out;
    padding-left:0px;

} */

.hamburgerMenu-link {
    transition: padding .6s ease-in-out;
    padding-left:0;
}

.hamburgerMenu-link-move-xsmall {
    padding-left: 26px
}


.hamburgerMenu-size {
    width: 380px
}

@media(min-width: 1020px) {
    .hamburgerMenu-size {
        width:500px;
    }

    .hamburgerMenu-text-xlarge:last-child {
        margin-bottom:0;
    }

    .hamburgerMenu-text-xlarge:last-of-type {
        margin-bottom:0;
    }

    .hamburgerMenu-wrapper > .hamburgerMenu-text-xlarge:last-of-type {
        margin-bottom: 0;
    }

    .hamburgerMenu-wrapper > .hamburgerMenu-text-xlarge:last-child {
        margin-bottom: 0;
    }
}

.icon-square {
    margin-top:30%;
    font-size:24px;
}





.icon-medium.icon-minus svg {
    display: none;
}


.icon-medium.icon-minus::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23102228' stroke='%23102228' d='M4.333 9.667h11.334a.333.333 0 1 1 0 .667H4.333a.333.333 0 1 1 0-.667Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.popoverMenu-link {
    margin-bottom:var(--gap-m);
}


@media(min-width: 768px) {
   .hamburgerMenu-text-xlarge {
        line-height:1;
        margin-bottom:var(--header-popover-big-text-margin);
    }

    .popoverMenu-link {
        margin-bottom:var(--gap-2xl);
    }
}

@media(min-width: 768px) {
    .popover-menu-padding {
        padding:80px
    }
}

@media(min-width: 1024px) {
    .popover-menu-padding {
        padding:80px 90px
    }
}

@media(min-width: 1280px) {
    .popover-menu-padding {
        padding:88px 100px
    }
}

@media(min-width: 1440px) {
    .popover-menu-padding {
        padding:112px 120px
    }
}

@media(min-width: 1680px) {
    .popover-menu-padding {
        padding:140px
    }
}

@media(min-width: 1920px) {
    .popover-menu-padding {
        padding:160px 140px
    }
}

@media(min-width: 768px) {
    .popover-secondary-menu-padding {
        padding:80px
    }
}

@media(min-width: 1280px) {
    .popover-secondary-menu-padding {
        padding:88px 80px
    }
}

@media(min-width: 1440px) {
    .popover-secondary-menu-padding {
        padding:112px 80px
    }
}

@media(min-width: 1680px) {
    .popover-secondary-menu-padding {
        padding:140px 80px
    }
}

@media(min-width: 1920px) {
    .popover-secondary-menu-padding {
        padding:160px 80px
    }
}