/* Top nav, bulletproof on iPhone Safari (Duncan 23:08): pills never shrink or clip; below 400px Menu is
   icon-only; search is an icon-only pill (white, 2px #2B2F36 border, 44x44); if the row still can't fit
   it scrolls sideways (no visible scrollbar) rather than clipping. Loads after nav-fit.css. */
html { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }
html body #hcr-nav .hcr-nav-row {
  display: flex !important; flex-wrap: nowrap !important; gap: 6px !important;
  overflow-x: auto !important; overflow-y: visible !important;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
}
html body #hcr-nav .hcr-nav-row::-webkit-scrollbar { display: none; }
html body #hcr-nav .hcr-nav-row > li { flex: 0 0 auto !important; min-width: max-content !important; }
html body #hcr-nav .hcr-nav-row .hcr-nav-btn {
  flex: 0 0 auto !important; min-width: max-content !important; width: auto !important;
  white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important;
}
/* Search = icon-only pill */
html body #hcr-nav .hcr-nav-row > li.hcr-nav-li-icon { flex: 0 0 44px !important; width: 44px !important; min-width: 44px !important; }
html body #hcr-nav .hcr-nav-row .hcr-nav-icon {
  width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important;
  padding: 0 !important; background: #FFFFFF !important; background-color: #FFFFFF !important;
  border: 2px solid #2B2F36 !important; border-radius: 999px !important; color: #2B2F36 !important;
  box-shadow: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
html body #hcr-nav .hcr-nav-row .hcr-nav-icon:hover { background: #EEF0F2 !important; background-color: #EEF0F2 !important; }
@media (max-width: 400px) {
  html body #hcr-nav .hcr-nav-row { gap: 6px !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
  html body #hcr-nav .hcr-nav-row > li.hcr-nav-li-text > .hcr-nav-btn {
    padding: 0 10px !important; font-size: 13px !important; height: 44px !important; min-height: 44px !important;
  }
  /* Menu: icon-only hamburger pill; the "Menu" text stays for screen readers */
  html body #hcr-nav .hcr-nav-row > li.hcr-nav-li-menu { flex: 0 0 44px !important; min-width: 44px !important; }
  html body #hcr-nav .hcr-nav-row .hcr-nav-btn.hcr-nav-menu {
    width: 44px !important; min-width: 44px !important; height: 44px !important; padding: 0 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important;
  }
  html body #hcr-nav .hcr-nav-row .hcr-nav-btn.hcr-nav-menu > span {
    position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important;
    clip: rect(0 0 0 0) !important; white-space: nowrap !important; margin: -1px !important; padding: 0 !important; border: 0 !important;
  }
  html body #hcr-nav .hcr-nav-row .hcr-nav-btn.hcr-nav-menu > svg { display: block !important; width: 20px !important; height: 20px !important; margin: 0 !important; stroke: currentColor; }
}
@media (max-width: 374px) {
  html body #hcr-nav .hcr-nav-row { gap: 4px !important; }
  html body #hcr-nav .hcr-nav-row > li.hcr-nav-li-text > .hcr-nav-btn { padding: 0 8px !important; font-size: 12.5px !important; }
}
