/* === Mobilmeny-knapp === */
nav[aria-label="Mobilmeny"] {
   position: absolute;
   left: 1rem;
   top: 5px;
}

nav[aria-label="Mobilmeny"] .gre-header-select {
   margin-top: 1rem;
   padding: 0.5rem;
}

nav[aria-label="Mobilmeny"] > .env-button,
nav[aria-label="Mobilmeny"] > .env-button:hover,
nav[aria-label="Mobilmeny"] > .env-button:focus,
nav[aria-label="Mobilmeny"] > .env-button:active {
   line-height: 1;
   width: 5em;
   height: 5em;
   border-radius: 50%;
   background-color: #33788e;
   border: 3px solid #fff;
   padding: 0;
   display: flex;
   flex-direction: column-reverse; /* visar texten under ikonen */
   justify-content: end;
   align-items: center;
   color: #fff;
   font-weight: 700;
   font-size: 0.85rem;
   text-align: center;
   cursor: pointer;
   text-decoration: none;
   box-shadow: none;
}

/* hover/fokus */
nav[aria-label="Mobilmeny"] > .env-button:hover,
nav[aria-label="Mobilmeny"] > .env-button:focus {
   background-color: #275468;
}

/* svg-ikonen */
nav[aria-label="Mobilmeny"] > .env-button svg {
   width: 1.4em;
   height: 1.4em;
   fill: currentColor;
   margin-bottom: 0.25em;
   height: 2rem !important;
   width: 2rem !important;
   left: auto !important;
   right: auto !important;
   top: 0.8rem;
}


/* === Mobilmeny-innehåll === */
/* ===== Mobilmeny – stil som i bilden ===== */
dialog[data-mobile-nav] {
   padding: 0;
   border: 0;
   background: #33788e!important;
}
dialog[data-mobile-nav] > div {
   background: #33788e;
}

dialog[data-mobile-nav] .env-list {
   margin: 0;
   padding: 0;
   width: 100%;
}

nav[aria-label="Mobilmeny"] dialog[data-mobile-nav] > div > button.env-button {
   color: #fff;
   display: flex!important;
   width: auto!important;
   height: auto!important;
   flex-wrap: wrap;
   flex-direction: row;
   border-radius: 0;
   margin: 0;
   border: 0;
   padding: 0!important;
   background: transparent!important;
   margin-right: 1rem!important;
}

nav[aria-label="Mobilmeny"] dialog[data-mobile-nav] > div > button.env-button > svg {
   position: relative;
   left: 0!important;
   top: 4px;
   margin-left: 10px!important;
   font-size: 1.5rem;
}


dialog[data-mobile-nav] .env-list__item {
   list-style: none;
   display: flex;
   align-items: center;
   padding: 0;
   flex-direction: column;
   align-items: flex-start;
}

/* Länken (vänster) */
dialog[data-mobile-nav] .env-link {
   color: #fff;
   text-decoration: underline;
   font-weight: 600;
   padding: .6rem .25rem .6rem .75rem;
   line-height: 1.2;
   flex: 0 1 auto;
   font-weight: 400;
   font-style: normal;
   font-size: 1em;
}


/* Plus-knappen (höger) */
dialog[data-mobile-nav] button[data-env-accordion] {
   position: relative;
   width: 40px;
   height: 40px;
   min-width: 40px;
   border: 0;
   background: transparent;
   color: #fff;
   padding: 0;
   margin: 0;
}

/* Dölj ev. medföljande pil-ikon (SVG) */
dialog[data-mobile-nav] button[data-env-accordion] .env-icon {
   display: none !important;
}

/* Rita plus med pseudo-element */
dialog[data-mobile-nav] button[data-env-accordion]::before,
dialog[data-mobile-nav] button[data-env-accordion]::after {
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
   width: 16px;
   height: 2px;
   background: #fff;
   transform: translate(-50%, -50%);
   border-radius: 1px;
}
dialog[data-mobile-nav] button[data-env-accordion]::after {
   transform: translate(-50%, -50%) rotate(90deg); /* vertikala strecket */
}

/* När sektionen är öppen: visa minus (ta bort vertikala strecket) */
dialog[data-mobile-nav] button[data-env-accordion][aria-expanded="true"]::after {
   opacity: 0;
}

/* Hover/focus */
dialog[data-mobile-nav] .env-link:focus,
dialog[data-mobile-nav] .env-link:hover {
   text-decoration-thickness: 2px;
}
dialog[data-mobile-nav] button[data-env-accordion]:focus-visible {
   outline: 2px solid #fff;
   outline-offset: 2px;
}

/* Tunn avdelare längst ned (valfritt) */
dialog[data-mobile-nav] .env-list__item + .env-list__item {
   box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}


dialog[data-mobile-nav] .env-list__item ul {
   padding-left: 10px;
   box-sizing: border-box;
   background: #336a7c;
   border-top: 1px solid rgba(255, 255, 255, .15);
}
dialog[data-mobile-nav] .env-list__item:has(> button[aria-expanded="true"]) {
  background: #336a7c;
}


dialog[data-mobile-nav] .env-list__item ul ul {
   padding-left: 20px;
   background: #266073;
}

dialog[data-mobile-nav] ul ul .env-list__item:has(> button[aria-expanded="true"]) {
  background: #266073;
}