/* Styling that belongs with public/assets/site.js.
 *
 * The mirrored Zyro stylesheet covers the dropdown's open state but not the
 * header's, because in the original the header was a Vue component that
 * carried its own reactive background. That component is gone.
 */

/* The header is transparent so the hero shows through it. Once the menu is
 * open it sits directly on top of the dropdown panel and has to read as one
 * surface with it - hence the same --background-color the dropdown uses,
 * which the builder sets inline on .block-header, so recolouring the header
 * in the site editor keeps the two in step. Timed to match the dropdown's own
 * max-height transition so the colour arrives with the panel rather than
 * snapping ahead of it, and on the way out lingers until the panel has
 * finished collapsing.
 */
.block-header.block-header--menu-open {
  background-color: var(--background-color);
}

.block-header {
  transition: background-color 0.3s ease-out 0.1s, box-shadow 0.15s linear;
}