/* ==========================================================================
   Basis Huisstijl (Linux Café Haarlem)
   ========================================================================== */
body, #page-wrapper, .section, #modular {
    background-color: #f4ebd0 !important;
    color: #2b2010 !important;
}
#header, #footer {
    background-color: #e8d8b8 !important;
    color: #2b2010 !important;
    border-color: #d2be95 !important;
}
#header a, .navbar-section a { 
    color: #2b2010 !important; 
}
.navbar-toggle .icon-bar { 
    background-color: #2b2010 !important; 
}
input, textarea, select {
    background-color: #ffffff !important;
    color: #2b2010 !important;
    border: 1px solid #d2be95 !important;
}

/* ==========================================================================
   Universele Pagina Fixes (Zorgt dat normale pagina's zoals Community kloppen)
   ========================================================================== */

/* Ruimte onder het menu voor pagina's zonder grote header-afbeelding */
#body-wrapper, .main-content, .section {
    padding-top: 2rem !important;
}

/* Dwing ALTIJD linkse uitlijning af voor alle lopende tekst en koppen op de site */
#body-wrapper, 
#body-wrapper p, 
#body-wrapper h1, 
#body-wrapper h2, 
#body-wrapper h3, 
.content-wrapper,
#body-wrapper ul {
    text-align: left !important;
    color: #2b2010 !important;
}

/* Zorg dat lijsten (bullet points) netjes inspringen bij linkse uitlijning */
#body-wrapper ul {
    margin-left: 1.5rem !important;
    list-style-type: disc !important;
}

/* Alleen de poster/afbeeldingen binnen de content centreren, NOOIT de tekst! */
.img-fluid-blog, 
#body-wrapper img {
    max-width: 100%;
    height: auto;
    display: block !important;
    margin: 25px auto !important; /* Centreert de afbeelding zelf */
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(43, 32, 16, 0.15);
}

/* ==========================================================================
   Formulier Positie Tweak via Flexbox
   ========================================================================== */
#body-wrapper .container { 
    display: flex !important; 
    flex-direction: column !important; 
}
#body-wrapper .container > * { 
    order: 1; 
}
#body-wrapper .container > h2:last-of-type, 
#body-wrapper .container > h2:last-of-type ~ * { 
    order: 3 !important; 
}
#body-wrapper .container > form, 
#body-wrapper .container > .form-holder, 
#body-wrapper .container > div[id*="form"] {
    order: 2 !important; 
    margin-top: 30px !important; 
    margin-bottom: 40px !important;
}