/* Mobile drop-down menu override: force menu to drop DOWN under the header */
@media (max-width: 768px) {
  /* Kill the horizontal flex header so the menu can stack under it */
  .nav {
    display: block !important;
    position: relative;
  }
  .nav .spacer { display: none !important; }

  /* Ensure the links block sits full-width under the header */
  .nav .links {
    display: block !important;
    position: static !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.08);
    box-shadow: none !important;
  }

  /* Reveal on toggle */
  .menu-toggle:checked ~ .links {
    max-height: 1200px; /* big enough for all items */
  }

  /* Stack items and give separation */
  .nav .links a {
    display: block !important;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }

  /* Keep the hamburger tappable */
  .hamburger {
    cursor: pointer;
    padding: 10px;
  }
}

/* Desktop unchanged */
@media (min-width: 769px) {
  .nav .links {
    display: flex !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
    transform: none !important;
  }
  .nav .links a {
    display: inline-block !important;
    padding: 0 10px;
    border: 0;
  }
}