/**
 * CircularCTA — expanding-circle fill effect.
 *
 * The pink/ink "::before" puck starts as a tiny 16px disc anchored at
 * the top-left corner of the button and expands to 2.2× the button's
 * diameter on hover. Tailwind v4 cannot express this (fixed pixel start
 * size combined with dynamic percentage end size, anchored off-center)
 * in a single utility — hence the co-located CSS file.
 *
 * Honors `prefers-reduced-motion` via a wrapper class applied by the
 * component at render time (`.circular-cta-no-motion`).
 */

.circular-cta_root__nSjX_ {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 9999px;
  transition-property: color, border-color;
  transition-duration: var(--sl-duration-base);
  transition-timing-function: var(--sl-ease-standard);
}

.circular-cta_root__nSjX_::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background-color: var(--circular-cta-fill, var(--sl-color-primary));
  transform: translate(-50%, -50%) scale(1);
  transition:
    transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    width 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    height 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 0;
  pointer-events: none;
}

.circular-cta_root__nSjX_:hover::before,
.circular-cta_root__nSjX_:focus-visible::before {
  width: 220%;
  height: 220%;
}

.circular-cta_root__nSjX_ > * {
  position: relative;
  z-index: 1;
}

.circular-cta_noMotion__8SJvG::before {
  transition: none;
}

/* 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;
  }
}