/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/

body {
    --cft-topic-link-color: #3D7C8D;
    --cft-topic-link-color-hover: #E73E11;
    --cft-nav-button-color: #409EFF;
    /*
     * Flexy breadcrumb overwrite default style
     */
    .fbc-page .fbc-wrap .fbc-items{
	font-family: "Roboto Slab";
	li a {
    	    color: var(--bb-primary-color);
	}
    }
}

/*
 *  Deze gebruiken we in BBgroep lijst pagina's zoals Kennisgroepen
 */
.cft-grouplist .elementor-widget-container {
  margin: 0px 0px 0px 0px;
  padding: 20px 20px 5px 20px;
  background-color: #FFFFFF;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-radius: 6px 6px 6px 6px;
}



.page-template-page-fullwidth-content{
    article > .entry-content{
	padding-bottom:600px;
	max-width:1160px;
	margin-left:auto;
	margin-right:auto;
	&>:not(.cft-knoppen-nav-groep){
	    margin-left:20px;
	}
    }
}

body.admin-bar{
    .cft-knoppen-nav-groep{
	margin-top:40px;
    }
}

.fluentform {
    .cft-form-helper {
       	.ff-el-help-message {
    	    font-size:14px;
       	}
	.ff-el-form-check{
	    label {
		font-size:16px;
		color: #444;
	    }
	}
    }
    .ff-message-success{
	color: #ff7800;
	font-weight: bold;
    }

}

@media (width <= 700px) {
    .content-area{
	.cft-form-wrapper-blue {
	    width:100% !important;
	    margin-top:30px;
	}
    }
    .kolommen-tekst-met-formulier{
	display:block !important;
	.cft-tekst-kolom{
	    width:100% !important;
	    padding-bottom:10px;
	    border-bottom: 2px solid #c6c6c6;
	}
    }
}
.content-area{
    /* sticky header met navigatie-knoppen */
    .elementor-location-single{
	.cft-knoppen-nav-block{
	    margin-left:-26px;
	}

    }

    .cft-knoppen-nav-block,
    .cft-knoppen-nav-groep{
	background-color: white;
	flex-direction: row;
	max-width: 1160px;
	width: 100%;
	justify-content: center;
	padding:0px;
	padding-bottom:10px;
	border-bottom:2px solid #c6c6c6;
    	position: fixed;
	top: 70px;
	z-index: 190;
	.wp-block-button{
	    a:hover {
		background-color: #83C0FF;
	    }
	    a {
		background-color: #409EFF;
		padding: 4px 12px;
		color: white;
		font-size:16px;
	    }
	    &.is-link a:before  {
		content: '> ';
	    }
	}
    }
    .cft-knoppen-nav-groep{
	.wp-block-button{
	    &.home a {
		background-image: url('/wp-content/uploads/2022/11/Zonnewarmte_favicon.svg');
		background-size: 35px;
		background-repeat: no-repeat;
		width:110px;
		text-align: right;
		background-position-x: 7px;
	    }
	}

    /*  logo home-button
     * /wp-content/uploads/2022/11/Zonnewarmte_favicon.svg
     *
     */
	.elementor-element{
	    width:auto;
	    margin:3px;
	    .elementor-button{
		padding: 4px 12px;
	    }
	    &.link-external a > span {
		color: #333;
		text-decoration:underline;
	    }
	}
    }
    .kolommen-tekst-met-formulier{
	.cft-tekst-kolom {
	    width:50%;
	}

    }
    .cft-form-wrapper-blue {
	min-width:360px;
	background-color: #DAEFFF;
	border-radius: 30px;
	padding: 18px;
	div.fluentform {
	    width:100%;
	    .cft-msg{
		color: var(--fluentform-secondary);
		ul {
		    margin-left: 15px;
      		}
	    }
	}
	&.wp-block-loginout{
	    p.login-username,
	    p.login-password {
		display:flex;
		flex-direction: column;
	    }
	    p.login-remember {
		display:none;
	    }
	}
    }

    .mijn-wrapper {
	padding: 0px 10px;

	h2.wp-block-heading {
	    width:100%;
	    border-top: 2px solid #c6c6c6;
	    padding-top:25px;
	    padding-bottom:25px;
	}

	    
	.cft-knop {
	    a {
		background-color: #DAEFFF;
		padding: 4px 12px;
		color: #303;
		text-decoration:underline;
	    }
	    margin-bottom:10px;
	}

	&> .wp-block-query > ul{
	    margin:0px;
	}

    }

}

#primary-navbar{
    .primary-menu a{
	font-size: 16px;
	color: var(--bb-body-text-color);
    }

}


/*
 * van belang voor de level-3-category Elementor-template
 */
.elementor-section {
    .elementor-widget-posts{
	.elementor-post__text {
	    padding-bottom:10px;
	    padding-top:10px;
	    .elementor-post__title {
		a:before{
		    content: '> ';
		}
	    }
	}
    }

}

/*
 * Veelgestelde-vragen blokje in Gutenberg maak je door een Query-loop
 *   1) stel in Filter > category (kies categorie)
 *   2) geef een class aan de query-loop: "vragenlijst-expanding"
 *   3) zorg dat de template alleen bestaat uit Title + Content
 *   Nb. zie ook bijbehorende JS in deze bb-child-template assets/js/custom.js
 */
.vragenlijst-expanding{
    &>ul{
	margin:0px;
	li.wp-block-post{
	    h2:hover {
		color: var( --e-global-color-primary );
	    }
	    h2 {
		cursor:pointer;
		padding: 8px 12px;
		margin: 0px;
		color: var(--cft-topic-link-color);
		font-size:18px;
		font-weight:500;
	    }
	    h2:before{
		content: '> ';
	    }
	    .entry-content {
		display:none;
		border-left:2px solid #c6c6c6;
		margin-left:20px;
		padding:20px;
		background-color: #DAE6D559;
		h1,.cft-knoppen-nav-block {
		    display:none;
		}
	    }
	}
	li.wp-block-post.expanded{
	    h2:before{
		content: '\\ ';
	    }
	    h2:hover {
		color: var(--cft-topic-link-color);
	    }
	    .entry-content{
		display:block;
	    }
	}
    }
}


/*
 *  styling bij elementen uit zie plugin cft_page_buttons
 */
#masthead .cft-nav-buttons{
    display:flex;
    background-color: white;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left:auto;
    margin-right:auto;

    max-width: 1160px;
    width: 100%;
    justify-content: center;
    padding: 0px 0px 10px 0px;
    border-bottom: 2px solid #c6c6c6;
}
.cft-nav-button {
	margin:5px;
	a:hover {
    	    background-color: #83C0FF;
	}
	a {
	    background-color: #409EFF;
    	    padding: 4px 12px;
	    color: white;
	    font-size: 16px;
	    border-radius:30px;
	}
}



.target-voor-knoppen {
    scroll-margin-top: 100px;
}

.campagne-aanmelding-stap-1 {
    align-items: start;
    width: 100%;
}
.campagne-aanmelding-stap-1 > div:first-child,
.campagne-aanmelding-stap-1 > div:last-child {
    min-width:455px;
}

@media (width <= 990px) {
    .campagne-aanmelding-stap-1 {
	display:block !important;
    }
}

/*
 * hiermee haal je in elk bericht weergave 
 *  het dingetje weg met Category + Tag + social-media-buttons
 */
.site-main > .post-meta-wrapper-main {
    display:none;
}

/*
 * max-width for single-post main content-area
 */
.single-post:not(.has-sidebar, .elementor-template-full-width) .container > .site-content-grid ,
.single-post:not(.has-sidebar, .elementor-template-full-width) .container > .site-content-grid .content-area {
    max-width: 1200px;
}