/* ==========================================================================
   Custom theme additions — kept separate from css/style.css so that file can
   stay a clean, unmodified sync target when the design source is updated.
   ========================================================================== */

/* Animate open/close for panels that toggle via the native `hidden` attribute
   (main.js just flips el.hidden — see setupDisclosure()). Tailwind's preflight
   in style.css sets `[hidden] { display: none !important }`, which can't be
   transitioned, so these rules keep `display` on and hide via
   opacity/visibility/max-height instead, so the open/close can animate. */

#explore-menu,
#mobile-explore-menu,
#search-panel,
#mobile-nav {
  display: block !important;
}

#explore-menu,
#search-panel {
  transform-origin: top;
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
}
#explore-menu[hidden],
#search-panel[hidden] {
  opacity: 0;
  transform: translateY(-0.5rem);
  visibility: hidden;
  pointer-events: none;
}
#explore-menu:not([hidden]),
#search-panel:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* Nested accordion inside the mobile nav list: slide via max-height. */
#mobile-explore-menu {
  overflow: hidden;
  max-height: 24rem;
  opacity: 1;
  visibility: visible;
  transition: max-height 250ms ease, opacity 200ms ease, visibility 250ms;
}
#mobile-explore-menu[hidden] {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Full-height mobile nav drawer: slide via max-height (open-state cap mirrors
   the tc:max-h-[...] utility already on the element). */
#mobile-nav {
  overflow: hidden;
  max-height: calc(100dvh - var(--header-height, 4.5rem));
  opacity: 1;
  visibility: visible;
  transition: max-height 250ms ease, opacity 200ms ease, visibility 250ms;
}
#mobile-nav[hidden] {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #explore-menu,
  #mobile-explore-menu,
  #search-panel,
  #mobile-nav {
    transition-duration: 0.01ms !important;
  }
}