/* Mobile nav collapse: use max-height + opacity so transitions work (avoid display:none and height:auto) */
#nav{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 210ms var(--ease-in-out), opacity 200ms ease;
  -webkit-transition: max-height 210ms var(--ease-in-out), opacity 200ms ease;
  -moz-transition: max-height 210ms var(--ease-in-out), opacity 200ms ease;
  -ms-transition: max-height 210ms var(--ease-in-out), opacity 200ms ease;
  -o-transition: max-height 210ms var(--ease-in-out), opacity 200ms ease;
}
#nav.open{
  /* large enough to fit menu content; keeps transition animatable */
  max-height: 1200px;
  opacity: 1;
}
@media (min-width: 768px){
  /* desktop: ensure nav is visible and uncollapsed */
  #nav{ max-height: none !important; opacity: 1 !important; overflow: visible !important; }
}