/*
 * Frontend styling for imported Knowledge topics (Content Block
 * linear_knowledge_topic) + the docs sidebar. Approximates the look of the
 * DITA-OT / Oxygen Webhelp export on the live site.
 */

/* ---- Topic title / body rhythm -------------------------------------- */
.kb-topic__title {
    margin-bottom: 1rem;
}
.kb-topic__shortdesc {
    color: #555;
}
.kb-topic__body > section {
    margin-bottom: 1.5rem;
}
.kb-topic__body > section + section {
    padding-top: 1.25rem;
    border-top: 1px solid #e3e3e3; /* Trennlinien between sections */
}
.kb-topic__body h2,
.kb-topic__body h3,
.kb-topic__body h4 {
    margin-top: 1.25rem;
}

/* ---- Notes (DITA <note type="…"> -> <aside class="note note--…">) ---- */
.kb-topic aside.note {
    display: block;
    margin: 1rem 0;
    padding: .75rem 1rem;
    border: 1px solid #d9e2ec;
    border-left: 4px solid #6c8fb3;
    border-radius: 4px;
    background: #f4f7fa;
    color: #2d2d2d;
}
.kb-topic aside.note::before {
    content: "Anmerkung: ";
    font-weight: 600;
}
.kb-topic aside.note > :first-child {
    display: inline;
}
.kb-topic aside.note--tip {
    border-left-color: #4c9a5b;
    background: #f1f8f2;
    border-color: #d3e8d7;
}
.kb-topic aside.note--tip::before { content: "Tipp: "; }
.kb-topic aside.note--important {
    border-left-color: #c98a1b;
    background: #fdf6ea;
    border-color: #f0e0c0;
}
.kb-topic aside.note--important::before { content: "Wichtig: "; }
.kb-topic aside.note--attention,
.kb-topic aside.note--caution,
.kb-topic aside.note--warning,
.kb-topic aside.note--danger {
    border-left-color: #c0392b;
    background: #fbecea;
    border-color: #f0cfc9;
}
.kb-topic aside.note--attention::before { content: "Achtung: "; }
.kb-topic aside.note--caution::before { content: "Vorsicht: "; }
.kb-topic aside.note--warning::before { content: "Warnung: "; }
.kb-topic aside.note--danger::before { content: "Gefahr: "; }
.kb-topic aside.note--notice::before { content: "Hinweis: "; }
.kb-topic aside.note--fastpath::before { content: "Schnellzugriff: "; }
.kb-topic aside.note--remember::before { content: "Beachten Sie: "; }
.kb-topic aside.note--restriction::before { content: "Einschränkung: "; }

/* English note labels (language overlay). */
:lang(en) .kb-topic aside.note::before { content: "Note: "; }
:lang(en) .kb-topic aside.note--tip::before { content: "Tip: "; }
:lang(en) .kb-topic aside.note--important::before { content: "Important: "; }
:lang(en) .kb-topic aside.note--attention::before { content: "Attention: "; }
:lang(en) .kb-topic aside.note--caution::before { content: "Caution: "; }
:lang(en) .kb-topic aside.note--warning::before { content: "Warning: "; }
:lang(en) .kb-topic aside.note--danger::before { content: "Danger: "; }
:lang(en) .kb-topic aside.note--notice::before { content: "Notice: "; }
:lang(en) .kb-topic aside.note--fastpath::before { content: "Fastpath: "; }
:lang(en) .kb-topic aside.note--remember::before { content: "Remember: "; }
:lang(en) .kb-topic aside.note--restriction::before { content: "Restriction: "; }

/* ---- UI controls / menu cascades ------------------------------------ */
.kb-topic .uicontrol {
    font-weight: 600;
}
.kb-topic .menucascade .menucascade__sep {
    border-bottom: 0;
    color: #888;
    font-weight: 400;
    text-decoration: none;
}

/* ---- Definition lists, tables, steps -------------------------------- */
.kb-topic dl > dt {
    font-weight: 600;
}
.kb-topic dl > dd {
    margin-bottom: .5rem;
}
.kb-topic table {
    width: 100%;
    margin: 1rem 0;
    border-collapse: collapse;
}
.kb-topic table th,
.kb-topic table td {
    border: 1px solid #d9d9d9;
    padding: .4rem .6rem;
    vertical-align: top;
    text-align: left;
}
.kb-topic table th {
    background: #f2f2f2;
}
.kb-topic ol.dita-steps,
.kb-topic ol.steps {
    padding-left: 1.25rem;
}
.kb-topic ol.dita-steps > li,
.kb-topic ol.steps > li {
    margin-bottom: .5rem;
}
.kb-topic figure {
    margin: 1rem 0;
}
.kb-topic figure img,
.kb-topic__body img {
    max-width: 100%;
    height: auto;
}
.kb-topic figure figcaption {
    font-size: .875rem;
    color: #666;
    margin-top: .25rem;
}
.kb-topic pre,
.kb-topic code {
    background: #f5f5f5;
    border-radius: 3px;
}
.kb-topic pre {
    padding: .75rem 1rem;
    overflow-x: auto;
}

/* ---- Docs sidebar (left menu column) -------------------------------- */
.kb-sidebar {
    font-size: .9rem;
}
.kb-sidebar__title {
    margin-bottom: .5rem;
    padding-bottom: .35rem;
    border-bottom: 2px solid #e0e0e0;
    font-weight: 700;
}
.kb-sidebar .kb-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.kb-sidebar .kb-menu .kb-menu {
    margin-left: .75rem;
    border-left: 1px solid #e5e5e5;
    padding-left: .5rem;
}
.kb-sidebar .kb-menu__item {
    margin: .1rem 0;
}
.kb-sidebar .kb-menu__link {
    display: block;
    padding: .15rem .35rem;
    color: #333;
    text-decoration: none;
    border-radius: 3px;
}
.kb-sidebar .kb-menu__link:hover {
    background: #eef2f6;
}
.kb-sidebar .kb-menu__item.is-active > .kb-menu__link {
    font-weight: 600;
}
.kb-sidebar .kb-menu__item.is-current > .kb-menu__link,
.kb-sidebar .kb-menu__link.is-current {
    background: #e7eef5;
    color: #14508c;
    font-weight: 600;
}