.page-home h1, .page-generic h1{
	font-size: 2em;
}
#main > .inner > section {
    padding: 2em 0 1em 0;
}
#main > .inner{
	max-width: 80em;
	margin: 0;
}

/* Headlines layout */
#headlines-list .headlines {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

#headlines-list .headline {
  display: flex;
  align-items: flex-start;
  gap: 1em;
}

#headlines-list .headline .thumb {
  flex-shrink: 0;
  width: 100px; /* pas aan naar gewenste breedte */
}

#headlines-list .headline img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

#headlines-list .headline .info {
  flex: 1;
}

/* voorkom dat HTML5 UP media queries het breken op mobiel */
@media screen and (max-width: 736px) {
  #headlines-list .headline {
    flex-direction: row; /* forceer horizontaal ook op mobiel */
    align-items: flex-start;
  }

  #headlines-list .headline .thumb {
    width: 80px;
  }

  #headlines-list .headline .info h3 {
    font-size: 1em;
  }

  #headlines-list .headline .info p {
    font-size: 0.9em;
  }
}

#header {
	padding-top: 1.85em;
}


    @media screen and (max-width: 736px) {
        #header {
            padding-left: 4.5em;
            padding-top: 1.5em;
            padding-bottom: 1.5em;
        }
        /* advertisement MPU removed */
        .author-box{
            padding: 1.5em !important;
        }
    }
@media screen and (min-width: 481px) {
    .posts article:nth-last-child(1){
		margin: 0 0 1em 3.5em;
	}
	.posts article {
		width: calc(50% - 5em);
	}
}
#sidebar span.menu{
	font-size: 1.38889em;
	color: #3d4449;
	font-weight: 700;
}

.label {
  display: inline-block;
  background-color: #c2000c; /* of een kleur die bij je theme past */
  color: #fff;
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3em 0.6em;
  border-radius: 0.25em;
  margin-bottom: 0.5em;
}
#headlines-list .label{
	background-color: #fff; 
    color: #c2000c;
	padding: 0px;
}
#headlines-list .headline a:hover img{
    filter: opacity(0.9);
}
#headlines-list h4{
	font-size: 1.3em;
	margin: 0 0 0.2em 0;
}
@media screen and (max-width: 736px) {
	#headlines-list h4{
		font-size: 1.15em;
	}	
}
a:hover{
	color: #0053ac !important;
}
h2 a:hover, h3 a:hover, h4 a:hover{
	text-decoration: underline;
}
.page-home .posts h2, .page-generic .posts h2{ 
	margin: 0 0 0.2em 0;
}
.authors p{
	margin: 0 0 1em 0;
}

/*article*/

/* boven titel: labels + meta */
.kicker {
  margin-top: -0.5rem;
  margin-bottom: 1.25rem;
  color: #9fa3a6;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  align-items: center;
}

.kicker .label {
  display: inline-block;
  background-color: #f56a6a;
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .25rem .5rem;
  border-radius: .25rem;
}

.kicker .label.ghost {
  background: rgba(245,106,106,.1);
  color: #f56a6a;
}

.kicker .sep { opacity: .5; margin: 0 .25rem; }
.kicker .author {
  /* Override the default grey text colour (#7f888f) with black for readability */
  color: #000000;
}

/* intro / standfirst */
.standfirst {
  font-size: 1.1em;
  color: #3d4449;
  font-weight: 600;
  margin: 0 0 1rem 0;
  width: 60%;
}

/* body content sanity */
.article-body img { max-width: 100%; height: auto; }
.article-body table { margin: 1.5em 0; width: 100%; }
.article-body h2, .article-body h3 { margin-top: 1.25em; }

/* optioneel: stijl links in body */
.article-body a { border-bottom: dotted 1px; }

.page-article .article-body{
	color: #3d4449;
	width: 60%;
	font-size: 1.1em;
}
@media screen and (max-width: 736px) {
	.page-article .article-body, .standfirst {
		width: 100%;
	}
}


/* Author Box Styling */
.author-box {
  margin: 0em 0;
  padding: 2em !important;
  background: #f8f8f8;
  display: flex;
  flex-direction: column;
  gap: 1em;
  position: relative;
  margin-bottom: -2px;
}

.author-box .author-profile {
  display: flex;
  align-items: start;
  gap: 1.5em;
  flex-wrap: wrap;
}

/* Ensure the text within the author box sits neatly beside the avatar and
   takes up the remaining horizontal space.  Without flex properties the
   text can wrap beneath the image on wider screens. */
.author-box .author-profile .info {
  flex: 1 1 0;
  min-width: 0;
}

.author-box img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.author-box .info h4 {
  margin-bottom: 0.4em;
  font-size: 1.3em;
  font-weight: 600;
}

.author-box .info p {
  margin: 0 0 0.8em;
  color: #555;
  line-height: 1.5;
}

/* Style for author tagline in article author box */
.author-box .role {
  font-size: 0.9em;
  color: #777;
  margin: 0 0 0.4em;
}

/* Additional styling for detailed author information on profile page */
.author-details h2 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-size: 1.4em;
  color: #3d4449;
}

.author-details h3 {
  margin-top: 1em;
  margin-bottom: 0.3em;
  font-size: 1.2em;
  color: #3d4449;
}

/* Lists for expertise, topics and social links */
.author-details .spec-list,
.author-details .topics-tags,
.author-details .social-links {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.author-details .spec-list li,
.author-details .topics-tags li {
  background: #f5f5f5;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #3d4449;
}

.author-details .social-links li {
  padding: 0;
}

.author-details .social-links a {
  color: #0053ac;
  text-decoration: underline;
  font-size: 0.9rem;
}

.author-box ul.actions{
    margin-bottom: 0px;
}
/* .article_mpu removed per launch without advertisements */

#headlines .introduction{
    color: #3d4449;
    font-size: 1.1em;
}
.image.main img{
	max-width: 860px;
}

.author-hero{
	padding: 2em !important;
}

#menu ul li .opener a{
	padding: 0px;
}
#header img{
    width: 220px;
    position: absolute;
    margin-top: 0px;
}
@media screen and (max-width: 736px) {
	.author-box img{
		position: absolute;
		right: 15px;
		top: 15px;
		width: 80px;
		height: 80px;
	}
	.author-box .info h4{
		width: 80%;
	}
	#header{
		border-bottom: 0px;
	}
	#header img{
		width: 180px;
		 position: relative;
		margin-top: 0px;
	}
	#header .icons{
		display: none;
	}
}
nav.breadcrumbs{
	margin-bottom: 20px;
}
nav.breadcrumbs span{
    padding: 0px 5px;
    display: inline-block;
}
nav.breadcrumbs span.title{
	padding-left: 0px;
}


.article-tags {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.article-tags h4 {
  margin: 0 0 .75rem 0;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .85;
}

/* 🔹 Belangrijk: zet de lijst horizontaal */
.tag-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;          /* horizontaal */
  flex-wrap: wrap;        /* volgende regel als te lang */
  gap: .5rem;             /* ruimte tussen tags */
}

/* 🔹 Zorg dat elke tag een mooie “pill” is */
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .4rem .8rem;
  border-radius: 9999px;
  background: rgba(0,0,0,.06);
  text-decoration: none;
  font-size: .9rem;
  color: #d00; /* rood zoals op je screenshot */
}

.tag-pill:hover {
  background: rgba(0,0,0,.12);
}

.tag-count {
  font-size: .8rem;
  opacity: .7;
}

ul.tag-list li{
	padding-left: 0em;
}
h1.tag{
    text-align: center;
    width: 100%;
    border-bottom: 0px !important;
    font-size: 2.3em;
}