/* ============================================================================
 * kezyma.github.io — custom styles layered on Bootswatch Darkly
 * ========================================================================== */

:root {
    --kz-navbar-h: 56px;          /* kept in sync with the real navbar by app.js */
    --kz-sidebar-w: 264px;
}

html { scroll-padding-top: var(--kz-navbar-h); }
body { min-height: 100%; padding-top: var(--kz-navbar-h); }

/* ---- navbar + breadcrumb ------------------------------------------------ */
.navbar .navbar-brand { letter-spacing: .2px; }

.navbar-heading {                 /* shrinkable breadcrumb area */
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    color: rgba(255, 255, 255, .9);
    line-height: 1.2;
}
.navbar-heading .sep { opacity: .45; margin: 0 .5rem; }
.navbar-heading .crumb-cat { opacity: .85; }
.navbar-heading .crumb-title { font-weight: 600; color: #fff; }

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    opacity: .9;
    transition: opacity .15s ease, transform .15s ease;
}
.social-link:hover { opacity: 1; transform: translateY(-1px); }

.si-icon { height: 1em; width: 1em; vertical-align: -.125em; }
.social-link .si-icon { height: 1.15rem; width: 1.15rem; }
.social-link [class^="icon-"], .social-link [class*=" icon-"] {
    font-size: 1.5rem;
    line-height: 1;
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0, 0, 0, .12), inset 0 0 3px rgba(0, 0, 0, .12);
}

/* ---- layout / sidebar --------------------------------------------------- */
.sidebar {
    --bs-offcanvas-width: var(--kz-sidebar-w);
    background-color: #1c1c1c;
}
.content-main { min-width: 0; }   /* allow content to shrink in flexbox */

@media (min-width: 992px) {
    .sidebar {
        position: fixed;
        top: var(--kz-navbar-h);
        bottom: 0;
        left: 0;
        width: var(--kz-sidebar-w);
        overflow-y: auto;
        border-right: 1px solid var(--bs-border-color);
    }
    .sidebar .offcanvas-header { display: none; }   /* drawer chrome only on mobile */
    .content-main { margin-left: var(--kz-sidebar-w); max-width: 1100px; }
}

/* ---- sidebar items ------------------------------------------------------ */
#sidebar-nav { padding: .5rem 0; }

.sidebar-cat {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .6rem 1rem;
    border: 0;
    background: transparent;
    color: var(--bs-emphasis-color);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}
.sidebar-cat:hover { background: rgba(255, 255, 255, .05); }
.sidebar-cat-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sidebar-cat .chevron { flex: 0 0 auto; transition: transform .2s ease; font-size: .8rem; }
.sidebar-cat[aria-expanded="false"] .chevron { transform: rotate(-90deg); }

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem 1rem .5rem 1.5rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
    border-left: 3px solid transparent;
}
.sidebar-link > .bi, .sidebar-link > .si-icon { width: 1.1em; text-align: center; flex: 0 0 auto; }
.sidebar-link-label { min-width: 0; }
.sidebar-link:hover { color: var(--bs-emphasis-color); background: rgba(255, 255, 255, .05); }
.sidebar-link.active {
    color: #fff;
    background: rgba(var(--bs-primary-rgb), .22);
    border-left-color: var(--bs-primary);
}
.sidebar-home { padding-left: 1rem; font-weight: 600; }

/* ---- home card grid ----------------------------------------------------- */
.page-card {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.page-card:hover { transform: translateY(-3px); box-shadow: 0 .6rem 1.4rem rgba(0, 0, 0, .45); }

/* Fallback (icon + name) sits under the image; shown when there is no image
   or the image fails to load (app.js removes a broken <img>). */
.page-card-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1rem;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, var(--bs-primary), #1a2b4a);
}
.page-card-fallback .bi, .page-card-fallback .si-icon { font-size: 2.4rem; height: 2.4rem; width: 2.4rem; }
.page-card-name { font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.page-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- markdown article --------------------------------------------------- */
.markdown-body { max-width: 860px; }
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
    scroll-margin-top: calc(var(--kz-navbar-h) + 1rem);
}
.markdown-body h1, .markdown-body h2 {
    padding-bottom: .3em;
    border-bottom: 1px solid var(--bs-border-color);
    margin-top: 1.6rem;
}
.markdown-body h1:first-child { margin-top: .5rem; }
.markdown-body img { max-width: 100%; height: auto; border-radius: .375rem; }
.markdown-body pre {
    padding: 1rem;
    border-radius: .5rem;
    overflow: auto;
    background: #2d2d2d;            /* matches prism-tomorrow */
}
.markdown-body :not(pre) > code {
    padding: .15em .4em;
    border-radius: .25rem;
    background: rgba(255, 255, 255, .1);
    color: #e685b5;
}
.markdown-body table {
    width: 100%;
    margin: 1rem 0;
    border-collapse: collapse;
}
.markdown-body table th, .markdown-body table td {
    border: 1px solid var(--bs-border-color);
    padding: .5rem .75rem;
}
.markdown-body table thead th { background: rgba(255, 255, 255, .06); }
.markdown-body blockquote {
    border-left: .25rem solid var(--bs-border-color);
    padding-left: 1rem;
    color: var(--bs-secondary-color);
    margin: 1rem 0;
}
.markdown-body > :last-child { margin-bottom: 0; }

/* ---- icomoon brand icons (social bar) ----------------------------------- */
@font-face {
    font-family: "icomoon";
    src: url("../fonts/icomoon.eot?nsv01r");
    src: url("../fonts/icomoon.eot?nsv01r#iefix") format("embedded-opentype"),
         url("../fonts/icomoon.ttf?nsv01r") format("truetype"),
         url("../fonts/icomoon.woff?nsv01r") format("woff"),
         url("../fonts/icomoon.svg?nsv01r#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
    font-family: "icomoon" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-steam .path1:before { content: "\e910"; color: rgb(0, 0, 0); }
.icon-steam .path2:before { content: "\e911"; margin-left: -1em; color: rgb(255, 255, 255); }
.icon-twitch .path1:before { content: "\e90e"; color: rgb(145, 70, 255); }
.icon-twitch .path2:before { content: "\e90f"; margin-left: -1em; color: rgb(255, 255, 255); }
.icon-youtube .path1:before { content: "\e908"; color: rgb(212, 36, 40); }
.icon-youtube .path2:before { content: "\e909"; margin-left: -1em; color: rgb(255, 255, 255); }
.icon-reddit .path1:before { content: "\e90a"; color: rgb(255, 69, 0); }
.icon-reddit .path2:before { content: "\e90b"; margin-left: -1em; color: rgb(255, 255, 255); }
.icon-discord .path1:before { content: "\e90c"; color: rgb(88, 101, 242); }
.icon-discord .path2:before { content: "\e90d"; margin-left: -1em; color: rgb(255, 255, 255); }
.icon-paypal .path1:before { content: "\e900"; color: rgb(39, 52, 106); }
.icon-paypal .path2:before { content: "\e901"; margin-left: -1em; color: rgb(255, 255, 255); }
.icon-patreon .path1:before { content: "\e902"; color: rgb(255, 66, 77); }
.icon-patreon .path2:before { content: "\e903"; margin-left: -1em; color: rgb(255, 255, 255); }
.icon-github .path1:before { content: "\e904"; color: rgb(24, 23, 23); }
.icon-github .path2:before { content: "\e905"; margin-left: -1em; color: rgb(255, 255, 255); }
.icon-nexus .path1:before { content: "\e906"; color: rgb(218, 142, 53); }
.icon-nexus .path2:before { content: "\e907"; margin-left: -1em; color: rgb(255, 255, 255); }