/*
Theme Name: Bootscore
Theme URI: https://bootscore.me/
Author: Bootscore
Author URI: https://bootscore.me
Description: Flexible Bootstrap WordPress starter-theme for developers with full WooCommerce support. <a href="https://bootscore.me/category/documentation/" target="_blank">Documentation</a>
Version: 6.0.0-beta1
Requires at least: 5.0
Tested up to: 6.5.2
Requires PHP: 7.4
License: MIT License
License URI: https://github.com/bootscore/bootscore/blob/main/LICENSE
Text Domain: bootscore
Tags: featured-images, threaded-comments, translation-ready

Use this theme to make something cool, have fun, and share what you've learned with others.

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

/* 
All style editing is done via /assets/scss/_bootscore-custom.scss
*/

.card {
    border: none;
    border-radius: 10px;
    transition: transform 0.3s;
}

.card:hover {
    transform: scale(1.05);
}

.card-img-top {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.card-footer {
    background-color: transparent;
    border-top: none;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
}

.bg-green {
    background-color: rgb(58,138,55) !important; /* Bootstrap's groen of je eigen groene kleur */
}

.text-white {
    color: #ffffff !important;
}

.contact-info p {
    margin-bottom: 0;
    color: #ffffff;
}

.nav .nav-item .nav-link {
    color: #ffffff !important;
}

.nav .nav-item .nav-link:hover {
    color: #f8f9fa; /* Lichtere kleur bij hover */
}

.info-block h1, .info-block p {
    margin: 0;
    color: #fff;
}

.card {
    border: none;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card-img-top {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 200px;
    object-fit: cover;
}

.card-title {
    font-size: 1.25rem;
    font-weight: bold;
}

.card-text {
    font-size: 1rem;
    color: #666;
}

/* Pop-up achtergrond */
.popup-overlay {
    position: fixed;
    top: 10px;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Pop-up venster */
.popup-content {
    background: #fff;
    padding: 20px;
	margin: 20px;
    border-radius: 10px;
    width: 100%;
    max-width: 450px;
    position: relative;
}

/* Sluitknop */
.popup-content .close-btn {
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
}

/* Basisstijl voor het contactformulier */
.wpcf7-form {
    display: flex;
    flex-direction: column;
	margin-top: 10px;
    gap: 25px;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 600px) {
  .wpcf7-form {
	 margin-top: 30px; 
  }
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

.wpcf7-form input[type="textarea"] {
	 width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="textarea"]:focus,
.wpcf7-form textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.wpcf7-form input[type="submit"] {
    padding: 10px 10px;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s;
}

.wpcf7-form input[type="submit"]:hover {
    background: #0056b3;
}

/* Pop-up inhoud */
.popup-content {
    padding: 30px;
    background: #f7f7f7;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Pop-up sluiten */
.popup-content .close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    font-size: 20px;
    color: #333;
}

/* Basisstijl voor de kaart (card) */
.card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Zorg ervoor dat de .card-body flex-grow: 1 heeft om de hoogte van de kaart in te vullen */
.card-body {
    flex-grow: 1;
}

/* Stijl voor de knop 'Neem contact op' */
.contact-btn {
    margin-top: auto; /* Plaats de knop aan de onderkant van de kaart */
    align-self: flex-end; /* Uitlijnen aan de onderkant van de .card-body */
}

.container-fancy-blocks {
    background-color: rgb(58,139,55);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 50px; /* Ruimte tussen de rand van de container en de achtergrond */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px; /* Optioneel: stel de minimale hoogte in */
	margin-top: 0px;
}

/* Stel de opacity in voor de fancy blokken */
.card {
    background-color: rgba(255, 255, 255, 0.9); /* Licht doorschijnende witte achtergrond */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optionele schaduw voor het blok */
}

 .site-header {
        background-color: #f8f9fa; /* Achtergrondkleur van de header */
        padding: 10px 0; /* Ruimte boven en onder de header */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Schaduw onder de header */
    }

    .header-logo img {
    max-height: 120px; /* Maximale hoogte instellen op 100% van de beschikbare ruimte */
    width: auto; /* Automatisch de breedte aanpassen om de originele verhoudingen te behouden */
    vertical-align: middle; /* Verticaal centreren van het logo */
}

    .header-info {
        text-align: right; /* Tekst uitlijnen naar rechts */
    }

    .header-info p {
        margin-bottom: 0; /* Geen ondermarge voor de alinea */
        font-size: 16px; /* Tekstgrootte */
        color: #333; /* Tekstkleur */
    }
	
	.header-info table {
            margin-top: 10px; /* Bovenmarge voor de tabel */
            width: 100%; /* Breedte van de tabel */
            border-collapse: collapse; /* Samenvoegen van randen */
        }

        .header-info table tr {
            border-bottom: 1px solid #ddd; /* Onderste rand voor elke rij */
        }

        .header-info table td {
            padding: 8px; /* Celvulling */
            vertical-align: middle; 
			font-weight: bold;/* Verticaal centreren van inhoud */
        }

        .header-info table td:first-child {
            width: 30px; /* Breedte van de eerste cel voor icoontjes */
            text-align: center; /* Uitlijnen van icoontjes in het midden */
        }
		
.header-info table td a {
            color: inherit; /* Overneem de kleur van de ouder */
            text-decoration: none; /* Verwijder tekstdecoratie */
			
        }

        .header-info table td a:hover {
            text-decoration: underline; /* Onderstreep tekst bij hover */
        }
		
		.site-footer {
    background-color: #f8f9fa; /* Achtergrondkleur van de footer */
    padding: 30px 0; /* Binnenste vulling van de footer */
    margin-top: 50px; /* Bovenmarge van de footer */
}

.footer-info {
    margin-bottom: 20px; /* Ondermarge tussen secties in de footer */
}

.footer-info h5 {
    color: #333; /* Kleur van de sectiekoppen */
	font-weight: bold;
    font-size: 18px; /* Grootte van de sectiekoppen */
    margin-bottom: 10px; /* Ondermarge onder de sectiekoppen */
}
.footer-openingstijden {
    background-color: #f8f9fa; /* Achtergrondkleur van het blok */
	font-weight: bold;
    padding: 15px; /* Binnenste vulling van het blok */
    border-radius: 5px; /* Afgeronde hoeken */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Licht schaduweffect */
}

.footer-openingstijden h5 {
    color: #333; /* Kleur van de sectiekop */
   font-size: 18px; /* Tekstgrootte */
        color: #333; /* Tekstkleur */ /* Grootte van de sectiekop */
    margin-bottom: 10px; /* Ondermarge onder de sectiekop */
}

.footer-openingstijden p {
    margin-bottom: 5px; /* Ondermarge onder paragrafen */
	color: #333;
    font-size: 16px; /* Grootte van de tekst */
}

.footer-openingstijden .opening-hours {
    margin-top: 10px; /* Bovenmarge voor openingsuren */
}

.footer-openingstijden .opening-hours li {
    list-style: none; /* Geen opsommingstekens */
    font-size: 10px; /* Grootte van de openingstijdentekst */
    margin-bottom: 5px; /* Ondermarge tussen openingstijden */
    line-height: 1.5; 
	color: #333;/* Regelafstand voor leesbaarheid */
}

.opening-hours-table {
    width: 100%; /* Volledige breedte van de container */
    border-collapse: collapse; /* Samenvoegen van randen */
}

.opening-hours-table th, .opening-hours-table td {
    padding: 10px; /* Celvulling */
    text-align: left; /* Tekst links uitlijnen */
    border-bottom: 1px solid #ddd; /* Onderste rand voor elke rij */
}

.opening-hours-table th {
    background-color: #f2f2f2; /* Achtergrondkleur van koptekst */
    font-size: 16px; /* Grootte van de koptekst */
    font-weight: normal; /* Normaal lettertype gewicht */
}

.opening-hours-table td {
    font-size: 17px; /* Grootte van de celtekst */
	color: #333;
}

.opening-hours-table td:last-child {
    text-align: right; /* Tekst rechts uitlijnen voor openingstijden */
}

.accordion-item {
    margin-bottom: 10px; /* Ondermarge tussen accordion-items */
}

.accordion-button {
    background-color: #f8f9fa; /* Achtergrondkleur van de accordion-kop */
    color: #333; /* Tekstkleur van de accordion-kop */
    font-weight: bold; /* Vetgedrukte tekst */
    border: none; /* Geen rand om de knop */
    text-align: left; /* Tekst links uitlijnen */
}

.accordion-button:hover {
    background-color: #e9ecef; /* Achtergrondkleur bij hover */
}

.accordion-body {
    background-color: #fff; /* Achtergrondkleur van de accordion-body */
    padding: 10px 15px; /* Binnenste vulling van de accordion-body */
}

.footer-container-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Vier kolommen met gelijke breedte */
    gap: 20px; /* Ruimte tussen de blokken */
}

.footer-block-grid {
	margin-top: 20px;
    padding: 20px; /* Binnenste vulling */
     /* Optionele rand voor zichtbaarheid */
    box-sizing: border-box; /* Rand wordt binnen de afmetingen berekend */
}

.footer-block-grid img {
	padding: center;
	margin-top: -20px;
    max-height: 400px;
	width: auto;
	border-radius: 10px;
}

/* Zorg ervoor dat alle blokken even hoog zijn */
.footer-container-grid {
    align-items: stretch;
}

.footer-container {
    display: flex;
}

.footer-block {
    flex: 1 1 50%;
    padding: 20px;
    box-sizing: border-box;
}

.address-block {
    position: relative;
	text-align: center;
}

.container-fluid {
	background-color: rgb(58,139,55);
}


.photo-collage {
    background-color: rgb(58,139,55);
    padding: 30px 0;
}

.photo-card {
    border: 4px solid #dee2e6;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.photo-card img {
    width: 100%;
    height: auto;
    display: block;
}

.fotobg {
	background-color: rgb(58,139,55);
}

#gmap_canvas{
	border-radius: 10px;
}

.footer-copyright {
	color: gray; 
	font-size: 10px;
	text-align: center; 
	margin-top: 0px; 
	padding-bottom: 2px;
}

.footer-copyright a {
	text-transform: none;
	font-weight: bold;
	text-decoratioN: none;
	color: gray;
}