/* ==================== GLOBAL STYLES ==================== */

body {
    margin:0;
    font-family: "Segoe UI", Tahoma, sans-serif;
    background:#f4f4f4;
    color:#222;
}

body p {
    margin-block-start: 0.3em;
}

.content h1, .content h2, .content h3, .content h4, .content h5 {
    margin-bottom: 0em;
}

/* ==================== DOWNLOADLINK STYLES ==================== */
.fa-download + a {
    color: #4c1a06 !important;
}

.fa-download {
    color: #4c1a06 !important;
}

/* ==================== BANNER ==================== */

.banner {
    width:100%;
    height:160px;
    object-fit:cover;
    display:block;
    background-color: #333;
}
/* HEADER moet een positioned container zijn */
.top-header {
    position: relative;
}

/* Logo dat over de banner heen ligt */
.banner-logo {
    position: absolute;
    top: 50%;          /* verticaal in het midden */
    right: 20px;       /* afstand van de rechterkant */
    transform: translateY(-50%);
    height: 150px;      /* kies een goede logogrootte */
    pointer-events: none; /* optioneel: klik gaat naar banner */
}

/* ==================== TOP NAVIGATION ==================== */

.topmenu {
    background:#222;
    padding:0;
    margin:0;
}

.topmenu ul {
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
}

.topmenu li {
    margin:0;
}

.topmenu a {
    display:block;
    padding:14px 22px;
    color:white;
    text-decoration:none;
    font-weight:500;
}

.topmenu a:hover {
    background:#444;
}

.topmenu ul li {
    display: inline-block;
    padding: 8px 16px;
}

.topmenu ul li a {
    color: #eee;
    text-decoration: none;
    padding-bottom: 3px;
}

/* ACTIVE MENU ITEM */
.topmenu ul li.active a {
    border-bottom: 2px solid white;
}

/* HOVER EFFECT (optioneel, mooi bij retro stijl) */
.topmenu ul li a:hover {
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
}

/* ==================== MAIN LAYOUT ==================== */

.layout {
    display:flex;
    min-height: calc(100vh - 240px);
}

/* ==================== SIDEBAR ==================== */

.sidebar {
    width:220px;
    background:#e7e7e7;
    border-right:1px solid #ccc;
    padding:10px;
}

.sidebar-section {
    margin-bottom:12px;
}

.collapse-btn {
    width:100%;
    text-align:left;
    background:#d4d4d4;
    border:none;
    padding:10px;
    font-weight:bold;
    cursor:pointer;
    border-radius:4px;
}

.collapse-btn.open {
    background:#b8b8b8;
}

.submenu {
    list-style:none;
    padding-left:14px;
    margin:8px 0;
}

.submenu li {
    margin:6px 0;
}

.submenu a {
    color:#333;
    text-decoration:none;
}

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

/* Active page highlight */
.sidebar .submenu a.active {
    font-weight: bold;
/* color: #ffd27f; /* retro geel/oranje tint */
}

/* Open button styling */
.collapse-btn.open {
/*    background-color: #444; /* retro donker */
}

/* Active group indicator: little arrow */
.collapse-btn::after {
    content: ' ►';
    float: right;
}

.collapse-btn.open::after {
    content: ' ▼';
}

/* ==================== CONTENT ==================== */

.content {
    flex:1;
    padding:20px;
    background:white;
}

/* Headings in retro/documentation style */
.content h1, .content h2, .content h3 {
    /* font-family:"Courier New", monospace; */
    padding-top:16px;
    padding-bottom:6px;
}

/* ===== CODE BLOCK STYLING ===== */

.markdown-body pre {
    background: #eee;
    padding: 12px 16px;
    border-radius: 6px;
    margin: 20px 0;
    overflow-x: auto;
}

.markdown-body code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.95em;
}

/* Inline code */
.markdown-body p code,
.markdown-body li code {
    background: #f5f5f5;
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

/* ==================== IMAGES ==================== */
.img-small {
    width: 200px;
}

.img-right {
    float: right;
    margin: 10px;
    max-width: 20%;
}

.img-left {
    float: left;
    margin: 10px;
    max-width: 40%;
}

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

.footer {
    background:#222;
    color:white;
    text-align:center;
    padding:12px;
    font-size:14px;
}