/* ==========================================================
   Meridian Commercial Advisory – Definitieve Styles
   Helix Ultimate 2.2.4 / Bootstrap 4
   ========================================================== */

/* ---------- Basis ---------- */
.mca-wrapper{ color:#0f1c3f; }
.mca-wrapper .container{ max-width:1100px; } /* minder breed = minder “wit” */

/* ---------- Spacing (compact, consistent) ---------- */
.mca-hero{ padding:64px 0 52px; }
.mca-section{ padding:48px 0; }

@media (max-width:991.98px){
  .mca-hero{ padding:54px 0 44px; }
  .mca-section{ padding:40px 0; }
}

/* Bootstrap gutters compacter (zonder layout te breken) */
.mca-wrapper .row > [class*="col-"]{ margin-bottom:18px; }
@media (min-width:992px){
  .mca-wrapper .row > [class*="col-"]{ margin-bottom:22px; }
}

/* Utility */
.mca-mt-3{ margin-top:1rem !important; }
.mca-mt-4{ margin-top:1.5rem !important; }

/* ---------- Typografie ---------- */
.mca-h1{
  font-size:44px;
  line-height:1.15;
  margin:10px 0 14px;
  letter-spacing:-0.3px;
}
@media (max-width:767.98px){
  .mca-h1{ font-size:34px; }
}

.mca-h2{
  font-size:28px;
  margin:0 0 14px;
  letter-spacing:-0.2px;
}
.mca-h3{
  font-size:18px;
  margin:0 0 10px;
}

.mca-lead{
  font-size:18px;
  line-height:1.6;
  margin:0 0 14px;
  color:#142244;
}
.mca-lead-tight{ margin-top:-6px; }

.mca-muted{
  color:#516079;
  line-height:1.65;
  margin-bottom:10px;
}

.mca-small{
  font-size:13px;
  color:#6b7a8c;
  margin-top:12px;
}

/* ---------- Pill ---------- */
.mca-pill{
  display:inline-block;
  font-size:12px;
  letter-spacing:0.8px;
  text-transform:uppercase;
  color:#2a6df4;
  background:rgba(42,109,244,0.08);
  padding:6px 10px;
  border-radius:999px;
  margin:0 0 10px;
}

/* ---------- Cards / Panels ---------- */
.mca-card{
  background:#fff;
  border:1px solid rgba(15,28,63,0.08);
  border-radius:12px;
  padding:24px;
  box-shadow:0 10px 25px rgba(0,0,0,0.04);
}

.mca-card-hover{
  transition:transform .15s ease, box-shadow .15s ease;
}
.mca-card-hover:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(15,28,63,0.10);
}

.mca-soft{
  background:rgba(15,28,63,0.04);
  border:1px solid rgba(15,28,63,0.06);
  border-radius:12px;
  padding:22px;
}

/* ---------- Lijsten ---------- */
.mca-list{ margin:10px 0 0 0; padding-left:20px; }
.mca-list li{ margin:6px 0; }

/* Blog: lijstjes als boardroom dash */
.mca-blog ul{ list-style:none; padding-left:0; margin:10px 0 0; }
.mca-blog ul li{ padding-left:20px; position:relative; margin:6px 0; }
.mca-blog ul li:before{ content:"–"; position:absolute; left:0; color:#2a6df4; }

/* ---------- HR ---------- */
.mca-hr{
  border:0;
  height:1px;
  background:rgba(15,28,63,0.12);
  margin:18px 0;
}

/* ---------- Buttons ---------- */
.mca-cta .btn{
  border-radius:8px;
  padding:10px 16px;
  font-weight:600;
}

.btn.btn-primary{
  background:#0f1c3f;
  border-color:#0f1c3f;
}
.btn.btn-primary:hover{
  background:#1b2d5a;
  border-color:#1b2d5a;
}

.btn.btn-light{
  background:#fff;
  border:1px solid rgba(15,28,63,0.16);
  color:#0f1c3f;
}
.btn.btn-light:hover{ background:#f5f7fb; }

/* ---------- Hero image ---------- */
.mca-hero-photo img,
.mca-profile{
  border-radius:12px;
  width:100%;
  height:auto;
  display:block;
}

/* ---------- Steps ---------- */
.mca-step-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:16px;
  margin:0 0 10px;
}

.mca-step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  background:#0f1c3f;
  color:#fff;
  font-weight:700;
  font-size:13px;
}

/* ---------- Icon system (BELANGRIJK) ---------- */
/* LET OP: iconen verschijnen alleen als er écht een <svg> in je HTML staat */
.mca-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-right:10px;
  opacity:.9;
  flex-shrink:0;
}
.mca-ico svg{
  width:18px;
  height:18px;
  display:block;
  fill:currentColor;
}
.mca-h2-icon,
.mca-h3-icon{
  display:flex;
  align-items:center;
  gap:8px;
}

.mca-feature{ position:relative; }
.mca-feature-ico{
  width:36px;
  height:36px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,28,63,0.06);
  color:#0f1c3f;
  margin-bottom:12px;
  transition:all .25s ease;
}
.mca-feature-ico svg{
  width:18px;
  height:18px;
  display:block;
  fill:currentColor;
}
.mca-card-hover:hover .mca-feature-ico{
  background:rgba(42,109,244,0.12);
  color:#2a6df4;
}

/* Checklist bullets */
.mca-checklist{
  list-style:none;
  padding-left:0;
  margin:10px 0 0;
}
.mca-checklist li{
  position:relative;
  padding-left:26px;
  margin:8px 0;
}
.mca-checklist li:before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:rgba(42,109,244,0.12);
  border:1px solid rgba(42,109,244,0.35);
}

/* Mobile icon sizing */
@media (max-width:768px){
  .mca-feature-ico{ width:32px; height:32px; }
  .mca-feature-ico svg{ width:16px; height:16px; }
}

/* ---------- Blog aside image (rechts) ---------- */
.mca-blog-aside{ text-align:center; }
.mca-blog-aside img{
  max-width:420px;
  width:100%;
  height:auto;
  display:block;
  margin:0 auto;
  border-radius:10px;
  box-shadow:0 14px 34px rgba(0,0,0,0.08);
}

/* Sticky op desktop */
@media (min-width:992px){
  .mca-blog-aside{ position:sticky; top:100px; }
}

/* Blog hero image */
.mca-blog-hero img{ border-radius:10px; display:block; }

/* ---------- Zebra layout (maak pagina één geheel) ---------- */
.mca-wrapper.zebra .mca-section:nth-of-type(even){
  background:rgba(15,28,63,0.03);
}
.mca-wrapper.zebra .mca-section{
  border-top:1px solid rgba(15,28,63,0.06);
}

/* ---------- Footer ---------- */
.mca-footer{
  padding:28px 0;
  background:#0f1c3f;
  color:#fff;
}
.mca-footer a{ color:#cfe0ff; text-decoration:none; }
.mca-footer a:hover{ color:#fff }

.mca-blog-aside{
text-align:center;
}

.mca-blog-image{
max-width:420px;
height:auto;
display:block;
margin:0 auto;
border-radius:10px;
box-shadow:0 14px 34px rgba(0,0,0,0.08);
}

@media (min-width:992px){

.mca-blog-aside{
position:sticky;
top:100px;
}

}
/* Joomla Contact component – maak het netter in MCA-stijl */
.com-contact .page-header h1,
.com-contact h1{
  font-size:38px;
  letter-spacing:-0.3px;
  color:#0f1c3f;
}

/* Blokken (info + formulier) */
.com-contact .contact,
.com-contact .contact-form,
.com-contact .contact-address,
.com-contact .contact-miscinfo{
  background:#fff;
  border:1px solid rgba(15,28,63,0.08);
  border-radius:12px;
  padding:24px;
  box-shadow:0 10px 25px rgba(0,0,0,0.04);
  margin-bottom:18px;
}

/* Form inputs */
.com-contact input[type="text"],
.com-contact input[type="email"],
.com-contact input[type="tel"],
.com-contact textarea,
.com-contact select{
  width:100%;
  border-radius:10px;
  border:1px solid rgba(15,28,63,0.14);
  padding:12px 14px;
  box-shadow:none;
}

/* Button */
.com-contact button,
.com-contact .btn{
  border-radius:8px;
  padding:10px 16px;
  font-weight:600;
  background:#0f1c3f;
  border:1px solid #0f1c3f;
  color:#fff;
}
.com-contact button:hover,
.com-contact .btn:hover{
  background:#1b2d5a;
  border-color:#1b2d5a;
}
.mca-blog-latest{
background:#fff;
border:1px solid rgba(15,28,63,0.08);
border-radius:12px;
padding:20px;
box-shadow:0 10px 25px rgba(15,28,63,0.06);
}

.mca-blog-latest ul{
list-style:none;
padding-left:0;
margin:0;
}

.mca-blog-latest li{
border-bottom:1px solid rgba(15,28,63,0.08);
padding:10px 0;
}

.mca-blog-latest li:last-child{
border-bottom:none;
}

.mca-blog-latest a{
color:#0f1c3f;
text-decoration:none;
font-weight:500;
}

.mca-blog-latest a:hover{
color:#2a6df4;
}
.mca-blog-latest ul{
  list-style:none;
  padding-left:0;
  margin:0;
}
.mca-blog-latest li{
  border-bottom:1px solid rgba(15,28,63,0.08);
  padding:10px 0;
}
.mca-blog-latest li:last-child{
  border-bottom:none;
}
.mca-blog-latest a{
  color:#0f1c3f;
  text-decoration:none;
  font-weight:500;
}
.mca-blog-latest a:hover{
  color:#2a6df4;
  text-decoration:underline;
}
<style>
/* ===================================== */
/* JOOMLA CATEGORIEBLOG - INZICHTEN      */
/* ===================================== */

.blog,
.category-blog{
  max-width:1280px;
  margin:0 auto;
}

.blog .page-header,
.category-blog .page-header{
  margin-bottom:24px;
}

.blog .page-header h1,
.category-blog .page-header h1{
  font-size:48px;
  line-height:1.1;
  color:#0f1c3f;
  margin-bottom:16px;
}

.blog .category-desc,
.category-blog .category-desc{
  max-width:920px;
  color:#5d6879;
  line-height:1.7;
  margin-bottom:36px;
}

.blog-items,
.category-blog .blog-items{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.blog-item,
.category-blog .blog-item{
  background:#fff;
  border:1px solid rgba(15,28,63,0.08);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(15,28,63,0.05);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
  padding:0;
}

.blog-item .item-image,
.category-blog .blog-item .item-image,
.blog-item .intro-image,
.category-blog .blog-item .intro-image{
  display:block;
  margin:0;
}

.blog-item .item-image img,
.category-blog .blog-item .item-image img,
.blog-item .intro-image img,
.category-blog .blog-item .intro-image img{
  width:100%;
  height:auto;
  display:block;
}

.blog-item .page-header,
.category-blog .blog-item .page-header{
  padding:24px 24px 0 24px;
  margin:0;
}

.blog-item .page-header h2,
.category-blog .blog-item .page-header h2{
  font-size:22px;
  line-height:1.3;
  margin:0 0 12px 0;
}

.blog-item .page-header h2 a,
.category-blog .blog-item .page-header h2 a{
  color:#0f1c3f;
  text-decoration:none;
}

.blog-item .page-header h2 a:hover,
.category-blog .blog-item .page-header h2 a:hover{
  text-decoration:underline;
}

.blog-item .article-info,
.category-blog .blog-item .article-info{
  padding:0 24px;
  margin:0 0 8px 0;
  font-size:13px;
  color:#6b7688;
}

.blog-item .introtext,
.category-blog .blog-item .introtext,
.blog-item .item-content,
.category-blog .blog-item .item-content{
  color:#5d6879;
  line-height:1.7;
  padding:0 24px 16px 24px;
  flex-grow:1;
}

.blog-item .readmore,
.category-blog .blog-item .readmore{
  padding:0 24px 24px 24px;
  margin-top:auto;
}

.blog-item .readmore a,
.category-blog .blog-item .readmore a{
  color:#0f1c3f;
  font-weight:600;
  text-decoration:none;
}

.blog-item .readmore a:hover,
.category-blog .blog-item .readmore a:hover{
  text-decoration:underline;
}

/* Uitgelicht eerste artikel */
.blog-leading,
.category-blog .items-leading{
  margin-bottom:36px;
}

.blog-leading .blog-item,
.category-blog .items-leading .blog-item{
  grid-column:1 / -1;
}

.blog-leading .blog-item,
.category-blog .items-leading .blog-item{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  align-items:stretch;
}

.blog-leading .blog-item .item-image,
.category-blog .items-leading .blog-item .item-image,
.blog-leading .blog-item .intro-image,
.category-blog .items-leading .blog-item .intro-image{
  height:100%;
}

.blog-leading .blog-item .item-image img,
.category-blog .items-leading .blog-item .item-image img,
.blog-leading .blog-item .intro-image img,
.category-blog .items-leading .blog-item .intro-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.blog-leading .blog-item .page-header,
.category-blog .items-leading .blog-item .page-header{
  padding-top:28px;
}

.blog-leading .blog-item .page-header h2,
.category-blog .items-leading .blog-item .page-header h2{
  font-size:30px;
  line-height:1.2;
}

/* Pagination */
.pagination{
  margin-top:36px;
  justify-content:center;
}

/* Mobiel */
@media(max-width:1100px){
  .blog-items,
  .category-blog .blog-items{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:900px){
  .blog-leading .blog-item,
  .category-blog .items-leading .blog-item{
    grid-template-columns:1fr;
  }
}

@media(max-width:768px){
  .blog .page-header h1,
  .category-blog .page-header h1{
    font-size:36px;
  }

  .blog-items,
  .category-blog .blog-items{
    grid-template-columns:1fr;
  }

  .blog-leading .blog-item .page-header h2,
  .category-blog .items-leading .blog-item .page-header h2{
    font-size:26px;
  }
}
</style>

/* JOOMLA BLOG GRID FIX */

.blog-items{
display:grid !important;
grid-template-columns:repeat(3,1fr);
gap:28px;
margin-top:30px;
}

.blog-items > div{
width:100% !important;
max-width:100% !important;
flex:none !important;
}

.blog-item{
background:#fff;
border:1px solid rgba(15,28,63,0.08);
border-radius:18px;
box-shadow:0 10px 30px rgba(15,28,63,0.05);
overflow:hidden;
display:flex;
flex-direction:column;
height:100%;
}

.blog-item .item-image img,
.blog-item .intro-image img{
width:100%;
height:auto;
display:block;
}

.blog-item .page-header{
padding:22px 22px 0 22px;
margin:0;
}

.blog-item .page-header h2{
font-size:22px;
line-height:1.3;
margin-bottom:10px;
}

.blog-item .page-header h2 a{
color:#0f1c3f;
text-decoration:none;
}

.blog-item .page-header h2 a:hover{
text-decoration:underline;
}

.blog-item .introtext,
.blog-item .item-content{
padding:0 22px 18px 22px;
color:#5d6879;
line-height:1.7;
flex-grow:1;
}

.blog-item .readmore{
padding:0 22px 22px 22px;
margin-top:auto;
}

.blog-item .readmore a{
font-weight:600;
color:#0f1c3f;
text-decoration:none;
}

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

@media(max-width:1100px){
.blog-items{
grid-template-columns:repeat(2,1fr);
}
}

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

#sp-main-body{
  padding-top:5px !important;
  padding-bottom:1px !important;
}