/* Overflowing horizontal sub-navigation — shared behaviour.
 *
 * Only layout/affordance rules live here. Colours, fonts, spacing, radius and
 * active/hover states stay entirely with each page's own nav CSS: this file
 * must never change how a nav LOOKS, only how it BEHAVES when it does not fit.
 *
 * Applied by static/src/js/hscroll-nav.js, which adds .hsn-host to the scroll
 * container and only then reveals the arrows/fades.
 */

/* The scroll container itself. */
.hsn-host {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;   /* native momentum swipe on iOS   */
  scroll-behavior: smooth;
  scrollbar-width: thin;               /* Firefox: subtle, not hidden    */
  scrollbar-color: rgba(100,116,139,.35) transparent;
  overscroll-behavior-x: contain;      /* never chain to page/back-nav   */
}
.hsn-host::-webkit-scrollbar { height: 4px; }
.hsn-host::-webkit-scrollbar-track { background: transparent; }
.hsn-host::-webkit-scrollbar-thumb { background: rgba(100,116,139,.28); border-radius: 999px; }
.hsn-host:hover::-webkit-scrollbar-thumb { background: rgba(100,116,139,.45); }

/* Items must stay on one line for the container to overflow at all. A row that
   wraps never overflows, so there would be nothing to scroll. */
.hsn-host { flex-wrap: nowrap !important; }
.hsn-host > * { flex: 0 0 auto; }
.hsn-host a, .hsn-host button { white-space: nowrap; }

/* Wrapper the script injects around the container so arrows/fades can be
   positioned without disturbing the page's own layout box. */
.hsn-wrap { position: relative; min-width: 0; }

/* Edge fades — pure affordance, pointer-events:none so they never eat a click. */
.hsn-wrap::before,
.hsn-wrap::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 28px;
  pointer-events: none; opacity: 0; transition: opacity .15s ease; z-index: 2;
}
.hsn-wrap::before { left: 0;  background: linear-gradient(to right, rgba(255,255,255,.95), rgba(255,255,255,0)); }
.hsn-wrap::after  { right: 0; background: linear-gradient(to left,  rgba(255,255,255,.95), rgba(255,255,255,0)); }
.hsn-wrap.hsn-can-left::before  { opacity: 1; }
.hsn-wrap.hsn-can-right::after  { opacity: 1; }

/* Arrow buttons. Hidden unless the nav actually overflows in that direction. */
.hsn-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3; display: none;
  width: 26px; height: 26px; border-radius: 999px;
  align-items: center; justify-content: center;
  background: #fff; color: #475569;
  border: 1px solid rgba(148,163,184,.45);
  box-shadow: 0 2px 6px -1px rgba(15,23,42,.18);
  cursor: pointer; padding: 0; line-height: 1;
  font-size: 15px; font-family: inherit;
}
.hsn-btn:hover  { background: #f8fafc; color: #1e293b; }
.hsn-btn:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.hsn-btn-left  { left: 2px; }
.hsn-btn-right { right: 2px; }
.hsn-wrap.hsn-can-left  .hsn-btn-left  { display: flex; }
.hsn-wrap.hsn-can-right .hsn-btn-right { display: flex; }

/* While dragging, suppress text selection and the click that ends the drag. */
.hsn-host.hsn-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.hsn-host.hsn-dragging a, .hsn-host.hsn-dragging button { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .hsn-host { scroll-behavior: auto; }
  .hsn-wrap::before, .hsn-wrap::after { transition: none; }
}