:root {
--color-brand-black: #222;

--color-brand-blue: #004b7d;
--color-brand-blue-secondary: #637492;
--color-brand-blue-tertiary: #cddeec;
--color-brand-blue-light: #e6f4ff;
--color-brand-blue-extra-light: #f5fbff;

--color-brand-orange: #fa6400;
--color-brand-orange-light: #ffe2b1;

--color-brand-green: #4bd316;
--color-brand-green-light: #d3fa80;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
    font-family: "swiss";
    src: url("fonts/swiss.woff2");
    font-weight: normal; /* explicit use of bold files at normal font-weight */
}

@font-face {
    font-family: "swiss";
    src: url("fonts/swiss.woff2");
    font-weight: bold;
}
/*
@font-face {
    font-family: "montserrat";
    src: url("fonts/montserrat.woff2");
    font-weight: normal;
}
@font-face {
    font-family: "montserrat";
    src: url("fonts/montserrat.woff2");
    font-weight: bold;
}
    */

/* Algemene reset en basisinstellingen */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
  
	color: var(--color-brand-blue);
    line-height: 1.6;
    color: #333;
}

/* Container instelling */
.container {
    display: grid;
    grid-template-columns: 12% 1fr 12%;
    gap: 36px;
    max-width: 100%;
}

@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* Header stijl */
.header {
	margin-top:10px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 36px;
    align-items: start;
    grid-column: 2 / 3;
    padding: 20px 0;
}

.header-content {
    grid-column: 1 / 2;
	padding: 0 100px 0 0;
}

.header-image {
    grid-column: 2 / 3;
    text-align: center;
}

.header-image img {
    max-width: 100%;
    height: auto;
}

.header-image .image-caption {
    display: block;
    font-size: 0.8rem;
    color: #666;
    font-style: italic;
}

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

    .header-content {
        order: 2;
        text-align: left;
        grid-column: 1;
		padding-right:0px;
    }

    .header-image {
        order: 1;
        grid-column: 1;
        max-height: 200px;
        overflow: hidden;
    }

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

/* Menu stijl */
.menu{
    grid-template-columns: 1fr;
    grid-column: 2 / 3;
    background-color: var(--color-brand-blue);
    /* border-bottom: 1px solid var(--color-brand-blue); */
    padding:10px;
    display: flex;
    justify-content: flex-end;
}
.menu a{
    color: white;
    text-decoration: none;
}
.menu a:hover{
    color: var(--color-brand-blue-secondary);
}
.menu ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
}
.menu li{
    margin-right: 30px;
}

/* Hoofdinhoud stijl */
.main-content {
    /* display: grid;
    grid-template-columns: 1fr 300px;
    gap: 36px;
    grid-column: 2 / 3;
    padding: 20px 0;    */
    display: grid;
    grid-column: 2 / 3;
    grid-template-columns: 1fr 300px;/* of je gewenste verdeling */
    gap: 36px;
    /* Zorg dat rijen niet automatisch groeien */
    grid-auto-rows: min-content; 
}

.agenda-content {
    display: grid;
    grid-template-columns: 1fr;
    grid-column: 2 / 3;
    padding: 20px 0;
}

.initiatieven {
    grid-column: 1 / 2;
    
}
.initiatieven-container, .agenda-container{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.projecten h2{
    margin-bottom:20px;
}

.agenda {
    kgrid-column: 2 / 3;
    background-color: var(--color-brand-blue-light);
    padding:20px;

      /* Zorg dat de kolom de volledige hoogte gebruikt */
  height: 100%;
  /* Gebruik flexbox voor verticale layout */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

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

    .projecten, .agenda {
        grid-column: 1;
    }
}

/* Footer stijl */
.footer {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 36px;
    grid-column: 2 / 3;
    padding: 20px 0 0;
    align-items: center;
    border-top:70px solid var(--color-brand-blue);
    border-bottom:30px solid white;
}

.contact {
    grid-column: 1 / 2;    
}

.footer-logo {
    text-align: center;
}

.logo1, .logo2 {
    grid-column: span 1;
}

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

/* overige elementen */

h1{
	font-family: swiss;
	color: var(--color-brand-orange);	
}

h2{
	font-family: swiss;
	color: var(--color-brand-blue);
}

p{
	padding-top:20px;
}

.nieuwsbriefform {
	padding-top:20px;
}

.agenda-item{
	--padding-bottom:20px;
	margin: 25px 25px 10px 0px;
}
.agenda-items{
  /* Items vullen beschikbare ruimte */
  flex: 1;
  /* Zorgt voor scrolling als items niet passen */
  overflow-y: auto;
  min-height: 0;
}

.agenda-datum{
	color: var(--color-brand-green);
}

.agenda-titel{
    font-size: 0.9rem;
	font-weight:bold;
}
.agenda-activiteit{
	font-size: 0.8rem;
    font-style: italic;
}
.agenda-tijd, .agenda-locatie{
	font-size: 0.8rem;
}



.initiative-block, .agenda-block {    
    border: 1px solid var(--color-brand-blue-tertiary);   
    border-radius: 10px;
    padding: 10px;
    flex-wrap: wrap;
    flex: 1 1 300px; /* Flexibele groei, maar met een basis van 300px */
    max-width:320px;
    display: flex;
    flex-direction: column;
}
.initiative-image {
    max-width: 100%;    
    height: auto;
}

.initiatief-locatie{
	padding-left:40px;
	height:25px;
	font-size: 12px;
	color: var(--color-brand-blue-secondary);
	background-image: url("images/location.png"); 
	background-size:18px 18px;
	background-repeat: no-repeat;
	/* background-position-x: 5px; */ 
}

.initiatief-info{
	padding-left:40px;
	height:25px;
	font-size: 12px;
	color: var(--color-brand-blue-secondary);
	background-image: url("images/information16.png"); 
	background-size:18px 18px;
	background-repeat: no-repeat;
	/* background-position-x: 5px; */
}

.initiatief-onder{
    margin-top:auto;
    padding-top:10px;
}

.initiatief-titel{	
	background-color: rgba(255,255,255, 0.85);
    font-family:swiss;
	color: var(--color-brand-orange);
	font-weight:bold;
    padding-bottom:8px;
}

.initiatief-hoofdactiviteit{
    padding-bottom:8px;
	font-size: 14px;
}

.initiatief img{
    width:250px;
}


.knop {
    display: inline-block; /* Maakt het element inline-block om als een knop te functioneren */
    padding: 4px 8px; /* Opvulling binnen de knop */
    border: 2px solid var(--color-brand-green); /* Rand om de knop heen */
    border-radius: 5px; /* Afgeronde hoeken */
    background-color: transparent; /* Achtergrondkleur van de knop */
    color: var(--color-brand-green); /* Kleur van de tekst */
    text-align: center; /* Centreert de tekst binnen de knop */
    font-size: 0.9rem; /* Grootte van het lettertype */
    cursor: pointer; /* Verandert de cursor naar een handje bij hover */
    transition: background-color 0.3s, color 0.3s; /* Voegt een soepele overgang toe bij hover */
}

.knop:hover {
    background-color: var(--color-brand-green); /* Achtergrondkleur bij hover */
    color: white;
}

.knop a{
    text-decoration: none;
    color: var(--color-brand-green);
}
.knop a:hover{
    text-decoration: none;
    color: white; /* Tekstkleur bij hover */
}
.contactform{
    margin-top:20px;
    border:1px solid var(--color-brand-orange);
    padding:10px;
    border-radius:10px;
    width:80%;
}
.contactform table{
    width:80%;
}
.label{
    width:30%;
}
.veld{
    width:70%;
}
.contactform input[type=text],textarea{
    width:80%;
}