/* =============================================================================
   WikiNav.css — page-level navigation chrome:
     - reading-progress bar (top of viewport)
     - breadcrumbs (above content)
     - prev/next cards (below content)
     - heading hover anchors
   ============================================================================= */

/* Dedicated accent for the reading-progress bar: a teal that sits next to the
   brand blue (analogous, so it stays in family) but reads clearly against the
   blue header. Defined as its own token so it can be retuned in one place. */
:root {
    --wiki-progress-color: #12b3a6;
}

/* ── Reading-progress bar ──────────────────────────────────────────────────── */

.wiki-progress {
    position: fixed;
    /* Confined to the content column (right of the sidebar), aligned with the
       toolbar — so it reads as a content scroll indicator, not a header rule.
       Widths mirror .wiki-toolbar across breakpoints. */
    top: calc(4 * var(--behnke-basic));
    right: 0;
    width: 80vw;
    height: 8px;
    z-index: 950;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.10);
    opacity: 0;
    transition: opacity 0.2s ease;
}

body.wiki-embed .wiki-progress {
    top: 0;
}

body.wiki-headless .wiki-progress {
    width: 100vw;
}

@media (max-width: 1000px) {
    .wiki-progress { width: calc(100vw - 260px); }
}

@media (max-width: 700px) {
    .wiki-progress { width: 100vw; }
}

.wiki-progress.is-visible {
    opacity: 1;
}

.wiki-progress span {
    display: block;
    position: relative;
    height: 100%;
    width: 0;
    background: var(--wiki-progress-color);
    box-shadow: 0 0 16px 2px var(--wiki-progress-color);
    border-radius: 0 4px 4px 0;
    transition: width 0.1s linear;
}

/* Bright leading edge — a glowing cap that pulses so the bar reads as "live". */
.wiki-progress span::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 8px;
    height: 8px;
    transform: translate(50%, -50%);
    border-radius: 50%;
    background: var(--wiki-progress-color);
    box-shadow: 0 0 12px 4px var(--wiki-progress-color);
    animation: wiki-progress-pulse 1.6s ease-in-out infinite;
}

@keyframes wiki-progress-pulse {
    0%, 100% { opacity: 0.6; transform: translate(50%, -50%) scale(0.85); }
    50%      { opacity: 1;   transform: translate(50%, -50%) scale(1.25); }
}

@media print {
    .wiki-progress { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .wiki-progress span { transition: none; }
    .wiki-progress span::after { animation: none; }
}

/* ── Breadcrumbs ───────────────────────────────────────────────────────────── */

.wiki-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(0.4 * var(--behnke-basic));
    /* Clear the fixed toolbar (top: 4×basic, ~2×basic tall) so the first
       content line isn't hidden underneath it. */
    margin-top: calc(2.25 * var(--behnke-basic));
    margin-bottom: calc(1.25 * var(--behnke-basic));
    font-size: 0.8rem;
    color: var(--behnke-medium-gray, #9ca3af);
}

/* No toolbar → no clearance needed. */
body.wiki-hide-toolbar .wiki-breadcrumbs {
    margin-top: 0;
}

.wiki-breadcrumb-link {
    color: var(--behnke-medium-gray, #9ca3af);
    text-decoration: none;
    transition: color 0.15s ease;
}

.wiki-breadcrumb-link:hover,
.wiki-breadcrumb-link:focus {
    color: var(--behnke-design);
}

.wiki-breadcrumb-sep {
    color: var(--behnke-gray, #cbd5e1);
    user-select: none;
}

.wiki-breadcrumb-current {
    color: var(--behnke-medium-black, #4b5563);
    font-weight: 500;
}

@media print {
    .wiki-breadcrumbs { display: none; }
}

/* ── "You might also like" — related pages ─────────────────────────────────── */

.wiki-related__title {
    margin: 0 0 var(--behnke-basic);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}

.wiki-related__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--behnke-light-gray, #e5e7eb);
}

.wiki-related__item {
    border-bottom: 1px solid var(--behnke-light-gray, #e5e7eb);
}

.wiki-related__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(0.5 * var(--behnke-basic));
    padding: calc(0.6 * var(--behnke-basic)) calc(0.4 * var(--behnke-basic));
    text-decoration: none;
    transition: color 0.15s ease, padding-left 0.15s ease;
}

.wiki-related__link:hover,
.wiki-related__link:focus {
    padding-left: calc(0.8 * var(--behnke-basic));
}

.wiki-related__link-title {
    font-weight: 500;
    color: var(--behnke-design);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wiki-related__link-arrow {
    flex-shrink: 0;
    color: var(--behnke-medium-gray, #9ca3af);
    transition: transform 0.15s ease, color 0.15s ease;
}

.wiki-related__link:hover .wiki-related__link-arrow {
    color: var(--behnke-design);
    transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
    .wiki-related__link:hover,
    .wiki-related__link:focus { padding-left: calc(0.4 * var(--behnke-basic)); }
    .wiki-related__link:hover .wiki-related__link-arrow { transform: none; }
}

@media print {
    .wiki-related { display: none; }
}

/* ── Previous / next cards ─────────────────────────────────────────────────── */

.wiki-page-nav {
    display: flex;
    gap: var(--behnke-basic);
}

.wiki-page-nav__slot {
    flex: 1 1 0;
}

.wiki-page-nav__link {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(0.2 * var(--behnke-basic));
    padding: var(--behnke-basic) calc(1.2 * var(--behnke-basic));
    border: 1px solid var(--behnke-light-gray, #e5e7eb);
    border-radius: calc(0.75 * var(--behnke-basic));
    /* Flat treatment to match the related cards — cohesive footer, not a
       floating card. */
    background: var(--behnke-white, #fff);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.wiki-page-nav__link:hover,
.wiki-page-nav__link:focus {
    border-color: var(--behnke-design);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    .wiki-page-nav__link:hover { transform: none; }
}

.wiki-page-nav__next {
    text-align: right;
    align-items: flex-end;
}

.wiki-page-nav__dir {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}

.wiki-page-nav__title {
    font-size: var(--behnke-normal-font-size);
    color: var(--behnke-design);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

@media (max-width: 600px) {
    .wiki-page-nav { flex-direction: column; }
    .wiki-page-nav__slot { display: none; }
    .wiki-page-nav__next { text-align: left; align-items: flex-start; }
}

@media print {
    .wiki-page-nav { display: none; }
}

/* ── Support footer (help + contact + legal links) ─────────────────────────── */

.wiki-support {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--behnke-medium-black, #4b5563);
}

.wiki-support__intro {
    margin: 0 0 calc(0.5 * var(--behnke-basic));
    font-weight: 500;
}

.wiki-support__list {
    margin: 0 0 var(--behnke-basic);
    padding-left: 1.3em;
    display: flex;
    flex-direction: column;
    gap: calc(0.35 * var(--behnke-basic));
}

.wiki-support__contact {
    margin: 0;
}

/* Bottom link row — centred, pipe-separated, in the muted footer-link tone. */
.wiki-support__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: calc(0.4 * var(--behnke-basic)) var(--behnke-basic);
    margin-top: var(--behnke-basic);
    font-size: 0.85rem;
}

.wiki-support__links a {
    position: relative;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.15s ease;
}

.wiki-support__links a:hover,
.wiki-support__links a:focus {
    color: var(--behnke-design);
}

/* Pipe separators between the links (not after the last one). */
.wiki-support__links a:not(:last-child)::after {
    content: "|";
    margin-left: var(--behnke-basic);
    color: var(--behnke-gray, #cbd5e1);
}

@media print {
    .wiki-support__links { display: none; }
}

/* ── Heading hover anchors ─────────────────────────────────────────────────── */

.wiki-main h2,
.wiki-main h3,
.wiki-main h4 {
    position: relative;
}