.drop-shadow img,
.drop-shadow video,
video.drop-shadow {
    filter: drop-shadow(0 4px 8px rgb(0 0 0 / 25%));
}

/* Mark commands and code that learners need to run or copy into their files.
   Only explicitly tagged blocks receive this border. */
.bd-article div.required-code > .highlight > pre {
    border: 4px solid #76b900;
}

html[data-theme="dark"] .drop-shadow img,
html[data-theme="dark"] .drop-shadow video,
html[data-theme="dark"] video.drop-shadow {
    filter: drop-shadow(0 4px 8px rgb(255 255 255 / 25%));
}

/* Keep long inline package and file paths readable on narrow screens.
   Code blocks retain their own horizontal scrolling and original line breaks. */
.bd-article :not(pre) > code.literal,
.bd-article :not(pre) > code.literal .pre {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Let the course title share a phone-sized header with both navigation buttons. */
@media (max-width: 575.98px) {
    .bd-header .navbar-header-items__start {
        flex: 1 1 auto;
        min-width: 0;
    }

    .bd-header .navbar-brand {
        max-width: 100%;
    }

    .bd-header .logo__title {
        white-space: normal;
        font-size: 1rem;
        line-height: 1.2;
    }
}

/* Clickable branches show independent entry points into the learning path. */
.learning-path-diagram {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    --path-line: #76b900;
    --path-title: #426800;
    --path-card-background: transparent;
}

.learning-path-root {
    flex: 0 0 9rem;
    padding: 1rem;
    border: 2px solid var(--path-line);
    border-radius: 0.75rem;
    text-align: center;
    font-weight: 700;
    color: #111;
    background: #76b900;
}

.learning-path-branches {
    flex: 1;
    list-style: none;
    margin: 0 !important;
    padding: 0 0 0 2rem !important;
}

.learning-path-branches li {
    position: relative;
    padding: 0.5rem 0 0.5rem 2rem;
    margin: 0;
}

.learning-path-branches li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-left: 2px solid var(--path-line);
}

.learning-path-branches li:first-child::before { top: 50%; }
.learning-path-branches li:last-child::before { bottom: 50%; }

.learning-path-branches li::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 2rem;
    border-top: 2px solid var(--path-line);
}

.learning-path-branches a {
    display: block;
    position: relative;
    padding: 1rem;
    border: 2px solid var(--path-line);
    border-radius: 0.75rem;
    color: var(--pst-color-text-base);
    text-decoration: none;
    background: var(--path-card-background);
    border-left-width: 6px;
}

.learning-path-branches a strong {
    color: var(--path-title);
}

.learning-path-branches a.learning-path-recommended {
    color: #111;
    background: #76b900;
}

.learning-path-branches a.learning-path-recommended strong {
    color: inherit;
}

.learning-path-branches a:hover,
.learning-path-branches a:focus-visible {
    border-color: var(--path-title);
    outline: 2px solid var(--path-title);
    outline-offset: 3px;
}

.learning-path-branches::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 9rem;
    width: 2rem;
    border-top: 2px solid var(--path-line);
}

.learning-path-diagram { position: relative; }

@media (max-width: 575.98px) {
    .learning-path-diagram { flex-direction: column; align-items: stretch; }
    .learning-path-root { flex-basis: auto; }
    .learning-path-branches { padding-left: 0 !important; padding-top: 1rem !important; }
    .learning-path-branches::before { display: none; }
}

html[data-theme="dark"] .learning-path-diagram {
    --path-title: #a3e635;
}