/* ========== BURGER MENU & RESPONSIVE NAVIGATION ========== */
body.no-scroll{
  overflow:hidden;
  position:fixed;
  width:100%;
}

.burger-menu{
  display:none;
  width:38px;height:38px;border-radius:var(--radius-md);
  border:0;
  background:transparent;
  position:relative;
  cursor:pointer;
  transition:background var(--transition);
}
.burger-menu:hover{
  background:rgba(255,255,255,0.08);
}

html[data-theme="light"] .burger-menu:hover{
  background:rgba(0,0,0,0.06);
}
.burger-menu span{
  position:absolute;left:8px;right:8px;height:3px;
  background:var(--color-text);border-radius:999px;
  transition:transform .3s ease,top .3s ease,opacity .3s ease;
}
.burger-menu span:nth-child(1){top:11px}
.burger-menu span:nth-child(2){top:18px}
.burger-menu span:nth-child(3){top:25px}
.burger-menu.active span:nth-child(1){top:19px;transform:rotate(45deg)}
.burger-menu.active span:nth-child(2){opacity:0}
.burger-menu.active span:nth-child(3){top:19px;transform:rotate(-45deg)}

/* Below LG (1024px): Show burger menu */
@media (max-width:63.99rem){
  .burger-menu{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:60;
  }

  /* Auto-hide header on scroll down */
  .site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:40;
    transition:transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .site-header.header-hidden{
    transform:translateY(-100%);
    transition:transform 0.3s cubic-bezier(0.4, 0, 1, 1);
  }

  /* Add padding to body to compensate for fixed header */
  body{
    padding-top:calc(var(--padding) + 70px);
  }

  .nav-menu{
    position:fixed;top:0;left:0;width:100vw;height:100vh;
    z-index:50;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    gap:1.5rem;
    padding:5rem 2rem 2.5rem 2rem;
    background:rgba(12,13,17,.92);
    backdrop-filter:blur(16px);
    transform:translateY(-100%);
    opacity:0;
    pointer-events:none;
    transition:transform .4s ease,opacity .4s ease;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  html[data-theme="light"] .nav-menu{background:rgba(239,240,244,.96);}
  .nav-menu.show{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .nav-menu a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    font-size:1.4rem;
    margin:0;
    width:100%;
    text-align:center;
    padding:.9rem 1.5rem;
    color:var(--color-text);
    transition:color var(--transition);
  }
  .nav-menu a svg{
    width:22px;
    height:22px;
    stroke:currentColor;
    flex-shrink:0;
  }
  .nav-menu a:hover,
  .nav-menu a[aria-current]{
    color:var(--color-accent);
  }
  html[data-theme="light"] .nav-menu a:hover,
  html[data-theme="light"] .nav-menu a[aria-current]{
    color:var(--color-accent);
  }
  .nav-menu .menu-footer{
    margin-top:2rem;
    display:flex;flex-direction:column;gap:1rem;align-items:center;justify-content:center;
    font-size:.82rem;color:var(--color-text-dim);
    padding:1rem;
    background:transparent;
  }
  html[data-theme="light"] .nav-menu .menu-footer{
    background:transparent;
  }
  .menu-footer__logo{
    width:200px;
    height:auto;
    min-height:60px;
    filter:grayscale(100%) opacity(.85);
    transition:filter var(--transition);
  }
  .menu-footer__links{
    display:flex;
    gap:1rem;
    align-items:center;
  }
  .nav-menu .impressum-link{font-size:.82rem;color:inherit;text-decoration:none;transition:color var(--transition)}
  .nav-menu .impressum-link:hover{color:var(--color-text)}
}

/* LG (1024px+): Desktop navigation - Reset mobile overlay styles */
@media (min-width:64rem){
  .nav-menu{
    position:static;
    width:auto;
    height:auto;
    flex-direction:row;
    padding:0;
    background:transparent;
    backdrop-filter:none;
    transform:none;
    opacity:1;
    pointer-events:auto;
    overflow:visible;
    gap:2rem;
  }
  .nav-menu .menu-footer{display:none}
}