/* ==========================================================================
   mb-artikel.css  |  versie 1.4  |  11-09-2026
   Standaardstijl voor blog- en kennisbankartikelen op www.meesterbaan.nl.
   Alles is gescoped onder .mb-container, zodat niets naar de rest van de
   pagina lekt. Voeg dit bestand toe aan site.css, of plak het blok eenmalig
   boven het artikel zolang dat nog niet is gebeurd.

   Huisstijl: actieblauw #0061D4 (www), IJsvrij #FBF7F4, blauwe tint #E9F1FE,
   tekst #343433, tabelrand #D3DAE7, radius 24px op kaarten.
   Optioneel: zet class="mb-container mb-kennisbank" voor blauwe H2-koppen
   met onderlijn (het ritme van de kennisbank).
   ========================================================================== */

.mb-container{max-width:1000px;margin:0 auto;color:#343433;line-height:1.7}
.mb-container h2{margin-top:2.5rem;margin-bottom:1rem}
.mb-container h3{margin-top:2rem;margin-bottom:.75rem}
.mb-container .mb-anchor{scroll-margin-top:90px}
/* v1.1: de sitestijl zet alinea- en lijstmarges op 0, waardoor alinea's tegen
   elkaar plakken. Hier hersteld binnen de artikelkolom. */
.mb-container p{margin-top:0;margin-bottom:1rem}
.mb-container li{margin-bottom:.4rem}
.mb-container .mb-direct-answer p:last-child,
.mb-container .mb-card p:last-child,
.mb-container .mb-tip-box p:last-child,
.mb-container .mb-note-box p:last-child{margin-bottom:0}

/* Kennisbankvariant: gekleurde koppen met onderlijn */
.mb-kennisbank h2{color:#0061D4;border-bottom:2px solid #E0E0E0;padding-bottom:10px;margin-bottom:1.2rem}

/* Direct antwoord bovenaan een kennisbankartikel */
.mb-container .mb-direct-answer{background:#E9F1FE;border-left:4px solid #0061D4;border-radius:0;padding:1.25rem 1.5rem;margin-bottom:2rem;font-size:1.05rem;line-height:1.7}
.mb-container .mb-direct-answer strong{display:block;margin-bottom:.4rem;color:#0061D4}

/* Tip, citaat, notitie */
.mb-container .mb-tip-box{background:#E9F1FE;border-left:4px solid #0061D4;border-radius:0;padding:1.25rem 1.5rem;margin:2rem 0}
.mb-container .mb-quote-box{background:#FBF7F4;border-left:4px solid #0061D4;border-radius:0 8px 8px 0;padding:1.5rem 1.75rem;margin:2.5rem 0;font-style:italic}
.mb-container .mb-quote-box p:first-child{margin-top:0}
.mb-container .mb-quote-box p:last-child{margin-bottom:0;font-style:normal;font-size:.9rem;color:#555}
.mb-container .mb-note-box{background:#FDF6E3;border-left:4px solid #E6D9CC;border-radius:0;padding:1rem 1.25rem;margin:1.5rem 0}

/* Kaarten en raster */
.mb-container .mb-card{background:#FBF7F4;border-radius:24px;padding:1.5rem;height:100%;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.mb-container .mb-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem;align-items:start}

/* Tabellen */
.mb-container .mb-table-wrapper{overflow-x:auto;margin-bottom:2rem;border:1px solid #D3DAE7;border-radius:8px}
.mb-container .mb-table-wrapper table{width:100%;border-collapse:collapse;font-size:.95rem}
.mb-container .mb-table-wrapper th{background:#F5F5F5;text-align:left;padding:12px 16px;border-bottom:1px solid #D3DAE7;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em}
.mb-container .mb-table-wrapper td{padding:12px 16px;border-bottom:1px solid #EEE;vertical-align:top}

/* Knoppen */
.mb-container .mb-btn{background-color:#0061D4;border:2px solid #0061D4;color:#fff!important;text-decoration:none;padding:13px 26px;border-radius:50px;font-weight:700;font-size:.95rem;display:inline-block;transition:background-color .2s}
.mb-container .mb-btn:hover{background-color:#0050B0;border-color:#0050B0;text-decoration:none}
.mb-container .mb-btn-secondary{background-color:transparent;color:#0061D4!important}
.mb-container .mb-btn-secondary:hover{background-color:#E9F1FE}
.mb-container .mb-btn-wrapper{margin:2rem 0;display:flex;flex-wrap:wrap;gap:15px}
.mb-container .mb-cta-wrap{text-align:center;margin:2rem 0}

/* FAQ met microdata (blog) */
.mb-container .mb-faq-section{background:#FBF7F4;border-radius:8px;padding:1.75rem 2rem;margin-top:3rem}
.mb-container .mb-faq-section [itemprop="mainEntity"]{padding-bottom:1.4rem;margin-bottom:1.4rem;border-bottom:1px solid #E2DCD4}
.mb-container .mb-faq-section [itemprop="mainEntity"]:last-child{padding-bottom:0;margin-bottom:0;border-bottom:none}
.mb-container .mb-faq-section h2:first-child,
.mb-container .mb-faq-section h3:first-child{margin-top:0}
.mb-container .mb-faq-section [itemprop="name"]{margin-bottom:.4rem}
.mb-container .mb-faq-section [itemprop="text"]{margin-top:0}

/* FAQ als accordeon (kennisbank) */
.mb-container details{border-bottom:1px solid #EEE;padding:20px 0}
.mb-container summary{cursor:pointer;font-weight:700;color:#0061D4;list-style:none}
.mb-container summary::-webkit-details-marker{display:none}
.mb-container summary::after{content:"+";float:right;color:#1A1A1A}
.mb-container details[open] summary::after{content:"\2212"}

/* Auteursbox en bronnen (blog) */
.mb-container .mb-author-box{display:flex;align-items:center;gap:1.25rem;background:#F8F9FA;border:1px solid #E9ECEF;border-radius:12px;padding:1.5rem;margin-top:3rem}
.mb-container .mb-author-img{width:70px;height:70px;border-radius:50%;background:#DDD;object-fit:cover;flex-shrink:0}
.mb-container .mb-author-info h3,
.mb-container .mb-author-info h4{margin:0 0 .3rem;font-size:1.05rem}
.mb-container .mb-author-info p{margin:0;font-size:.9rem;color:#666}
.mb-container .mb-source-section{background:#EDF0F7;border-radius:8px;padding:1.25rem 1.5rem;margin-top:2rem;font-size:.9rem}

/* v1.3: klassen die alleen in losse artikelen gedefinieerd stonden. Opgenomen
   zodat het CSS-blok ook uit die artikelen kan verdwijnen.
   mb-table (oude tabelvariant, artikel 200), mb-blog-faq (accordeon-FAQ op
   blogs), mb-schooltype-cta (artikel 244), mb-index-label (artikel 257). */
.mb-container .mb-table{width:100%;border-collapse:collapse;min-width:600px}
.mb-container .mb-table th{background-color:#0061D4;color:#fff;text-align:left;padding:12px}
.mb-container .mb-table td{padding:12px;border-bottom:1px solid #EEE}
.mb-container .mb-table tr:nth-child(even){background-color:#F9F9F9}
.mb-container .mb-blog-faq{margin-top:60px;padding-top:30px;border-top:1px solid #EEE}
.mb-container .mb-blog-faq details{margin-bottom:15px;padding:20px;background:#fff;border:1px solid #EEE;border-radius:8px;cursor:pointer;transition:border-color .2s}
.mb-container .mb-blog-faq details:hover{border-color:#BBB}
.mb-container .mb-blog-faq summary{font-weight:700;color:#0061D4;outline:0;cursor:pointer}
.mb-container .mb-blog-faq p{margin-top:10px;margin-bottom:0}
.mb-container .mb-schooltype-cta{background:#FBF7F4;border-radius:8px;padding:1rem 1.4rem;margin:1.25rem 0 2rem;text-align:center}
.mb-container .mb-schooltype-cta p{margin:0}
.mb-container .mb-index-label{display:block;color:#0061D4;font-size:.8rem;font-weight:700;padding:0 0 0 10px;border-left:3px solid #0061D4;margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.03em}

/* Mobiel */
@media (max-width:640px){
  .mb-container .mb-grid-2{grid-template-columns:1fr}
  .mb-container .mb-author-box{flex-direction:column;text-align:center}
}


/* ==================== Toegevoegd in versie 1.4 ==================== */

/* Definitielijst (blog 223) */
.mb-container .mb-deflist{margin:1.5rem 0}
.mb-container .mb-deflist dt{font-weight:700;margin-top:1rem}
.mb-container .mb-deflist dd{margin:.25rem 0 0 0}

/* Voorbeeldbrief (blog 236) */
.mb-container .mb-letter-example{background-color:#FBF7F4;border:1px solid #E6D9CC;border-radius:8px;padding:30px 35px;margin:35px 0;font-size:.95rem}
.mb-container .mb-letter-example p{margin:.8em 0}
.mb-container .mb-letter-example p:first-child{margin-top:0}
.mb-container .mb-letter-example p:last-child{margin-bottom:0}
.mb-container .mb-letter-meta{color:#666;font-size:.9rem}

/* Ankerlinks in een inhoudsopgave (blog 257) */
.mb-container .mb-anchor-link{display:inline-block;color:#0061D4;text-decoration:none;padding:.15rem 0}
.mb-container .mb-anchor-link:hover{text-decoration:underline}

/* FAQ als lijst op kennisbankpaginas */
.mb-container .mb-faq-item{border-bottom:1px solid #EEE;padding:22px 0}
.mb-container .mb-faq-item:last-child{border-bottom:none}
.mb-container .mb-faq-item h3{margin-top:0;margin-bottom:10px}
.mb-container .mb-faq-item p{margin:0;line-height:1.65}

@media (max-width:768px){
  .mb-container .mb-letter-example{padding:20px}
}