/* Neutral panels frame vivid, scalable vector icons. Each theme has its own palette. */
:root {
  --nav-icon-blue: #2460d4;
  --nav-icon-teal: #007e94;
  --nav-icon-rose: #bf246f;
  --nav-icon-green: #137a54;
  --nav-icon-amber: #9d5a08;
  --nav-icon-violet: #7737cf;
  --nav-android-green: #60951e;
}
:root[data-theme=dark] {
  --nav-icon-blue: #8fb5ff;
  --nav-icon-teal: #68d6e4;
  --nav-icon-rose: #ff9cc7;
  --nav-icon-green: #75ddb1;
  --nav-icon-amber: #ffce7b;
  --nav-icon-violet: #c9a0ff;
  --nav-android-green: #a4c639;
}
.eh-header .eh-mega {
  background: var(--eh-panel);
  border-color: var(--eh-line);
}
.eh-header .eh-menu-link { --menu-color: var(--nav-icon-violet); }
.eh-header .eh-menu-link:has(.eh-menu-icon--forms, .eh-menu-icon--library, .eh-menu-icon--grid, .eh-menu-icon--people) { --menu-color: var(--nav-icon-blue); }
.eh-header .eh-menu-link:has(.eh-menu-icon--report, .eh-menu-icon--phone, .eh-menu-icon--worksite) { --menu-color: var(--nav-icon-teal); }
.eh-header .eh-menu-link:has(.eh-menu-icon--training, .eh-menu-icon--video) { --menu-color: var(--nav-icon-rose); }
.eh-header .eh-menu-link:has(.eh-menu-icon--action, .eh-menu-icon--check, .eh-menu-icon--download, .eh-menu-icon--call) { --menu-color: var(--nav-icon-green); }
.eh-header .eh-menu-link:has(.eh-menu-icon--warning, .eh-menu-icon--construction, .eh-menu-icon--manufacturing, .eh-menu-icon--energy) { --menu-color: var(--nav-icon-amber); }
.eh-header .eh-menu-icon,
.eh-header .cp-menu-route i,
.eh-header .cp-menu-call-icon {
  color: var(--menu-color, var(--nav-icon-violet));
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--menu-color, var(--nav-icon-violet)) 6%, var(--eh-panel)),
    color-mix(in srgb, var(--menu-color, var(--nav-icon-violet)) 18%, var(--eh-panel)));
  border: 1px solid color-mix(in srgb, var(--menu-color, var(--nav-icon-violet)) 30%, var(--eh-panel));
  box-shadow: inset 0 1px 0 var(--eh-panel), 0 2px 5px color-mix(in srgb, var(--eh-ink) 6%, transparent);
  transition: transform .22s ease, box-shadow .22s ease;
}
.eh-header .eh-menu-icon { width: 42px; height: 42px; border-radius: 12px; }
.eh-header .eh-menu-icon > svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.8;
  shape-rendering: geometricPrecision;
  filter: none;
}
.eh-header .eh-menu-link:is(:hover, :focus-visible) {
  background: linear-gradient(110deg,
    color-mix(in srgb, var(--menu-color) 10%, var(--eh-panel)),
    color-mix(in srgb, var(--menu-color) 3%, var(--eh-panel)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--menu-color) 22%, transparent),
    0 4px 14px color-mix(in srgb, var(--menu-color) 9%, transparent);
  transform: translateX(3px);
}
.eh-header .eh-menu-link:is(:hover, :focus-visible) .eh-menu-icon {
  transform: translateY(-2px) rotate(-4deg) scale(1.04);
  box-shadow: inset 0 1px 0 var(--eh-panel), 0 6px 14px color-mix(in srgb, var(--menu-color) 19%, transparent);
}
.eh-header .eh-menu-link::after { color: var(--menu-color); }
.eh-header .cp-menu-route i:nth-of-type(1) { --menu-color: var(--nav-icon-blue); }
.eh-header .cp-menu-route i:nth-of-type(2) { --menu-color: var(--nav-icon-violet); }
.eh-header .cp-menu-route i:nth-of-type(3) { --menu-color: var(--nav-icon-teal); }
.eh-header .cp-menu-call-icon { --menu-color: var(--nav-icon-green); }
.eh-header .bf-platform-mini .nav-platform-icon--android {
  color: var(--nav-android-green);
  width: 24px;
  height: 26px;
}
.eh-header .eh-nav-group > summary,
.eh-header .eh-nav-group > summary:is(:hover, :focus-visible),
.eh-header .eh-nav-group[open] > summary,
.eh-header .eh-nav-price:is(:hover, :focus-visible) {
  background: transparent;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .eh-header .eh-menu-link,
  .eh-header .eh-menu-icon,
  .eh-header .cp-menu-route i,
  .eh-header .cp-menu-call-icon {
    transition: none;
    transform: none !important;
  }
}