/* Hamburger navigation. Hidden on PC; below 900px the menu becomes a dropdown panel. */
.site-header .nav-toggle { display: none; }

/* Touch devices only, same condition as home-mobile.css: narrow desktop windows keep the PC header. */
@media (max-width: 899px) {
  .site-header .header-inner { justify-content: space-between; overflow: visible; }

  .site-header .nav-toggle {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
  }
  .site-header .nav-toggle span,
  .site-header .nav-toggle span::before,
  .site-header .nav-toggle span::after {
    position: absolute;
    left: 12px;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: #202124;
    transition: transform .22s ease, opacity .18s ease, background-color .18s ease;
  }
  .site-header .nav-toggle span { top: 21px; }
  .site-header .nav-toggle span::before { content: ""; left: 0; top: -6px; }
  .site-header .nav-toggle span::after { content: ""; left: 0; top: 6px; }
  .site-header.is-menu-open .nav-toggle span { background: transparent; }
  .site-header.is-menu-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
  .site-header.is-menu-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

  .site-header .header-inner nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: auto;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 6px 16px 14px;
    overflow: visible;
    background: rgba(255, 255, 255, .98);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 28px rgba(28, 32, 38, .08);
  }
  .site-header.is-menu-open .header-inner nav { display: flex; }
  .site-header .header-inner nav a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 4px;
    border-bottom: 1px solid #f0f1f3;
    font-size: 16px;
  }
  .site-header .header-inner nav a:last-child { border-bottom: 0; }
  .site-header .header-inner nav a.is-active { color: var(--green); }
  .site-header .header-inner nav a.is-active::after { display: none; }
}