/* ==== A365 DOCUMENT CSS ===========================================
   - Layout & typografie voor algemene documenten
   - Gebruikt dezelfde page-grid en rail als categorie/feed
   - Linker kolom: H1 → datum → intro → content
   ================================================================== */

/* Zorg voor eigen hook op de pagina */
.doc-page .section--left{
  /* niets speciaals nodig, grid komt uit core/home */
}

/* Artikel wrapper */
.doc{
  max-width: 728px;
}

/* Titel / header */
.doc-header{
  margin-bottom: 24px;
}

.doc-title{
  margin: 24px 0 24px 0;
  font-weight: 700;
  line-height: 1.2;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.2rem);
  color: var(--brand);
}

/* Subkleur binnen de titel (bijv. grijze span) */
.doc-title span {
  color: var(--muted);
}

/* DARK / AUTO-DARK: titel wit i.p.v. brand-blauw */
html[data-theme="dark"] .doc-title{
  color: #ffffff;
}

@media (prefers-color-scheme: dark){
  html[data-theme="auto"] .doc-title{
    color: #ffffff;
  }
  html:not([data-theme]) .doc-title{
    color: #ffffff;
  }
}

/* Datum / meta */
.doc-meta{
  margin: 0 0 16px;
  color: var(--muted);
  font-size: .94rem;
}

/* Intro-tekst (korte lead) */
.doc-intro{
  margin: 0 0 24px;
  font-size: 1.2rem;
  line-height: 1.72;
  color: var(--text);
}

/* Hoofdcontent */
.doc-content{
  font-size: 1.2rem;
  line-height: 1.72;
  color: var(--text);
}

/* Content typografie */
.doc-content p{
  margin: 0 0 1rem;
}

.doc-content p:last-child{
  margin-bottom: 0;
}

.doc-content h2{
  margin: 2rem 0 0.75rem;
  font-size: 1.3rem;
  line-height: 1.3;
}

.doc-content h3{
  margin-bottom:8px;margin-top:12px;line-height:1.23;color:var(--brand);
}

.doc-content ul,
.doc-content ol{
  margin: 0 0 1rem 1.4rem;
  padding: 0;
}

.doc-content li + li{
  margin-top: 0.25rem;
}

/* Links in content duidelijk maken */
.doc-content a{
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.doc-content a:hover{
  color: var(--brand-2);
}

/* Afbeeldingen in content netjes */
.doc-content img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.25rem 0;
  border-radius: var(--radius);
}

/* Tabellen basic */
.doc-content table{
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: .95rem;
}

.doc-content th,
.doc-content td{
  padding: 8px 10px;
  border: 1px solid var(--border);
}

.doc-content th{
  background: color-mix(in srgb, var(--bg) 85%, #f5f7fb);
  text-align: left;
}

/* Mobiel: iets meer lucht */
@media (max-width: 767.98px){
  .doc{
    max-width: 100%;
  }

  .doc-title{
    font-size: clamp(1.4rem, 1.18rem + 1.5vw, 1.7rem);
  }
	
	.doc-content, .doc-intro {font-size:clamp(0.90rem, 1.08rem + 0.35vw, 1.055rem)!important;}
}

@media (max-width: 767.98px){
.end_article.doc-end {width:15%!important;height: 6px;background: var(--brand);margin-top:32px!important;}
}

.end_article.doc-end {width:8.2%;height: 6px;background: var(--brand);margin-top:32px!important;}