/* =============================================================================
   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 {
    margin-top: calc(2.5 * var(--behnke-basic));
}

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

.wiki-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--behnke-basic);
}

.wiki-related__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(0.5 * var(--behnke-basic));
    padding: var(--behnke-basic) calc(1.2 * var(--behnke-basic));
    border: 1px solid var(--behnke-light-gray, #e5e7eb);
    border-radius: calc(1 * var(--behnke-basic));
    /* Same card treatment as the feedback box / prev-next cards. */
    background:
        radial-gradient(120% 140% at 50% -20%,
            color-mix(in srgb, var(--behnke-design, #0066cc) 7%, transparent) 0%,
            transparent 60%),
        var(--behnke-white, #fff);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.wiki-related__card:hover,
.wiki-related__card:focus {
    border-color: var(--behnke-design);
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09);
}

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

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

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

@media (max-width: 760px) {
    .wiki-related__grid { grid-template-columns: 1fr; }
}

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

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

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

.wiki-page-nav {
    display: flex;
    gap: var(--behnke-basic);
    margin-top: calc(2 * 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(1 * var(--behnke-basic));
    /* Same card treatment as the feedback box: soft radial tint + shadow. */
    background:
        radial-gradient(120% 140% at 50% -20%,
            color-mix(in srgb, var(--behnke-design, #0066cc) 7%, transparent) 0%,
            transparent 60%),
        var(--behnke-white, #fff);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
    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 18px rgba(0, 0, 0, 0.09);
}

@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: var(--behnke-medium-gray, #9ca3af);
}

.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; }
}

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

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

.wiki-heading-anchor {
    display: inline-block;
    margin-left: 0.35em;
    color: var(--behnke-medium-gray, #9ca3af);
    text-decoration: none;
    font-weight: 400;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.wiki-main h2:hover .wiki-heading-anchor,
.wiki-main h3:hover .wiki-heading-anchor,
.wiki-main h4:hover .wiki-heading-anchor,
.wiki-heading-anchor:focus {
    opacity: 1;
}

.wiki-heading-anchor:hover {
    color: var(--behnke-design);
}

/* Always visible on touch devices, where there is no hover state. */
@media (hover: none) {
    .wiki-heading-anchor { opacity: 0.5; }
}

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