/* =========================================================
   NAV.CSS — DROP-IN (LABELED SECTIONS)
   Purpose:
   - 2-line nav, LEFT-aligned (desktop + mobile)
   - monospace nav font
   - no page-level horizontal scroll
   - primary row can swipe-scroll if needed
   - secondary row uses fixed square arrow buttons + internal scroller
   - reusable subnav rows can use the same scroll system
   ========================================================= */

/* [SECTION 01] Variables (font + tunables) */
:root{
  --nav-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
              "Liberation Mono", "Courier New", monospace;

  --nav-arrow-size: 1.45rem;
  --nav-arrow-gap: .40rem;
  --nav-arrow-border: 1px solid #000;
  --nav-arrow-bg: #fff;
  --nav-arrow-fg: #000;
  --nav-arrow-fg-disabled: #9a9a9a;
  --nav-arrow-border-disabled: 1px solid #9a9a9a;

  --nav-scroll-padding: calc((var(--nav-arrow-size) * 2) + var(--nav-arrow-gap) + .25rem);
  --nav-scroll-step: 260px;
}

/* [SECTION 02] Global safety: prevent page-level horizontal scroll */
html, body{
  overflow-x: hidden !important;
}

/* [SECTION 03] Baseline nav typography + LEFT ALIGN */
.subtitle{
  margin: 0 0 1rem !important;
  padding: 0 !important;
  font-family: var(--nav-font) !important;
  font-size: 1.05rem !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  color: #000 !important;
  text-align: left !important;
}

/* [SECTION 04] Links: default appearance (primary row may remain underlined) */
.subtitle a{
  font-family: var(--nav-font) !important;
  color: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 0.12em !important;
  font-size: inherit !important;
  line-height: 1.25 !important;
  position: relative !important;
  top: 0 !important;
}

/* [SECTION 05] Home icon wrapper */
.subtitle .nav-home{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* [SECTION 06] FontAwesome icon normalization (if used) */
.subtitle .fa{
  font-family: var(--nav-font) !important;
  font-size: 1em !important;
  line-height: 1 !important;
  position: relative !important;
  top: 0 !important;
}

/* [SECTION 07] Prevent layout shift across pages (vertical scrollbar stability) */
html{
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

/* [SECTION 08] Nav stack spacing (2-line nav block) */
.nav-stack{
  margin: 0 0 1rem !important;
  padding: 0 !important;
  max-width: 100%;
  text-align: left !important;
}

.nav-stack .nav-primary{
  margin: 0 0 .6rem 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

.nav-stack .nav-secondary{
  margin: 0 0 1rem 0 !important;
  padding: 0 !important;
  font-size: 1.00rem !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

/* [SECTION 09] Hard stop against “buttonizing” nav links */
.nav-stack a{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* [SECTION 10] Primary row: allow swipe horizontal scroll if needed */
.nav-stack .nav-primary{
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav-stack .nav-primary::-webkit-scrollbar{
  display: none;
}

/* [SECTION 11] Scroll row wrapper (NOT the scroller) */
.nav-scrollrow,
.subnav-scrollrow{
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  padding-left: var(--nav-scroll-padding) !important;
  padding-right: var(--nav-scroll-padding) !important;
  min-height: calc(var(--nav-arrow-size) + .1rem) !important;
  text-align: left !important;
}

/* [SECTION 12] The actual horizontal scroller */
.nav-scrollrow .nav-scrollarea,
.subnav-scrollrow .subnav-scrollarea,
.subnav-scrollrow .nav-scrollarea{
  display: block !important;
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav-scrollrow .nav-scrollarea::-webkit-scrollbar,
.subnav-scrollrow .subnav-scrollarea::-webkit-scrollbar,
.subnav-scrollrow .nav-scrollarea::-webkit-scrollbar{
  display: none;
}

/* [SECTION 13] Inner wrapper (content width based on links) */
.nav-scrollrow .nav-scroll-inner,
.subnav-scrollrow .subnav-scroll-inner,
.subnav-scrollrow .nav-scroll-inner{
  display: inline-block !important;
  min-width: max-content !important;
  padding: .08rem 0 !important;
}

/* [SECTION 14] Secondary/subnav row links: remove underlines */
.nav-scrollrow a,
.subnav-scrollrow a{
  text-decoration: none !important;
}

/* [SECTION 15] Arrow buttons (square bordered buttons, always visible) */
.nav-scrollrow .nav-arrow,
.subnav-scrollrow .nav-arrow,
.subnav-scrollrow .subnav-arrow{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: var(--nav-arrow-size) !important;
  height: var(--nav-arrow-size) !important;
  padding: 0 !important;
  border: var(--nav-arrow-border) !important;
  background: var(--nav-arrow-bg) !important;
  color: var(--nav-arrow-fg-disabled) !important;
  font-family: var(--nav-font) !important;
  font-weight: 400 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  z-index: 10 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.nav-scrollrow .nav-arrow::before,
.subnav-scrollrow .nav-arrow::before,
.subnav-scrollrow .subnav-arrow::before{
  display: inline-block !important;
  font-family: var(--nav-font) !important;
  font-weight: 700 !important;
  font-size: .95rem !important;
  line-height: 1 !important;
  color: inherit !important;
}

.nav-scrollrow .nav-arrow-left::before,
.subnav-scrollrow .nav-arrow-left::before,
.subnav-scrollrow .subnav-arrow-left::before{
  content: "<";
}

.nav-scrollrow .nav-arrow-right::before,
.subnav-scrollrow .nav-arrow-right::before,
.subnav-scrollrow .subnav-arrow-right::before{
  content: ">";
}

/* [SECTION 16] Arrow positions (pinned to edges) */
.nav-scrollrow .nav-arrow-left,
.subnav-scrollrow .nav-arrow-left,
.subnav-scrollrow .subnav-arrow-left{
  left: 0 !important;
}

.nav-scrollrow .nav-arrow-right,
.subnav-scrollrow .nav-arrow-right,
.subnav-scrollrow .subnav-arrow-right{
  right: 0 !important;
}

/* [SECTION 17] Arrow states */
.nav-scrollrow .nav-arrow.is-active,
.subnav-scrollrow .nav-arrow.is-active,
.subnav-scrollrow .subnav-arrow.is-active{
  color: var(--nav-arrow-fg) !important;
  border: var(--nav-arrow-border) !important;
  background: var(--nav-arrow-bg) !important;
}

.nav-scrollrow .nav-arrow.is-disabled,
.subnav-scrollrow .nav-arrow.is-disabled,
.subnav-scrollrow .subnav-arrow.is-disabled{
  color: var(--nav-arrow-fg-disabled) !important;
  border: var(--nav-arrow-border-disabled) !important;
  background: #fff !important;
  cursor: default !important;
  opacity: 1 !important;
}

.nav-scrollrow.is-overflowing .nav-arrow:not(.is-disabled),
.subnav-scrollrow.is-overflowing .nav-arrow:not(.is-disabled),
.subnav-scrollrow.is-overflowing .subnav-arrow:not(.is-disabled){
  color: var(--nav-arrow-fg) !important;
  border: var(--nav-arrow-border) !important;
}

/* [SECTION 18] Optional helper styling for standalone subnav blocks */
.subnav-scrollrow{
  margin: 0 0 1rem 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-family: var(--nav-font) !important;
  font-size: 1rem !important;
  line-height: 1.25 !important;
  color: #000 !important;
  text-align: left !important;
}