/*
 Theme Name:   Esmera Child
 Theme URI:    https://esmera.com/child-theme/
 Description:  A child theme for the Esmera site, based on the parent theme.
 Author:       Philip Game
 Author URI:   https://www.esmera.co.uk
 Template:     esmera
 Version:      1.0.0
*/

/* ---------------------------------------------------------------------------
   Mobile navigation panel — slide down / slide up

   Flowbite's Collapse component only toggles Tailwind's `hidden` class
   (display: none), and display is not an animatable property, so a plain
   `transition` can never fire. A keyframe animation does run when an element
   goes from display:none to display:block, which covers opening with no JS.

   Closing needs help: `hidden` re-applies display:none instantly, leaving no
   window for an out-animation. public/js/nav.js watches for that class landing,
   swaps in `is-closing` to play the slide-up, and re-hides the panel afterwards.
   --------------------------------------------------------------------------- */

#navbar-hamburger:not(.hidden):not(.is-closing) {
  animation: esmera-nav-slide-down 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#navbar-hamburger.is-closing {
  animation: esmera-nav-slide-up 0.28s cubic-bezier(0.7, 0, 0.84, 0) both;
}

@keyframes esmera-nav-slide-down {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes esmera-nav-slide-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #navbar-hamburger:not(.hidden):not(.is-closing),
  #navbar-hamburger.is-closing {
    animation: none;
  }
}