/*
 * Breadcrumb trail.
 *
 * The markup is server rendered, so this has to work with scripting off and
 * before anything JavaScript runs. It sits at the very top of the post content,
 * directly above the tool's own <h1>, so the priority here is that it reads as
 * a quiet orienting line and does not push the heading down the screen.
 *
 * Colours come from the existing tokens rather than new literals, so the trail
 * follows the dark mode and the accent picker instead of needing its own dark
 * rules. --sk-muted and --sk-ink are declared by color-scheme.css on both
 * schemes; the fallbacks cover a page where that file has not loaded.
 *
 * Only is_singular('post') pages enqueue this file, so nothing here has to
 * defend against appearing on a page or an archive.
 */

/*
 * The tokens this file uses are not defined globally.
 *
 * color-scheme.css declares --sk-ink and --sk-muted only for .sk-home-page,
 * .sk-services-page and body.home .entry-content. A tool page is none of those,
 * so on a tool page these var() calls fell through to the light-mode fallback in
 * dark mode too, which left the current-page crumb in near-black text on a dark
 * background.
 *
 * Declared here, scoped to this component, so the values apply without changing
 * what any other rule on the page resolves. Same values color-scheme.css uses;
 * see faqs.css for the note on why these are repeated rather than hoisted.
 */
html[data-sk-scheme="dark"] .sk-crumbs {
    --sk-ink: #e6e2ee;
    --sk-muted: #a79fba;
    --sk-accent: #cba4ec;
}

.sk-crumbs {
    margin: 0 0 0.9rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--sk-muted, #6b7280);
}

/*
 * A bare <ol> renders as a numbered list with markers and a 40px indent, which
 * put three stacked rows above every heading. Laid out as a flex row instead,
 * with the markers suppressed and the separators drawn as generated content so
 * they cannot be read aloud or selected as part of a label.
 */
.sk-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sk-crumbs li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.sk-crumbs li + li::before {
    content: "/";
    color: var(--sk-muted, #6b7280);
    opacity: 0.55;
    /* Not selectable, so copying the trail does not drag a stray slash along. */
    user-select: none;
}

.sk-crumbs a {
    color: inherit;
    text-decoration: none;
    border-radius: 3px;
}

.sk-crumbs a:hover {
    color: var(--sk-purple, #7c3f91);
    text-decoration: underline;
}

/* A visible focus ring. The reset removes outlines without replacing them, and
   this is a real link reached by keyboard. */
.sk-crumbs a:focus-visible {
    outline: 2px solid var(--sk-accent, #7c3f91);
    outline-offset: 2px;
}

/*
 * The last crumb is the page you are on. It is a <span>, not a link, so it is
 * styled as text rather than as something clickable, and it is allowed to be
 * the only crumb that wraps onto its own line on a narrow screen.
 */
.sk-crumbs [aria-current="page"] {
    color: var(--sk-ink, #1f2937);
    font-weight: 600;
}

/* Tool titles run long, so the trail is allowed to wrap rather than push the
   page wide. overflow-wrap keeps one unbroken token from overflowing. */
.sk-crumbs li,
.sk-crumbs [aria-current="page"] {
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    .sk-crumbs {
        font-size: 0.75rem;
    }

    .sk-crumbs ol {
        gap: 0.3rem;
    }

    .sk-crumbs li {
        gap: 0.3rem;
    }

    /* On a phone the middle crumb often costs more room than it earns. Home and
       the current page are what orient; the group stays for anyone who has the
       width for it.

       Only the crumb itself is hidden. Its own separator is a ::before on that
       same <li>, so it goes with it. An earlier version also cleared
       "li:nth-child(2) ~ li::before", which reached past the hidden crumb and
       removed the separator in front of the current page as well, leaving
       "Home Reading Time Calculator" run together with nothing between the two
       words. */
    .sk-crumbs li:nth-child(2) {
        display: none;
    }
}