/* Section navigation above the page title. Replaces the .title-tabs bar.
   One row per level, never wrapping; overflow is scrolled, not shrunk. */

.ksn {
    --ksn-ink: #5b6b7c;
    --ksn-ink-strong: #0b2740;
    --ksn-accent: #094e96;
    --ksn-line: #e4ebf2;
    --ksn-panel: #f6f9fc;
    /* Rendered from header.php, outside .content-size, so the bar runs edge to edge while
       the page content below stays in its 1600px column. width:0 + min-width:100% keeps the
       row of items out of the parent's width calculation - a nowrap row measures ~2200px and
       would otherwise push the page into sideways scrolling. Works in every browser, unlike
       `contain: inline-size` (Chrome 105+/Safari 16+). */
    width: 0;
    min-width: 100%;
    max-width: 100%;
    margin: 0 0 34px;
    background: #fff;
    border-bottom: 1px solid var(--ksn-line);
}

.ksn-row {
    position: relative;
    display: flex;
    align-items: stretch;
    min-width: 0;
    max-width: 100%;
    padding: 0 18px;    /* breathing room at the viewport edges, arrows included */
}
/* z-index on the row itself, not just the caret: row 2 is positioned and comes later in the
   DOM, so it paints over anything row 1 hangs into it, whatever z-index the caret carries. */
.ksn-row-1 { border-bottom: 1px solid var(--ksn-line); z-index: 2; }
.ksn:has(.ksn-row-2) { border-bottom: 0; }

/* The scroller is the only thing that scrolls; arrows sit outside it.
   min-width:0 is load-bearing: a flex item defaults to min-content width, so without it
   the row grows to the full 2200px of items and scrolls the whole page sideways. */
.ksn-scroller {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;          /* one row per level, by design */
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;  /* never hand the gesture to browser back-navigation */
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.ksn-scroller::-webkit-scrollbar { display: none; }

/* Centred while the items fit - a short row pinned to the left edge of a full-width bar
   looks stranded. `safe` is the point: with plain `center`, an overflowing row pushes its
   first items out of reach past the start edge. Unsupported in old browsers, where the
   declaration is dropped and the row simply stays left-aligned. */
.ksn-row-1 .ksn-scroller { justify-content: safe center; }

.ksn-item { flex: 0 0 auto; position: relative; }

.ksn-item > a {
    display: block;
    padding: 14px 18px;
    font-size: 16px;
    line-height: 1.35;
    color: var(--ksn-ink);
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.ksn-item > a:hover { color: var(--ksn-ink-strong); background: var(--ksn-panel); }
.ksn-item > a:focus-visible { outline: 2px solid var(--ksn-accent); outline-offset: -2px; border-radius: 6px; }

.ksn-item.is-active > a { color: var(--ksn-accent); font-weight: 500; border-bottom-color: var(--ksn-accent); }

/* Second level: the tinted band runs edge to edge, but its items line up with the page's
   content column. --ksn-content mirrors the .content-size breakpoints in responsive.css;
   keep the two in step if those ever change. */
.ksn { --ksn-content: 1600px; }
@media (min-width: 1320px) { .ksn { --ksn-content: 1300px; } }
@media (max-width: 1320px) { .ksn { --ksn-content: 1100px; } }
@media (max-width: 1150px) { .ksn { --ksn-content: 1000px; } }
@media (max-width: 1000px) { .ksn { --ksn-content: 100%; } }

.ksn-row-2 { background: var(--ksn-panel); border-bottom: 1px solid var(--ksn-line); padding: 0; }
.ksn-row-2 .ksn-scroller {
    width: 100%;
    max-width: var(--ksn-content);
    margin: 0 auto;
}
@media (max-width: 1000px) { .ksn-row-2 { padding: 0 10px; } }
.ksn-row-2 .ksn-item > a { padding: 11px 16px; font-size: 15px; }
.ksn-row-2 .ksn-item.is-active > a { border-bottom-color: var(--ksn-accent); }

/* Caret linking the active first-level item to the row below.
   Sits on the row, not inside the scroller: a scroll container clips its own overflow,
   so a caret hanging below the items would be invisible. JS keeps --ksn-caret-x in sync
   with the item's position as the row scrolls; without JS it simply stays hidden. */
.ksn-caret {
    position: absolute;
    left: var(--ksn-caret-x, 50%);
    bottom: -7px;
    width: 0;
    height: 0;
    /* A border triangle, not a rotated square: rotating a bordered box leaves visible
       seams where the two edges meet and needs a background that matches the band exactly.
       Solid, in the same blue as the active underline it hangs from. */
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid var(--ksn-accent);
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 4;
}

/* Edge fades: only shown while there is more content that way. */
.ksn-row::before,
.ksn-row::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 44px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
    z-index: 2;
}
.ksn-row::before { left: 0; background: linear-gradient(90deg, #fff 30%, #fff0); }
.ksn-row::after { right: 0; background: linear-gradient(270deg, #fff 30%, #fff0); }
.ksn-row-2::before { background: linear-gradient(90deg, var(--ksn-panel) 30%, #f6f9fc00); }
.ksn-row-2::after { background: linear-gradient(270deg, var(--ksn-panel) 30%, #f6f9fc00); }
.ksn-row.can-prev::before { opacity: 1; }
.ksn-row.can-next::after { opacity: 1; }

.ksn-arrow {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    padding: 0;
    color: var(--ksn-ink);
    background: #fff;
    border: 1px solid var(--ksn-line);
    border-radius: 50%;
    cursor: pointer;
    align-self: center;
    height: 34px;
    z-index: 3;
}
.ksn-arrow:hover:not(:disabled) { color: var(--ksn-accent); border-color: #b5ccdf; }
.ksn-arrow:disabled { opacity: .35; cursor: default; }
.ksn-arrow:focus-visible { outline: 2px solid var(--ksn-accent); outline-offset: 2px; }
.ksn-row-2 .ksn-arrow { background: var(--ksn-panel); }

/* Arrows are a pointer affordance; touch devices scroll directly. */
@media (hover: hover) and (min-width: 1001px) {
    .ksn-arrow:not([hidden]) { display: flex; }
}

@media (max-width: 1000px) {
    .ksn { margin-bottom: 24px; }
    .ksn-item > a { padding: 12px 14px; font-size: 15px; }
    .ksn-row-2 .ksn-item > a { padding: 10px 13px; font-size: 14px; }
}

@media (max-width: 600px) {
    .ksn-item > a { padding: 11px 12px; font-size: 14px; }
    .ksn-row::before, .ksn-row::after { width: 28px; }
}

/* Honour reduced-motion for the programmatic scroll into view. */
@media (prefers-reduced-motion: reduce) {
    .ksn-scroller { scroll-behavior: auto; }
    .ksn-item > a { transition: none; }
}