/* ==== Drawer – grund ==== */

.c-drawer.c-drawer--primary {
  background-color: #fff;
}

/* ==== Bakgrund per nivå i drawer ==== */

/* Nivå 2: ljusblå */
#menu-mobile .c-nav.c-nav--depth-2 {
  background-color: #c7d5df;
}

/* Nivå 3–5: mörkare blå */
#menu-mobile .c-nav.c-nav--depth-3,
#menu-mobile .c-nav.c-nav--depth-4,
#menu-mobile .c-nav.c-nav--depth-5 {
  background-color: #8eacc0;
}

/* ==== Indrag per nivå ==== */

.s-nav-drawer .c-nav__item--depth-2 .c-nav__text {
  padding-inline-start: 1rem;
}

.s-nav-drawer .c-nav__item--depth-3 .c-nav__text {
  padding-inline-start: 2rem;
}

.s-nav-drawer .c-nav__item--depth-4 .c-nav__text {
  padding-inline-start: 3rem;
}

.s-nav-drawer .c-nav__item--depth-5 .c-nav__text {
  padding-inline-start: 4rem;
}

/* ==== Toggle‑ikon: plus/minus ==== */

.s-nav-drawer .c-nav__toggle [class*="__label-icon"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
}

.s-nav-drawer .c-nav__toggle [class*="__label-icon"] > * {
  visibility: hidden;
  position: absolute;
}

.s-nav-drawer .c-nav__toggle [class*="__label-icon"]::before,
.s-nav-drawer .c-nav__toggle [class*="__label-icon"]::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background-color: currentColor;
  border-radius: 1px;
}

/* Horisontellt streck */
.s-nav-drawer .c-nav__toggle [class*="__label-icon"]::before {
  width: 0.875em;
  height: 2px;
}

/* Vertikalt streck – döljs när posten är öppen = minus */
.s-nav-drawer .c-nav__toggle [class*="__label-icon"]::after {
  width: 2px;
  height: 0.875em;
}

.s-nav-drawer .c-nav__item.is-open > .c-nav__item-wrapper .c-nav__toggle [class*="__label-icon"]::after,
.s-nav-drawer .c-nav__item.is-ancestor > .c-nav__item-wrapper .c-nav__toggle [class*="__label-icon"]::after {
  transform: scaleY(0);
}

/* ==== Aktiv rad (is-current) – endast egen rad ==== */

#menu-mobile .c-nav__item.is-current > .c-nav__item-wrapper,
#menu-mobile .c-nav__item.is-current > .c-nav__item-wrapper .c-nav__link,
#menu-mobile .c-nav__item.is-current .c-nav__text,
#menu-mobile .c-nav__item.is-current .c-nav__toggle,
#menu-mobile .c-nav__item.is-current .c-nav__toggle * {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  --icon-color: #fff !important;
}

/* Barn till en aktiv nod ska inte ärva den mörkblå bakgrunden */
#menu-mobile .c-nav__item.is-current .c-nav__item .c-nav__item-wrapper,
#menu-mobile .c-nav__item.is-current .c-nav__item .c-nav__item-wrapper .c-nav__link,
#menu-mobile .c-nav__item.is-current .c-nav__item .c-nav__text,
#menu-mobile .c-nav__item.is-current .c-nav__item .c-nav__toggle,
#menu-mobile .c-nav__item.is-current .c-nav__item .c-nav__toggle * {
  background-color: transparent !important;
  color: inherit !important;
  --icon-color: inherit !important;
}

/* ==== Hover – endast den rad man hovrar (wrapper:hover, inte li:hover) ==== */

.c-drawer .c-nav.c-nav--vertical .c-nav__item > .c-nav__item-wrapper:hover {
  background-color: #A8D2ED !important;
  color: #000 !important;
  --icon-color: #000 !important;
}

.c-drawer .c-nav.c-nav--vertical .c-nav__item > .c-nav__item-wrapper:hover .c-nav__link,
.c-drawer .c-nav.c-nav--vertical .c-nav__item > .c-nav__item-wrapper:hover .c-nav__text {
  color: #000 !important;
}

.c-drawer .c-nav.c-nav--vertical .c-nav__item > .c-nav__item-wrapper:hover,
.c-drawer .c-nav.c-nav--vertical .c-nav__item > .c-nav__item-wrapper:hover * {
  color: #000 !important;
  --icon-color: #000 !important;
}

.c-drawer .c-nav.c-nav--vertical .c-nav__item > .c-nav__item-wrapper:hover [style*="mask-image"] {
  background-color: #000 !important;
  color: #000 !important;
  --icon-color: #000 !important;
}

/* Samma hover-logik under is-current (endast wrapper:hover) */
#menu-mobile .c-nav__item.is-current .c-nav__item > .c-nav__item-wrapper:hover,
#menu-mobile .c-nav__item.is-current .c-nav__item > .c-nav__item-wrapper:focus-within {
  background-color: #A8D2ED !important;
  color: #000 !important;
  --icon-color: #000 !important;
}

#menu-mobile .c-nav__item.is-current .c-nav__item > .c-nav__item-wrapper:hover .c-nav__link,
#menu-mobile .c-nav__item.is-current .c-nav__item > .c-nav__item-wrapper:hover .c-nav__text,
#menu-mobile .c-nav__item.is-current .c-nav__item > .c-nav__item-wrapper:focus-within .c-nav__link,
#menu-mobile .c-nav__item.is-current .c-nav__item > .c-nav__item-wrapper:focus-within .c-nav__text {
  color: #000 !important;
}

#menu-mobile .c-nav__item.is-current .c-nav__item > .c-nav__item-wrapper:hover *,
#menu-mobile .c-nav__item.is-current .c-nav__item > .c-nav__item-wrapper:focus-within * {
  color: #000 !important;
  --icon-color: #000 !important;
}

#menu-mobile .c-nav__item.is-current .c-nav__item > .c-nav__item-wrapper:hover [style*="mask-image"],
#menu-mobile .c-nav__item.is-current .c-nav__item > .c-nav__item-wrapper:focus-within [style*="mask-image"] {
  background-color: #000 !important;
  color: #000 !important;
  --icon-color: #000 !important;
}



@media (max-width: 30rem) {
  :is(.mobile-menu-trigger, .site-language-menu-button) {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 0;
    padding: 0.25rem 0.375rem !important;
    color: var(--color-primary-contrasting, inherit) !important;
  }
  :is(.mobile-menu-trigger, .site-language-menu-button):hover,
  :is(.mobile-menu-trigger, .site-language-menu-button):focus-visible {
    background-color: var(--color-primary-10, rgba(255 255 255 / 0.15)) !important;
    color: var(--color-primary-contrasting, inherit) !important;
  }
  :is(#mobile-menu-trigger-open, #site-language-menu-button) .c-button__label-text {
    clip: auto !important;
    border: 0;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    position: static !important;
    white-space: nowrap;
    width: auto !important;
    color: var(--color-primary-contrasting, inherit) !important;
  }
  :is(#mobile-menu-trigger-open, #site-language-menu-button) .c-button__label-icon {
    margin-right: 0.25rem;
  }
  :is(.mobile-menu-trigger, .site-language-menu-button) {
    --icon-color: var(--color-primary-contrasting, currentColor);
  }
}