/*!
Theme Name: MvZ
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: mvz
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

MvZ is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

small {font-size: 80%;}
sub,sup {font-size: 75%;	line-height: 0;	position: relative;	vertical-align: baseline;}
sub {bottom: -0.25em;}
sup {top: -0.5em;}
img {border-style: none;}
button,input,optgroup,select,textarea {	font-family: inherit;font-size: 100%;line-height: 1.15;	margin: 0;}
button,input {overflow: visible;}
button,select {text-transform: none;}
button,[type="button"],[type="reset"],[type="submit"] {	-webkit-appearance: button;}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}
[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}
fieldset{padding:.35em .75em .625em}
legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}
progress {vertical-align: baseline;}
textarea {	overflow: auto;}
[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type="search"]::-webkit-search-decoration {	-webkit-appearance: none;}
::-webkit-file-upload-button {-webkit-appearance: button;font: inherit;}
details {display: block;}
summary {display: list-item;}
template {display: none;}
[hidden] {display: none;}
*,*::before,*::after {	box-sizing: inherit;}
html {box-sizing: border-box; scroll-behavior: smooth;}
body,button,input,select,optgroup,textarea {color: #000;font-size: 1rem;line-height: 1.5;}
h1,h2,h3,h4,h5,h6 {clear: both; display:block; font-weight: 600;}
dfn,cite,em,i {font-style: italic;}
blockquote {margin: 0 1.5em;}
address {margin: 0 0 8px;}
pre{background:#eee;font-family:"Courier 10 Pitch",courier,monospace;line-height:1.6;margin-bottom:1.6em;max-width:100%;overflow:auto;padding:1.6em}
code,kbd,tt,var {font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;}
abbr,acronym {border-bottom: 1px dotted #666;cursor: help;}
mark,ins {background: #fff9c0;	text-decoration: none;}
big {font-size: 125%;}

/* Elements
--------------------------------------------- */

body {background: #fff;}
hr {background-color: #ccc;	border: 0;	height: 1px;	margin-bottom: 1.5em;}
ul,ol {margin: 0 0 1.5em 0;}
ul {list-style: disc;}
ol {list-style: decimal;}
li > ul,li > ol {margin-bottom: 0;margin-left: 1.5em;}
dt {font-weight: 700;}
dd {margin: 0 1.5em 1.5em;}
/* Make sure embeds and iframes fit their containers. */
embed,iframe,object {max-width: 100%;}
img {height: auto;max-width: 100%;}
figure {margin: 1em 0;}
table {	margin: 0 0 0px; width: 100%;}
/* Forms
--------------------------------------------- */
button,input[type="button"],input[type="reset"],input[type="submit"] {	border: 1px solid;border-color: #ccc #ccc #bbb;border-radius: 3px;background: #e6e6e6;color: rgba(0, 0, 0, 0.8);line-height: 1;	padding: 0.6em 1em 0.4em;}
button:hover,input[type="button"]:hover,input[type="reset"]:hover,input[type="submit"]:hover {	border-color: #ccc #bbb #aaa;}
button:active,button:focus,input[type="button"]:active,input[type="button"]:focus,input[type="reset"]:active,input[type="reset"]:focus,input[type="submit"]:active,input[type="submit"]:focus {	border-color: #aaa #bbb #bbb;}
input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=range],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],textarea{color:#666;border:1px solid #ccc;border-radius:3px;padding:3px}
input[type="text"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="password"]:focus,input[type="search"]:focus,input[type="number"]:focus,input[type="tel"]:focus,input[type="range"]:focus,input[type="date"]:focus,input[type="month"]:focus,input[type="week"]:focus,input[type="time"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="color"]:focus,textarea:focus {	color: #111;}
select {border: 1px solid #ccc;}
textarea {width: 100%;}
.sticky {display: block;}
.post,.page {margin: 0 0 0em;}
.updated:not(.published) {display: none;}
.page-content,.entry-content,.entry-summary {margin:0em 0 0;}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#21759b;display:block;font-size:.875rem;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
#primary[tabindex="-1"]:focus {	outline: 0;}

/*columns */
.cl-20 {max-width: 20%; flex: 0 0 20%;}
.cl-25 {max-width: 25%; flex: 0 0 25%;}
.cl-30 {max-width: 30%; flex: 0 0 30%;}
.cl-33 {max-width: 33.33%; flex: 0 0 33.33%;}
.cl-40 {max-width: 40%; flex: 0 0 40%;}
.cl-50 {max-width: 50%; flex: 0 0 50%;}
.cl-60 {max-width: 60%; flex: 0 0 60%;}
.cl-70 {max-width: 70%; flex: 0 0 70%;}
.cl-75 {max-width: 75%; flex: 0 0 75%;}

/* Homepage */
section.intro-section {background-color: #f5f5f5;}
h2 {color: #000; font-weight: 600; font-size: 2.25rem; line-height: 1.2; margin-top: 0px; margin-bottom: 16px;}
h3 {font-size: 1.5rem; color: #000;  font-weight: 600;}
h4 {font-size: 1.125rem; font-weight: 500;line-height: 1.2;}

.small-heading {color: #5AA3A0; font-weight: 500;}
.heading-text-wrapper { border-bottom: 4px solid #000; max-width: 80%;}
.intro-section-text {overflow: hidden;}
.intro-section-text .text-wrapper {float: right; margin-top: 60px; position: relative;}
.intro-section-text img {float: left; margin-top: 80px;}
.intro-section-text .icon-wrapper {margin: 24px 40px 24px 0px; float: left;}
.text-wrapper {max-width: 900px;}
.text-wrapper p {line-height: 32px;}
.read_more {position: absolute; left: 0px; bottom: -106px; color: #000; border-bottom: 1px solid #000; padding-bottom: 8px; }


/* Homepage 2 */

.custom-shape-divider-bottom-1611215653 {z-index: -1;position: absolute;bottom: 0;left: 0;width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg);z-index:2;}
.custom-shape-divider-bottom-1611215653 svg {z-index: -1;   position: relative;   display: block;  width: calc(208% + 1.3px);  height: 100px; transform: rotateY(180deg);}
.custom-shape-divider-bottom-1611215653 .shape-fill {fill: #FFFFFF;}

.recap-section {background-color: #fff; position: relative;}
/* .recap-section .cl-30::after { right: -40px; bottom: -56px; width: 520px; height: 520px; display: block; position: absolute; z-index: 2; background-image: url(/wp-content/uploads/2021/01/grijze_bol1.png); background-size: cover; background-repeat: no-repeat; content: '';} */
.recap-section .orb{
    background-color: #f4ecdc;
    min-width: 520px;
    height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 100%;
    padding: 0px 80px;
}
.recap-section .container {margin-top: -20px;}
.recap-section .flex-row {flex-wrap: nowrap;}
.recap-section .cl-30 {text-align: center; position: relative;}
.recap-text-wrapper {padding-right: 8vw;}
.white-wrapper {
    background-color: #fff;
    border-radius: 10px;
    padding: 32px;
    display: inline-block;
    position: relative;
    z-index: 4;
    margin-top: 45px;
}


h3 {margin-top: 0px; font-size: 26px;}
.white-wrapper a.service-link {color: #000; width: 100%; display: flex; align-items: center; margin-bottom: 24px; }
a.service-link i {color: #69713e; background-color: #dbe4a9; font-size: 10px; border-radius: 50%; margin-right: 16px; height: 32px; width: 32px; display: flex; justify-content: center; align-items: center;}
a.text-link {float:right; position: relative; z-index: 3; display: inline-block; margin: 32px auto 0px auto; text-transform: uppercase; font-size: 14px; font-weight: 500; background: none; box-shadow: inset 0 -0.125rem 0 0 #e2ab40; color: #e2ab40 !important;}

.over-section {background-color: #f4ecdc; position: relative; border-bottom: 2px solid #6f7443;}
.over-section .flex-row {align-items: flex-start; flex-wrap: nowrap; margin-bottom: 40px;}
.over-ons-text .text-wrapper {padding-left: 80px;}
.span-color {color: #6f7443;}
.about-section {background-color: #fff;}
.about-section .images-wrapper, .about-section .text-wrapper {max-width: 50%; flex: 0 0 50%; position: relative;}
.custom-shape-divider-top-1611226676 {position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; line-height: 0;}
.custom-shape-divider-top-1611226676 svg { position: relative; display: block;width: calc(300% + 1.3px); height: 70px;}
.custom-shape-divider-top-1611226676 .shape-fill {fill: #FFFFFF;}
.over-section h3 {margin-top: 40px;}
/*.text-row {display: flex; align-items: stretch; justify-content: space-between; flex-wrap: wrap;}
.text-row p {max-width: 48%}*/


.new-massage-section {
  background-color: #f4ecdc;
}

.new-massage-section .flex-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: stretch; /* cards zelfde hoogte */
}

.new-massage-section .cl-33 {
  flex: 0 0 33.3333%;
  display: flex; /* zodat .mas-wrapper kan rekken */
}

.new-massage-section .mas-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin-top: 24px;
}

.new-massage-section .mas-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

.new-massage-section .mas-content {
  background: #fff;
  padding: 1.5rem;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.new-massage-section .mas-content__icon {
  width: 200px;
  height: 200px;
  margin: 0 auto 1rem;
}

.new-massage-section .mas-content__icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 50%;
}

.new-massage-section .mas-content h3 {
  text-align: center;
}

.new-massage-section .mas-content__text {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

.new-massage-section .mas-content__text p:last-child {
  margin-bottom: 0;
}

.new-massage-section .mas-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.new-massage-section .mas-title h2 {
  display: inline-block;
  margin: 0;
}

/* Blok met tekst onder de drie kaarten */
.new-massage-section .centered-text {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
}

.new-massage-section .details-text {
  max-width: 700px;
  text-align: center;
  margin: 0 auto 0;
}

.new-massage-section .b-wrapper {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* =====================
   RESPONSIVE
   ===================== */

/* Tablet & mobiel: blokken onder elkaar, breed in beeld */
@media (max-width: 900px) {
  .new-massage-section .flex-row {
    flex-direction: column;
    align-items: center; /* centreer de kaarten binnen de container */
  }

  .new-massage-section .cl-33 {
    flex: 0 0 100%;
    max-width: 520px;     /* mooie max-breedte, maar full op kleinere schermen */
  }

  .new-massage-section .mas-wrapper {
    margin-top: 16px;
  }

  .new-massage-section .mas-title {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* Extra stack/ruimte fine-tunen op echt klein scherm */
@media (max-width: 600px) {
  .new-massage-section {
    padding: 3rem 0;
  }

  .new-massage-section .cl-33 {
    max-width: 100%;
  }

  .new-massage-section .mas-content {
    padding: 1.25rem;
  }
}




.centered-text {display: flex; width: 100%;}
.details-text {max-width: 900px; padding: 2rem 0px;}
.details-text p {font-size: 15px; }
.b-wrapper {display: flex; align-items: center; margin-top: 32px;}
.button {background-color: #e2ab40;color: #fff;border-radius: 50px;padding: 16px 32px;font-size: 14px;line-height: 14px;display: inline-block;margin: 0 16px 0px 0px;}
.b-wrapper .text-link{margin: 0px 0px 0px 24px;}

/* Contact section */
.contact-section {background-color: #f5f5f5; border-top: 2px solid #696e3b;}
.contact-section-text .heading-text-wrapper {margin-bottom: 40px;}
.contact-section .text-wrapper {flex: 1;}
.form-wrapper {max-width: 940px; flex: 1;}
ul.gform_fields {margin-left: 0px; padding-left: 0px; display: flex; justify-content: space-between; flex-wrap: wrap;}
ul.gform_fields li {list-style: none; max-width: 48%; flex: 0 0 50%; margin-top: 20px; margin-bottom:40px;}
.gfield_label {display: none;}
ul.gform_fields #field_1_5, ul.gform_fields #field_1_6 {max-width: 100%; flex: 0 0 100%;}
ul.gform_fields input[type="text"], ul.gform_fields input[type="email"], ul.gform_fields input[type="tel"], ul.gform_fields textarea {width: 100%; border-top: 0px; border-left: 0px; border-right: 0px; border-color: #000; border-radius: 0px; background-color: transparent;}
ul.gform_fields textarea {height: 150px;}
.gform_footer input[type=submit]{cursor: pointer; border: 0px transparent; background-color:#e2ab40;color:#fff;border-radius:50px;padding:16px 32px;font-size:14px;line-height:14px;display:inline-block;}
.contact-section .b-wrapper a.text-link:first-child {margin-left: 0px;}
.contact-section .b-wrapper {margin: 0px 0px 32px 0px;}
.contact-section h4{margin-bottom: 0px;}
address {color: #666;}


.site-footer{padding-top: 16px;}
.site-footer .flex-row {justify-content: space-between;}
.site-footer .legal {font-size: 14px;}
.site-footer .legal a{margin: 0px 0px 0px 32px; font-size: 14px; padding-bottom: 4px; color: #e2ab40;}
.site-footer .madeby {font-size: 14px;}
.site-footer .madeby a {font-size: 14px; padding-bottom: 4px; color: #e2ab40;}
.site-footer .legal a:hover {color: #636a38;}
.site-footer .madeby a:hover {color: #636a38;}



/* recap section responsive */
@media screen and (max-width: 1050px){
    .recap-section .flex-row {
        flex-direction: column-reverse;
    }
    .recap-section .orb {
        align-self: center;
        margin-bottom: 50px;
        min-width: auto;
        width: 100%;
        max-width: 520px;
        padding: 0px;
        align-items: center;

    }
    .recap-section .orb .white-wrapper{
        width: 70%;
        max-width: 360px;
    }

}

@media screen and (max-width: 550px){
    .recap-section{
        padding: 10vw 0px;
    }
    .recap-section .orb{
        height: 100vw;
    }
    .recap-section .orb .white-wrapper{
        padding: 5vw;
        margin-top: 9vw;
    }
    .recap-section .orb .white-wrapper h3{
        font-size: 4vw;
    }
    .recap-section .orb .white-wrapper .service-link{
        font-size: 4vw;
    }
    .recap-section .orb .white-wrapper .service-link i{
        min-width: 6vw;
        max-width: 6vw;
        min-height: 6vw;
        max-height: 6vw;
    }
    .recap-section .orb .text-link{
        font-size: 4vw;
        margin: 3vw auto 0px auto;
    }
}
@media screen and (max-width: 500px){
    .recap-text-wrapper h2{
        font-size: 7vw;
        line-height: 9vw;
    }
    .recap-text-wrapper p{
        font-size: 4vw;
        line-height: 6.5vw;
    }
}

/* over-section section responsive */
@media screen and (max-width:850px){
    .over-section .flex-row {
        flex-wrap: wrap;
    }
    .over-section .over-ons-text .text-wrapper{
        padding-left: 0px;
        padding-top: 20px;
    }
    .over-section .text-row p{
        max-width: 100%;
    }
}
@media screen and (max-width:500px){
    .over-section .flex-row img{
        max-width: 80%;
    }
    .over-section .over-ons-text .text-wrapper h2{
        font-size: 8vw;
        line-height: 10vw;
    }
    .over-section .over-ons-text .text-wrapper p{
        font-size: 4vw;
        line-height: 7.5vw;
        padding-right: 8vw;
    }
    .over-section h3 {
        margin-top: 0px;
        margin-bottom: 5px;
        font-size: 6vw;
        line-height: 9vw;
    }
    .over-section .text-row p{
        font-size: 4vw;
        line-height: 7.5vw;
        padding-right: 8vw;
    }
}

/* new-massage-section */
.new-massage-section .cl-33{
    margin: 0 -12px;
}
@media screen and (max-width:1150px){
    .new-massage-section .cl-33{
        max-width: 50%;
        flex: 0 0 50%;
    }
}
@media screen and (max-width:800px){
    .new-massage-section .cl-33{
        max-width: 100%;
        flex: 0 0 100%;
    }
    .new-massage-section .cl-33 .mas-wrapper img{
        max-height: 330px;
        object-fit: cover;
    }
}
@media screen and (max-width:500px){
    .new-massage-section{
        padding: 10vw 0px;
    }
    .new-massage-section .mas-title{
        align-items: flex-end;
        flex-direction: column;
    }
    .new-massage-section .mas-title h2{
        font-size: 7vw;
        line-height: 9vw;
    }
    .new-massage-section .mas-title .text-link{
        font-size: 3.5vw;
        line-height: 6vw;
    }
    .new-massage-section .cl-33{
        margin: 0;
    }
    .new-massage-section .mas-wrapper {
        padding: 0px;
    }
    .new-massage-section .mas-wrapper h3{
        font-size: 5vw;
        line-height: 8.5vw;
        margin-bottom: 2vw;
    }
    .new-massage-section .mas-wrapper table{
        font-size: 4vw;
        line-height: 5.5vw;
    }
    .new-massage-section .centered-text{
        text-align: center;
    }
    
    .new-massage-section .details-text p{
        font-size: 4vw;
        line-height: 7.5vw;
        padding-left: 4vw;
        padding-right: 4vw;
    }
    .new-massage-section .details-text .b-wrapper{
        flex-direction: column;
        align-items: center;
    }
    .new-massage-section .details-text .b-wrapper .button{
        font-size: 4vw;
        padding: 4vw 10vw;
        margin-right: 0;
    }
    .new-massage-section .details-text .b-wrapper .text-link{
        margin-top: 3vw;
        font-size: 4vw;
        margin-left: 0px;
    }
}

/* contact section responsive */
.contact-section .text-wrapper{
    padding-right: 20px;
}
@media screen and (max-width:750px){
    .contact-section .flex-row{
        flex-direction: column;
    }
}
@media screen and (max-width:500px){
    .contact-section{
        padding: 10vw 0px;
    }
    .contact-section .text-wrapper h2{
        font-size: 7vw;
        line-height: 9vw;
    }
    .contact-section .text-wrapper p{
        font-size: 4vw;
        line-height: 7.5vw;
    }
    .contact-section .text-wrapper h4{
        font-size: 5vw;
        line-height: 7vw;
    }
    .contact-section .text-wrapper .b-wrapper{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .contact-section .text-wrapper .b-wrapper .text-link{
        margin: 0px;
        font-size: 3.5vw;
        line-height: 7vw;
    }
    .contact-section .text-wrapper .b-wrapper .text-link:first-child{
        margin-bottom: 2vw;
    }
    .contact-section .text-wrapper address{
        font-size: 4vw;
    }

    ul.gform_fields li {
        margin-bottom: 4vw;
        margin-top: 4vw;
    }
    ul.gform_fields li input,ul.gform_fields li textarea{
        font-size: 4vw;
    }
    .gform_footer input[type="submit"]{
        font-size: 4vw;
        padding: 4vw 9vw;
    }
    
}

/* footer section responsive */
@media screen and (max-width:600px){
    footer .flex-row{
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: center;
    
    }
    footer .flex-row .legal p{
        display: flex;
        flex-direction: column;
        align-items: center;

    }
    footer .flex-row .legal p *{ 
        margin: 0px;
    }
}


blockquote {
    position: relative;
    padding: 2rem 2.5rem;
    margin: 2rem 0;
    font-style: italic;
    background-color: #fff;
    border-left: 4px solid #e2ab40;
}

/* Icoon vóór de quote */
blockquote::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    background-image: url('/wp-content/themes/pe-theme-child/images/quote.svg'); /* pad aanpassen indien nodig */
    background-repeat: no-repeat;
    background-size: contain;
    top: -10px;
    left: -10px;
}

/* Icoon ná de quote */
blockquote::after {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    background-image: url('/wp-content/themes/pe-theme-child/images/quote.svg');
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -10px;
    right: -10px;
    transform: scaleX(-1); /* spiegelt het icoon, kun je weghalen als je dat niet wilt */
}

.bl-us{
    background-color:#fff;
    border-top:1px solid #e2ab40;
}

.entry-meta{
    display:none;
}



/* ================
   BLOG ARCHIVE
   ================ */

.blog-archive {
  padding: 4rem 0;
}

.blog-archive__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.blog-archive__pagination {
  margin-top: 3rem;
  text-align: center;
}

/* ================
   BLOG CARD
   ================ */

.blog-card {
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.blog-card__thumb {
  display: block;
}

.blog-card__thumb img {
  display: block;
  width: 100%;
  height: auto;
  /* Verhouding 600x400 afdwingen voor consistente grid */
  aspect-ratio: 3 / 2;          /* 600 x 400 = 3:2 */
  object-fit: cover;
}

.blog-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.blog-card__title {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}

.blog-card__title a {
  text-decoration: none;
  color: inherit;
}

.blog-card__title a:hover {
  text-decoration: underline;
}

.blog-card__meta {
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 0.75rem;
}

.blog-card__excerpt {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.blog-card__excerpt p:last-child {
  margin-bottom: 0;
}

.blog-card__readmore {
  margin-top: auto;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: #0f2c4a; /* jouw warme blauw? :) */
}

/* ================
   SINGLE POST
   ================ */

.single-post {
  max-width: 100%;      /* vult jouw .container van 1400px */
  margin: 0 auto;
  padding: 4rem 0;
}

.single-post__thumb {
  margin-bottom: 2rem;
}

.single-post__thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.single-post__header {
  margin-bottom: 1.5rem;
}

.single-post__title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 0 0 0.75rem;
}

.single-post__meta {
  font-size: 0.9rem;
  color: #777;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.single-post__meta-sep {
  opacity: 0.5;
}

.single-post__content {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 2.5rem;
}

.single-post__content img {
  max-width: 100%;
  height: auto;
}

.single-post__footer {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 3rem;
}

.single-post__tags span {
  font-weight: 600;
  margin-right: 0.25rem;
}

.single-post__back {
  font-size: 0.9rem;
  text-decoration: none;
  color: #0f2c4a;
}

/* ================
   SINGLE NAVIGATION
   ================ */

.single-post__nav.post-navigation {
  max-width: 100%;
  margin: 0 auto 4rem;
}

/* Container voor de twee pijlen */
.single-post__nav .nav-links {
  display: flex;
  justify-content: space-between;  /* pijlen links/rechts */
  align-items: center;
  max-width: 200px;                /* zorgt dat het compact blijft */
  margin: 0 auto;
  position: relative;              /* nodig voor de ... in het midden */
}

/* De drie puntjes exact in het midden tussen de cirkels */
.single-post__nav .nav-links::before {
  content: '...';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2rem;
  color: #e2ab40;
  pointer-events: none;
}

/* Pijlen-knoppen links en rechts */
.single-post__nav .nav-previous a,
.single-post__nav .nav-next a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 2px solid #e2ab40;
  color:#e2ab40;
  text-decoration: none;
  font-size: 1.4rem;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.single-post__nav .nav-previous a:hover,
.single-post__nav .nav-next a:hover {
  background: #f5f5f5;
  border-color: #ccc;
  transform: translateY(-1px);
}

/* ================
   RESPONSIVE
   ================ */

@media (max-width: 900px) {
  .single-post {
    padding: 3rem 0;
  }
}




/* ================
   RESPONSIVE
   ================ */

@media (max-width: 1024px) {
  .blog-archive__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .blog-archive__grid {
    grid-template-columns: 1fr;
  }

}