/**
 * Upmarkit Page Navigation — structural styling only.
 *
 * Class root: `.upmarkit-page-nav`.
 *
 * Every visible value is wrapped in `var(--token, fallback)` so the
 * component renders sensibly without theme overrides and is fully
 * restyleable by themes.
 *
 * Override any of the following CSS custom properties in your theme:
 *   --page-nav-gap, --page-nav-pad, --page-nav-radius,
 *   --page-nav-border, --page-nav-border-width,
 *   --page-nav-bg, --page-nav-fg, --page-nav-bg-hover,
 *   --page-nav-tab-min-basis, --page-nav-tab-min-basis-mobile,
 *   --page-nav-tab-min-height,
 *   --page-nav-depth-scale, --page-nav-depth-indent,
 *   --page-nav-section-gap,
 *   --page-nav-padding-inline   (use this if the block's region has
 *                                different horizontal padding than the
 *                                article body and you want the nav to
 *                                line up with the body text).
 */

/* ---------- Root ---------- */
nav.upmarkit-page-nav {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-block-start: var(--page-nav-top-gap, 3rem);
  margin-block-end: var(--page-nav-section-gap, 2rem);
  padding-inline: var(--page-nav-padding-inline, 0);
  font: inherit;
  color: var(--page-nav-fg, inherit);
}

.upmarkit-page-nav *,
.upmarkit-page-nav *::before,
.upmarkit-page-nav *::after {
  box-sizing: border-box;
}

/* ---------- Arrows row ---------- */
.upmarkit-page-nav__arrows {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--page-nav-gap, 0.25rem);
  width: 100%;
  margin: 0 0 var(--page-nav-arrows-tabs-gap, 2.25rem) 0;
  padding: 0;
}

.upmarkit-page-nav__arrow,
.upmarkit-page-nav__arrow:link,
.upmarkit-page-nav__arrow:visited,
.upmarkit-page-nav__arrow:active {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: var(--page-nav-pad, 0.65rem 1rem);
  border: 0;
  border-radius: var(--page-nav-radius, 0.375rem);
  background: var(--page-nav-arrow-bg, #000);
  color: var(--page-nav-arrow-fg, #fff);
  text-decoration: none;
  line-height: 1.25;
  min-height: var(--page-nav-tab-min-height, 2.75rem);
  transition: background-color 120ms ease, color 120ms ease, transform 120ms ease, outline-color 120ms ease;
}

.upmarkit-page-nav__arrow:hover,
.upmarkit-page-nav__arrow:focus-visible,
.upmarkit-page-nav__arrow:visited:hover,
.upmarkit-page-nav__arrow:visited:focus-visible {
  background: var(--page-nav-arrow-bg-hover, #fff);
  color: var(--page-nav-arrow-fg-hover, #000);
  outline: 1px solid var(--page-nav-arrow-bg, #000);
  outline-offset: -1px;
}

/* Pressed (mouse down / touch / keyboard activation) — snap back to the
 * solid black state and apply a subtle "push" so the click feels tactile.
 * `:active` wins over `:hover` because it appears later in the source.
 */
.upmarkit-page-nav__arrow:active,
.upmarkit-page-nav__arrow:visited:active {
  background: var(--page-nav-arrow-bg, #000);
  color: var(--page-nav-arrow-fg, #fff);
  outline-color: transparent;
  transform: translateY(1px) scale(0.98);
  transition-duration: 60ms;
}

.upmarkit-page-nav__arrow--placeholder {
  border-color: transparent;
  background: transparent;
  pointer-events: none;
  visibility: hidden;
}

.upmarkit-page-nav__arrow-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.1em;
  line-height: 1;
}

.upmarkit-page-nav__arrow-glyph svg {
  display: block;
  width: 100%;
  height: 100%;
}

.upmarkit-page-nav__arrow-label {
  display: inline-block;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ---------- Outline (tabs + nested) ----------
 *
 * Aggressive list reset to defeat theme `<ul>` / `<li>` defaults that
 * would otherwise inflate gaps or push the list right.
 */
nav.upmarkit-page-nav ul.upmarkit-page-nav__outline,
nav.upmarkit-page-nav ul.upmarkit-page-nav__level {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
}

nav.upmarkit-page-nav ul.upmarkit-page-nav__level--tabs > li.upmarkit-page-nav__item {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Level 0 = horizontal tab layout.
 *
 * FLEX (not grid) so the LAST ROW can center its items naturally via
 * `justify-content: center`.  Every tab gets the same calculated width
 * `(100% - (cols-1)*gap) / cols`, so a row of fewer tabs is visibly
 * centered rather than stranded at the left.
 *
 * `--page-nav-tab-cols` is set by the companion JS to an integer that
 * gives the most balanced layout for the current item count + container
 * width.  Sane fallbacks:
 *   - no JS, desktop  → 3 columns
 *   - no JS, mobile   → 2 columns
 */
.upmarkit-page-nav__level--tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--page-nav-gap, 0.25rem);
  width: 100%;

  --upn-cols-fallback: 3;
}

.upmarkit-page-nav__level--tabs > .upmarkit-page-nav__item {
  flex: 0 0 calc(
    (100% - (var(--page-nav-tab-cols, var(--upn-cols-fallback)) - 1) * var(--page-nav-gap, 0.25rem))
    / var(--page-nav-tab-cols, var(--upn-cols-fallback))
  );
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* Tab face (the top-level link itself).
 * - Single line; tabs grow to fit content (no truncation).
 * - Uniform min-height for visual consistency across rows.
 * - `:link/:visited/:active` are forced to the same colour so the
 *   browser's default purple-visited never appears on tabs.
 */
.upmarkit-page-nav__level--tabs > .upmarkit-page-nav__item > .upmarkit-page-nav__link,
.upmarkit-page-nav__level--tabs > .upmarkit-page-nav__item > .upmarkit-page-nav__link:link,
.upmarkit-page-nav__level--tabs > .upmarkit-page-nav__item > .upmarkit-page-nav__link:visited,
.upmarkit-page-nav__level--tabs > .upmarkit-page-nav__item > .upmarkit-page-nav__link:active {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  align-self: stretch;
  min-height: var(--page-nav-tab-min-height, 2.75rem);
  margin: 0;
  padding: var(--page-nav-pad, 0.65rem 1rem);
  border: var(--page-nav-border-width, 1px) solid var(--page-nav-border, #cccccc);
  border-radius: var(--page-nav-radius, 0.375rem);
  background: var(--page-nav-bg, transparent);
  color: var(--page-nav-fg, inherit);
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  transition: background-color 120ms ease;
}

.upmarkit-page-nav__level--tabs > .upmarkit-page-nav__item > .upmarkit-page-nav__link:hover,
.upmarkit-page-nav__level--tabs > .upmarkit-page-nav__item > .upmarkit-page-nav__link:focus-visible {
  background: var(--page-nav-bg-hover, rgba(0, 0, 0, 0.05));
}

/* Nested lists under each tab. */
.upmarkit-page-nav__level--nested {
  margin: 0.4rem 0 0 0;
  padding-inline-start: var(--page-nav-depth-indent, 0.85rem);
  border-inline-start: 1px solid var(--page-nav-border, #cccccc);
}

.upmarkit-page-nav__level--nested .upmarkit-page-nav__item {
  margin: 0.25rem 0 0 0;
  padding: 0;
}

.upmarkit-page-nav__level--nested .upmarkit-page-nav__link {
  text-decoration: none;
  color: var(--page-nav-fg, inherit);
  overflow-wrap: anywhere;
}

.upmarkit-page-nav__level--nested .upmarkit-page-nav__link:hover,
.upmarkit-page-nav__level--nested .upmarkit-page-nav__link:focus-visible {
  text-decoration: underline;
}

.upmarkit-page-nav__link--nolink {
  cursor: default;
  opacity: 0.85;
}

/* ---------- Per-depth scaling ---------- */
.upmarkit-page-nav__item[data-depth="0"] {
  font-size: 1em;
}

.upmarkit-page-nav__level--nested > .upmarkit-page-nav__item {
  font-size: calc(1em * var(--page-nav-depth-scale, 0.92));
}

/* ---------- Mobile / narrow viewports ---------- */
@media (max-width: 560px) {
  .upmarkit-page-nav__level--tabs {
    --upn-cols-fallback: 2;
  }
  .upmarkit-page-nav__arrow-label {
    font-size: 0.95em;
  }
}