/**================================================================
 * User overrides Joomla 6 t.b.v. 365DagenDuurzaam.
 * Basisbestand: template-min.css
 * ================================================================*/
/* =========================================================
   Fontdefinitie voor de gehele website
   ========================================================= */
@font-face 
 	{
 	font-family: 'bariol_regular-webfont';
 	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: local(''),
 	url('../fonts/bariol_regular-webfont.eot'), 												/* IE9 Compat Modes */
	url('../fonts/bariol_regular-webfont?#iefix') format('embedded-opentype'),		/* IE6-IE8 */
   url('../fonts/bariol_regular-webfont.woff2') format('woff2'), 						/* Super Modern Browsers */
   url('../fonts/bariol_regular-webfont.woff') format('woff'), 						/* Pretty Modern Browsers */
   url('../fonts/bariol_regular-webfont.ttf')  format('truetype'), 					/* Safari, Android, iOS */
   url('../fonts/bariol_regular-webfont.svg#svgFontName') format('svg'); 			/* Legacy iOS */
	} 
/*=======================================================================================*/

body{
	font-family: 'bariol_regular-webfont';	
	color: #3F0100; 							/* heel donkerrood  */
	background-color: #FBFCD3; 			/* lichtgeel */
	}
.container-header {
  background-color: #B41917;				/* diep rood  */
  background-image: none;
	}
.container-topbar {
  max-width: 1320px;
  min-height: 32px;
  margin-left: auto;
  margin-right: auto;
	}
/* .container-topbar ul.mod-menu.mod-list.nav { /* Links uitlijnen menu 'Inloggen' in top positie */
	display: block;
	float: left;  								
	padding-left: 0.2rem; /*
	} */
.container-topbar .mod-menu {				/* Links uitlijnen menu 'Inloggen' in top positie */
    display: flex;
    justify-content: flex-start;
    padding-left: 0.2rem;
}
.company-info {
	height: auto;
	width: 100%;
	}

.container-header .header-inner {
    display: flex;
    align-items: center;
}

.header-left,
.header-image-extra {
    flex: 0 0 auto;
}

.container-header .header-text {
    margin: 0 auto;
    text-align: center;
}
}
/* RECHTS */
.header-left,
.header-image-extra {
    flex: 0 0 auto;
    min-width: 10rem; /* iets subtieler dan 12rem */
}

/* =========================
   LOGO CONTAINER
========================= */
.navbar-brand {
    display: flex;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    align-items: center;
}

/* =========================
   LOGO AFBEELDING
========================= */

.navbar-brand img {
    height: calc(1.2 * clamp(5rem, 2.5rem + 6vw, 12rem));
    width: auto;
    display: block;
}
/* =========================
   Extra AFBEELDING rechts
========================= */
.container-header .header-image-extra img {
    display: block;
    margin-left: auto;
    max-width: 100%;
    height: calc(1.2 * clamp(5rem, 3rem + 6.5vw, 14rem));
}

.container-header .header-title {
    font-size: clamp(1.5rem, 1.1rem + 3vw, 5rem);
    color: white;
}

.container-header .header-subtitle {
    font-size: clamp(1.05rem, 0.85rem + 2.2vw, 3rem);
    color: white;
    opacity: 0.9;
}

.mod-menu .nav-item.item-101.active {  			/* Niet tonen menu-tem 'Home' op homepage */
    display: none;
	} 
.mod-menu > .nav-item {									/* Font-size van de menu-header buttons instellen */
	font-size:calc(0.8rem + .5vw);
	}
.mod-menu > .nav-item:has(ul) {						/* Font-size van de submenu-tekst instellen */
    font-size: calc(0.8rem + .5vw);
}

.container-component > :first-child {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  }

.container-nav {									/* Navigatie container, bevat hoofdmenu  */
	background-color: #3F0100; 				/* heel donkerrood  */
	width: 100%;
	}
.container-header .container-nav {  		/* Ruimte boven hoofdmenu instellen  */
	margin-top: 0.1rem;
	}

.container-header .mod-menu > .nav-item > .mod-menu__sub  /* Submenu niveau 1  */
	{ 
	color: #FFFFFF; 						/* wit */
/*	color: #FBFCD3; 						/* lichtgeel */
	background-color: #3F0100; 				/* heel donkerrood  */	
	}
nav.mod-breadcrumbs__wrapper {
	padding: 0.2rem 0rem 0,2rem 0rem;
	}
.container-component main {
margin-top: 0;
	}
.com-content-article {
	background-color: #ffffff;
	padding: 1rem 1rem 1rem 1rem; 		/* top right bottom left */
	}
p{
	font-size:calc(0.8rem + .5vw);
	color: #3F0100; 							/* heel donkerrood  */
	}
p img.floatright {
}
p.microfont {
	font-size: 1px;
	color: #ffffff;
}
ul li, ol li {
	font-size:calc(0.8rem + .5vw);
	}
a	{
	font-size:calc(0.8rem + .5vw);
	color: #B41917;    						/* Rode kleur uit logo */
	text-decoration: underline;
	}
a:active	{
	font-weight: 600;
	}
/*a:visited
	{
	font-size: 1.8vmin;
	font-weight: 400;
	color: #91706F;
	} */
a:hover {
	text-transform: none;
	text-decoration: blink;
	}
a.pathway {									/* Link naar homepage in breadcrumbs houdt standaard grootte! */
font-size: 100%;
	}
h1, h2, h3, h4, h5, h6 {
	font-family: 'bariol_regular-webfont';
  	color: #BC4024; 							/* bruin-rood  */
	}
 h1 {
	font-size:calc(1.2rem + 1.4vw);
	font-weight: 900;
}
 h2 {
	font-size:calc(0.9rem + .6vw);
	font-weight: 900;
}

/* =========================================================
   1. GLOBAL VERTICALE SPACING (HEADER → CONTENT FLOW)
   ========================================================= */

/* site-grid (Joomla main layout wrapper) */
.site-grid {
    margin-top: 0.2rem !important;
    padding-top: 0.2rem !important;
}

/* inner container */
.grid-child.container-component {
    margin-top: 0.2rem !important;
    padding-top: 0.2rem !important;
}

/* article wrapper */
.com-content-article.item-page {
    margin-top: 0.2rem !important;
    padding-top: 0.2rem !important;
}

/* blog layout wrapper */
.blog-layout-custom {
    margin-top: 0.2rem !important;
    padding-top: 0.2rem !important;
}

/* voorkom dubbele margin stacking */
.com-content-article > :first-child,
.blog-layout-custom > :first-child {
    margin-top: 0 !important;
}


/* =========================================================
   2. BREADCRUMBS (COMPACT + GRIJZE BAND)
   ========================================================= */

/* buitenste wrapper = visuele band */
nav.mod-breadcrumbs__wrapper {
    margin: 0.15rem 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: 0;
}

/* breadcrumb container (Bootstrap override) */
.breadcrumb {
    margin: 0 !important;
    padding: 0.15rem 0.75rem !important;
    background: transparent;
}

/* "U bevindt zich hier" regel */
.mod-breadcrumbs__here {
    margin: 0;
    padding: 0;
    opacity: 0.75;
}

/* breadcrumb items */
.breadcrumb-item {
    line-height: 1.3;
}

/* links */
.breadcrumb-item a {
    line-height: 1.3;
}
/*===============================================================================================
 Invoegen css voor indelen homepage:  
 HOMEPAGE BLOG LAYOUT - ITEMID 101 (STABLE FINAL)
  ===============================================================================================*/

/* 1. WITTE PAGINA (MINIMALE RAND) */
.itemid-101 .com-content-article {
    background-color: #ffffff;
    padding: 0.4rem;
    border-radius: 0.4rem;
}

/* 2. SECTIES */
.itemid-101 .blog-section {
    margin-bottom: 0.6rem;
}

/* 3. GRID - BOOTSTRAP LEIDEND */
.itemid-101 .row {
    --bs-gutter-x: 0.3rem;  /* ±60% minder ruimte */
    --bs-gutter-y: 0.3rem;
}

/* gelijke card hoogte */
.itemid-101 .row > [class*="col-"] {
    display: flex;
}

/* cards vullen kolom */
.itemid-101 .blog-card {
    width: 100%;
}

/* 🚨 BELANGRIJK: GEEN CENTRERING */
/* dus GEEN justify-content */
/* dus GEEN aangepaste col-6 */

/* 4. HERO */
.itemid-101 .blog-hero {
    padding: 1.2rem;
    margin-bottom: 0.6rem;
    background-color: #FFFFFF;

    box-shadow:
        0 0.3rem 0.8rem rgba(0,0,0,0.05),
        0 0.8rem 1.5rem rgba(0,0,0,0.08);
}

/* 5. CARDS */
.itemid-101 .blog-card {
    border-radius: 0.6rem;

    box-shadow:
        0 0.2rem 0.4rem rgba(0,0,0,0.05),
        0 0.6rem 1.2rem rgba(0,0,0,0.08);

    transition: all 0.2s ease;
}

.itemid-101 .blog-card:hover {
    transform: translateY(-0.15rem);

    box-shadow:
        0 0.4rem 0.8rem rgba(0,0,0,0.08),
        0 1rem 1.8rem rgba(0,0,0,0.12);
}

/* content */
.itemid-101 .card-body {
    padding: 1rem;
}

/* 6. FULL WIDTH BLOK */
.itemid-101 .blog-footer-block .blog-card {
    width: 100%;
}

/* 7. SAFETY */
.itemid-101 .container,
.itemid-101 .container-fluid,
.itemid-101 .container-component {
    max-width: 100% !important;
}
/*===============================================================================================
  AANPASSING TUSSENRUIMTE CARDS - GELIJK AAN BUITENRAND
===============================================================================================*/

/* minimale marge rond alle cards, gelijk aan buitenrand */
.itemid-101 .row > [class*="col-"] {
    padding-left: 0.15rem;  /* halve ruimte links */
    padding-right: 0.15rem; /* halve ruimte rechts */
}

/* compenseer binnen card zodat ze 100% van kolom vullen */
.itemid-101 .blog-card {
    width: 100%;
}
/*===============================================================================================
  Extra opmaak voor de links met subtiele schaduw
===============================================================================================*/

/* CTA Primary */
.blog-hero .cta-primary {
  display: inline-block;
  font-size: calc(0.9rem + 0.3vw);      /* responsive */
  font-weight: 700 !important;
  text-decoration: none !important;
  padding: calc(0.5rem + 0.2vw) calc(1rem + 0.3vw);	/* responsive padding */
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* subtiele schaduw */
  transition: all 0.3s ease, box-shadow 0.3s ease;
}

.blog-hero .cta-primary:hover {
  background-color: #B41917 !important;  /* diep rood hover */
  color: #ffffff !important;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25); /* iets sterker bij hover */
  transform: scale(1.05);      /* knop groeit 5% */
  transition: all 0.3s ease, transform 0.3s ease;
}

/* CTA Secondary */
.cta-secondary {
  display: inline-block;
  font-size: calc(0.9rem + 0.3vw); /* responsive fontgrootte */
  font-weight: 600;
  text-decoration: none !important;
  padding: calc(0.4rem + 0.2vw) calc(0.6rem + 0.3vw);	/* responsive padding */
  border-radius: 0.375rem; /* voeg dit toe voor afgeronde hoeken */
  box-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.2); /* subtiele box-shadow */
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.cta-secondary:hover {
  background-color: #B41917 !important; /* diep rood hover, zelfde als primary */
  color: #ffffff !important;
  box-shadow: 0.5px 0.5px 2px rgba(0,0,0,0.3); /* iets sterker bij hover */
  transform: scale(1.05);      /* knop groeit 5% */
  transition: all 0.3s ease, transform 0.3s ease;
}

/*===============================================================================================
  Alle links binnen cards opmaken met witte achtergrond en hero-look
===============================================================================================*/
.card-body a {
  display: inline-block;
  font-size: calc(0.85rem + 0.2vw);   /* responsive fontgrootte */
  font-weight: 600;                    /* zelfde als hero */
  text-decoration: none !important;
  border-radius: 0.375rem;             /* afgeronde hoeken */
  padding: calc(0.45rem + 0.2vw) calc(1rem + 0.3vw); /* responsive padding */
  box-shadow: 0 4px 6px rgba(0,0,0,0.15); /* subtiele schaduw */
  transition: all 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  background-color: #ffffff;           /* wit als basis */
}

/* Hover effect */
.card-body a:hover {
  background-color: #B41917 !important; /* hover dieprood */
  color: #ffffff !important;
  box-shadow: 0 6px 10px rgba(0,0,0,0.25);
  transform: scale(1.05);               /* lichte pop-out */
}
.card-body p {
    text-align: center; /* Centreren van de img tag binnen paragraaf op homepage - card-body */
}

/*===============================================================================================*/
/* Instellen van de footer   */
/*===============================================================================================*/

div#mod-custom110.mod-custom.custom h5,/* Website-module 'Voetnoot' */
div#mod-custom110.mod-custom.custom p,
div#mod-custom110.mod-custom.custom td {
	color: #ffffff;
	background-color: #022357;
	}
.footer 
	{
	background-color: #022357;				/* nachtblauw  */
	background-image: none;
	}
table.left-table {							/* Linker tabel in module 'voettekst'  */
	border: 1px solid #022357;
	width: 100%;
	}
table.left-table td {
	padding: 0.2rem 0.8rem 0.1rem 0.6rem; /* top right bottom left */
	text-align:left;
	}
/* table.left-table td p {
	margin-top:0;
	margin-bottom:0; */
	}
.left-table td.naw-titel {
	width: 40%;
}
.left-table td.naw-data {
	width: 60%;
}
table.right-table {							/* Rechter tabel in module 'voettekst'  */
	width: 100%;
	border: 1px solid #022357;
	}
table.right-table td {
	padding: 0.2rem 0.8rem 1.2rem 0.4rem; /* top right bottom left */
	}
/* Forceer gelijke font-size in de footer */
#mod-custom110 .table-wrapper table td,
#mod-custom110 .table-wrapper table td a,
#mod-custom110 .table-wrapper table td p {
    font-size: calc(0.8rem + 0.5vw) !important;
    line-height: 1.3 !important;
	}

/* Voor alle p's in de linker tabel */
table.left-table td p {
    margin: 0;             /* verwijder boven/onder marge */
    line-height: 1.3;      /* regelhoogte instellen */
}

/* Specifiek voor de inspringende regel */
/* Slimme oplossing: gebruik een span voor de inspringing */
table.left-table td p span.indent {
    display: inline-block;
    padding-left: 0.5em; /* bepaal zelf de inspringing */
}
/*===============================================================================================*/

/*===============================================================================================
   MEDIA QUERIES
  ===============================================================================================*/

/* -------------------------
   MOBILE
------------------------- */
@media (min-width: 320px) and (max-width: 639px) {

.header-image-extra {
    display: none;
	}

img.floatleft {
	float: left;
	height: auto;
	width: auto;
	max-width: 40%;
	padding: 0.6em 0.2em 0.4em 1em; /* top right bottom left */
	}
	
img.floatcenter {
	display: block; 
	margin-left: auto; 
	margin-right: auto;
	max-width: 94%;
	padding: 0.6em 1em 0.4em 1em; /* top right bottom left */
	}
	
img.floatright {
	float: right;
	height: auto;
	width: auto;
	max-width: 48%;
	padding: 0.6em 1em 0.4em 0.2em; /* top right bottom left */
	}

}
/* -------------------------
   SMALL TABLET
------------------------- */
@media (min-width: 640px) and (max-width: 812px) {

.header-image-extra {
    display: none;
	}

img.floatleft {
	float: left;
	height: auto;
	width: auto;
	max-width: 40%;
	padding: 0.6em 0.2em 0.4em 1em; /* top right bottom left */
	}
img.floatcenter {
	display: block; 
	margin-left: auto; 
	margin-right: auto;
	max-width: 94%;
	padding: 0.6em 1em 0.4em 1em; /* top right bottom left */
	}
img.floatright {
	float: right;
	height: auto;
	width: auto;
	max-width: 48%;
	padding: 0.6em 1em 0.4em 0.2em; /* top right bottom left */
	}

}
/* -------------------------
   TABLET
------------------------- */
@media (min-width: 813px) and (max-width: 1023.98px) {

img.floatleft {
	float: left;
	height: auto;
	width: auto;
	max-width: 40%;
	padding: 0.6em 0.2em 0.4em 1em; /* top right bottom left */
	}
	
img.floatcenter {
	display: block; 
	margin-left: auto; 
	margin-right: auto;
	max-width: 94%;
	padding: 0.6em 1em 0.4em 1em; /* top right bottom left */
	}
	
img.floatright {
	float: right;
	height: auto;
	width: auto;
	max-width: 48%;
	padding: 0.6em 1em 0.4em 0.2em; /* top right bottom left */
	}
	
}
/* -------------------------
   DESKTOP SMALL
------------------------- */
@media (min-width: 1024px) and (max-width: 1247.98px) {

img.floatleft {
	float: left;
	height: auto;
	width: auto;
	max-width: 40%;
	padding: 0.6em 0.2em 0.4em 1em; /* top right bottom left */
	}

img.floatcenter {
	display: block; 
	margin-left: auto; 
	margin-right: auto;
	max-width: 94%;
	padding: 0.6em 1em 0.4em 1em; /* top right bottom left */
	}

img.floatright {
	float: right;
	height: auto;
	width: auto;
	max-width: 48%;
	padding: 0.6em 1em 0.4em 0.2em; /* top right bottom left */
	}

}
/* -------------------------
   DESKTOP LARGE
------------------------- */
@media (width >= 1248px) {

img.floatleft {
	float: left;
	margin:0;
	height: auto;
	width: auto;
	max-width: 48%;
	padding: 0.6em 0.4em 0.4em 1em; /* top right bottom left */
	}
	
img.floatcenter {
    display: block;
    margin: 0 auto;       /* horizontaal centreren */
    max-width: 94%;       /* voorkom dat afbeelding te groot wordt */
    padding: 0.3em 0.1em; /* symmetrische padding */
	}
	
img.floatright {
	float: right;
	margin:0;
	height: auto;
	width: auto;
	max-width: 48%;
	padding: 0.2em 0.4em 0.2em 0.4em; /* top right bottom left */
	}

}