/* Gör samma styling för .nav-toggle som för .nav__toggle */
nav.nav .nav-toggle,
nav.nav .nav__toggle{
  display:none;
  margin-left:auto;
  appearance:none;
  border:1px solid var(--border-strong, #d2d2d7);
  background:var(--card, #fff);
  color:var(--text, #1d1d1f);
  border-radius:12px;
  padding:8px;
  cursor:pointer;
  transition:box-shadow .15s ease, transform .06s ease;
}
nav.nav .nav-toggle:hover,
nav.nav .nav__toggle:hover{ box-shadow:0 1px 3px rgba(0,0,0,.06) }
nav.nav .nav-toggle:active,
nav.nav .nav__toggle:active{ transform:translateY(1px) }



@media (max-width: 768px){
  nav.nav .nav-toggle,
  nav.nav .nav__toggle{ display:inline-flex; align-items:center; justify-content:center }

  /* X-animation när menyn är öppen */
  nav.nav .nav-toggle.is-open span:nth-child(1),
  nav.nav .nav__toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
  nav.nav .nav-toggle.is-open span:nth-child(2),
  nav.nav .nav__toggle.is-open span:nth-child(2){ opacity:0 }
  nav.nav .nav-toggle.is-open span:nth-child(3),
  nav.nav .nav__toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }
}
/* Hamburger med ::before / ::after */
nav.nav .nav-toggle,
nav.nav .nav__toggle{ position:relative; width:40px; height:36px }

nav.nav .nav-toggle::before,
nav.nav .nav-toggle::after,
nav.nav .nav__toggle::before,
nav.nav .nav__toggle::after{
  content:""; position:absolute; left:9px; right:9px; height:2px; background:currentColor; border-radius:2px;
  transition:transform .2s ease, opacity .15s ease, top .2s ease, bottom .2s ease;
}
nav.nav .nav-toggle::before,
nav.nav .nav__toggle::before{ top:12px }   /* övre linjen */
nav.nav .nav-toggle::after,
nav.nav .nav__toggle::after{ bottom:12px } /* nedre linjen */

/* mittlinje: använd box-shadow-trick */
nav.nav .nav-toggle{ box-shadow: inset 0 -17px 0 0 transparent } /* noop för Safari bugfix */
nav.nav .nav-toggle::marker{ content:"" } /* noop */

/* När öppen → X */
nav.nav .nav-toggle.is-open::before,
nav.nav .nav__toggle.is-open::before{
  top:50%; transform:translateY(-50%) rotate(45deg);
}
nav.nav .nav-toggle.is-open::after,
nav.nav .nav__toggle.is-open::after{
  bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg);
}

/* Lägg till en mittlinje via extra background-gradient (valfritt) */
nav.nav .nav-toggle,
nav.nav .nav__toggle{
  background:
    linear-gradient(currentColor,currentColor) center center/22px 2px no-repeat,
    var(--card, #fff);
}

/* Desktop */
nav.nav .nav__menu{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}
nav.nav .nav__toggle{
  display:none; /* göms på desktop */
}

/* Mobil */
@media (max-width: 768px){
  nav.nav{ position:relative }
  nav.nav .nav__toggle{
    display:inline-block;
    margin-left:auto;
    border:1px solid var(--border-strong, #d2d2d7);
    background:var(--card, #fff);
    color:var(--text, #1d1d1f);
    border-radius:12px;
    padding:8px 12px;
    font-weight:600;
    cursor:pointer;
  }

  nav.nav .nav__menu{
    position:absolute; top:calc(100% + 4px); left:0; right:0;
    display:flex; flex-direction:column;
    gap:6px; padding:10px 12px 12px; margin:0;
    background:var(--card, #fff);
    border-bottom:1px solid var(--border, #e5e5ea);
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    max-height:0; overflow:hidden;
    visibility:hidden; opacity:0;
    transition:max-height .25s ease, opacity .2s ease, visibility .2s ease;
  }

  nav.nav .nav__menu.is-open{
    max-height:70vh; visibility:visible; opacity:1;
  }

  nav.nav .nav__menu .nav-link{
    display:block;
    padding:10px 12px;
    border-radius:12px;
  }
}

@media (max-width: 768px){
  nav.nav .nav__menu{
    position:absolute;
    top:calc(100% + 4px);
    left:0;
    right:0;
    z-index:9999; /* 👈 lägg till detta */
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:10px 12px 12px;
    margin:0;
    background:var(--card, #fff);
    border-bottom:1px solid var(--border, #e5e5ea);
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    max-height:0;
    overflow:hidden;
    visibility:hidden;
    opacity:0;
    transition:max-height .25s ease, opacity .2s ease, visibility .2s ease;
  }

  nav.nav .nav__menu.is-open{
    max-height:70vh;
    visibility:visible;
    opacity:1;
  }
}
/* === Mobilfix: lägg menyn över allt, förankrad under nav === */
@media (max-width: 768px){
  nav.nav{ position:sticky; top:0; z-index:9999; } /* nav över innehållet */

  nav.nav .nav__menu{
    position: fixed;              /* inte absolute längre */
    top: var(--nav-bottom, 56px); /* JS sätter exakt pixelvärde */
    left: 0;
    right: 0;
    z-index: 10000;               /* över allt annat */
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px 12px;
    margin: 0;
    background: var(--card, #fff);
    border-bottom: 1px solid var(--border, #e5e5ea);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: max-height .25s ease, opacity .2s ease, visibility .2s ease;
  }

  nav.nav .nav__menu.is-open{
    max-height: 70vh;
    visibility: visible;
    opacity: 1;
  }
}

/* Dark mode (behåll om du har mörkt tema) */
@media (prefers-color-scheme: dark){
  @media (max-width: 768px){
    nav.nav .nav__menu{
      background: var(--card, #1f1f22);
      border-bottom-color: var(--border-strong, #3a3a3c);
      box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 3px 8px rgba(0,0,0,.6);
    }
  }
}
@media (max-width:768px){
  nav.nav{ position:sticky; top:0; z-index:2147483647; }
}