/* =================================
   Version 13.7
   Clean Marco Replica – Stable
   (logo: links strookje weg door mini shift naar links, hoogte blijft gelijk)
================================= */


/* ===== EXACTE KLEUREN (CONTENT) ===== */

html,
body,
.site-body,
.publish-view-container,
.markdown-preview-view {
    background-color: #FFFCF0 !important;
    color: #100F0F !important;
}


/* ===== SIDEBAR (DONKER + FIXED WIDTH) ===== */

.site-body-left-column {
    background-color: #1f1f1f !important;

    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;

    border-right: none !important;
    box-shadow: none !important;
    outline: none !important;
}


/* ===== ALGEMEEN: GEEN DIVIDERS ===== */

.site-body,
.site-body-left-column,
.site-body-center-column,
.publish-view-container {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* ===== FIX A) STROOK TUSSEN LINKS/RECHTS: AFDICHTEN ===== */

.site-body-center-column {
    position: relative !important;
}

.site-body-center-column::before {
    content: "" !important;
    position: absolute !important;
    left: -14px !important;
    top: 0 !important;
    width: 14px !important;
    height: 100% !important;
    background: #1f1f1f !important;
    pointer-events: none !important;
    z-index: 1 !important;
}


/* ===== FIX B) BOLLING: SMALLER + SNELLER + ZICHTBAAR ===== */

.site-body-center-column::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 18px !important;
    height: 100% !important;

    background: linear-gradient(
        to right,
        rgba(0,0,0,0.34) 0px,
        rgba(0,0,0,0.18) 6px,
        rgba(0,0,0,0.00) 18px
    ) !important;

    pointer-events: none !important;
    z-index: 2 !important;
}


/* =================================
   LOGO/HEADER PLAATJE LINKS
   - flush-left
   - rechte hoeken
   - UITREKKEN IN DE BREEDTE (hoogte blijft gelijk)
   - extra mini shift links om linker strookje weg te nemen
================================= */

.site-body-left-column-site-logo,
a.site-body-left-column-site-logo{
    display: block !important;
    margin: 12px 0 6px -16px !important;  /* flush-left basis */
    padding: 0 !important;
    text-align: left !important;
    border-radius: 0 !important;
    overflow: hidden !important;          /* zorgt dat rechts netjes afgekapt blijft */
}

.site-body-left-column-site-logo img,
a.site-body-left-column-site-logo img{
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;

    width: 100% !important;
    height: auto !important;

    /* breedte-uitrek + mini shift links (neemt het zwarte strookje weg) */
    transform: translateX(-6px) scaleX(1.18) !important;
    transform-origin: left center !important;
}


/* ===== NAVIGATIE (TREE) + HOVER TERRACOTTA ===== */

.site-body-left-column .tree-item-self,
.site-body-left-column .tree-item-self * {
    color: #e8e3d2 !important;
    opacity: 1 !important;
}

.site-body-left-column .tree-item-inner,
.site-body-left-column .tree-item-inner a {
    color: #e8e3d2 !important;
}

.site-body-left-column .tree-item-self.mod-root .tree-item-inner {
    font-weight: 600 !important;
}

.site-body-left-column .tree-item-self:hover {
    background-color: rgba(210,105,30,0.22) !important;
    border-left: 3px solid #D2691E !important;
}

.site-body-left-column .tree-item-self:hover .tree-item-inner,
.site-body-left-column .tree-item-self:hover .tree-item-inner a {
    color: #ffffff !important;
}

.site-body-left-column .tree-item-self.is-active .tree-item-inner,
.site-body-left-column .tree-item-self.is-active .tree-item-inner a {
    color: #f3e6a2 !important;
    font-weight: 600 !important;
}

.site-body-left-column .collapse-icon,
.site-body-left-column .collapse-icon * {
    color: #e8e3d2 !important;
    fill: #e8e3d2 !important;
    stroke: #e8e3d2 !important;
}


/* ===== ZOEKVELD (WIT BLIJVEN) ===== */

.site-body-left-column input[type="search"],
.site-body-left-column input {
    background-color: #ffffff !important;
    color: #111111 !important;
}

.site-body-left-column input::placeholder {
    color: #666666 !important;
}


/* ===== TYPOGRAFIE BASIS ===== */

.markdown-preview-view {
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.6;
    padding: 3rem 3.5rem;
}

.publish-left-sidebar {
    font-family: Verdana, sans-serif;
    font-size: 0.95rem;
}


/* ===== H1–H4 ===== */

.markdown-preview-view h1 {
    font-size: 2.1rem;
    margin-top: 0.6em;
    margin-bottom: 0.8em;
    font-weight: 600;
}

.markdown-preview-view h2 {
    font-size: 1.6rem;
    margin-top: 2.2em;
    margin-bottom: 0.6em;
    font-weight: 600;
}

.markdown-preview-view h3 {
    font-size: 1.35rem;
    margin-top: 1.8em;
    margin-bottom: 0.4em;
    font-weight: 600;
}

.markdown-preview-view h4 {
    font-size: 1.1rem;
    margin-top: 1.4em;
    margin-bottom: 0.2em;
    font-weight: 600;
}


/* ===== INTERNE LAGEN NEUTRAAL ===== */

.publish-left-sidebar-content,
.nav-view-outer,
.nav-container {
    background-color: transparent !important;
}


/* ===== FOOTER VERBERGEN ===== */

body { --footer-display: none; }

.site-footer,
footer.site-footer {
    display: none !important;
}


/* ===== HOMEPAGE TITEL VERBERGEN ===== */

.site-body:has(.is-homepage) .page-header {
    display: none !important;
}


/* ===== SITETITEL LINKS SUBTIELER ===== */

a.site-body-left-column-site-name {
    font-size: 0.98rem !important;
    font-weight: 500 !important;
    color: #e8e3d2 !important;
    opacity: 0.90 !important;
    line-height: 1.2 !important;
}

a.site-body-left-column-site-name:hover {
    opacity: 1 !important;
    color: #ffffff !important;
}