/* Silke Boeffel Main Stylesheet */

/* ==========================================================================
   Base Styles
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f2f0ed;
}

.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
    background: #fff;
    padding: 10px 0 0 0;
    text-align: center;
}

.site-header img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.main-navigation {
    background: #fff;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (min-width: 981px) {
    .main-navigation .menu {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        padding: 15px 0;
        list-style: none;
        max-width: 1079px;
        margin: 0 auto;
    }

    .main-navigation .menu > li {
        display: inline-block;
        position: relative;
    }

    .main-navigation .menu > li > a {
        color: #fff;
        background: linear-gradient(135deg, #631145, #852e64);
        padding: 10px 18px;
        font-weight: 500;
        font-size: 14px;
        text-decoration: none;
        border-radius: 6px;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        display: block;
    }

    .main-navigation .menu > li > a:hover {
        background: linear-gradient(135deg, #852e64, #a03a7a);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .main-navigation .menu > li.current-menu-item > a,
    .main-navigation .menu > li.current-menu-ancestor > a {
        background: linear-gradient(135deg, #42002a, #631145);
    }

    .main-navigation .menu-caret {
        font-size: 0.75em;
        opacity: 0.8;
    }

    /* Dropdown Styling */
    .main-navigation .menu .sub-menu {
        background: #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border-radius: 8px;
        padding: 8px;
        position: absolute;
        display: none;
        /* Wide enough that the training module labels sit on one line —
           "Opportunity-Management", "Präsentation und Kommunikation" and
           "Werte-orientiertes Verkaufen" all wrapped at the old 200px, which
           made a 7-item list read as 12 ragged rows. */
        min-width: 290px;
        list-style: none;
        z-index: 1000;
    }

    /* :focus-within is what makes the dropdowns reachable by keyboard. With
       hover alone, tabbing to a parent button never opens its submenu, so
       every child page was unreachable without a mouse. */
    .main-navigation .menu > li:hover > .sub-menu,
    .main-navigation .menu > li:focus-within > .sub-menu {
        display: block;
    }

    /* Separates the section's own "Übersicht" entry from its child pages. */
    .main-navigation .menu .sub-menu-sep {
        height: 1px;
        margin: 6px 8px;
        background: #e5e0e3;
    }

    .main-navigation .menu .sub-menu .current-menu-item > a {
        color: #42002a;
        font-weight: 600;
    }

    .main-navigation .menu .sub-menu li:hover > .sub-menu {
        display: block;
    }

    .main-navigation .menu .sub-menu .sub-menu {
        position: absolute;
        left: 100%;
        top: 0;
        margin-left: 5px;
    }

    .main-navigation .menu .sub-menu li {
        margin: 0;
        position: relative;
    }

    .main-navigation .menu .sub-menu a {
        background-color: #fff;
        color: #631145;
        padding: 10px 18px;
        border-radius: 4px;
        display: block;
        text-decoration: none;
    }

    .main-navigation .menu .sub-menu a:hover {
        background-color: #f0f0f0;
        color: #852e64;
    }
}

/* ==========================================================================
   Content
   ========================================================================== */
.site-content {
    background: #fff;
    margin: 15px auto;
    border-radius: 8px;
}

.site-content .container {
    padding: 40px 20px;
}

.site-content h1 {
    color: #631145;
    margin-bottom: 20px;
    font-size: 2em;
}

.site-content h4,
.site-content h5 {
    color: #631145;
    margin: 1.5em 0 1em;
}

.site-content p {
    margin-bottom: 1.5em;
}

.site-content hr {
    margin: 2em 0;
    border: none;
    border-top: 1px solid #ddd;
}

/* ==========================================================================
   Links inside page content
   ==========================================================================
   Nothing targeted content links before this, so every link in the body —
   article titles, "Weiterlesen", PDFs, outbound references — rendered as
   browser-default blue against a #631145 purple brand.

   Scoped to .entry-content rather than .site-content on purpose: the
   breadcrumb and the sibling strip are inside .site-content too and carry
   their own treatment, and an unscoped rule at equal specificity would fight
   them depending on source order.

   Colour is #a03a7a, the palette's bright accent (already the far end of the
   nav's hover gradient) — NOT the #631145 heading purple, which sits so close
   to the #333 body text that a link read as bold black. #a03a7a is 6.2:1 on
   white, comfortably past AA, and unmistakably not body copy. Links darken to
   #631145 on hover, so the heading purple still does a job here.

   The underline stays. Colour alone must not be the only thing marking a link
   (WCAG 1.4.1). It is drawn thin and offset so it reads as emphasis rather
   than as a ruled line. */
.entry-content a {
    color: #a03a7a;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(160, 58, 122, 0.45);
    text-underline-offset: 3px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.entry-content a:hover {
    color: #631145;
    text-decoration-color: currentColor;
}

/* Article titles are already set apart by size and weight, so an underline at
   rest adds noise to the heaviest text on the page. It appears on hover. */
.entry-content .ka-title a {
    text-decoration: none;
}

.entry-content .ka-title a:hover {
    text-decoration: underline;
    text-decoration-color: currentColor;
}

/* A link wrapping an image would otherwise draw a rule under the image.
   Both selectors are deliberate: 13 of the 15 image links sit in a <figure>,
   two (the NotchDelta logos on the about pages) do not, and :has() covers
   those on browsers that support it. */
.entry-content figure a,
.entry-content a:has(> img) {
    text-decoration: none;
}

/* Visible focus ring — the dropdowns are keyboard-operable via :focus-within,
   which is only usable if you can see where focus currently is. */
.main-navigation a:focus-visible,
.breadcrumb a:focus-visible,
.page-siblings a:focus-visible,
.entry-content a:focus-visible {
    outline: 2px solid #852e64;
    outline-offset: 2px;
}

/* ==========================================================================
   Breadcrumb (child pages only)
   ==========================================================================
   Sub-pages sit two levels down and the nav dropdown was the only way back to
   their section overview. One line, section + current page; a single-item
   trail on top-level pages would be noise, so those pages get none. */
.breadcrumb {
    margin-bottom: 12px;
    font-size: 0.875em;
    color: #6b6b6b;
}

.breadcrumb a {
    color: #631145;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb .crumb-sep {
    margin: 0 0.4em;
    color: #b9b0b5;
}

/* ==========================================================================
   Sibling strip (foot of each child page)
   ==========================================================================
   Deliberately a set of peers, not a prev/next pager: the training modules
   are independently chosen, not a reading sequence, and a pager would imply
   an order that does not exist. */
.page-siblings {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #e5e0e3;
}

.siblings-title {
    margin: 0 0 12px;
    color: #631145;
    font-size: 1em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Scoped under .site-content on purpose: `.site-content ul { list-style: disc;
   margin-left: 2em }` is (0,2,0) and beat a bare `.siblings-list`, so the chips
   shipped with bullets, a 2em indent and a 1em gap between rows. Any new list
   inside <main> needs the same guard. */
.site-content .siblings-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.site-content .siblings-list li {
    margin-bottom: 0;
}

.siblings-list a {
    display: block;
    padding: 8px 14px;
    background: #f6f3f4;
    border: 1px solid #e5e0e3;
    border-radius: 6px;
    color: #631145;
    font-size: 0.9em;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.siblings-list a:hover {
    background: #efe8ec;
    border-color: #c9b6c1;
}

.siblings-back {
    margin: 0;
}

.siblings-back a {
    color: #631145;
    font-size: 0.9em;
    font-weight: 500;
    text-decoration: none;
}

.siblings-back a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Tables (the training-module comparison tables on 12 pages)
   ==========================================================================
   The rebuild kept WordPress's TablePress markup — <table class="tablepress">
   with .column-N / .row-N classes — but no table CSS came across at all, so
   every one of these tables rendered as two unbordered columns of loose text
   with no header and no cell padding, unreadable as a table.

   Styled to this site's palette (#631145 heading purple, #f2f0ed warm neutral)
   rather than copying the WordPress theme: these are two-column comparisons of
   training modules, so the job is making the two columns legible and clearly
   parallel. Hence the column divider, the tinted header, and zebra rows —
   cells run to several lines and the eye needs help tracking one row across.

   Selectors target `.site-content table`, not `.tablepress`. All 12 tables
   happen to carry TablePress's class today, but that class is an artifact of
   the CMS this site is being migrated OFF; keying the only table styling in
   the build to it means the next hand-written <table> silently gets none. */
.site-content table {
    width: 100%;
    margin: 0.5em auto 2em;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    border-bottom: 1px solid #e5e5e5;
}

.site-content th,
.site-content td {
    padding: 0.9em 1.1em;
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
}

.site-content thead th {
    background-color: #f2f0ed;
    color: #631145;
    font-weight: 700;
    border-bottom: 2px solid #631145;
}

.site-content tbody tr:nth-child(even) td {
    background-color: #faf9f8;
}

.site-content tbody td {
    border-top: 1px solid #e5e5e5;
}

/* Separates the module columns. Applied from the second cell onward so it works
   whatever the column count, rather than hard-coding .column-2. */
.site-content th + th,
.site-content td + td {
    border-left: 1px solid #e5e5e5;
}

/* Cell headings carry the theme's 1.5em top margin, which inside a padded cell
   reads as a stray gap above every entry. */
.site-content table h4,
.site-content table h5 {
    margin: 0 0 0.4em;
    font-size: 1.05em;
    line-height: 1.3;
}

/* Narrow screens: the table scrolls inside this wrapper instead of widening the
   page. The wrapper is required — `overflow-x` on the <table> itself does not
   contain it, and the whole layout then overflows: at 420px the body copy was
   being clipped mid-word, not just the table. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 700px) {
    .site-content table {
        table-layout: auto;
    }

    .site-content th,
    .site-content td {
        min-width: 240px;
        padding: 0.75em 0.9em;
    }
}

.site-content ul {
    list-style: disc;
    margin-left: 2em;
    margin-bottom: 1.5em;
}

.site-content ul li {
    margin-bottom: 1em;
}

/* ==========================================================================
   Images and Figures
   ========================================================================== */
figure {
    margin: 2em 0;
}

figure.alignright {
    float: right;
    margin-left: 2em;
    max-width: 350px;
}

figure.alignleft {
    float: left;
    margin-right: 2em;
    max-width: 350px;
}

figure img {
    max-width: 100%;
    height: auto;
}

figcaption {
    text-align: center;
    font-size: 0.9em;
    color: #666;
    margin-top: 0.5em;
}

img.alignright {
    float: right;
    margin-left: 2em;
    max-width: 350px;
}

img.alignleft {
    float: left;
    margin-right: 2em;
    max-width: 350px;
}

/* Spacer */
.spacer {
    height: 50px;
}

/* ==========================================================================
   Knowledge Articles (/de/wissen, /en/knowledge)
   ========================================================================== */
.knowledge-article {
    display: flex;
    align-items: flex-start;
    gap: 2em;
    padding: 2em 0;
}

/* Separator between articles only — never a trailing rule after the last one.
   :last-of-type would not work here: .spacer is the last div sibling. */
.knowledge-article + .knowledge-article {
    border-top: 1px solid #e5e5e5;
}

.knowledge-article .ka-media {
    flex: 0 0 220px;
    max-width: 220px;
    float: none;
    margin: 0;
}

.knowledge-article .ka-media img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #e5e5e5;
}

.knowledge-article .ka-media figcaption {
    margin-top: 0.6em;
}

.knowledge-article .ka-body {
    flex: 1 1 auto;
    min-width: 0;
}

.knowledge-article .ka-body > :first-child {
    margin-top: 0;
}

.knowledge-article .ka-body > :last-child {
    margin-bottom: 0;
}

.knowledge-article .ka-title {
    font-size: 1.15em;
    line-height: 1.35;
    margin-bottom: 0.75em;
}

/* Provenance flag on the English knowledge articles: the summaries there are
   translations produced during the rebuild, and the sources they link to — plus
   every PDF — are German. Muted, because it is a caveat rather than content. */
.knowledge-article .ka-origin {
    font-size: 0.85em;
    color: #666;
    margin: -0.4em 0 0.9em;
}

.knowledge-article .ka-more a {
    display: inline-block;
    margin-top: 0.25em;
    border-bottom: 1px solid currentColor;
    text-decoration: none;
}

/* Placeholder entries: the page exists and is linked, but has no content yet.
   Flagged rather than hidden — an unlabelled link to "Diese Seite ist in
   Bearbeitung" reads as a broken site, and dropping the link orphans a page we
   are keeping on purpose. Remove .ka-pending and the badge when content lands;
   the stubs are also a go-live gate, see ../../deploy.md. */
.knowledge-article.ka-pending {
    opacity: 0.85;
}

.knowledge-article .ka-badge {
    display: inline-block;
    margin-left: 0.5em;
    padding: 2px 8px;
    border: 1px solid #d8ccd3;
    border-radius: 10px;
    background: #f6f3f4;
    color: #7a6b73;
    font-size: 0.7em;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    vertical-align: middle;
}

@media (max-width: 700px) {
    .knowledge-article {
        flex-direction: column;
        gap: 1.25em;
        padding: 1.5em 0;
    }

    .knowledge-article .ka-media {
        flex-basis: auto;
        max-width: 100%;
        align-self: flex-start;
    }
}

/* ==========================================================================
   Social Links
   ========================================================================== */
.social-links {
    display: flex;
    gap: 15px;
    align-items: center;
}

.social-links img {
    vertical-align: middle;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    background: #fff;
    text-align: center;
    padding: 20px;
    margin-top: 30px;
    border-top: 1px solid #ddd;
}

.site-footer p {
    margin: 0;
    color: #666;
}

.site-footer a {
    color: #555;
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
    color: #111;
    text-decoration: underline;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
    /* All dropdown CSS lives in the min-width: 981px block, so there is no
       hover behaviour here at all — every submenu is permanently open. That
       is the right fallback for touch (hover cannot open anything), but it
       has to READ as a hierarchy rather than as one flat list, which is what
       the previous `flex-direction: column` on a non-flex <ul> left it as:
       a browser-default bulleted nested list. */
    .main-navigation .menu,
    .main-navigation .sub-menu {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .main-navigation .menu {
        padding: 8px 0;
    }

    /* Row separators. Without them the toggle's border-left reads as a stray
       floating line rather than the edge of a tap target. */
    .main-navigation .menu > li + li {
        border-top: 1px solid #f2eef0;
    }

    .main-navigation .menu > li > a {
        display: block;
        /* 12 + 22 + 12 = 46px, matched exactly by .nav-toggle's height so the
           toggle cannot overhang the row it belongs to. Change both together. */
        padding: 12px 20px;
        line-height: 22px;
        color: #631145;
        font-weight: 600;
        text-decoration: none;
    }

    .main-navigation .menu > li.current-menu-item > a,
    .main-navigation .menu > li.current-menu-ancestor > a {
        border-left: 3px solid #631145;
        background: #f6f3f4;
        padding-left: 17px;
    }

    .main-navigation .sub-menu a {
        display: block;
        padding: 9px 20px 9px 36px;
        color: #6b5b64;
        font-size: 0.925em;
        text-decoration: none;
    }

    .main-navigation .sub-menu .current-menu-item > a {
        color: #42002a;
        font-weight: 600;
    }

    .main-navigation .sub-menu-sep {
        height: 1px;
        margin: 4px 20px 4px 36px;
        background: #eae5e7;
    }

    /* The caret means "hover me", which is meaningless on touch. The
       accordion's own +/- toggle replaces it. */
    .main-navigation .menu-caret {
        display: none;
    }

    /* ---- Accordion, only once nav.js has marked the nav ----
       Keyed on .js-accordion so that a failed or blocked script leaves the
       menu fully expanded rather than permanently collapsed and unopenable. */
    .main-navigation.js-accordion .menu-item-has-children {
        position: relative;
    }

    .main-navigation.js-accordion .menu-item-has-children > a {
        padding-right: 60px;
    }

    .main-navigation.js-accordion .sub-menu {
        display: none;
    }

    .main-navigation.js-accordion .menu-item-has-children.is-open > .sub-menu {
        display: block;
        padding-bottom: 6px;
    }

    .nav-toggle {
        position: absolute;
        top: 0;
        right: 0;
        width: 56px;
        height: 46px;
        padding: 0;
        border: 0;
        border-left: 1px solid #eae5e7;
        background: none;
        color: #631145;
        cursor: pointer;
    }

    /* The +/- is drawn rather than typed: a glyph would be read aloud by
       screen readers, which already get the button's aria-expanded state. */
    .nav-toggle span,
    .nav-toggle span::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 13px;
        height: 2px;
        margin: -1px 0 0 -6.5px;
        background: currentColor;
    }

    .nav-toggle span::before {
        margin: -1px 0 0 -6.5px;
        transform: rotate(90deg);
        transition: transform 0.2s ease;
    }

    .is-open > .nav-toggle span::before {
        transform: rotate(0deg);
    }

    .nav-toggle:focus-visible {
        outline: 2px solid #852e64;
        outline-offset: -2px;
    }

    .siblings-list a {
        width: 100%;
    }

    figure.alignright,
    figure.alignleft,
    img.alignright,
    img.alignleft {
        float: none;
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }
}