/* =========================
   FOLDOUT MENU
========================= */

/* Grund */
.foldout-menu .fold-panel { display: none; }
.foldout-menu .fold-panel.is-active { display: block; }

/* Nav item styling */
.foldout-menu .fold-nav-item{
  cursor: pointer;
  border-radius: 12px;
  padding: 14px 14px;
  transition: background-color .15s ease, color .15s ease;
}

/* Hover */
.foldout-menu .fold-nav-item:hover{
  background: rgba(10, 35, 70, 0.08);
}

/* Active (vald = blå) */
.foldout-menu .fold-nav-item.is-active{
  background: #0B2A52;
  color: #fff;
}

/* Se till att text/ikoner i active blir vita */
.foldout-menu .fold-nav-item.is-active *{
  color: #fff !important;
}

/* Stackable-ikonens SVG (active) */
.foldout-menu .fold-nav-item.is-active .stk--svg-wrapper .stk--inner-svg svg:last-child,
.foldout-menu .fold-nav-item.is-active .stk--svg-wrapper .stk--inner-svg svg:last-child :is(g, path, rect, polygon, ellipse){
  fill: #fff !important;
  stroke: #fff !important;
}

/* Panel-rader (t.ex. "Gata") – hela raden får hover/active i blått */
.foldout-menu .fold-panel-link{
  cursor: pointer;
  border-radius: 12px;
  padding: 12px 14px;
  transition: background-color .15s ease, color .15s ease;
}

/* Hover/focus */
.foldout-menu .fold-panel-link:hover,
.foldout-menu .fold-panel-link:focus,
.foldout-menu .fold-panel-link:focus-within{
  background: #0B2A52;
  color: #fff;
}

/* Ta bort underline i hela raden (p + a) */
.foldout-menu .fold-panel-link,
.foldout-menu .fold-panel-link p,
.foldout-menu .fold-panel-link a{
  text-decoration: none !important;
}

/* Vit text vid hover/focus */
.foldout-menu .fold-panel-link:hover *,
.foldout-menu .fold-panel-link:focus *,
.foldout-menu .fold-panel-link:focus-within *{
  color: #fff !important;
}

/* Vit ikon vid hover/focus (Stackable SVG) */
.foldout-menu .fold-panel-link:hover .stk--svg-wrapper .stk--inner-svg svg:last-child,
.foldout-menu .fold-panel-link:hover .stk--svg-wrapper .stk--inner-svg svg:last-child :is(g, path, rect, polygon, ellipse),
.foldout-menu .fold-panel-link:focus-within .stk--svg-wrapper .stk--inner-svg svg:last-child,
.foldout-menu .fold-panel-link:focus-within .stk--svg-wrapper .stk--inner-svg svg:last-child :is(g, path, rect, polygon, ellipse){
  fill: #fff !important;
  stroke: #fff !important;
}

/* Extra “nuke”: om någon annan regel sätter svg färg generellt */
.foldout-menu .fold-panel-link:hover svg,
.foldout-menu .fold-panel-link:hover svg * ,
.foldout-menu .fold-panel-link:focus-within svg,
.foldout-menu .fold-panel-link:focus-within svg *{
  fill: #fff !important;
  stroke: #fff !important;
}