/* TopBar responsive breakpoints — Tailwind's default breakpoints don't
   match the design system's 820px cut-over where the burger takes over.
   We toggle desktop nav vs. burger via a narrow, purpose-built media
   query that aligns with `DesignSystem/responsive.css`. */

.top-bar_desktopNav__PE7ez {
  display: inline-flex;
}

.top-bar_burgerButton__avbe4 {
  display: none;
}

@media (max-width: 820px) {
  .top-bar_desktopNav__PE7ez {
    display: none !important;
  }
  .top-bar_burgerButton__avbe4 {
    display: inline-flex !important;
  }
  /* The chrome controls (lang + theme toggles) hide on narrow viewports —
     they live inside the mobile drawer. */
  .top-bar_chromeControls__HX4Zo {
    display: none !important;
  }
}

/**
 * Accordion expand / collapse keyframes.
 *
 * Tailwind v4 doesn't ship `animate-in`/`collapsible-down` helpers by default.
 * We define the keyframes here so the `animate-[...]` inline utilities on
 * `Accordion.ItemContent` resolve. Animations are driven by Ark's
 * `data-state="open|closed"` attribute and use the `--height` CSS variable
 * Ark exposes on the Content element.
 *
 * Respects `prefers-reduced-motion`: the `motion-reduce:animate-none` class
 * on the Content handles reduction at the utility level; this file also
 * collapses keyframes to an instant transition as a safety net.
 */

@keyframes sl-accordion-down {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: var(--height);
    opacity: 1;
  }
}

@keyframes sl-accordion-up {
  from {
    height: var(--height);
    opacity: 1;
  }
  to {
    height: 0;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes sl-accordion-down {
    from,
    to {
      height: var(--height);
      opacity: 1;
    }
  }
  @keyframes sl-accordion-up {
    from,
    to {
      height: 0;
      opacity: 0;
    }
  }
}