/* ==========================================================================
   ANCHOR NAV — structure only (behavior contract for anchor-nav.js).
   Makes the pill bar sticky, horizontally scrollable, and the subitem
   accordion functional. The visual skin (colours, radius, spacing, fonts)
   lives in the theme (assets/css/components.css) so it travels with the
   site's design, not the component. Test: everything here is "remove it and
   it breaks", not "remove it and it looks plain".
   ========================================================================== */

.jomi-anchor-nav {
  /* Fixed, not sticky: sticky stays in normal flow and reserves its height,
     pushing the page content down. Fixed takes it out of flow (no push) and
     overlays, pinned under the main-nav row at --jomi-nav-h (measured live by
     anchor-nav.js — the header wrapper is position:absolute, so the row is
     the real pinned element). Targets get scroll-margin-top so anchor jumps
     still clear it. */
  position: fixed;
  top: var(--jomi-nav-h, 0px);
  left: 0;
  right: 0;
  z-index: 90; /* above page content, below Divi's own fixed header */
  display: flex;
  justify-content: center;
  pointer-events: none; /* let the gutter beside the pill pass clicks through */
}

.jomi-nav-list {
  pointer-events: auto;
  display: flex;
  align-items: center;
  max-width: calc(100% - 2rem);
  margin: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none; /* Firefox */
}

.jomi-nav-list::-webkit-scrollbar { display: none; } /* WebKit */

.jomi-nav-item-li {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.jomi-nav-link,
.jomi-nav-sublink {
  display: inline-block;
  white-space: nowrap;
  text-decoration: none;
}

/* Subitems: hidden until their parent item is the active one (accordion). */
.jomi-nav-sublist {
  display: none;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jomi-nav-sublist.is-open { display: flex; }

.jomi-nav-sublist li { flex: 0 0 auto; }

/* Scroll targets sit below both sticky bars, so headings clear them when
   jumped to. Both heights are measured live into the two vars. */
.jomi-nav-item,
.jomi-nav-subitem {
  scroll-margin-top: calc(var(--jomi-nav-h, 0px) + var(--jomi-anchor-nav-h, 0px) + 0.75rem);
}