/* anyflo-navbar.css
 * Where: Page Settings → Inside <head>  (all pages with the navbar)
 * Targets: .navbar_component, .navbar_link, .navbar_logo, .button.is-small
 * Note:  .is-scrolled / .is-hidden / .is-dark are toggled by anyflo-navbar.js
 */
.navbar_component {
  position: fixed !important;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1),
              background-color 0.5s cubic-bezier(0.45, 0, 0.55, 1),
              backdrop-filter 0.5s cubic-bezier(0.45, 0, 0.55, 1);
}
.navbar_component.is-scrolled {
  background-color: rgba(234, 233, 229, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.navbar_component.is-scrolled .navbar_container {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.navbar_container {
  transition: padding 0.4s ease;
}
.navbar_component.is-hidden {
  transform: translateY(-100%);
}

/* dark theme: .is-dark over [data-navbar-theme="dark"] sections, .is-page-dark while the page bg is black (anyflo-page.js) */
.navbar_component.is-dark.is-scrolled,
.navbar_component.is-page-dark.is-scrolled {
  background-color: rgba(0, 0, 0, 0.72);
}
.navbar_component.is-dark .navbar_link,
.navbar_component.is-page-dark .navbar_link {
  color: var(--grey--grey-400);
}
.navbar_component.is-dark .navbar_link:hover,
.navbar_component.is-page-dark .navbar_link:hover {
  color: var(--base-colors--white);
}
.navbar_component.is-dark .navbar_logo,
.navbar_component.is-page-dark .navbar_logo {
  filter: invert(1);
}
.navbar_component.is-dark .button,
.navbar_component.is-page-dark .button {
  background-color: var(--base-colors--cream-100);
  color: var(--base-colors--black);
}
/* theme switch: same timing/easing as the page background (anyflo-page.js, 0.5s power2.inOut) */
.navbar_logo,
.navbar_link,
.navbar_component .button {
  transition: filter 0.5s cubic-bezier(0.45, 0, 0.55, 1), background-color 0.5s cubic-bezier(0.45, 0, 0.55, 1), color 0.5s cubic-bezier(0.45, 0, 0.55, 1);
}

@media (prefers-reduced-motion: reduce) {
  .navbar_component,
  .navbar_container { transition: none; }
}