:root {
    --border-radius: 8px;
}

body {
    background-color: #f5f0e8 !important;
}

/* Logo boven content */
body::before {
    content: '';
    display: block;
    width: 150px;
    height: 150px;
    margin: 2rem auto 0.5rem; /* Kleinere margin-bottom */
    background-image: url('/images/JB_scenario.PNG');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: var(--border-radius) !important;
}

/* Tagline boven footer */
footer::before {
    content: 'V i b e c o d i n g';
    display: block;
    text-align: center;
    font-size: 1rem;
    color: #444;
    margin: 2rem auto;
    font-weight: 400;
}

/* Fix tag wrapping op mobiel */
.tags, .tag-list, article .tags {
    display: flex;
    flex-wrap: wrap !important;
    gap: 0.5rem;
}

.tags a, .tag-list a {
    white-space: nowrap;
}

/* Force alles binnen viewport op mobiel */
@media (max-width: 768px) {
    pre, code {
        max-width: 100%;
        overflow-x: auto;
        word-wrap: break-word;
        white-space: pre-wrap;
    }
    
    article, .content, main {
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }
}

/* Extra padding op mobiel om afkapping te voorkomen */
@media (max-width: 768px) {
    body {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    h1, h2, h3, h4, h5, h6, p, ul, ol {
        margin-left: 0;
        padding-left: 0;
    }
}

/* Fix navbar padding op mobiel */
@media (max-width: 768px) {
    nav, nav ul, nav li {
        padding-left: 0.5rem !important;
        margin-left: 0 !important;
    }
}