/* ==========================================================================
   1. Typografie & Basistekst
   ========================================================================== */

/* Titels en koppen: Dik serif font */
h1, h2, h3, h4, h5, h6, .navbar .brand {
    font-family: Volkhov, Georgia, Cambria, "Times New Roman", Times, serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

/* Lopende tekst & UI elementen: Goed leesbaar sans-serif font (1rem) */
body, #fullArticle, #fullArticle p, #fullArticle ul, #fullArticle ol, 
#fullArticle li, #fullArticle div, #fullArticle dd, #fullArticle table,
.popArticles a, .search-query, #searchBar button {
    font-family: Figtree, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

/* Artikeltitels in categorielijsten verkleinen */
.articleList li a,
.articleList li a span {
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

/* ==========================================================================
   2. Navigatie, Logo & Header (Mobiel Geoptimaliseerd)
   ========================================================================== */

/* Logo positionering: 32px hoog en 10px omhoog verschoven */
#mainNav .brand img {
    max-height: 32px !important; 
    width: auto;
    margin-top: -10px !important; 
}

/* Verberg het hamburger menu (als gezien in image_ba2ce0.png) */
.navbar .btn-navbar {
    display: none !important;
}

/* Verwijdert de lijn/border onder de logo-container */
.navbar, 
.navbar .navbar-inner {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* ==========================================================================
   3. Detailpagina Artikel (Aanpassingen n.a.v. image_ba3444.png & image_ba34c2.png)
   ========================================================================== */

/* Ruimte tussen de titel en de tekst eronder halveren */
#fullArticle .title {
    margin-bottom: 1em !important; /* Gehalveerd van 2em naar 1em voor een compactere look */
}

/* "Laatst gewijzigd" datum links uitlijnen en 10px padding aan de onderkant toevoegen */
.articleFoot {
    text-align: left !important;
    padding-bottom: 10px !important;
}
.articleFoot .lu {
    display: block !important;
    text-align: left !important;
}

/* ==========================================================================
   4. Homepage Categoriekaarten & Spacing
   ========================================================================== */

/* Ruimte tussen de gele zoekcontainer en de eerste categorieën halveren */
#contentArea {
    padding-top: 10px !important; /* Halveert de standaard Help Scout witruimte aan de bovenkant */
}

/* Categorie Grid lay-out (Desktop 3 kolommen) */
.category-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    margin: 20px 0 40px 0 !important; /* Bovenste marge gehalveerd naar 20px */
}

.category-list .category {
    width: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.category-list .category:hover {
    background-color: #FFF6E3 !important;
    border-color: #FFE9B7 !important;
}

.category-list .category h3 {
    font-size: 1.5rem !important;
    margin-bottom: 10px !important;
}

.category-list .category .article-count {
    font-size: 1rem !important;
    margin-top: 5px !important;
}

/* Schakelt op mobiel terug naar 1 kolom */
@media (max-width: 767px) {
    .category-list {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-top: 15px !important;
    }
}

/* ==========================================================================
   5. Zoekcontainer & Uitlijning Vergrootglas
   ========================================================================== */

#docsSearch {
    background-color: #FFF6E3 !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding-bottom: 20px !important; /* Helpt bij het compact houden van de overgang */
}

#searchBar {
    display: flex !important;
    align-items: stretch !important;
    max-width: 600px;
    margin: 0 auto 40px auto !important;
}

#searchBar input.search-query {
    flex-grow: 1 !important;
    border: 1px solid #FFE9B7 !important;
    border-right: none !important;
    border-radius: 4px 0 0 4px !important;
    box-shadow: none !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 15px !important;
}

#searchBar input.search-query:focus {
    border-color: #c3131f !important;
    outline: none;
}

/* Fix: Zoekknop als flexbox instellen centreert het icoon perfect (image_ba2ce0.png) */
#searchBar button {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #c3131f !important;
    border: 1px solid #c3131f !important;
    border-radius: 0 4px 4px 0 !important;
    color: #ffffff !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 25px !important;
    cursor: pointer;
}

#searchBar button i {
    margin: 0 !important; /* Verwijdert scheve positionering van het icoon */
    vertical-align: middle !important;
}

#searchBar button:hover {
    background-color: #a10f19 !important; 
    border-color: #a10f19 !important;
}

/* Verbergt de kop "Categories" boven de lijst in de sidebar */
#sidebar h3 {
    display: none !important;
}