/*
Theme Name: FemtioFemPlus 2022 Child Theme
Template: Femtiofem 2022 main
Version: 1.0
*/


@media (max-width: 1024px){

  /* 1) Lås scroll när mobilmenyn är öppen (valfritt men praxis) */
  body.menu-open{
    overflow: hidden;
  }

  /* 2) Gör mobilmenyn till en fullskärms “drawer” som inte begränsas av .page-wrap */
  body.menu-open #main-menu.main-menu{
    display: block !important;

    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;

    width: 100vw !important;
    max-width: none !important;

    background: #fff !important;
    z-index: 99999 !important;

    /* så att listan kan scrolla */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;

    /* luft uppåt så den inte krockar med lokal-bar + gula headern */
    padding-top: 0 !important;
    margin: 0 !important;
  }

  /* 3) Lägg en diskret overlay bakom (om något annat ligger ovanpå) */
  body.menu-open #header::after{
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.25);
    z-index: 99998;
  }

  /* 4) Se till att menyn ligger över overlayn */
  body.menu-open #main-menu.main-menu{
    z-index: 99999 !important;
  }

  /* 5) “Stäng meny”-raden ska vara sticky högst upp (tydligt för pensionärer) */
  body.menu-open #main-menu li.menu-close-row{
    position: sticky;
    top: 0;
    z-index: 2;
  }

  /* 6) MENY-knappen ska fortsatt ligga i gula headern och vara klickbar över overlay */
  body.menu-open .toggle-menu{
    z-index: 100000 !important;
  }

  /* 7) Viktigt: nollställ gamla child-regler som kan flytta menyn */
  .main-menu{
    top: auto !important;
    transform: none !important;
  }
}


@media (max-width: 1024px){

  /* A) Behåll toggle synlig alltid */
  .toggle-menu{
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
  }

  /* B) Dölj gammal bar-markup – MEN bara markupen, inte hela knappen */
  .toggle-menu .menu-bar,
  .toggle-menu .bar1,
  .toggle-menu .bar2{
    display: none !important;
  }

  /* C) Visa label i stängt läge */
  .toggle-menu label{
    display: inline-block !important;
    font-weight: 800;
    letter-spacing: .02em;
  }

  /* D) Bygg “riktig” hamburgerikon via pseudo-element */
  .toggle-menu::before{
    content: "";
    display: inline-block;
    width: 22px;
    height: 2px;
    background: var(--purple);
    border-radius: 2px;
    box-shadow: 0 -7px 0 0 var(--purple), 0 7px 0 0 var(--purple);
    transition: transform 180ms ease, box-shadow 180ms ease;
  }

  /* E) När menyn öppnas: visa STÄNG i headern (som huvudsajten) */
  body.menu-open .toggle-menu.open::before{
    box-shadow: none;
    transform: rotate(45deg);
  }

  body.menu-open .toggle-menu.open::after{
    content: "";
    display: inline-block;
    width: 22px;
    height: 2px;
    background: var(--purple);
    border-radius: 2px;
    margin-left: -22px;
    transform: rotate(-45deg);
  }

  /* F) Byt text MENY -> STÄNG när öppen (som huvudsajten) */
  body.menu-open .toggle-menu.open label{
    visibility: hidden;
    position: relative;
  }

  body.menu-open .toggle-menu.open label::after{
    content: "STÄNG";
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
  }
}

@media (max-width: 1024px){

  /* När fullskärmsmenyn är öppen: dölj toggle i headern
     (så den inte hamnar ovanpå listan och visar “STÄNG” mitt i menyn) */
  body.menu-open .toggle-menu{
    display: none !important;
  }

  /* Säkerställ att “✕ Stäng meny”-raden alltid syns överst */
  body.menu-open #main-menu li.menu-close-row{
    display: block !important;
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
  }
}