/* =========================================================
   MTC VLAANDEREN - CUSTOM.CSS
   Versie: 3.0 FINAL MASTER
   Laatste update: juni 2026 - final master layoutversie

   Inhoud:
   01. Kleurenvariabelen
   02. Algemene basisstijl
   03. Header basis
   04. Hoofdmenu en dropdowns
   05. Logo basis
   06. Knoppen
   07. Links
   08. Titels
   09. Content achtergrond
   10. Modules en kaartjes
   11. Oude templateblokken
   12. Bottom sectie
   13. Kalender / JEvents
   14. HikaShop
   15. Paginatie
   16. SP SimplePortfolio
   17. Artikellijsten
   18. Paginatitel / headerfoto
   19. Formulieren en modals
   20. Pagina-specifieke stijlen
   21. Responsive basis
   22. Navbar structuurfixes
   23. Homepage finetuning
   24. Homepage blokken
   25. Homepage JEvents kaarten
   26. Sponsors en ledenvoordelen carrousel
   27. Logo definitieve fix
   28. Footer
   29. Hoofdmenu pijltjes en dropdown leesbaarheid
   30. Graafschapsrit 2026
   ========================================================= */

/* =========================================================
   01. KLEURENVARIABELEN
   Centrale huisstijlkleuren van MTC Vlaanderen.
   Wijzig deze waarden alleen als de volledige sitekleur moet wijzigen.
   ========================================================= */
:root {
  --mtc-navy:     #1c2b47;
  --mtc-navy2:    #243558;
  --mtc-gold:     #c8922a;
  --mtc-gold-lt:  #f0d9a8;
  --mtc-warm-bg:  #f5f3ef;
  --mtc-warm-bg2: #eceae4;
  --mtc-txt:      #2c2c2a;
  --mtc-txt2:     #5f5e5a;
  --mtc-border:   rgba(44,44,42,0.12);
}

/* =========================================================
   02. ALGEMENE BASISSTIJL
   Basisinstellingen voor body, achtergrond en standaard tekstkleur.
   ========================================================= */
body {
  line-height: 1.9em;
  background-color: var(--mtc-warm-bg) !important;
  color: var(--mtc-txt) !important;
}

/* =========================================================
   03. HEADER BASIS
   Algemene headerpositie, sticky gedrag en donkerblauwe achtergrond.
   ========================================================= */
#sp-top-bar {
  position: relative;
  z-index: 9999;
}

#sp-header {
  top: 0px;
  padding: 0px;
  height: inherit;
  box-shadow: none;
  background-color: var(--mtc-navy) !important;
}
#sp-header.header-sticky {
  position: fixed;
  top: 0;
  box-shadow: 0 0 4px 0 rgb(0 0 0 / 10%);
}
body:not(.home) #sp-header {
  position: static;
}
body:not(.home) #sp-header.header-sticky {
  position: fixed;
}

/* =========================================================
   04. HOOFDMENU EN DROPDOWNS
   Desktopnavigatie, actieve menu-items, hoverkleur en dropdownmenu.
   ========================================================= */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 10px 0;
  color: rgba(255,255,255,0.75) !important;
}
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
  text-transform: capitalize;
  position: relative;
  color: rgba(255,255,255,0.75) !important;
  transition: color 0.2s;
}
.sp-megamenu-parent > li.active > a {
  font-weight: 600;
  color: #fff !important;
  border-bottom: 2px solid var(--mtc-gold) !important;
}
.sp-megamenu-parent > li > a:hover,
.sp-megamenu-parent > li > span:hover {
  color: #fff !important;
  border-bottom: 2px solid var(--mtc-gold) !important;
}

/* Dropdownmenu onder de hoofditems */
.sp-megamenu-wrapper .sp-dropdown,
#sp-header .sp-dropdown {
  background-color: var(--mtc-navy2) !important;
  border-top: 2px solid var(--mtc-gold) !important;
  border-radius: 0 0 8px 8px !important;
}
.sp-megamenu-wrapper .sp-dropdown a,
#sp-header .sp-dropdown a {
  color: rgba(255,255,255,0.75) !important;
  font-size: 13px !important;
}
.sp-megamenu-wrapper .sp-dropdown a:hover,
#sp-header .sp-dropdown a:hover {
  color: var(--mtc-gold) !important;
  background-color: rgba(255,255,255,0.05) !important;
}

/* Mobiel/offcanvas menu */
.offcanvas-menu .offcanvas-inner .menu-child > li a {
  padding: 12px 10px !important;
  border-bottom: 1px solid rgba(44,43,42,0.15);
  display: inherit;
  color: var(--mtc-txt) !important;
}
.offcanvas-menu .offcanvas-inner ul.menu > li > a,
.offcanvas-menu .offcanvas-inner ul.menu > li > span {
  font-size: 15px;
  font-weight: 500;
  color: var(--mtc-navy) !important;
}
.burger-icon > span {
  background-color: #fff !important;
}

/* =========================================================
   05. LOGO BASIS
   Basisformaat van het logo. De definitieve transparantie-fix staat onderaan.
   ========================================================= */
.sp-logo img,
#sp-logo img {
  max-height: 48px !important;
}

/* =========================================================
   06. KNOPPEN
   Algemene knoppen, submit-knoppen en alternatieve knopstijlen.
   ========================================================= */
.btn,
#sp_qc_submit,
input[type="submit"],
button[type="submit"] {
  font-size: 16px;
  position: relative;
  display: inline-block;
  width: auto;
  margin: 0;
  color: var(--mtc-navy) !important;
  font-weight: 600;
  font-family: inherit;
  line-height: 2em;
  letter-spacing: .02em;
  box-sizing: border-box;
  padding: 9px 35px;
  cursor: pointer;
  text-transform: capitalize;
  border: 2px solid var(--mtc-gold);
  border-radius: 6px;
  background: var(--mtc-gold);
  transition: .3s ease-in-out;
}
.btn:hover,
#sp_qc_submit:hover,
input[type="submit"]:hover {
  color: #fff !important;
  background: var(--mtc-navy) !important;
  border-color: var(--mtc-navy) !important;
}
.btn.no-bg {
  background: transparent;
  border-color: var(--mtc-gold);
  color: var(--mtc-gold) !important;
}
.btn.no-bg:hover {
  background: var(--mtc-gold) !important;
  color: var(--mtc-navy) !important;
}
.btn.white {
  background: #fff;
  color: var(--mtc-navy) !important;
  border-color: #fff;
}
.btn.white:hover {
  background: var(--mtc-gold) !important;
  border-color: var(--mtc-gold) !important;
  color: var(--mtc-navy) !important;
}
button.btn.btn-primary.validate {
  color: var(--mtc-navy) !important;
  padding: 13px 20px;
}

/* =========================================================
   07. LINKS
   Algemene linkkleur en hovergedrag.
   ========================================================= */
a {
  color: var(--mtc-gold) !important;
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  color: var(--mtc-navy) !important;
  text-decoration: underline;
}

/* =========================================================
   08. TITELS
   Algemene headingstijl voor h1 t.e.m. h4.
   ========================================================= */
h1, h2, h3, h4 {
  color: var(--mtc-navy) !important;
  font-family: Georgia, serif !important;
}
.title h1 {
  position: relative;
  margin: 20px 0;
  display: inline-block;
  font-size: 45px;
  font-weight: 600;
}
h2 {
  border-left: 3px solid var(--mtc-gold);
  padding-left: 10px;
}

/* =========================================================
   09. CONTENT ACHTERGROND
   Warme achtergrondkleur voor contentzones.
   ========================================================= */
#sp-main-body,
.sp-column,
.article-block {
  background-color: var(--mtc-warm-bg) !important;
}

/* =========================================================
   10. MODULES EN KAARTJES
   Algemene witte modulekaarten met afgeronde hoeken.
   ========================================================= */
.sp-module {
  background: #fff !important;
  border: 1px solid var(--mtc-border) !important;
  border-radius: 10px !important;
  padding: 16px !important;
}
.sp-module-title,
.sp-module h3 {
  color: var(--mtc-navy) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border-left: 3px solid var(--mtc-gold) !important;
  padding-left: 10px !important;
  margin-bottom: 12px !important;
}

/* =========================================================
   11. OUDE TEMPLATEBLOKKEN
   Reststijlen uit het oorspronkelijke template, enkel aanpassen indien nodig.
   ========================================================= */
.intro .sppb-column {
  border-radius: 5px;
}
.intro-column:hover > .sppb-column-overlay {
  transition: .3s ease-in-out;
}
.intro-column:hover > .sppb-column-overlay {
  background-color: rgba(0,0,0,0.2) !important;
}

.categories .sppb-row-overlay::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--mtc-warm-bg);
  height: 280px;
  width: 100%;
}
.categories-item,
.categories-item .sppb-addon-single-image-container {
  overflow: hidden;
}
.categories-item img {
  transition: .3s ease-in-out;
}
.categories-item:hover img {
  transform: scale(1.08);
}

.counter-item {
  padding: 30px 10px;
  box-shadow: 0 0 4px 0 rgb(0 0 0 / 10%);
  float: left;
  margin-right: 5%;
  width: 30%;
}
.counter-item:last-child {
  margin-right: 0;
}

.about-img img {
  transition: .3s ease-in-out;
}
.about-img:hover img {
  opacity: 0.8;
}

.choose-item i {
  height: 80px !important;
  width: 80px !important;
  line-height: 80px !important;
  background: var(--mtc-gold-lt);
  border-radius: 50%;
  transition: .3s ease-in-out;
  color: var(--mtc-navy) !important;
}
.choose-item:hover i {
  color: #fff !important;
  background: var(--mtc-navy) !important;
}

.start .sppb-row.sppb-no-gutter {
  background-image: url("../images/bg-start.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.8;
  border-radius: 5px;
  padding: 80px 50px;
}
.start .btn.no-bg {
  border-color: var(--mtc-gold);
  color: var(--mtc-gold) !important;
}

.value-item i {
  height: 70px !important;
  width: 70px !important;
  line-height: 70px !important;
  background: var(--mtc-gold-lt);
  border-radius: 50%;
  color: var(--mtc-navy) !important;
}

.sppb-panel-modern,
.sppb-panel-modern .sppb-panel-body {
  border: none;
  padding: 0px 0;
}
.sppb-panel-modern > .sppb-panel-heading {
  background: transparent;
  padding: 10px 30px 10px 0px;
}
.sppb-panel-modern .sppb-panel-title {
  font-size: 22px;
  color: var(--mtc-navy);
  font-family: Georgia, serif;
  font-weight: 600;
}

.bg-header .sppb-col-md-6 {
  margin-bottom: -60px;
}

/* Blogkaarten */
.jmm-item .jmm-image.mod-article-image {
  overflow: hidden;
  margin: 0;
}
.jmm-text {
  box-shadow: 9.899px 9.899px 30px 0 rgba(0,0,0,.08);
  padding: 30px;
  background: #fff;
}
.jmm-image.mod-article-image img {
  transform: scale(1);
  transition: .5s ease-in-out;
}
.jmm-item:hover .jmm-image.mod-article-image img {
  transform: scale(1.12);
  filter: grayscale(100%);
}

/* Contactpagina */
.contact-info h2,
.contact-info h3 {
  font-size: 25px;
}

/* =========================================================
   12. BOTTOM SECTIE
   Donkerblauwe zone boven de copyrightfooter. Bevat sponsors/voordelen.
   ========================================================= */
#sp-bottom {
  position: relative;
  text-align: left;
  box-shadow: 0 0 4px 0 rgb(0 0 0 / 10%);
  font-size: 16px;
  z-index: 1;
  background-color: var(--mtc-navy) !important;
}
#sp-bottom:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background-color: var(--mtc-navy) !important;
  background-image: none !important;
}
#sp-bottom .sp-module .sp-module-title {
  margin-bottom: 25px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1em;
  position: relative;
  text-transform: capitalize;
  color: var(--mtc-gold) !important;
  border-left: 3px solid var(--mtc-gold) !important;
  padding-left: 10px !important;
}
#sp-bottom .container {
  border-bottom: none;
}
#sp-bottom .menu li {
  display: inline-block !important;
}
#sp-bottom p {
  line-height: 2.2;
  margin-bottom: 0;
  color: rgba(255,255,255,0.65) !important;
}
#sp-bottom strong {
  display: none;
}
#sp-bottom span {
  padding-right: 10px;
  color: rgba(255,255,255,0.65) !important;
}
#sp-bottom h2 {
  font-size: 35px;
  font-weight: 600;
  color: #fff !important;
  border-left: none !important;
  padding-left: 0 !important;
}
#sp-bottom .ft-title {
  font-weight: 600;
  color: var(--mtc-gold) !important;
}
#sp-bottom a {
  color: rgba(255,255,255,0.65) !important;
}
#sp-bottom a:hover {
  color: var(--mtc-gold) !important;
  text-decoration: none !important;
}

/* Sociale iconen in de bottomsectie */
.shrewd_solution_icon {
  margin-top: 20px;
}
.shrewd_solution_icon ul,
.shrewd_solution_icon ul li {
  display: inline-block !important;
  padding: 0 !important;
}
.shrewd_solution_icon ul li a {
  font-size: 16px;
  width: 35px;
  color: #fff !important;
  line-height: 35px;
  text-align: center;
  border-radius: 5px;
  margin-right: 10px;
  transition: .5s;
  display: inline-block;
  height: 35px;
  border: none;
  background: var(--mtc-navy2);
}
.shrewd_solution_icon ul li a:hover {
  background: var(--mtc-gold) !important;
  color: var(--mtc-navy) !important;
}
.shrewd_solution_icon strong {
  display: none;
}
.shrewd_solution_icon ul li em {
  font-family: 'Font Awesome 5 Brands';
}

/* =========================================================
   13. KALENDER / JEVENTS
   Styling voor JEvents lijsten, datums en kalenderitems.
   ========================================================= */
.jev_listrow_odd,
.jev_listrow_even {
  background-color: #fff !important;
  border: 1px solid var(--mtc-border) !important;
  border-radius: 6px !important;
  margin-bottom: 6px !important;
}
.jev_listrow_odd:hover,
.jev_listrow_even:hover {
  border-color: var(--mtc-gold) !important;
}
.jev_evdate {
  background-color: var(--mtc-navy) !important;
  color: var(--mtc-gold) !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
}

/* =========================================================
   14. HIKASHOP
   Styling voor HikaShop-productkaarten en winkelknoppen.
   ========================================================= */
.hikashop_subcontainer.thumbnail {
  transition: .3s ease-in-out;
}
.product-text:after,
.hikashop_subcontainer.thumbnail:hover {
  border-color: var(--mtc-gold);
}
a.hikabtn.hikacart {
  background-color: var(--mtc-gold) !important;
  border-color: var(--mtc-gold) !important;
  color: var(--mtc-navy) !important;
}

/* =========================================================
   15. PAGINATIE
   Actieve pagina-indicatoren.
   ========================================================= */
.page-item.active .page-link {
  background-color: var(--mtc-gold) !important;
  border-color: var(--mtc-gold) !important;
  color: var(--mtc-navy) !important;
}

/* =========================================================
   16. SP SIMPLEPORTFOLIO
   Portfoliofilters en overlays.
   ========================================================= */
.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li.active > a {
  color: var(--mtc-gold) !important;
}
.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info:hover,
.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-overlay-wrapper .sp-simpleportfolio-overlay {
  background-color: var(--mtc-navy) !important;
  opacity: 0.88;
}

/* =========================================================
   17. ARTIKELLIJSTEN
   Hoverkleuren voor artikellijsten en readmore-links.
   ========================================================= */
.article-list .article .readmore a:hover,
.article-list .article .readmore a:active,
.article-list .article .article-header h2 a:hover {
  color: var(--mtc-gold) !important;
}
.title h3,
.counter-item h1 {
  color: var(--mtc-gold) !important;
}

/* =========================================================
   18. PAGINATITEL / HEADERFOTO
   Grote foto bovenaan gewone pagina’s.
   ========================================================= */
#sp-title { padding: 0; }
#sp-title .container,
#sp-title .row,
#sp-title .sp-column {
  padding: 0; width: 100%; max-width: 100%;
}
#sp-title img {
  display: block;
  width: 100%;
  height: clamp(220px, 28vw, 420px);
  object-fit: cover;
  object-position: center;
}

/* =========================================================
   19. FORMULIEREN EN MODALS
   Creative Contact Form en modale vensters.
   ========================================================= */
.com-creativecontactform .creativecontactform,
div.creativecontactform {
  max-width: 700px;
  margin: 0 auto !important;
  text-align: left;
}
.view-article .item-page form.creativecontactform,
.view-article .item-page .creativecontactform,
.view-article .item-page .creative-contact-form,
.view-article .item-page div[id^="creativecontactform_"],
.com-creativecontactform .item-page form,
.com-creativecontactform form {
  max-width: 720px !important;
  margin: 0 auto !important;
  float: none !important;
  display: block !important;
}
.view-article .item-page {
  max-width: 900px;
  margin: 0 auto;
  float: none;
  text-align: initial;
}
.view-article .item-page .creativecontactform,
.view-article .item-page form.creativecontactform {
  width: 100% !important;
}
.modal-dialog {
  max-width: 900px !important;
  margin: 2rem auto !important;
}
.modal-content {
  border-radius: 12px;
  padding: 20px;
}
.modal-body .creativecontactform_wrapper {
  max-width: 850px !important;
  margin: 0 auto;
}

/* =========================================================
   20. PAGINA-SPECIFIEKE STIJLEN
   ItemID-gebaseerde opmaak. Alleen aanpassen voor die specifieke pagina.
   ========================================================= */

/* ── REGLEMENT (itemid-199) ── */
body.itemid-199 .mtc-reglement {
  line-height: 1.85;
}
body.itemid-199 .mtc-reglement h1 {
  font-size: 46px !important;
  font-weight: 800 !important;
  margin-bottom: 5px;
  color: var(--mtc-navy) !important;
}
body.itemid-199 .mtc-reglement h2 {
  font-size: 24px !important;
  font-weight: 600;
  margin-top: -5px;
  margin-bottom: 40px;
  color: var(--mtc-txt2) !important;
  border-left: none !important;
  padding-left: 0 !important;
}
body.itemid-199 .mtc-reglement h3 {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--mtc-gold) !important;
  border-left: 6px solid var(--mtc-navy) !important;
  padding-left: 12px;
  margin-top: 45px !important;
  margin-bottom: 12px !important;
}
body.itemid-199 .mtc-reglement ul {
  margin: 0 0 22px 28px;
  padding-left: 0;
}
body.itemid-199 .mtc-reglement li {
  margin-bottom: 8px;
}
body.itemid-199 .mtc-reglement i.fa {
  color: var(--mtc-gold);
  font-size: 22px;
  margin-right: 5px;
}
body.itemid-199 .mtc-reglement a {
  color: var(--mtc-gold) !important;
  text-decoration: underline;
}
body.itemid-199 .mtc-reglement a:hover {
  color: var(--mtc-navy) !important;
}
body.itemid-199 .mtc-reglement p {
  margin-bottom: 14px;
  color: var(--mtc-txt);
}
body.itemid-199 .mtc-reglement .section-block {
  margin-bottom: 30px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
body.itemid-199 .mtc-reglement h3:hover {
  background: rgba(200,146,42,0.1);
  transition: 0.3s;
}

/* ── HISTORIEK (itemid-168) ── */
body.itemid-168 .com-content-article__body {
  max-width: 900px;
  margin: 0 auto 40px;
}
body.itemid-168 .mtc-historiek {
  line-height: 1.85;
  margin-top: 10px;
  margin-bottom: 20px;
}
body.itemid-168 .mtc-historiek p {
  margin-bottom: 16px;
  color: var(--mtc-txt);
}
body.itemid-168 .mtc-historiek p[style] {
  margin-right: 0 !important;
}
body.itemid-168 .mtc-historiek p strong {
  display: inline-block;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 8px;
  color: var(--mtc-gold) !important;
  border-left: 6px solid var(--mtc-navy) !important;
  padding-left: 10px;
}
body.itemid-168 .mtc-historiek a {
  color: var(--mtc-gold) !important;
  text-decoration: underline;
}
body.itemid-168 .mtc-historiek a:hover {
  color: var(--mtc-navy) !important;
}
body.itemid-168 figure.article-full-image.item-image {
  float: none !important;
  max-width: 360px;
  margin: 0 auto 25px auto;
  text-align: center;
}
body.itemid-168 figure.article-full-image.item-image img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* ── DE BEDOELING (itemid-169) ── */
body.itemid-169 .com-content-article__body {
  max-width: 900px;
  margin: 0 auto 40px;
}
body.itemid-169 .mtc-bedoeling {
  line-height: 1.85;
  margin-top: 10px;
  margin-bottom: 20px;
}
body.itemid-169 .mtc-bedoeling h1 {
  font-size: 42px !important;
  font-weight: 800 !important;
  margin-bottom: 8px;
  color: var(--mtc-navy) !important;
}
body.itemid-169 .mtc-bedoeling h2 {
  font-size: 24px !important;
  font-weight: 600;
  margin-top: -5px;
  margin-bottom: 26px;
  color: var(--mtc-txt2) !important;
  border-left: none !important;
  padding-left: 0 !important;
}
body.itemid-169 .mtc-bedoeling h3,
body.itemid-169 .mtc-bedoeling h4 {
  font-weight: 700 !important;
  color: var(--mtc-gold) !important;
  border-left: 6px solid var(--mtc-navy) !important;
  padding-left: 10px;
  margin-top: 28px !important;
  margin-bottom: 10px !important;
}
body.itemid-169 .mtc-bedoeling p {
  margin-bottom: 16px;
  color: var(--mtc-txt);
}
body.itemid-169 .mtc-bedoeling p[style] {
  margin-right: 0 !important;
}
body.itemid-169 .mtc-bedoeling ul {
  margin: 0 0 22px 28px;
  padding-left: 0;
}
body.itemid-169 .mtc-bedoeling li {
  margin-bottom: 8px;
}
body.itemid-169 .mtc-bedoeling a {
  color: var(--mtc-gold) !important;
  text-decoration: underline;
}
body.itemid-169 .mtc-bedoeling a:hover {
  color: var(--mtc-navy) !important;
}
body.itemid-169 .mtc-bedoeling i.fa {
  color: var(--mtc-gold);
  font-size: 20px;
  margin-right: 5px;
}
body.itemid-169 .mtc-bedoeling img {
  max-width: 100%;
  height: auto;
}

/* ── IN MEMORIAM (itemid-170) ── */
body.itemid-170 .com-content-article__body {
  max-width: 900px;
  margin: 0 auto 50px;
}
body.itemid-170 .mtc-memoriam {
  line-height: 1.85;
  margin-top: 20px;
  margin-bottom: 40px;
  padding: 25px 20px;
  background: rgba(255,255,255,0.6);
  border-radius: 14px;
  color: var(--mtc-txt);
}
body.itemid-170 .mtc-memoriam .mem-intro {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 40px;
}
body.itemid-170 .mtc-memoriam .mem-intro h2 {
  font-size: 32px;
  margin-bottom: 10px;
  border-left: none !important;
  padding-left: 0 !important;
}
body.itemid-170 .mtc-memoriam .mem-intro p {
  margin-bottom: 8px;
}
body.itemid-170 .mtc-memoriam .persoon {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
body.itemid-170 .mtc-memoriam .persoon:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
body.itemid-170 .mtc-memoriam .persoon-foto {
  display: flex;
  flex-direction: row;
  gap: 12px;
  flex-shrink: 0;
}
body.itemid-170 .mtc-memoriam .persoon-foto img {
  width: 130px;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  object-fit: cover;
}
body.itemid-170 .mtc-memoriam .persoon-tekst {
  flex: 1;
}
body.itemid-170 .mtc-memoriam .persoon-tekst h3 {
  margin-top: 0;
  margin-bottom: 6px;
  font-size: 22px;
  font-weight: 600;
  border-left: none !important;
  padding-left: 0 !important;
}
body.itemid-170 .mtc-memoriam .persoon-tekst p {
  margin-bottom: 8px;
}
body.itemid-170 .mtc-memoriam a {
  color: var(--mtc-gold) !important;
  text-decoration: underline;
}
body.itemid-170 .mtc-memoriam a:hover {
  color: var(--mtc-navy) !important;
}

/* =========================================================
   21. RESPONSIVE BASIS
   Algemene aanpassingen voor tablets en smartphones.
   ========================================================= */
@media (min-width: 1400px) {
  .sppb-row-container {
    max-width: 1320px;
  }
}

@media (max-width: 768px) {
  #sp-header,
  #sp-header .logo {
    height: 70px;
  }
  #sp-footer p {
    text-align: center;
  }
  body #sp-header {
    padding: 0;
  }
  #sp-header {
    top: 0px;
  }
  .slider-colum .sppb-text-right,
  .slider-colum .sppb-text-left {
    text-align: center;
    margin-top: 30px;
  }
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.2rem !important; }
  body.itemid-168 .com-content-article__body,
  body.itemid-169 .com-content-article__body {
    padding: 0 15px;
  }
  body.itemid-168 figure.article-full-image.item-image {
    max-width: 260px;
  }
  body.itemid-170 .com-content-article__body {
    padding: 0 15px;
  }
  body.itemid-170 .mtc-memoriam {
    padding: 20px 10px;
  }
  body.itemid-170 .mtc-memoriam .persoon {
    flex-direction: column;
  }
  body.itemid-170 .mtc-memoriam .persoon-foto {
    justify-content: center;
  }
  body.itemid-170 .mtc-memoriam .persoon-foto img {
    width: 120px;
  }
}

@media (max-width: 480px) {
  .hiking-colum h1,
  .deal-item h1 {
    font-size: 70px;
  }
  .title h4 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .title h4:before,
  .title.center h4:after {
    content: none;
  }
  .team-colum .clearfix {
    width: 100%;
  }
}
/* =========================================================
   22. NAVBAR STRUCTUURFIXES
   Uitlijning van logo, menu en login/profielknop in de header.
   ========================================================= */
#sp-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  min-height: 60px !important;
  padding: 0 20px !important;
}

#sp-header > .container,
#sp-header > .container-fluid {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 60px !important;
}

#sp-logo {
  flex-shrink: 0 !important;
  margin-right: 20px !important;
  padding: 0 !important;
  line-height: 0 !important;
}

#sp-logo img {
  height: 48px !important;
  width: auto !important;
  display: block !important;
}

.sp-megamenu-wrapper {
  background: transparent !important;
  flex: 1 !important;
}
/* Header/navbar fullwidth kleurfix */
.helix-navbar,
.sp-navbar,
#sp-header .navbar,
#sp-header .sp-navbar,
#sp-header .helix-navbar,
.navbar-default {
  background-color: var(--mtc-navy) !important;
  border-color: var(--mtc-navy) !important;
}

#sp-header .navbar-default .navbar-nav > li > a,
#sp-header .helix-navbar .navbar-nav > li > a,
.sp-navbar .navbar-nav > li > a {
  color: rgba(255,255,255,0.75) !important;
}

#sp-header .navbar-default .navbar-nav > li > a:hover,
#sp-header .navbar-default .navbar-nav > li.active > a {
  color: #ffffff !important;
  border-bottom: 2px solid var(--mtc-gold) !important;
}

/* Login knop stijl */
#sp-header .login-link,
#sp-header .user-info {
  color: rgba(255,255,255,0.8) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
}

/* ── SIGN IN / LOGIN KNOP NAVBAR ── */
#sp-header .mod-login a,
#sp-header .login-link,
#sp-header [class*="login"] a,
#sp-header .sp-module a {
  color: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
}
#sp-header .mod-login a:hover,
#sp-header .login-link:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* Ruimte tussen hero/headerfoto en content verkleinen */
#sp-main-body > .container:first-child {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Ruimte na hero verkleinen */
#sp-title + div,
.sp-title + .sp-component,
#sp-main-body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ruimte tussen hero en eerste module wegnemen */
#sp-main-body .container {
  padding-top: 0 !important;
}
.sp-component-area {
  padding-top: 0 !important;
}

/* Login/profielknop in de navigatie */
#sp-header .sp-login-btn,
#sp-header .btn-login,
#sp-header .login-link,
#sp-header [class*="login"] .btn,
#sp-header .mod-login .btn,
#sp-header .module-inner .btn {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  color: rgba(255,255,255,0.85) !important;
  border-radius: 6px !important;
  padding: 5px 14px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

#sp-header .sp-login-btn:hover,
#sp-header .mod-login .btn:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
}

/* SP sign-in knop */
a.sp-sign-in {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  color: rgba(255,255,255,0.85) !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  text-decoration: none !important;
}

a.sp-sign-in:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
}

a.sp-sign-in i,
a.sp-sign-in span {
  color: rgba(255,255,255,0.85) !important;
}

.sp-profile-wrapper {
  background: transparent !important;
  border: none !important;
}

/* Sign-in module transparant forceren */
#sp-header .sp-module,
#sp-header .sp-module-inner,
#sp-header .header-modules,
.header-modules .sp-module,
div.sp-module:has(a.sp-sign-in) {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

a.sp-sign-in,
a.sp-sign-in:link,
a.sp-sign-in:visited {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
}

/* Login/profiel dropdown */
.sp-profile-dropdown,
.sp-profile-dropdown li,
.sp-profile-dropdown a {
  background-color: var(--mtc-navy2) !important;
  color: rgba(255,255,255,0.85) !important;
  border-color: var(--mtc-gold) !important;
}

.sp-profile-dropdown {
  border-top: 2px solid var(--mtc-gold) !important;
  border-radius: 0 0 8px 8px !important;
  min-width: 140px !important;
}

.sp-profile-dropdown a:hover {
  color: var(--mtc-gold) !important;
  background-color: rgba(255,255,255,0.05) !important;
}

/* Extra hero-ruimtefix */
.nopadding {
  padding: 0 !important;
  margin: 0 !important;
}

#sp-page-builder,
.sp-page-builder,
#sp-main-body > .container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.sp-module + .sp-module {
  margin-top: 0 !important;
}

/* =========================================================
   23. HOMEPAGE FINETUNING
   Hero, homepage-kaarten, CTA-blokken en admin edit-iconen.
   ========================================================= */

/* Hero/foto bovenaan groter en sterker */
body.home #sp-title img {
  height: clamp(360px, 42vw, 650px) !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Donkere overlay boven hero indien module/slider overlay gebruikt */
body.home #sp-title,
body.home .sp-page-title,
body.home .sppb-section.hero,
body.home .sppb-addon-single-image-container {
  position: relative;
}

body.home #sp-title::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(28,43,71,0.78) 0%,
    rgba(28,43,71,0.48) 45%,
    rgba(28,43,71,0.18) 100%
  );
  pointer-events: none;
}

/* Tekst in hero beter leesbaar */
body.home #sp-title h1,
body.home #sp-title h2,
body.home #sp-title h3,
body.home #sp-title p {
  color: #fff !important;
  text-shadow: 0 3px 14px rgba(0,0,0,0.45);
}

/* Minder witte ruimte onder hero */
body.home #sp-main-body {
  padding-top: 30px !important;
}

/* Homepage content mooier centreren */
body.home #sp-main-body > .container {
  max-width: 1180px !important;
}

/* Algemene homepage kaarten */
body.home .sp-module,
body.home .item-page,
body.home .article,
body.home .blog-featured {
  background: rgba(255,255,255,0.82) !important;
  border: 1px solid rgba(44,44,42,0.10) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(28,43,71,0.08) !important;
}

/* Featured label verbergen */
body.home .badge,
body.home .label,
body.home .featured,
body.home .article-info .category-name {
  display: none !important;
}

/* Bewerken-link minder storend voor admins */
body.home .edit-icon,
body.home .icons,
body.home .article-can-edit {
  opacity: 0.35;
  transition: 0.2s ease;
}

body.home .edit-icon:hover,
body.home .icons:hover,
body.home .article-can-edit:hover {
  opacity: 1;
}

/* CTA-balk homepage sterker maken */
body.home .mtc-home-cta,
body.home .custom.mtc-home-cta {
  background: var(--mtc-navy) !important;
  color: #fff !important;
  border-radius: 14px !important;
  padding: 26px 32px !important;
  box-shadow: 0 10px 28px rgba(28,43,71,0.18) !important;
}

body.home .mtc-home-cta h2,
body.home .mtc-home-cta h3,
body.home .mtc-home-cta p {
  color: #fff !important;
  border-left: none !important;
  padding-left: 0 !important;
  margin-bottom: 8px !important;
}

body.home .mtc-home-cta .btn {
  background: var(--mtc-gold) !important;
  border-color: var(--mtc-gold) !important;
  color: var(--mtc-navy) !important;
}

body.home .mtc-home-cta .btn:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--mtc-navy) !important;
}

/* Afbeeldingen in artikelen mooier */
body.home .item-page img,
body.home .article img {
  border-radius: 12px !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}

/* Mobiel */
@media (max-width: 768px) {
  body.home #sp-title img {
    height: 360px !important;
  }

  body.home #sp-title::after {
    background: rgba(28,43,71,0.68);
  }

  body.home #sp-main-body {
    padding-top: 20px !important;
  }

  body.home .mtc-home-cta {
    padding: 22px 18px !important;
    text-align: center;
  }
}
/* =========================================================
   24. HOMEPAGE BLOKKEN
   Zelfgemaakte homepage-secties: events, clublied, word lid.
   ========================================================= */

.mtc-home-wrapper {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 35px 15px !important;
}

.mtc-home-section {
  margin: 35px auto !important;
  padding: 38px 32px !important;
  background: #fff !important;
  border-radius: 18px !important;
  border: 1px solid rgba(44,44,42,.12) !important;
  box-shadow: 0 10px 28px rgba(28,43,71,.08) !important;
}

.mtc-section-header {
  text-align: center !important;
  margin-bottom: 28px !important;
}

.mtc-section-header span,
.mtc-song-text span,
.mtc-join span {
  display: block !important;
  color: #c8922a !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  margin-bottom: 8px !important;
}

.mtc-section-header h2,
.mtc-song-text h2,
.mtc-join h2 {
  color: #1c2b47 !important;
  border-left: none !important;
  padding-left: 0 !important;
  text-align: center !important;
}

.mtc-event-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
}

.mtc-event-card {
  display: flex !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 18px !important;
  background: #f5f3ef !important;
  border-radius: 14px !important;
}

.mtc-event-date {
  min-width: 64px !important;
  height: 64px !important;
  background: #1c2b47 !important;
  color: #fff !important;
  border-radius: 12px !important;
  text-align: center !important;
  padding-top: 8px !important;
}

.mtc-event-date strong {
  display: block !important;
  font-size: 24px !important;
  line-height: 1 !important;
  color: #c8922a !important;
}

.mtc-event-date span {
  font-size: 13px !important;
  text-transform: uppercase !important;
  color: #fff !important;
}

.mtc-event-card h3 {
  font-size: 18px !important;
  margin: 0 0 4px !important;
  border-left: none !important;
  padding-left: 0 !important;
  text-align: left !important;
}

.mtc-event-card p {
  margin: 0 !important;
}

.mtc-center {
  text-align: center !important;
  margin-top: 26px !important;
}

.mtc-song {
  display: grid !important;
  grid-template-columns: 320px 1fr !important;
  gap: 34px !important;
  align-items: center !important;
}

.mtc-song-image img {
  width: 100% !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
}

.mtc-song-text h2 {
  text-align: left !important;
}

.mtc-join {
  text-align: center !important;
  background: linear-gradient(135deg,#1c2b47,#243558) !important;
  color: #fff !important;
}

.mtc-join h2,
.mtc-join p {
  color: #fff !important;
}

.mtc-benefits {
  display: grid !important;
  grid-template-columns: repeat(4,1fr) !important;
  gap: 14px !important;
  margin: 28px 0 !important;
}

.mtc-benefits div {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
  padding: 18px 10px !important;
  font-size: 28px !important;
}

.mtc-benefits strong {
  display: block !important;
  margin-top: 8px !important;
  font-size: 14px !important;
  color: #fff !important;
}

.mtc-btn {
  display: inline-block !important;
  background: #c8922a !important;
  color: #1c2b47 !important;
  padding: 10px 28px !important;
  border-radius: 7px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.mtc-btn:hover {
  background: #1c2b47 !important;
  color: #fff !important;
}

.mtc-join .mtc-btn:hover {
  background: #fff !important;
  color: #1c2b47 !important;
}

body.home .badge,
body.home .label,
body.home .featured {
  display: none !important;
}

@media(max-width:900px) {
  .mtc-event-grid,
  .mtc-benefits,
  .mtc-song {
    grid-template-columns: 1fr !important;
  }

  .mtc-song {
    text-align: center !important;
  }

  .mtc-song-text h2 {
    text-align: center !important;
  }

  .mtc-song-image {
    max-width: 280px !important;
    margin: 0 auto !important;
  }
}

/* =========================================================
   25. HOMEPAGE JEVENTS KAARTEN
   Drie kalenderkaartjes op de homepage.
   ========================================================= */
.mtc-jevents-home table.mod_events_latest_table {
  width: 100% !important;
  border: none !important;
  border-collapse: separate !important;
}

.mtc-jevents-home table.mod_events_latest_table tbody {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
  width: 100% !important;
}

.mtc-jevents-home tr.mtc-jevent-row,
.mtc-jevents-home tr.jevrow0,
.mtc-jevents-home tr.jevrow1 {
  display: block !important;
  width: 100% !important;
}

.mtc-jevents-home td.mtc-jevent-card,
.mtc-jevents-home td.mod_events_latest,
.mtc-jevents-home td.mod_events_latest_first {
  display: block !important;
  width: 100% !important;
  min-height: 130px !important;
  padding: 18px !important;
  text-align: left !important;
  background: #f5f3ef !important;
  border: none !important;
  border-left: 5px solid #c8922a !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 18px rgba(28,43,71,.08) !important;
}

.mtc-jevents-home .mtc-jevent-date {
  display: inline-block !important;
  margin-bottom: 12px !important;
  padding: 7px 12px !important;
  background: #1c2b47 !important;
  color: #c8922a !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

.mtc-jevents-home .mtc-jevent-title,
.mtc-jevents-home .mtc-jevent-title a {
  color: #1c2b47 !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
}

.mtc-jevents-home .mtc-jevent-title a:hover {
  color: #c8922a !important;
  text-decoration: none !important;
}

@media(max-width:900px) {
  .mtc-jevents-home table.mod_events_latest_table tbody {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   26. SPONSORS EN LEDENVOORDELEN CARROUSEL
   Automatisch scrollende sponsor- en voordelenbalken.
   Pauzeert bij hover.
   ========================================================= */
.mtc-footer-sponsors,
.mtc-footer-voordelen {
  width: 100% !important;
  max-width: 100% !important;
}

.mtc-sponsor-marquee {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

.mtc-sponsor-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 18px !important;
  width: max-content !important;
  animation: mtcSponsorScroll 120s linear infinite !important;
  will-change: transform !important;
}

.mtc-sponsor-marquee:hover .mtc-sponsor-track {
  animation-play-state: paused !important;
}

.mtc-sponsor-marquee-item {
  flex: 0 0 180px !important;
  height: 95px !important;
  background: #fff !important;
  border: 1px solid rgba(44,44,42,0.12) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 16px rgba(28,43,71,0.08) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

.mtc-sponsor-marquee-item:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 10px 22px rgba(28,43,71,0.14) !important;
}

.mtc-sponsor-marquee-item img {
  max-width: 100% !important;
  max-height: 72px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

@keyframes mtcSponsorScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.mtc-sponsor-marquee::before,
.mtc-sponsor-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  width: 45px;
  height: 100%;
  z-index: 5;
  pointer-events: none !important;
}

.mtc-sponsor-marquee::before {
  left: 0;
  background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0) 100%);
}

.mtc-sponsor-marquee::after {
  right: 0;
  background: linear-gradient(to left, #fff 0%, rgba(255,255,255,0) 100%);
}

/* Modulekaarten in bottom/footer */
#sp-bottom .sp-module {
  background: #fff !important;
  border-radius: 0 !important;
  border: none !important;
  padding: 22px 26px !important;
  overflow: hidden !important;
}

#sp-bottom .mtc-sponsor-marquee {
  max-width: 980px !important;
  margin: 0 auto !important;
}

/* Titels in bottommodules: sponsors en ledenvoordelen */
#sp-bottom .mtc-footer-benefits-header {
  height: 58px !important;
  min-height: 58px !important;
  margin: 0 0 12px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

#sp-bottom .mtc-section-eyebrow {
  display: block !important;
  margin: 0 0 7px 0 !important;
  color: var(--mtc-gold) !important;
  font-family: 'Work Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
}

#sp-bottom .mtc-footer-benefits-header h3 {
  margin: 0 !important;
  padding: 0 !important;
  border-left: none !important;
  color: var(--mtc-navy) !important;
  font-family: Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: 1px !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

#sp-bottom .mtc-footer-benefits-header p {
  display: none !important;
}

/* Compacte weergave voor sponsors en ledenvoordelen onderaan */
#sp-bottom .mtc-sponsor-marquee-item {
  flex: 0 0 130px !important;
  height: 70px !important;
  padding: 8px !important;
}

#sp-bottom .mtc-sponsor-marquee-item img {
  max-height: 52px !important;
}

/* Homepage sponsors groter houden */
body.view-featured .mtc-footer-sponsors .mtc-sponsor-marquee-item,
body.home .mtc-footer-sponsors .mtc-sponsor-marquee-item,
body.homepage .mtc-footer-sponsors .mtc-sponsor-marquee-item {
  flex: 0 0 180px !important;
  height: 95px !important;
  padding: 12px !important;
}

body.view-featured .mtc-footer-sponsors .mtc-sponsor-marquee-item img,
body.home .mtc-footer-sponsors .mtc-sponsor-marquee-item img,
body.homepage .mtc-footer-sponsors .mtc-sponsor-marquee-item img {
  max-height: 72px !important;
}

.mtc-sponsor-empty {
  text-align: center !important;
  color: #1c2b47 !important;
  font-weight: 600 !important;
  margin: 10px 0 !important;
}

@media(max-width: 768px) {
  .mtc-sponsor-marquee-item {
    flex-basis: 145px !important;
    height: 82px !important;
  }

  #sp-bottom .mtc-sponsor-marquee-item,
  .mtc-footer-voordelen .mtc-sponsor-marquee-item {
    flex-basis: 115px !important;
    height: 65px !important;
  }

  #sp-bottom .sp-module {
    padding: 18px 16px !important;
  }
}

/* Bottom layout wanneer maar één kolom actief is */
#sp-bottom .row {
    justify-content: center;
}

#sp-bottom .col-lg-6:only-child,
#sp-bottom .col-md-6:only-child {
    flex: 0 0 100%;
    max-width: 100%;
}
#sp-logo,
.sp-logo,
#sp-logo a,
.sp-logo a,
#sp-logo .logo,
.sp-logo .logo {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

#sp-logo img,
.sp-logo img {
    background: transparent !important;
}
/* Bottommodules: sponsors en voordelen exact dezelfde kaart-layout */
#sp-bottom .mtc-footer-sponsors,
#sp-bottom .mtc-footer-voordelen {
  min-height: 150px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

#sp-bottom .mtc-footer-sponsors .mtc-sponsor-marquee,
#sp-bottom .mtc-footer-voordelen .mtc-sponsor-marquee {
  margin-top: 0 !important;
}

/* Op home staat de sponsorsmodule in de contentkaart: geen extra moduleheader via PHP */
body.view-featured .mtc-footer-sponsors .mtc-footer-benefits-header,
body.home .mtc-footer-sponsors .mtc-footer-benefits-header,
body.homepage .mtc-footer-sponsors .mtc-footer-benefits-header {
  display: none !important;
}

@media(max-width: 768px) {
  #sp-bottom .mtc-footer-benefits-header {
    height: auto !important;
    min-height: 44px !important;
    margin-bottom: 10px !important;
  }

  #sp-bottom .mtc-footer-benefits-header h3 {
    font-size: 15px !important;
  }

  #sp-bottom .mtc-section-eyebrow {
    font-size: 11px !important;
    letter-spacing: 2px !important;
  }
}

/* =========================================================
   27. LOGO DEFINITIEVE FIX
   Verwijdert witte achtergrond/rand rond het transparante PNG-logo.
   ========================================================= */
#sp-logo,
#sp-logo.has-border,
#sp-logo .sp-column,
#sp-logo .logo,
#sp-logo .logo a,
#sp-logo a {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#sp-logo img.logo-image {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-height: 60px !important;
    width: auto !important;
}
/* =========================================================
   28. FOOTER - MTC VLAANDEREN
   Copyrightbalk onderaan de site.
   Donkerblauwe achtergrond, gecentreerde tekst, geen wit kader.
   ========================================================= */

#sp-footer {
    background: var(--mtc-navy2) !important;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 12px 0;
}

#sp-footer .container,
#sp-footer .container-inner,
#sp-footer .row,
#sp-footer .col,
#sp-footer .sp-column,
#sp-footer .sp-module,
#sp-footer .sp-module-content,
#sp-footer .custom {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Dit centreert ALLES echt */
#sp-footer .container-inner {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Copyright tekst */
#sp-footer,
#sp-footer p,
#sp-footer span,
#sp-footer a {
    color: rgba(255,255,255,0.65) !important;
    font-size: 14px;
    text-align: center !important;
    text-decoration: none;
    margin: 0 !important;
}

#sp-footer a:hover {
    color: var(--mtc-gold) !important;
}

/* =========================================================
   29. HOOFDMENU - PIJLTJES EN DROPDOWN LEESBAARHEID
   Herstelt de pijltjes naast menu-items en maakt dropdowns leesbaar.
   Deze versie gebruikt CSS-driehoekjes i.p.v. FontAwesome/unicode.
   Daardoor blijven de pijltjes stabiel en komen ze niet boven de menutekst te staan.
   ========================================================= */

/* Oude/template-pseudo-iconen eerst neutraliseren zodat er geen pijltjes boven de tekst verschijnen */
.sp-megamenu-parent > li.sp-has-child > a::before,
.sp-megamenu-parent > li.sp-has-child > span::before {
  content: none !important;
  display: none !important;
}

/* Hoofdmenu-items met submenu: tekst en pijltje netjes op één lijn */
.sp-megamenu-parent > li.sp-has-child > a,
.sp-megamenu-parent > li.sp-has-child > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  position: relative !important;
}

/* Pijltje omlaag bij hoofdmenu-items met submenu */
.sp-megamenu-parent > li.sp-has-child > a::after,
.sp-megamenu-parent > li.sp-has-child > span::after {
  content: "" !important;
  display: inline-block !important;
  position: static !important;
  width: 0 !important;
  height: 0 !important;
  margin: 1px 0 0 0 !important;
  padding: 0 !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 5px solid rgba(255,255,255,0.86) !important;
  line-height: 0 !important;
  vertical-align: middle !important;
  transform: none !important;
  opacity: 1 !important;
  font-size: 0 !important;
  font-family: inherit !important;
}

/* Hover/actief: pijltje iets duidelijker */
.sp-megamenu-parent > li.sp-has-child:hover > a::after,
.sp-megamenu-parent > li.sp-has-child:hover > span::after,
.sp-megamenu-parent > li.sp-has-child.active > a::after,
.sp-megamenu-parent > li.sp-has-child.active > span::after {
  border-top-color: #ffffff !important;
}

/* Eventuele template-iconen dubbelop verbergen */
.sp-megamenu-parent > li.sp-has-child > a .menu-toggler,
.sp-megamenu-parent > li.sp-has-child > span .menu-toggler,
.sp-megamenu-parent > li.sp-has-child > a .fa,
.sp-megamenu-parent > li.sp-has-child > span .fa {
  display: none !important;
}

/* Dropdown achtergrond */
.sp-megamenu-parent .sp-dropdown,
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  background: var(--mtc-navy2) !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25) !important;
}

/* Dropdown links */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > span {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  color: rgba(255,255,255,0.86) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 10px 18px !important;
  text-decoration: none !important;
}

/* Hover in dropdown */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > span:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.06) !important;
  text-decoration: none !important;
}

/* Actieve dropdown link */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > span {
  color: var(--mtc-gold) !important;
}

/* Dropdown-items met achterliggend submenu: pijltje naar rechts */
.sp-megamenu-parent .sp-dropdown li.sp-has-child > a::after,
.sp-megamenu-parent .sp-dropdown li.sp-has-child > span::after,
.sp-megamenu-parent .sp-dropdown .separator > a::after,
.sp-megamenu-parent .sp-dropdown .separator > span::after,
.sp-megamenu-parent .sp-dropdown .sp-menu-item-separator > a::after,
.sp-megamenu-parent .sp-dropdown .sp-menu-item-separator > span::after {
  content: "" !important;
  flex: 0 0 auto !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 12px !important;
  border-top: 5px solid transparent !important;
  border-bottom: 5px solid transparent !important;
  border-left: 6px solid var(--mtc-gold) !important;
  transform: none !important;
  font-size: 0 !important;
}

/* Separatoren / categorieën in dropdown duidelijker maken */
.sp-megamenu-parent .sp-dropdown .separator > a,
.sp-megamenu-parent .sp-dropdown .separator > span,
.sp-megamenu-parent .sp-dropdown .sp-menu-item-separator > a,
.sp-megamenu-parent .sp-dropdown .sp-menu-item-separator > span {
  color: #ffffff !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  border-top: 1px solid rgba(255,255,255,0.10) !important;
  margin-top: 6px !important;
  padding-top: 12px !important;
  cursor: default !important;
}

/* Kleine beweging van het rechterpijltje bij hover */
.sp-megamenu-parent .sp-dropdown li.sp-has-child:hover > a::after,
.sp-megamenu-parent .sp-dropdown li.sp-has-child:hover > span::after,
.sp-megamenu-parent .sp-dropdown .separator:hover > a::after,
.sp-megamenu-parent .sp-dropdown .separator:hover > span::after,
.sp-megamenu-parent .sp-dropdown .sp-menu-item-separator:hover > a::after,
.sp-megamenu-parent .sp-dropdown .sp-menu-item-separator:hover > span::after {
  transform: translateX(3px) !important;
}


/* =========================================================
   30. HOMEPAGE - GRAAFSCHAPSRIT 2026
   Witte eventkaart met affiche links en praktische info rechts.
   ========================================================= */

.mtc-graafschapsrit-card {
  max-width: 1320px;
  margin: 48px auto;
  padding: 42px;
  background: #fff;
  border-top: 6px solid var(--mtc-gold);
  border-radius: 20px;
  box-shadow: 0 18px 45px rgba(0,0,0,.08);
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 42px;
  align-items: flex-start;
}

.mtc-graafschapsrit-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(0,0,0,.18);
  transition: transform .3s ease;
}

.mtc-graafschapsrit-image img:hover {
  transform: scale(1.02);
}

.mtc-graafschapsrit-content h2 {
  color: var(--mtc-navy) !important;
  font-size: 2.4rem;
  margin: 6px 0 22px;
  border-left: none !important;
  padding-left: 0 !important;
}

.mtc-graafschapsrit-date {
  color: var(--mtc-gold);
  font-weight: 800;
  font-size: 1.15rem;
  margin-bottom: 16px;
}

.mtc-graafschapsrit-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin: 24px 0;
}

.mtc-graafschapsrit-info span {
  background: #f5f3ef;
  border-left: 4px solid var(--mtc-gold);
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 600;
  color: var(--mtc-navy);
  display: flex;
  align-items: center;
  transition: all .25s ease;
}

.mtc-graafschapsrit-info span:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

.mtc-graafschapsrit-button {
  display: inline-block;
  background: var(--mtc-gold);
  color: var(--mtc-navy) !important;
  padding: 16px 34px;
  font-size: 18px;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none !important;
  transition: all .25s ease;
}

.mtc-graafschapsrit-button:hover {
  background: #b98018;
  color: #fff !important;
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .mtc-graafschapsrit-card {
    grid-template-columns: 1fr;
    padding: 28px;
    margin: 32px 16px;
  }

  .mtc-graafschapsrit-info {
    grid-template-columns: 1fr;
  }

  .mtc-graafschapsrit-content h2 {
    font-size: 2rem;
  }
}



/* =========================================================
   31. FINAL MASTER POLISH
   Laatste visuele afwerking voor homepage, footer en modules.
   Deze regels staan bewust onderaan zodat ze oudere template-CSS
   netjes overschrijven zonder bestaande functionaliteit te breken.
   ========================================================= */

/* Alle grote homepage-kaarten exact dezelfde visuele basis */
body.home .mtc-home-wrapper,
body.view-featured .mtc-home-wrapper,
.mtc-home-wrapper {
  max-width: 1320px !important;
}

body.home .mtc-home-section,
body.view-featured .mtc-home-section,
body.home .mtc-graafschapsrit-card,
body.view-featured .mtc-graafschapsrit-card {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 45px rgba(28,43,71,.08) !important;
}

/* Rustigere verticale afstand tussen homepageblokken */
body.home .mtc-home-section,
body.view-featured .mtc-home-section {
  margin-top: 56px !important;
  margin-bottom: 56px !important;
}

body.home .mtc-graafschapsrit-card,
body.view-featured .mtc-graafschapsrit-card {
  margin-top: 56px !important;
  margin-bottom: 56px !important;
}

/* Hero: tekst beter leesbaar zonder de foto te zwaar te maken */
body.home .mtc-hero::before,
body.view-featured .mtc-hero::before,
body.home .sppb-section.mtc-hero::before,
body.view-featured .sppb-section.mtc-hero::before {
  background: linear-gradient(
    90deg,
    rgba(20,32,55,.72) 0%,
    rgba(20,32,55,.55) 42%,
    rgba(20,32,55,.34) 100%
  ) !important;
}

/* Sponsors op de homepage net iets krachtiger zichtbaar */
body.home .mtc-footer-sponsors .mtc-sponsor-marquee-item,
body.view-featured .mtc-footer-sponsors .mtc-sponsor-marquee-item,
body.homepage .mtc-footer-sponsors .mtc-sponsor-marquee-item {
  flex-basis: 190px !important;
  height: 100px !important;
  padding: 13px !important;
}

body.home .mtc-footer-sponsors .mtc-sponsor-marquee-item img,
body.view-featured .mtc-footer-sponsors .mtc-sponsor-marquee-item img,
body.homepage .mtc-footer-sponsors .mtc-sponsor-marquee-item img {
  max-height: 76px !important;
}

/* Graafschapsrit: perfecte balans tussen affiche en tekst */
.mtc-graafschapsrit-card {
  align-items: center !important;
  border-top: 6px solid var(--mtc-gold) !important;
}

.mtc-graafschapsrit-image {
  align-self: center !important;
}

.mtc-graafschapsrit-content {
  align-self: center !important;
}

.mtc-graafschapsrit-button {
  margin-top: 2px !important;
}

/* Organiseer-rit kaart: minder leeg en visueel meer in balans */
.mtc-home-section.mtc-organiseer,
.mtc-home-section.mtc-organiseer-rit,
.mtc-home-section:has(.mtc-btn[href*="creativecontactform"]) {
  position: relative !important;
  overflow: hidden !important;
}

.mtc-home-section.mtc-organiseer::before,
.mtc-home-section.mtc-organiseer-rit::before,
.mtc-home-section:has(.mtc-btn[href*="creativecontactform"])::before {
  content: "🏍️";
  position: absolute;
  left: 34px;
  top: 28px;
  font-size: 42px;
  opacity: .08;
  pointer-events: none;
}

/* Footer: definitieve gecentreerde copyrightbalk */
#sp-footer {
  background: var(--mtc-navy2) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  padding: 13px 0 !important;
  text-align: center !important;
}

#sp-footer .container,
#sp-footer .container-inner,
#sp-footer .row,
#sp-footer .col,
#sp-footer .sp-column,
#sp-footer .sp-module,
#sp-footer .sp-module-content,
#sp-footer .custom {
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  text-align: center !important;
}

#sp-footer p,
#sp-footer span,
#sp-footer a {
  color: rgba(255,255,255,.66) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  text-align: center !important;
}

/* Kleine schermen: homepage strak en leesbaar houden */
@media (max-width: 900px) {
  body.home .mtc-home-section,
  body.view-featured .mtc-home-section,
  body.home .mtc-graafschapsrit-card,
  body.view-featured .mtc-graafschapsrit-card {
    margin-top: 34px !important;
    margin-bottom: 34px !important;
  }

  body.home .mtc-footer-sponsors .mtc-sponsor-marquee-item,
  body.view-featured .mtc-footer-sponsors .mtc-sponsor-marquee-item,
  body.homepage .mtc-footer-sponsors .mtc-sponsor-marquee-item {
    flex-basis: 150px !important;
    height: 84px !important;
  }
}

/* =========================================================
   EINDE CUSTOM.CSS v3.0 FINAL MASTER
   Definitieve layoutversie voor MTC Vlaanderen.
   ========================================================= */