/* ─────────────────────────────────────────────────────────────────────────
 * ER-RADIX — Track B styling layer for client-side Radix primitives.
 *
 * Track B of the shadcn + Radix adoption program (see
 * memory/shadcn_radix_adoption_program_2026_05_01.md and
 * memory/ui_library_contract.md) migrates 11 client-rendered builder
 * elements (tabs, accordion, faq, disclosure-item, tooltip, modal,
 * lightbox, cart-drawer, support-ticket, cookie-consent, navbar) onto
 * Radix primitives imported direct from `@radix-ui/react-*`. Radix
 * primitives are headless — they ship behavior + a11y + state machine
 * but zero visual style. This file is that visual style.
 *
 * Two-layer contract (NEVER mix):
 *
 *   - Admin / inspector / builder chrome → shadcn/ui in
 *     `src/components/admin-ui/*`, styled via Tailwind v4 + the
 *     `--evara-*` admin token namespace + `src/styles/shadcn-bridge.css`.
 *   - Client renderers (Track B) → Radix primitives imported direct,
 *     styled via the `--site-*` client token namespace and this file.
 *
 * `--evara-*` tokens MUST NOT appear here — that is the admin namespace
 * and would leak admin chrome onto visitor sites. If a token you need
 * is missing from `--site-*`, add it to `src/lib/themeContract.ts` (or
 * coordinate with the token-unification program); never inline it here.
 *
 * Selector pattern: target Radix's published data attributes
 * (`[data-state="open"]`, `[data-orientation="vertical"]`,
 * `[data-side="top"]`, `[data-radix-popper-content-wrapper]`, etc.) so
 * styling tracks Radix state changes without React re-renders. Class
 * naming follows the `.er-radix-<primitive>` namespace so Track B
 * renderers opt-in by adding `className="er-radix-tabs"` (etc.) to the
 * Radix Root rather than per-instance ad hoc styling.
 *
 * Animations: durations / easings are literals (mirrors er-interactive.css
 * convention). The `--site-*` token system does not yet expose animation
 * primitives. If/when it does, this file will swap to those tokens.
 * `@media (prefers-reduced-motion: reduce)` block at the bottom zeroes
 * every transition + animation.
 *
 * Var-fallback contract (per memory: renderer_css_hardcoded_white_audit
 * _2026_04_20): NEVER use `var(--site-X, <hardcoded-color>)`. Defaults
 * block at the top resolves any unset var to a sensible neutral; the
 * tenant theme overrides via the cascade.
 *
 * NEVER add backticks to any CSS comment in this file (project-wide
 * rule — see `inlineCssBacktickGuard` test).
 * ───────────────────────────────────────────────────────────────────────── */

/* ── Radix primitive token defaults ─────────────────────────────────────
 * Every var below is a `--site-*` (or composes from one). Tenant themes
 * override via `src/lib/themeContract.ts`; these are the fallback values
 * applied when a var is otherwise unset. */
:root {
  /* Floating-surface backdrop tokens (Dialog overlays, etc.) — default blur
     bumped from 4px to 12px so out-of-the-box modals get a real frosted
     scrim rather than a barely-perceptible tint. Tenants can override. */
  --site-radix-overlay-bg: rgba(0, 0, 0, 0.55);
  --site-radix-overlay-blur: 12px;

  /* Tooltip — small floating annotation. Picks up surface-alt so it
   * differentiates from the page chrome but stays in-theme. */
  --site-radix-tooltip-bg: var(--site-surface-alt, var(--site-surface));
  --site-radix-tooltip-fg: var(--site-surface-alt-fg, var(--site-text));
  --site-radix-tooltip-shadow: var(--site-shadow-md);

  /* Popover / DropdownMenu / NavigationMenu shared floating surface. */
  --site-radix-popover-bg: var(--site-surface);
  --site-radix-popover-fg: var(--site-text);
  --site-radix-popover-border: var(--site-border);
  --site-radix-popover-shadow: var(--site-shadow-lg);

  /* Dialog / modal panel. */
  --site-radix-dialog-bg: var(--site-surface);
  --site-radix-dialog-fg: var(--site-text);
  --site-radix-dialog-shadow: var(--site-shadow-lg);
  --site-radix-dialog-radius: var(--site-radius-lg);

  /* Tabs — list separator + active indicator. */
  --site-radix-tabs-list-border: var(--site-border-muted);
  --site-radix-tabs-trigger-fg: var(--site-text-secondary);
  --site-radix-tabs-trigger-fg-active: var(--site-text);
  --site-radix-tabs-indicator: var(--site-accent);

  /* Accordion / Collapsible (FAQ + disclosure-item) — divider color. */
  --site-radix-accordion-divider: var(--site-border-muted);
  --site-radix-accordion-trigger-fg: var(--site-text);
  --site-radix-accordion-content-fg: var(--site-text-secondary);
}

/* ─────────────────────────────────────────────────────────────────────
 * Tabs (`@radix-ui/react-tabs`)
 *   Targets:
 *     [data-radix-collection-item]  trigger
 *     [data-state="active"]         current trigger / panel
 *     [data-orientation]            horizontal | vertical list
 *
 *   Renderers opt-in with className="er-radix-tabs" on Tabs.Root.
 *   Sub-parts use `.er-radix-tabs__list`, `__trigger`, `__panel`. */
.er-radix-tabs__list {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--site-radix-tabs-list-border);
}
.er-radix-tabs__list[data-orientation="vertical"] {
  flex-direction: column;
  border-bottom: 0;
  border-right: 1px solid var(--site-radix-tabs-list-border);
}

.er-radix-tabs__trigger {
  appearance: none;
  background: transparent;
  border: 0;
  padding: var(--site-space-sm) var(--site-space-md);
  font-family: var(--site-font-body);
  font-size: var(--site-body-size);
  font-weight: var(--site-fw-medium);
  color: var(--site-radix-tabs-trigger-fg);
  cursor: pointer;
  position: relative;
  transition: color 0.18s ease;
}
.er-radix-tabs__trigger[data-state="active"] {
  color: var(--site-radix-tabs-trigger-fg-active);
}
.er-radix-tabs__trigger[data-state="active"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--site-radix-tabs-indicator);
}
.er-radix-tabs__list[data-orientation="vertical"] .er-radix-tabs__trigger[data-state="active"]::after {
  left: auto;
  right: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  height: auto;
}
.er-radix-tabs__trigger:focus-visible {
  outline: var(--site-focus-ring-width) solid var(--site-focus-ring-color);
  outline-offset: var(--site-focus-ring-offset);
  border-radius: var(--site-radius);
}

.er-radix-tabs__panel {
  padding: var(--site-space-md) 0;
  color: var(--site-text);
}
.er-radix-tabs__panel:focus-visible {
  outline: var(--site-focus-ring-width) solid var(--site-focus-ring-color);
  outline-offset: var(--site-focus-ring-offset);
  border-radius: var(--site-radius);
}

/* ─────────────────────────────────────────────────────────────────────
 * Accordion (`@radix-ui/react-accordion`) — FAQ, disclosure-item.
 *   Targets:
 *     [data-state="open" | "closed"]  on Item / Trigger / Content
 *     [data-disabled]                 on disabled Item
 *
 *   Renderers opt-in with className="er-radix-accordion" on Accordion.Root. */
.er-radix-accordion__item {
  border-bottom: 1px solid var(--site-radix-accordion-divider);
}
.er-radix-accordion__item:first-child {
  border-top: 1px solid var(--site-radix-accordion-divider);
}

.er-radix-accordion__header {
  margin: 0;
  display: flex;
}

.er-radix-accordion__trigger {
  appearance: none;
  background: transparent;
  border: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-space-sm);
  padding: var(--site-space-md) 0;
  font-family: var(--site-font-body);
  font-size: var(--site-body-size);
  font-weight: var(--site-fw-semibold);
  color: var(--site-radix-accordion-trigger-fg);
  text-align: left;
  cursor: pointer;
  transition: color 0.18s ease;
}
.er-radix-accordion__trigger:focus-visible {
  outline: var(--site-focus-ring-width) solid var(--site-focus-ring-color);
  outline-offset: var(--site-focus-ring-offset);
}
.er-radix-accordion__trigger[data-disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Chevron — renderers may render any svg/icon inside; this rule rotates it. */
.er-radix-accordion__chevron {
  flex-shrink: 0;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.er-radix-accordion__trigger[data-state="open"] .er-radix-accordion__chevron {
  transform: rotate(180deg);
}

.er-radix-accordion__content {
  overflow: hidden;
  color: var(--site-radix-accordion-content-fg);
  font-size: var(--site-body-size);
  line-height: var(--site-lh-base);
}
/* Radix sets --radix-accordion-content-height for height-based animation. */
.er-radix-accordion__content[data-state="open"] {
  animation: er-radix-accordion-down 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.er-radix-accordion__content[data-state="closed"] {
  animation: er-radix-accordion-up 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.er-radix-accordion__content-inner {
  padding: 0 0 var(--site-space-md) 0;
}

@keyframes er-radix-accordion-down {
  from { height: 0; }
  to   { height: var(--radix-accordion-content-height); }
}
@keyframes er-radix-accordion-up {
  from { height: var(--radix-accordion-content-height); }
  to   { height: 0; }
}

/* ─────────────────────────────────────────────────────────────────────
 * Collapsible (`@radix-ui/react-collapsible`) — disclosure-item, generic
 * single show/hide. Same data-state vocabulary as Accordion. */
.er-radix-collapsible__trigger {
  appearance: none;
  background: transparent;
  border: 0;
  padding: var(--site-space-sm) 0;
  font-family: var(--site-font-body);
  font-weight: var(--site-fw-semibold);
  color: var(--site-text);
  cursor: pointer;
}
.er-radix-collapsible__trigger:focus-visible {
  outline: var(--site-focus-ring-width) solid var(--site-focus-ring-color);
  outline-offset: var(--site-focus-ring-offset);
}
.er-radix-collapsible__content {
  overflow: hidden;
}
.er-radix-collapsible__content[data-state="open"] {
  animation: er-radix-collapsible-down 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
.er-radix-collapsible__content[data-state="closed"] {
  animation: er-radix-collapsible-up 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes er-radix-collapsible-down {
  from { height: 0; opacity: 0; }
  to   { height: var(--radix-collapsible-content-height); opacity: 1; }
}
@keyframes er-radix-collapsible-up {
  from { height: var(--radix-collapsible-content-height); opacity: 1; }
  to   { height: 0; opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────────────
 * Tooltip (`@radix-ui/react-tooltip`)
 *   Targets:
 *     [data-state="delayed-open" | "instant-open" | "closed"]
 *     [data-side="top" | "right" | "bottom" | "left"]
 *
 *   Trigger has no special class — renderers style the trigger as a
 *   normal element. Floating Content uses className="er-radix-tooltip". */
.er-radix-tooltip {
  background: var(--site-radix-tooltip-bg);
  color: var(--site-radix-tooltip-fg);
  font-family: var(--site-font-body);
  font-size: var(--site-small-size);
  line-height: var(--site-lh-tight);
  padding: var(--site-space-sm) var(--site-space-md);
  border-radius: var(--site-radius);
  box-shadow: var(--site-radix-tooltip-shadow);
  max-width: 280px;
  z-index: 50;
  user-select: none;
  animation-duration: 0.18s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.er-radix-tooltip[data-state="delayed-open"][data-side="top"]    { animation-name: er-radix-slide-down-fade; }
.er-radix-tooltip[data-state="delayed-open"][data-side="right"]  { animation-name: er-radix-slide-left-fade; }
.er-radix-tooltip[data-state="delayed-open"][data-side="bottom"] { animation-name: er-radix-slide-up-fade; }
.er-radix-tooltip[data-state="delayed-open"][data-side="left"]   { animation-name: er-radix-slide-right-fade; }

.er-radix-tooltip__arrow {
  fill: var(--site-radix-tooltip-bg);
}

/* ─────────────────────────────────────────────────────────────────────
 * Dialog (`@radix-ui/react-dialog`) — modal, cart-drawer, support-ticket,
 * cookie-consent (used as a non-modal drawer in some renderers).
 *
 *   Renderers split into two classes:
 *     - .er-radix-dialog__overlay  : the backdrop rendered by Dialog.Overlay
 *     - .er-radix-dialog__content  : the modal panel rendered by Dialog.Content
 *
 *   Drawer / sheet variants override transform-origin via a modifier class
 *   (`--right`, `--left`, `--bottom`) so the same primitive backs both
 *   centered modals and slide-in drawers. */
.er-radix-dialog__overlay {
  position: fixed;
  inset: 0;
  background: var(--site-radix-overlay-bg);
  /* saturate boost so the blurred page chrome reads as chromatic glass,
     not muddy gray — matches the form's surface blur recipe. */
  backdrop-filter: blur(var(--site-radix-overlay-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--site-radix-overlay-blur)) saturate(140%);
  z-index: 50;
  animation: er-radix-overlay-show 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.er-radix-dialog__overlay[data-state="closed"] {
  animation: er-radix-overlay-hide 0.14s cubic-bezier(0.4, 0, 1, 1);
}

.er-radix-dialog__content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 560px);
  max-height: 85vh;
  overflow: auto;
  background: var(--site-radix-dialog-bg);
  color: var(--site-radix-dialog-fg);
  border-radius: var(--site-radix-dialog-radius);
  box-shadow: var(--site-radix-dialog-shadow);
  padding: var(--site-space-lg);
  z-index: 51;
  animation: er-radix-dialog-show 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.er-radix-dialog__content:focus-visible {
  outline: none;
}
.er-radix-dialog__content[data-state="closed"] {
  animation: er-radix-dialog-hide 0.16s cubic-bezier(0.4, 0, 1, 1);
}

/* Drawer variant — slides in from a side instead of centering. */
.er-radix-dialog__content--right {
  top: 0;
  left: auto;
  right: 0;
  transform: none;
  width: min(92vw, 420px);
  max-height: 100vh;
  height: 100vh;
  border-radius: 0;
  animation: er-radix-drawer-in-right 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}
.er-radix-dialog__content--right[data-state="closed"] {
  animation: er-radix-drawer-out-right 0.2s cubic-bezier(0.4, 0, 1, 1);
}
.er-radix-dialog__content--left {
  top: 0;
  left: 0;
  right: auto;
  transform: none;
  width: min(92vw, 420px);
  max-height: 100vh;
  height: 100vh;
  border-radius: 0;
  animation: er-radix-drawer-in-left 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}
.er-radix-dialog__content--left[data-state="closed"] {
  animation: er-radix-drawer-out-left 0.2s cubic-bezier(0.4, 0, 1, 1);
}
.er-radix-dialog__content--bottom {
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  width: 100vw;
  max-height: 90vh;
  border-radius: var(--site-radius-lg) var(--site-radius-lg) 0 0;
  animation: er-radix-drawer-in-bottom 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}
.er-radix-dialog__content--bottom[data-state="closed"] {
  animation: er-radix-drawer-out-bottom 0.2s cubic-bezier(0.4, 0, 1, 1);
}

/* ── Modal element: hand width + padding control back to .el-modal__dialog
 *    The base `.er-radix-dialog__content` rule above hardcodes
 *    `width: min(92vw, 560px)` and `padding: var(--site-space-lg)`. That's
 *    the right default for stand-alone Radix dialogs, but the Modal element
 *    composes BOTH classes (`.el-modal__dialog .el-modal__dialog--{size}
 *    .er-radix-dialog__content`) so the author-facing
 *    `--modal-dialog-max-width-*` tokens (sm/md/lg/full) and
 *    `el-modal__body` padding can take effect. Without this override, every
 *    Modal would silently cap at 560px regardless of the size setting. */
.el-modal__dialog.er-radix-dialog__content {
  width: 100%;
  padding: 0;
  /* When the modal hosts a chrome'd child (login-form glass card, etc.)
     the child provides the visible surface. The base Radix rule paints
     --site-radix-dialog-bg + --site-radix-dialog-shadow + a fixed
     --site-radius-lg radius onto the dialog — which leaks past a child's
     larger radius as a sharp rectangle (see img_50). Re-route to the
     author-set `--modal-dialog-bg` / `--modal-dialog-shadow` / `--modal-
     dialog-radius` tokens with `transparent` defaults so the dialog is
     invisible unless the author opts back into chrome via the inspector.
     overflow:visible lets the child's drop shadow render outside the
     dialog box. */
  background: var(--modal-dialog-bg, transparent);
  box-shadow: var(--modal-dialog-shadow, none);
  border-radius: var(--modal-dialog-radius, var(--site-radius-lg));
  overflow: visible;
}
/* Login-form host: the form IS the visible modal. Force panel chrome off
   regardless of any author-set --modal-dialog-bg from the inspector — an
   extra rectangle around the glass card just creates a halo (img_52).
   `:has()` is widely supported in modern browsers; the rule is purely
   visual so non-supporting browsers fall back to the standard panel,
   which is acceptable. */
.el-modal__dialog.er-radix-dialog__content:has(.el-login-form) {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
.el-modal__dialog.er-radix-dialog__content:has(.el-login-form) .el-modal__body {
  padding: 0 !important;
}
/* Themed scrollbar on the dialog's overflow track — matches the same
 * `--site-accent` thumb pattern used by the navbar search drawer
 * (er-layout.css ~552), so when the modal's content exceeds max-height
 * users see a recognisable site-themed scrollbar instead of the raw OS
 * chrome. Firefox uses scrollbar-width/color; WebKit gets the pseudo-
 * element styling. The track is transparent so it disappears against any
 * dialog background. */
.el-modal__dialog.er-radix-dialog__content {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--site-accent, deepskyblue) 55%, transparent) transparent;
}
.el-modal__dialog.er-radix-dialog__content::-webkit-scrollbar {
  width: 10px;
}
.el-modal__dialog.er-radix-dialog__content::-webkit-scrollbar-track {
  background: transparent;
}
.el-modal__dialog.er-radix-dialog__content::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--site-accent, deepskyblue) 45%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.el-modal__dialog.er-radix-dialog__content::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--site-accent, deepskyblue) 75%, transparent);
  background-clip: padding-box;
}
.el-modal__dialog.er-radix-dialog__content::-webkit-scrollbar-corner {
  background: transparent;
}
/* The modal renderer wraps children in `.el-modal__body`. The Radix base
 * rule's padding was just zeroed above, so put breathing room back on the
 * inner body — falls back to a sensible 24px when the site-space token is
 * unset (e.g. preview routes mid-bootstrap). */
.el-modal__dialog .el-modal__body {
  padding: var(--site-space-lg, 24px);
  min-width: 0;
}
/* Floating close X — sits in the top-right corner above the body padding.
 * Matches the dark-glass tint of the rest of the platform. */
.el-modal__dialog .el-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--site-fg, white) 18%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--site-fg, white) 14%, transparent) 0%,
      color-mix(in srgb, var(--site-fg, white) 6%, transparent) 100%);
  /* Glass-pill stack: inner top sheen + soft inset bottom + outer lift. */
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--site-fg, white) 22%, transparent),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 4px 12px -4px rgba(0,0,0,0.4);
  color: color-mix(in srgb, var(--site-fg, white) 78%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 0;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.el-modal__dialog .el-modal__close:hover {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--site-fg, white) 22%, transparent) 0%,
      color-mix(in srgb, var(--site-fg, white) 12%, transparent) 100%);
  border-color: color-mix(in srgb, var(--site-fg, white) 32%, transparent);
  color: var(--site-fg, white);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--site-fg, white) 28%, transparent),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 6px 18px -4px rgba(0,0,0,0.5);
  transform: rotate(90deg);
}
.el-modal__dialog .el-modal__close:active {
  transform: rotate(90deg) scale(0.94);
}
.el-modal__dialog .el-modal__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-accent, deepskyblue) 40%, transparent);
}
 *   Used by: any element that needs an anchored floating panel that is
 *   NOT modal (info menus, share menus). The CartDrawer renderer should
 *   use Dialog not Popover (focus-trap is desired there). */
.er-radix-popover {
  background: var(--site-radix-popover-bg);
  color: var(--site-radix-popover-fg);
  border: 1px solid var(--site-radix-popover-border);
  border-radius: var(--site-radius);
  box-shadow: var(--site-radix-popover-shadow);
  padding: var(--site-space-md);
  z-index: 50;
  animation-duration: 0.18s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.er-radix-popover[data-state="open"][data-side="top"]    { animation-name: er-radix-slide-down-fade; }
.er-radix-popover[data-state="open"][data-side="right"]  { animation-name: er-radix-slide-left-fade; }
.er-radix-popover[data-state="open"][data-side="bottom"] { animation-name: er-radix-slide-up-fade; }
.er-radix-popover[data-state="open"][data-side="left"]   { animation-name: er-radix-slide-right-fade; }

.er-radix-popover__arrow {
  fill: var(--site-radix-popover-bg);
}

/* ─────────────────────────────────────────────────────────────────────
 * NavigationMenu (`@radix-ui/react-navigation-menu`) — navbar dropdowns.
 *
 *   Inherits the navbar dropdown tokens (`--site-navbar-dropdown-*`)
 *   so the existing navbar styling contract carries over without a
 *   second token namespace. The position: fixed + backdrop-filter
 *   ancestor trap is documented in
 *   memory/shadcn_radix_adoption_program_2026_05_01.md § Risk callout 6;
 *   keep `[data-radix-popper-content-wrapper]` portaled. */
.er-radix-navmenu__list {
  display: flex;
  align-items: center;
  gap: var(--navbar-link-gap, var(--site-space-md));
  list-style: none;
  margin: 0;
  padding: 0;
}

.er-radix-navmenu__trigger {
  appearance: none;
  background: transparent;
  border: 0;
  padding: var(--site-space-sm) var(--site-space-md);
  font-family: var(--site-font-body);
  font-weight: var(--site-fw-medium);
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.er-radix-navmenu__trigger:focus-visible {
  outline: var(--site-focus-ring-width) solid var(--site-focus-ring-color);
  outline-offset: var(--site-focus-ring-offset);
  border-radius: var(--site-radius);
}

.er-radix-navmenu__content {
  background: var(--site-navbar-dropdown-bg, var(--site-radix-popover-bg));
  color: var(--site-navbar-dropdown-text, var(--site-radix-popover-fg));
  border: 1px solid var(--site-radix-popover-border);
  border-radius: var(--site-radius);
  box-shadow: var(--site-radix-popover-shadow);
  padding: var(--site-space-sm);
  min-width: 200px;
  animation-duration: 0.2s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.er-radix-navmenu__content[data-motion="from-start"] { animation-name: er-radix-enter-from-left; }
.er-radix-navmenu__content[data-motion="from-end"]   { animation-name: er-radix-enter-from-right; }
.er-radix-navmenu__content[data-motion="to-start"]   { animation-name: er-radix-exit-to-left; }
.er-radix-navmenu__content[data-motion="to-end"]     { animation-name: er-radix-exit-to-right; }

.er-radix-navmenu__link {
  display: block;
  padding: var(--site-space-sm) var(--site-space-md);
  border-radius: var(--site-radius);
  color: var(--site-navbar-dropdown-text, var(--site-text));
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.er-radix-navmenu__link:hover,
.er-radix-navmenu__link[data-active] {
  background: var(--site-navbar-dropdown-hover-bg, var(--site-surface-alt));
  color: var(--site-navbar-dropdown-hover-text, var(--site-text));
}
/* Top-level navbar links/triggers must NOT inherit the dropdown-item pill styling
 * (padding + radius + bg). The radix NavigationMenu component shares the same
 * `.er-radix-navmenu__link` / `__trigger` class for both top-level menu items
 * and the dropdown-item leaves; the dropdown-item styling above bumps every
 * navbar link with cream pill bg + chunky radix padding + radius, which (a)
 * misaligns them with the brand text, (b) makes the active link render as a
 * cream pill instead of just an accent text-color change, and (c) bleeds the
 * dropdown's --site-radius corners onto every link.
 *
 * Scope the override to `.el-navbar__link` (top-level) so dropdown items
 * (`.el-navbar__dropdown-item`) keep the dropdown styling. */
.el-navbar__link.er-radix-navmenu__link,
.el-navbar__link.er-radix-navmenu__trigger {
  padding: 0 0.5rem;
  border-radius: 0;
  background: transparent;
  /* Inherit from .el-navbar__link so flat links and dropdown triggers
     render with identical typography. Without these, .er-radix-navmenu__trigger
     applied --site-fw-medium and a different font stack to <button> elements,
     making dropdown labels look lighter than flat <a> links. */
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}
/* Dropdown-item leaves rendered through Radix NavigationMenu.Link carry both
   `.el-navbar__dropdown-item` and `.er-radix-navmenu__link`. The radix rule
   above sets padding via --site-space-* tokens (~16px), which makes leaf items
   (e.g. "About Us") indent further than sibling flyout-trigger items (e.g.
   "Consulting") whose wrapper bypasses the radix Link class entirely. Lock
   the leaf padding/radius to the dropdown-item contract so all items in a
   dropdown align to the same edge. */
.el-navbar__dropdown-item.er-radix-navmenu__link {
  padding: 0.6rem 0.5rem;
  border-radius: 12px;
}
.el-navbar__link.er-radix-navmenu__link:hover,
.el-navbar__link.er-radix-navmenu__link[data-active],
.el-navbar__link.er-radix-navmenu__trigger:hover,
.el-navbar__link.er-radix-navmenu__trigger[data-state="open"] {
  background: transparent;
  /* color is owned by the .el-navbar__link / .el-navbar__link--active rules
   * in er-layout.css — leave it alone here so the cascade can resolve to the
   * accent token via --navbar-link-active / --navbar-link-hover. */
}
.er-radix-navmenu__link:focus-visible {
  outline: var(--site-focus-ring-width) solid var(--site-focus-ring-color);
  outline-offset: var(--site-focus-ring-offset);
}

/* ─────────────────────────────────────────────────────────────────────
 * Shared keyframes — used by Tooltip, Popover, Dialog, NavigationMenu.
 * Kept at the bottom so a future split-out (e.g. moving keyframes to
 * a shared animations file) is a single contiguous edit. */

@keyframes er-radix-overlay-show {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes er-radix-overlay-hide {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes er-radix-dialog-show {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes er-radix-dialog-hide {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
}

@keyframes er-radix-drawer-in-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes er-radix-drawer-out-right {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}
@keyframes er-radix-drawer-in-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
@keyframes er-radix-drawer-out-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@keyframes er-radix-drawer-in-bottom {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes er-radix-drawer-out-bottom {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

@keyframes er-radix-slide-down-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes er-radix-slide-up-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes er-radix-slide-left-fade {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes er-radix-slide-right-fade {
  from { opacity: 0; transform: translateX(4px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes er-radix-enter-from-left {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes er-radix-enter-from-right {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes er-radix-exit-to-left {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-12px); }
}
@keyframes er-radix-exit-to-right {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(12px); }
}

/* ─────────────────────────────────────────────────────────────────────
 * Reduced-motion: zero every transition + animation. */
@media (prefers-reduced-motion: reduce) {
  .er-radix-tabs__trigger,
  .er-radix-accordion__trigger,
  .er-radix-accordion__chevron,
  .er-radix-collapsible__trigger,
  .er-radix-tooltip,
  .er-radix-popover,
  .er-radix-dialog__overlay,
  .er-radix-dialog__content,
  .er-radix-navmenu__content,
  .er-radix-navmenu__link {
    transition: none !important;
    animation: none !important;
  }
  .er-radix-accordion__content[data-state="open"],
  .er-radix-accordion__content[data-state="closed"],
  .er-radix-collapsible__content[data-state="open"],
  .er-radix-collapsible__content[data-state="closed"] {
    animation: none !important;
  }
}