/* === Mobile header/nav only — minimal + targeted === */

@media (max-width: 739px) {
  .site-header .inner {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .site-header .brand {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    font: inherit;
    line-height: 1;
    border-radius: 10px;
    border: 1px solid var(--stroke, rgba(255,255,255,.12));
    background: var(--card, rgba(255,255,255,.06));
    color: var(--text, #fff);
    cursor: pointer;
    margin-left: auto;
  }

  .nav-toggle .bars {
    width: 18px; height: 12px; position: relative; display: inline-block;
  }
  .nav-toggle .bars::before,
  .nav-toggle .bars::after,
  .nav-toggle .bars span {
    content: ""; position: absolute; left: 0; right: 0; height: 2px;
    background: currentColor; border-radius: 2px;
  }
  .nav-toggle .bars::before { top: 0; }
  .nav-toggle .bars span { top: 5px; }
  .nav-toggle .bars::after { bottom: 0; }

  /* Collapse the existing nav only on mobile */
  .site-header .nav {
    order: 2;
    width: 100%;
    flex-basis: 100%;
    overflow: hidden;
    max-height: 0;
    transition: max-height .25s ease;
    background: var(--card, rgba(255,255,255,.06));
    border: 1px solid var(--stroke, rgba(255,255,255,.12));
    border-radius: 12px;
  }
  .site-header .nav.open {
    max-height: 70vh;
  }
  .site-header .nav a {
    display: block;
    padding: 12px 14px;
    text-decoration: none;
  }
  .site-header .nav a + a {
    border-top: 1px solid var(--stroke, rgba(255,255,255,.12));
  }
}

@media (min-width: 740px) {
  .nav-toggle { display: none !important; }
  .site-header .nav { max-height: none !important; overflow: visible !important; background: transparent; border: 0; }
}