:root {
    --wiki-max-height: calc(100vh - (4 * var(--behnke-basic)));
}

body {
    margin: 0;
    padding: 0;
}

.wiki-header {
    height: calc(4 * var(--behnke-basic));
}

/* Embed mode (?embed=1): the top header is not rendered, so the toolbar
   needs to sit flush at the top and the wiki-main / sidebar height
   calculation has to reclaim the freed 4×basic of vertical space. */
body.wiki-embed {
    --wiki-max-height: 100vh;
}

body.wiki-embed .wiki-toolbar {
    top: 0;
}

/* Hide-toolbar mode (?hide_toolbar=1): the toolbar is not rendered at all,
   so nothing extra is needed for layout — this rule is a defensive fallback
   in case the markup is ever present but should stay hidden. */
body.wiki-hide-toolbar .wiki-toolbar {
    display: none;
}

/* Headless / single-page mode (?headless=1): header, toolbar and sidebar are
   all dropped — only the content remains.  Reclaim the full viewport so the
   page reads as bare embeddable content.  The two-class selector outranks the
   plain .wiki-main rules (including the responsive ones) regardless of order. */
body.wiki-headless {
    --wiki-max-height: 100vh;
}

body.wiki-headless .wiki-main {
    width: 100vw;
    max-width: 100vw;
    /* Centre the content in a readable column: symmetric inline padding that
       grows with the viewport but never drops below the base gutter, so the
       text sits centred on wide screens and stays comfortable on narrow ones. */
    padding-inline: max(var(--behnke-basic), calc((100vw - 60rem) / 2));
}

/* Floating-sidebar mode (?floating_sidebar=1): lift the sidebar off the
   viewport edge — extra room on the left, rounded corners, a soft shadow and
   an optional embedder background colour (?sidebar_color=, injected as the
   --wiki-floating-sidebar-bg custom property; falls back to the default
   gradient). Two-class selectors outrank the base .wiki-sidebar/.wiki-menu. */
body.wiki-floating-sidebar .wiki-sidebar {
    box-sizing: border-box;
    padding: var(--behnke-basic) 0 var(--behnke-basic) var(--behnke-basic);
}

body.wiki-floating-sidebar .wiki-menu {
    height: calc(var(--wiki-max-height) - (2 * var(--behnke-basic)));
    border-radius: calc(1.2 * var(--behnke-basic));
    overflow: hidden;
    background: var(--wiki-floating-sidebar-bg, var(--behnke-gradient-connect));
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.20);
}

.wiki-wrapper {
    display: flex;
    box-sizing: border-box;
    max-width: 100vw;
    max-height: var(--wiki-max-height);
    margin: 0 auto;
}

.wiki-sidebar { 
    width: 20vw;
    max-width: 20vw;
}

.wiki-main { 
    box-sizing: border-box;
    padding: var(--behnke-basic);
    width: 80vw;
    max-width: 80vw;
    height: var(--wiki-max-height);
    overflow-y: scroll;
}

.wiki-main * {
    max-width: 100%;
}

/* -----------------------------
   TOOLBAR GUTTER

   The action rail (.wiki-toolbar) is position:fixed against the right viewport
   edge, and .wiki-main reaches that same edge — so without a gutter the article
   text scrolls underneath the rail. On screens wide enough to show the rail
   beside the content, reserve its width (plus one base gap) as right padding so
   the content ends *before* the toolbar starts instead of running behind it.

   Skipped when the toolbar isn't rendered: hide-toolbar mode, and headless mode
   (which sets its own symmetric padding-inline and is excluded here so it wins).
   ----------------------------- */
@media (min-width: 701px) {
    body:not(.wiki-hide-toolbar):not(.wiki-headless) .wiki-main {
        padding-right: calc(6rem + 3 * var(--behnke-basic));
    }
}

.wiki-menu {
    box-sizing: border-box;
    width: 100%;
    height: var(--wiki-max-height);
    background: var(--behnke-gradient-connect);
    color: var(--behnke-white);
    display: flex;
    flex-direction: column;
}

.wiki-menu-nav {
    flex: 1;
    min-height: 0;
    padding: var(--behnke-basic);
    overflow-y: auto;
}

/* -----------------------------
   SIDEBAR FOOTER
----------------------------- */

.wiki-menu-footer {
    flex-shrink: 0;
    padding: calc(0.6 * var(--behnke-basic)) var(--behnke-basic);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(0.4 * var(--behnke-basic));
}

/* Language switcher */

.wiki-lang-switcher {
    display: flex;
    gap: calc(0.4 * var(--behnke-basic));
    flex-wrap: wrap;
    justify-content: center;
}

.wiki-lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(0.25 * var(--behnke-basic)) calc(0.4 * var(--behnke-basic));
    border-radius: calc(0.3 * var(--behnke-basic));
    font-size: 1.3rem;
    line-height: 1;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0.6;
    transition: opacity 0.15s, border-color 0.15s, background 0.15s;
}

.wiki-lang-btn:hover {
    opacity: 0.85;
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.wiki-lang-btn.wiki-lang-active {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.15);
}

/* Support section */

.wiki-menu-support {
    flex-shrink: 0;
    padding: calc(0.75 * var(--behnke-basic)) var(--behnke-basic);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    gap: calc(0.3 * var(--behnke-basic));
}

.wiki-menu-support-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: calc(0.15 * var(--behnke-basic));
}

.wiki-menu-support-item {
    display: flex;
    align-items: center;
    gap: calc(0.4 * var(--behnke-basic));
    font-size: var(--behnke-smaller-font-size, 0.8rem);
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    border-radius: calc(0.3 * var(--behnke-basic));
    padding: calc(0.2 * var(--behnke-basic)) calc(0.3 * var(--behnke-basic));
    transition: color 0.15s, background 0.15s;
}

.wiki-menu-support-item:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.wiki-menu-support-icon {
    font-size: 1em;
    flex-shrink: 0;
    width: 1.2em;
    text-align: center;
}

.menu-node {
    display: flex;
    flex-direction: column;
    margin-bottom: 4px;
}

.menu-child-nodes {
    margin-left: var(--behnke-basic);
    padding-left: var(--behnke-basic);
    margin-top: calc(0.5 * var(--behnke-basic));
    border-left: 1px solid var(--behnke-gray);
}

.menu-node .menu-child-nodes {
    visibility: collapse;
}

.menu-node.menu-node-open > .menu-child-nodes {
    visibility: visible;
    /* The menu is server-rendered/cached with only the active branch expanded,
       so there is no client-side toggle to transition. Instead play a one-shot
       reveal when the page loads, so the open branch eases in. */
    animation: wiki-menu-reveal 0.28s ease both;
}

.menu-node.menu-node-open > .menu-child-nodes > .menu-node > .menu-node-open {
    visibility: visible;
}

@keyframes wiki-menu-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .menu-node.menu-node-open > .menu-child-nodes { animation: none; }
}

.menu-node.menu-node-active > .menu-node-label,
.menu-node.menu-node-active > .menu-node-label p {
    color: var(--behnke-white);
    background-color: var(--behnke-design);
}

.menu-node.menu-node-active > .menu-node-label {
    border-left: 2px solid var(--behnke-white);
    padding: calc(0.5 * var(--behnke-basic));
}

.menu-node.menu-node-active > .menu-child-nodes {
    border-left-width: 2px;
    border-left-color: var(--behnke-white);
}

.wiki-menu a,
.menu-node-label {
    display: flex;
    align-items: center;
    color: var(--behnke-medium-gray);
    text-decoration: none;
    margin: 0;
    font-size: var(--behnke-normal-font-size);
    border-radius: calc(0.5 * var(--behnke-basic));
    padding: calc(0.25 * var(--behnke-basic));
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.wiki-menu a p,
.menu-node-label p {
    margin: 0;
    padding: 0;
}

.menu-node-label:hover,
.menu-node-label:hover p {
    background-color: var(--behnke-design);
    color: var(--behnke-white);
}

.menu-node-link { 
    display: none;
}

.menu-child-nodes .menu-node-label {
    font-weight: 400;
}

/* -----------------------------
TABLET
----------------------------- */

@media (max-width: 1000px) {

    .wiki-sidebar {
        width: 260px;
        max-width: 260px;
    }

    .wiki-main {
        width: calc(100vw - 260px);
        max-width: calc(100vw - 260px);
    }

}

/* -----------------------------
MOBILE
----------------------------- */

@media (max-width: 700px) {

    .wiki-wrapper {
        flex-direction: column;
        max-height: none;
    }

    .wiki-sidebar {
        position: fixed;
        top: calc(4 * var(--behnke-basic));
        bottom: 0;                       /* iOS Safari: 100vh reaches behind
                                            the URL bar / bottom toolbar, so
                                            we anchor to the actual visible
                                            bottom edge instead. */
        left: 0;
        width: 280px;
        max-width: 80vw;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 1000;
        display: flex;                   /* let .wiki-menu fill via 100% */
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.28);
    }

    .wiki-sidebar > nav,
    .wiki-sidebar > nav > .wiki-menu {
        height: 100%;
        max-height: 100%;
        flex: 1;
        min-height: 0;
        overflow: hidden;                /* inner .wiki-menu-nav scrolls */
    }

    .wiki-main {
        width: 100vw;
        max-width: 100vw;
        height: auto;
        overflow-y: auto;
    }

    /* Smaller list-item type so long enumerations still fit nicely. */
    .wiki-main li,
    .wiki-main ul li,
    .wiki-main ol li {
        font-size: 0.9rem;
        line-height: 1.5;
    }

}

.wiki-burger-wrapper {
    display: none;
}

.wiki-burger {
    display: none;
    width: 36px;
    height: 36px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    margin-right: 8px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: background 0.15s;
    flex-shrink: 0;
    background: transparent;
}

.wiki-burger:hover {
    background: rgba(255, 255, 255, 0.12);
}

.wiki-burger span {
    display: block;
    height: 2px;
    width: 18px;
    background: var(--behnke-white);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

@media (max-width: 700px) {

    .wiki-burger-wrapper {
        display: flex;
        height: calc(3 * var(--behnke-basic));
        align-items: center;
        margin-left: auto;
    }

    body.menu-open .wiki-sidebar {
        transform: translateX(0);
    }

    body.menu-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        z-index: 900;
        animation: wiki-backdrop-fade 0.28s ease both;
    }

    @keyframes wiki-backdrop-fade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    .wiki-sidebar {
        z-index: 1000;
    }

    .wiki-burger {
        display: flex;
    }

}

body.menu-open .wiki-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

body.menu-open .wiki-burger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

body.menu-open .wiki-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}
/* ── Legal links footer ──────────────────────────────────────────────── */

.wiki-menu-legal {
    display: flex;
    flex-wrap: wrap;
    gap: calc(0.3 * var(--behnke-basic)) calc(0.6 * var(--behnke-basic));
    padding: calc(0.6 * var(--behnke-basic)) var(--behnke-basic);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wiki-menu-legal-link {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    transition: color 0.15s;
    white-space: nowrap;
}

.wiki-menu-legal-link:hover {
    color: rgba(255, 255, 255, 0.85);
}