/* Overrides when Sticky Nav is on-screen */
.has-sticky-nav .section-header.-primary {
  z-index: 1000;
}
 
/* Container */
.sticky-nav {
  position: sticky;
  top: 0; /* refined by JS to include admin bar / fixed header / custom offset */
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background-color: #f2ece4;
  z-index: 99999;
}

/* WP admin bar default  */
.admin-bar .sticky-nav { top: 32px; }

/* List */
.sticky-nav__list {
  display: flex;
  gap: clamp(12px, 2vw, 24px);
  justify-content: center;
  align-items: center;
  padding: 13px 16px;
  margin: 0;
  list-style: none;
  overflow-x: auto;      /* nav can scroll horizontally on narrow screens */
  scroll-behavior: smooth;
}

.sticky-nav__item { flex: 0 0 auto; }

.sticky-nav__link {
  display: inline-block;
  text-decoration: none;
  padding: 8px 6px;
  border-bottom: 2px solid transparent;
  line-height: 1;
  color: rgba(4, 42, 63, .7);
}

/* Active state — gets applied via aria-current or .is-active */
.sticky-nav__link[aria-current="true"],
.sticky-nav__link.is-active {
  border-bottom-color: rgb(216, 66, 40);
  font-weight: 600;
  color: rgb(4, 42, 63);
}

/* Optional “hide under” breakpoints tied to layout field `hide_under` */
.sticky-nav--hide-under-640  { display: none; }
@media (min-width: 640px)  { .sticky-nav--hide-under-640 { display: block; } }

.sticky-nav--hide-under-768  { display: none; }
@media (min-width: 768px)  { .sticky-nav--hide-under-768 { display: block; } }

.sticky-nav--hide-under-1024 { display: none; }
@media (min-width: 1024px) { .sticky-nav--hide-under-1024 { display: block; } }