/* BoemBoost Theme — subnav.css
   Sub Nav Bar: continuous marquee strip directly under the main nav bar.
   All values driven by --bb-subnav-* variables written inline by header.php
   from the Nav Bar admin settings.
   ============================================================= */

/* ----------------------------------------
   Bar wrapper
   Sits flush against the nav bar (top = nav height).
---------------------------------------- */
.bb-subnav {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  z-index: 8900; /* just below .bb-nav-bar (9000) */
  background: var(--bb-subnav-bg, #002f2f);
  padding-top: var(--bb-subnav-pad-top, 10px);
  padding-bottom: var(--bb-subnav-pad-bottom, 10px);
  overflow: hidden;
  /* 100vw on the group includes the scrollbar width; clipping here keeps that
     from ever producing a horizontal scrollbar on the page. */
  max-width: 100%;
  transition: transform 0.3s ease, opacity 0.25s ease;
}

/* ----------------------------------------
   Scroll behaviour 1 — "Meebewegen met nav bar" (default)
   Follows the main nav when it hides on scroll down.
   Requires .bb-subnav to be the direct next sibling of .bb-nav-bar.
---------------------------------------- */
.bb-nav-bar.is-nav-hidden + .bb-subnav {
  transform: translateY(-100%);
}

/* ----------------------------------------
   Scroll behaviour 2 — "Alleen bovenaan tonen"
   Visible only at the very top of the page.
---------------------------------------- */
.bb-subnav--toponly.is-scrolled {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* ----------------------------------------
   Track — two identical groups side by side.
   Animating to -50% lands exactly on the start of group 2,
   which is visually identical to group 1 = seamless loop.
---------------------------------------- */
.bb-subnav__track {
  display: flex;
  width: max-content;
  animation-name: bb-subnav-scroll;
  animation-duration: var(--bb-subnav-loop, 38s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

/* Direction */
.bb-subnav.is-rtl .bb-subnav__track { animation-direction: normal; }  /* right → left */
.bb-subnav.is-ltr .bb-subnav__track { animation-direction: reverse; } /* left → right */

/* Pause on hover — only when the admin toggle is on */
.bb-subnav.is-pausable:hover .bb-subnav__track { animation-play-state: paused; }

@keyframes bb-subnav-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.bb-subnav__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  /* Each group is AT LEAST the full viewport wide, so the loop never shows a
     gap: as group 1 leaves on the left, group 2 is already covering the screen.
     If the items are wider than the viewport the group simply grows. */
  min-width: 100vw;
  /* Spread the items evenly across that width instead of bunching them left. */
  justify-content: space-around;
}

/* ----------------------------------------
   Cell — one item plus its separator.
   Grouping them means space-around distributes whole items evenly,
   instead of treating each separator as its own spacing slot.
---------------------------------------- */
.bb-subnav__cell {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* ----------------------------------------
   Items
   Colour is set per item inline from the admin repeater.
   Linked items are <a>, plain items are <span>.
---------------------------------------- */
.bb-subnav__item {
  display: inline-flex;
  align-items: center;
  /* Typography-rol 'subnav-item' overschrijft; leeg = huidige stijl. */
  font-family: var(--bb-role-subnav-item-font, var(--bb-font));
  font-size: var(--bb-role-subnav-item-size, var(--bb-subnav-fs, 0.85rem));
  font-weight: var(--bb-role-subnav-item-weight, 500);
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-decoration: none;
  line-height: var(--bb-role-subnav-item-lh, 1.4);
  transition: color 0.2s;
  color: var(--bb-role-subnav-item-color, var(--bb-subnav-text, #ffffff));
}
/* Vet (**) — rol 'subnav-bold'. Font erft de item-font als leeg (aanbevolen):
   var(--bb-role-subnav-bold-font, var(--bb-role-subnav-item-font, var(--bb-font))). */
.bb-subnav__item strong {
  font-family: var(--bb-role-subnav-bold-font, var(--bb-role-subnav-item-font, var(--bb-font)));
  font-size: var(--bb-role-subnav-bold-size, inherit);
  font-weight: var(--bb-role-subnav-bold-weight, 800);
  line-height: var(--bb-role-subnav-bold-lh, inherit);
  color: var(--bb-role-subnav-bold-color, inherit);
}

a.bb-subnav__item { cursor: pointer; }
span.bb-subnav__item { cursor: default; }

/* ----------------------------------------
   Separator — now a direct sibling of each cell (not nested inside it),
   so the group's `justify-content: space-around` distributes equal space
   on both sides of the glyph. No own margin needed.
---------------------------------------- */
.bb-subnav__sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
  font-family: var(--bb-font);
  font-size: var(--bb-subnav-fs, 0.85rem);
  color: var(--bb-subnav-sep-color, rgba(153, 255, 187, 0.45));
  user-select: none;
  line-height: 1.4;
}

/* ----------------------------------------
   Body offset — .bb-main already has 72px from header.css,
   the subnav adds its own measured height on top.
---------------------------------------- */
body.has-bb-subnav .bb-main {
  /* Fallback approximates the default bar (10px + 10px padding + ~19px line)
     so there's no visible jump before the inline JS measures the real height. */
  padding-top: calc(72px + var(--bb-subnav-height, 39px));
}

/* ----------------------------------------
   Device visibility
   Breakpoints match the existing theme:
     desktop ≥1025px · tablet 769–1024px · mobile ≤768px
---------------------------------------- */
@media (min-width: 1025px) {
  .bb-subnav--no-desktop { display: none; }
  body.has-bb-subnav.bb-subnav-off-desktop .bb-main { padding-top: 72px; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .bb-subnav--no-tablet { display: none; }
  body.has-bb-subnav.bb-subnav-off-tablet .bb-main { padding-top: 72px; }
}

@media (max-width: 768px) {
  .bb-subnav--no-mobile { display: none; }
  body.has-bb-subnav.bb-subnav-off-mobile .bb-main { padding-top: 72px; }
}

/* ----------------------------------------
   Reduced motion — no animation, static centred row
---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bb-subnav__track {
    animation: none;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .bb-subnav__track::-webkit-scrollbar { display: none; }
  .bb-subnav__group:nth-child(2) { display: none; }
  /* Single group fills the bar and keeps the even distribution */
  .bb-subnav__group {
    min-width: 100%;
    width: 100%;
  }
}