/* 
Theme Name: HQ Online | Child Theme
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Dit thema is de basis van jouw HQ Online website.
Author: HQ Online
Author URI: https://hq-online.nl/
Template: hello-elementor
Version: 2.0.0
Text Domain: hq-online-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/


/* Schrijf hier alle aangepaste CSS */
:target {
  scroll-margin-top: 192px;
}

/** Button Fix for Tag Manager (For Click Id triggering) **/
.elementor-button-content-wrapper {pointer-events: none;}
.elementor-button span { pointer-events:none}

/* Hoofdmenu Hover Styling */

.hoofdmenu ul .menu-item a{
    position: relative;
    /*display: inline;*/
}

.hoofdmenu .elementor-item-active{
    font-weight: 700 !important; 
}

/* .hoofdmenu ul .sub-menu li a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 1px;
    background-color: var(--e-global-color-secondary);
    opacity: 1!important;
    transition: all .2s ease-in-out;
}

.hoofdmenu ul .sub-menu li a:hover::after{
    width: 0%;
} */

@media only screen and (min-width: 1024px){

	.hoofdmenu .elementor-item-active:after{
		content: "" !important;
		position: absolute !important;
		left: 0 !important;
		bottom: -3px !important;
		width: 100% !important;
		height: 1px !important;
		background-color: var(--e-global-color-secondary) !important;
		opacity: 1!important;
		transition: all .2s ease-in-out !important;
	}

	.hoofdmenu ul .menu-item a::after{
		content: "";
		position: absolute;
		left: 0;
		bottom: -3px;
		width: 0;
		height: 1px;
		background-color: var(--e-global-color-secondary);
		opacity: 1!important;
		transition: all .2s ease-in-out;
	}

	.hoofdmenu ul .menu-item a:hover::after{
		width: 100%;
	}
}


/* Clickable */

.clickable, .clickable_ajax {
	cursor: pointer;
	transition: all 0.3s ease;
}

.clickable:hover .hover-button .elementor-button{
	background-color: #00000000!important;
}

.clickable:hover .hover-button .elementor-button-icon svg path{
    stroke: #ffffff!important;
}

.hover-img {
	transition: all 0.3s ease;
}

.clickable:hover .hover-img {
	transform: scale(1.05);
}

.clickable_ajax:hover .hover-img {
	transform: scale(1.05);
}

/* Header scroll change */
.header-scroll {
  transition: background-color 0.3s ease;
}

.scrolled .drop-shadow {
	filter: drop-shadow(10px 0px 4px #33333333);
}

.header-scroll > .e-con-inner, .header-scroll .logo img{
    transition: all .3s ease-in-out;
}

.scrolled .header-scroll {
    padding: 20px 20px;
}

.scrolled .header-scroll .logo img{
    height: 42px!important;
}

@media (max-width: 1024px){
    .scrolled .header-scroll > .e-con-inner{
        padding: 10px 0;
    }
    
   .scrolled .header-scroll .logo img{
        height: 30px!important;
    }
}

/* Tekstvak styling */

/* Basis margin voor paragrafen en ul's binnen .tekstvak */
.tekstvak .elementor-widget-container p,
.tekstvak .elementor-widget-container ul {
    margin-bottom: 24px !important; /* De ruimte tussen paragrafen en ul's */
}

@media (max-width: 1024px){
	.tekstvak .elementor-widget-container p,
.tekstvak .elementor-widget-container ul {
		margin-bottom: 16px !important;
	}
}

@media (max-width: 767px){
	.tekstvak .elementor-widget-container p,
.tekstvak .elementor-widget-container ul {
		margin-bottom: 12px !important;
	}
}

/* Verwijder margin-bottom voor het laatste element binnen .tekstvak */
.tekstvak .elementor-widget-container > *:last-child {
    margin-bottom: 0 !important; /* Zorg ervoor dat het laatste element geen margin heeft */
}

.tekstvak .elementor-widget-container ul + p {
    margin-top: 0;
}

.tekstvak a {
    color: var(--e-global-color-accent);
    transition: color 0.3s ease;
}

.tekstvak a:hover {
    color: var(--e-global-color-secondary);
}

.tekstvak b, .tekstvak strong {
    font-weight: 700;
}

.tekstvak .elementor-widget-container p:last-child,
.tekstvak .elementor-widget-container ul:last-child {
    margin-bottom: 0 !important;
}

/* Complianz document styling */

#cmplz-document .cmplz-dropdown {
	padding: 0px 12px;
}

#cmplz-document .cmplz-dropdown p{
	padding: 0px 20px;
}

#cmplz-document .cmplz-dropdown p:last-of-type{
	margin-bottom: 20px!important;
}

#cmplz-document .cmplz-dropdown summary div {
	padding: 12px 20px;
	margin-bottom: 10px;
	background-color: #F2F2F2;
	border: none;
	border-radius: 4px;
}

#cmplz-document h2 + .cmplz-dropdown summary{
	margin-top: 20px;
}

#cmplz-document .cmplz-dropdown summary div h3{
	font-size: 1.5rem;
	font-weight: 500;
}

#cmplz-document a {
	transition: all 0.3s ease;
}

/* Formulier styling */

:root {
	/* gaps */
	--column-gap: 24px;
	--row-gap: 24px;
	--column-gap-t: 20px;
	--row-gap-t: 20px;
	--column-gap-m: 12px;
	--row-gap-m: 12px;
	
	/* fonts */
  	--font: "Inter";
	--font-button: "Montserrat";
	
	/* font-size */
	--button-font-size: 0.875rem;
	--button-font-size-m: 0.75rem;
	--label-font-size: 0.875rem;
	--label-font-size-m: 0.75rem;
	--font-size: 1rem;
	--font-size-m: 0.875rem;
	
	/* font-weight */
	--text-font-weight: 400;
	--button-font-weight: 500;
	--label-font-weight: 600;
	
	/* colors */
	--label-color: #414651;
	--text-color: #414651;
	--placeholder-color: #717680;
	--required-color: #7F56D9;
	--input-bg-color: #fff;
	--submit-bg-color: #0133CC; /* Ook voor normale/file upload knoppen */
	--submit-hover-bg-color: #1C9AD6; /* Ook voor normale/file upload knoppen */
	--submit-text-color: #fff; /* Ook voor normale/file upload knoppen */
	--submit-text-color-hover: #fff; /* Ook voor normale/file upload knoppen */
	
	/* padding */
	--submit-padding: 12px 52px; 
	--submit-padding-t: 10px 14px; 
	--submit-padding-m: 10px 10px; 
	--input-padding: 10px 14px;
	--input-padding-m: 8px 10px;
	
	/* border radius */
	--input-radius: 8px;
	--submit-radius: 2px; /* Ook voor normale/file upload knoppen */
	
	/* border */
	--border-submit: unset; /* Ook voor normale/file upload knoppen */
	--border-submit-hover: unset; /* Ook voor normale/file upload knoppen */
	--border-input: 1px solid #D5D7DA;
	
	/* Overig */
	--textarea-height: 180px;
	--textarea-height-m: 80px;
}

.formulier .gform_wrapper.gravity-theme .gform_fields {
    grid-column-gap: var(--column-gap)!important;
    grid-row-gap: var(--row-gap)!important;
}

.formulier .gfield_label, .formulier .gform-field-label--type-sub {
    font-family: var(--font), sans-serif;
    line-height: 1.2em;
    color: var(--label-color)!important;
    font-size: var(--label-font-size)!important;
    font-weight: var(--label-font-weight)!important;
    margin-bottom: 8px;
    margin-top: 0px;
}

.formulier input[type=submit] {
    font-family: var(--font-button), sans-serif;
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    color: var(--submit-text-color);
    background-color: var(--submit-bg-color);
    border: var(--border-submit);
    border-radius: var(--submit-radius);
    padding: var(--submit-padding)!important;
    margin: 0;
    position: relative;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
	text-transform: uppercase;
	margin-top: 9px;
}

.formulier input[type=submit]:hover {
    background-color: var(--submit-hover-bg-color);
    border: var(--border-submit-hover);
    color: var(--submit-text-color-hover);
}

.formulier .gform_description {
    margin: 0;
}

.formulier .gform_wrapper.gravity-theme .gfield_validation_message, .gform_wrapper.gravity-theme .validation_message {
	background: none;
	border: none;
	padding: 0px !important;
}

.formulier .gform_wrapper.gravity-theme .gfield_error [aria-invalid=true] {
    border: 1px solid #c02b0a !important;
}

.formulier .gform_wrapper.gravity-theme .gform_footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 16px 0px 0px 0px!important;
    margin: 0!important;
}

.formulier .gform_wrapper.gravity-theme .gfield_label .gfield_required {
	color: var(--required-color);
}

.formulier ::placeholder {
    font-family: var(--font), sans-serif;
    font-size: var(--font-size);
    font-weight: var(--text-font-weight);
    color: var(--placeholder-color);
}

.formulier input[type=text],
.formulier input[type=email],
.formulier input[type=tel],
.formulier textarea,
.formulier select {
    font-family: var(--font), sans-serif;
	font-size: var(--font-size);
	font-weight: var(--text-font-weight);
    color: var(--text-color);
    background-color: var(--input-bg-color);
	border: var(--border-input)!important;
	border-radius: var(--input-radius)!important;
    padding: var(--input-padding)!important;
}

.formulier textarea {
    height: var(--textarea-height) !important;
	font-weight: var(--text-font-weight);
}

.formulier input[type="file"] {
    font-family: var(--font-button), sans-serif;
    font-size: var(--font-size);
	font-weight: var(--text-font-weight);
    color: var(--text-color);
    background-color: var(--input-bg-color);
    border-width: 0 0 1px;
    border-color: #FFF;
    padding: 8px 0px!important;
}

.formulier .gform_drop_area {
    background-color: var(--input-bg-color)!important;
    border: 1px dashed var(--e-global-color-accent)!important;
}

.formulier .gform_button_select_files {
    font-family: var(--font-button), Sans-Serif;
    font-weight: var(--button-font-weight);
    font-size: var(--button-font-size);
	text-transform: uppercase;
    background-color: var(--submit-bg-color);
    border-radius: var(--submit-radius);
    color: var(--submit-text-color);
    border: var(--border-submit);
}

.formulier .gform_button_select_files:hover {
    background-color: var(--submit-bg-color-hover);
	border: var(--border-submit-hover);
    color: var(--submit-text-color-hover);
}

.formulier .gfield_description,
.formulier .gform_confirmation_message_1 {
    font-family: var(--font), sans-serif!important;
    font-size: var(--font-size)!important;
	font-weight: var(--text-font-weight);
    line-height: 1.3em;
    color: var(--text-color);
    padding: 8px 0px!important;
}

.formulier label a {
    color: #333333;
    text-decoration: underline;
}

.formulier .gform_required_legend {
    display: none;
}

@media only screen and (max-width: 1024px) {
    .formulier .gform_wrapper.gravity-theme .gform_fields {
        grid-column-gap: var(--column-gap-t)!important;
    	grid-row-gap: var(--row-gap-t)!important;
    }

    .formulier input[type=submit] {
        font-size: var(--button-font-size-m);
        padding: var(--submit-padding-t);
    }
    
    .formulier input[type="file"]{
        font-size: var(--font-size-m);
    }
}

@media only screen and (max-width: 767px) {
    .formulier .gform_wrapper.gravity-theme .gform_fields {
        grid-column-gap: var(--column-gap-m)!important;
    	grid-row-gap: var(--row-gap-m)!important;
    }
    
    .formulier input[type=submit] {
        font-size: font-size: var(--button-font-size-m);
        padding: var(--submit-padding-m);
    }
    
    .formulier input[type="file"]{
        font-size: font-size: var(--font-size-m);
    }
    
    .formulier input[type=text],
    .formulier input[type=email],
    .formulier input[type=tel],
    .formulier textarea,
    .formulier select {
        padding: var(--input-padding-m)!important;
        font-size: var(--font-size-m);
    }

    .formulier .gfield_label {
        line-height: 1em;
        font-size: var(--label-font-size-m)!important;
    }

    .formulier ::placeholder {
        font-size: var(--font-size-m);
    }

    .formulier textarea {
        height: var(--textarea-height-m);
    }
    
    .formulier .gform_footer {
    	justify-content: flex-start;
    }
}