/* Verbatim from SiteNav.dc.html <style> (@property/@keyframes provided by page
   style). Plus the two interaction rules the design applied at runtime via the
   `style-hover` attribute on the mega-menu tiles, carried over as real CSS. */

.fr-nav-item { background: transparent; appearance: none; -webkit-appearance: none; border: 0.09375rem solid transparent; border-radius: var(--radius-sm); transition: background 200ms var(--ease-out); }
.fr-nav-item:hover, .fr-nav-item[data-open="true"] {
  background: linear-gradient(var(--paper), var(--paper)) padding-box,
              conic-gradient(from var(--fr-angle), var(--cyan), var(--blue-action), var(--blue), var(--cyan)) border-box;
  animation: fr-border-flow 3.2s linear infinite;
}

/* Hover bridge — an invisible strip over the 10px gap between the trigger and
   the panel (design's SiteNav `style-before`), so moving the cursor down into
   the dropdown doesn't cross a dead zone and fire mouseleave. Only active while
   the panel is open (it inherits the panel's pointer-events). */
[data-nav-panel]::before {
  content: "";
  position: absolute;
  top: -0.875rem;
  left: 0;
  right: 0;
  height: 0.875rem;
}

/* Mega-menu link tile — base transition inline in markup; hover state was a DC
   `style-hover` at runtime, carried over verbatim here. */
.fr-flow-tile:hover {
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              conic-gradient(from var(--fr-angle), var(--cyan), var(--blue-action), var(--blue), var(--cyan)) border-box;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  animation: fr-border-flow 3.5s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .fr-nav-item:hover, .fr-nav-item[data-open="true"], .fr-flow-tile:hover { animation: none !important; }
}

/* Responsive desktop/mobile switch — the design toggled this in JS at 991px via
   matchMedia; carried over as the equivalent CSS media query. */
[data-desktop-nav] { display: flex; align-items: center; gap: var(--space-2); }
[data-desktop-cta] { display: flex; align-items: center; gap: var(--space-3); }
[data-hamburger] { display: none; }
@media (max-width: 991px) {
  [data-desktop-nav], [data-desktop-cta] { display: none; }
  [data-hamburger] { display: flex; }
}