/*
-------------------------------------------
wf-drawer-menu.css
-------------------------------------------

  Beskrivning: Stilregler för utfällbar meny
  Skapad av: Webbfröken AB
  Webbadress: https://webbfroken.se

------------------------------------------- */


/*
-------------------------------------------
Utfällbar meny
------------------------------------------- */

.wf-drawer-menu {
  --wf-drawer-menu-padding:var(--wf-spacing-40);
  --wf-drawer-menu-padding-top:var(--wf-spacing-20);
  --wf-menu-button-expand-link-size: 2.75em;

  background-color: var(--june-sand-05);
  padding:var(--wf-drawer-menu-padding-top) var(--wf-drawer-menu-padding);
  box-sizing: border-box;
}

.wf-drawer-menu button.env-button.wf-drawer-close-btn {
  width:100%;
  margin: 0 0 var(--wf-spacing-40) 0;
  border-radius: var(--wf-radius);
}
   

/* Sök */
.wf-drawer-menu .sv-searchform-portlet{
  margin-bottom: var(--wf-spacing-40);
}

.wf-drawer-menu div[role="search"] {
  display: flex;
}

.wf-drawer-menu div[role="search"] input[type='text']{
  max-width:100%;
  width:100%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.wf-drawer-menu div[role="search"] input[type='submit']{
  padding-left:1em;
  padding-right:1em;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}


/* Huvudmeny */
.wf-drawer-menu .sv-marketplace-sitevision-sub-menu nav  {
  background: transparent;
  margin: 0 calc(-1 * var(--wf-drawer-menu-padding)) var(--wf-spacing-40);
}

.wf-drawer-menu .sv-marketplace-sitevision-sub-menu nav  button {
  border-radius: 0;
}

/* Länkar enbart nivå 1 */
.wf-drawer-menu .sv-marketplace-sitevision-sub-menu nav  > ul > li > a {
  display: none;
  min-height: var(--wf-menu-button-expand-link-size);
}

/* Länkar enbart nivå 2 (Huvudingångar) */
.wf-drawer-menu .sv-marketplace-sitevision-sub-menu nav  > ul > li > ul > li > a,
.wf-drawer-menu .sv-marketplace-sitevision-sub-menu nav  > ul > li > ul > li > button {
  font-size: var(--env-font-size-large);
  font-weight:bold;
}

.wf-drawer-menu .sv-marketplace-sitevision-sub-menu nav  > ul > li > ul > li button { /* fix för iPhone där knapptexten för undermeny syns */
  height: var(--wf-menu-button-expand-link-size) !important;
  width: var(--wf-menu-button-expand-link-size) !important;
  padding: 0 !important;
  text-indent: -9999px;
  white-space: nowrap;
}

.wf-drawer-menu .sv-marketplace-sitevision-sub-menu nav  > ul > li > ul > li > a {
  padding: var(--wf-spacing-10) var(--wf-menu-button-expand-link-size) var(--wf-spacing-10) var(--wf-spacing-40);
}

.wf-drawer-menu .sv-marketplace-sitevision-sub-menu nav  a {
  color:var(--june-mossa);
  border-color: var(--june-mossa-20);
  font-family:var(--wf-heading-font);
}

.wf-drawer-menu .sv-marketplace-sitevision-sub-menu nav  a[aria-current="page"] {
  background: var(--june-mossa-20);
}


@media (prefers-reduced-motion: no-preference) {
  .env-button:hover {
      transform: var(--wf-btn-transform);
  }
}


/*
-------------------------------------------
Extra länkar / Snabblänkar i mobilmenyn
------------------------------------------- */

.wf-drawer-menu-quicklinks {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wf-drawer-menu-quicklinks li > a {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: .45em 0;
}

.wf-drawer-menu-quicklinks li > a > img {
  max-width: clamp(18px, 2vw, 24px);
  margin-right: 0.5em;
}

.wf-drawer-menu-quicklinks li > a > span {
  display: inline-block;
  color:var(--june-mossa);
  font-size: var(--wf-font-size-normal-small);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  font-family:var(--wf-heading-font);
  font-weight:500;
}

.wf-drawer-menu-quicklinks li > a:hover span {
  text-decoration-thickness: 2px;
}


/*
-------------------------------------------
Animeringar
------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  .wf-drawer-menu .sv-marketplace-sitevision-sub-menu nav  > ul > li > ul > li > button.env-button:hover {
    transform: unset;
  }

}