/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://wp10.nl
 Description:  Custom GeneratePress child theme
 Author:       Martijn Sengers
 Author URI:   https://www.sengers.net
 Template:     generatepress
 Version:      0.1
*/


/* ================== Table of contents =====================
 
 
1. Theme tweaks
2. Utilities
3. Typography
4. Global styles
5. Fluent forms
6. Css Grid
 

 
 ===================== */


/***  1. Theme Tweaks  ****/


/* Body background color (outside wrapper) */
body {
	background-color: var(--base);
}
/* site wrapper */
.site-wrapper{
	width:100%;
	max-width: 1920px;
	margin-inline: auto;
	background-color: var(--surface-10);
}

/* Set the main content area height */
#main {
	min-height: 65vh;
}

/* Container Padding Overrides */
.inside-header{
		padding-inline: 0px !important;
}

.site-header{
		padding-inline: clamp (1rem, 0.840rem + 0.75vw, 1.5rem) !important;
}
/*.site-content, #content {
	padding: 0px;
}*/
/* Post editor Width (backedne) */

.post-type-post .block-editor-block-list__layout {
	max-width:728px !important;
	margin-inline: auto !important;
	padding-inline:200px !important;
}

.post-type-post .edit-post-visual-editor__post-titel-wrapper .editor-post-title{
	max-width: 728px !important;
	margin-inline: auto !important;
	padding-inline: 200px !important;
}

/*login page*/
.language-switcher{
	display:none !important;
}

/* modal */
.search-modal-fields button{
	background: var(--surface-20) !important;
	color: var(--surface-70) !important;
	line-height:1;
	font-weight:600;
	border-left: 1px solid var(--surface-30);
	padding: 10px 12 px;
}
.search-modal-fields button:hover{
	background: var(--surface-30) !important;
	color: var(--surface-90) !important;
}
.search-modal-fields input {
	background-color: white !important;
	border-radius: 4px;
	border: none;
	padding: 0px 1em;
	outline: none;
}
.search-modal-form{
	color: var(--surface-80) !important;
}
.search-modal-fields{
	border-radius: 4px;
	overflow: hidden;
	outline: 1px solid var(--surface-30);
	box-shadow: 0px 0px 0px #00000010;
	transition: all 250ms ease-in;
	background-color: var(--surface-0);
}
.search-modal-fields:focus-within{
	outline: 1px solid var(--surface-30);
	box-shadow: 0px 4px 10px #00000010;
}
.gp-search-modal .gp-modal_overlay {
	background-color: #1f293399;
}


/* visually hidden */

.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

/* line limits */
.line-limit-3, .line-limit-2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.line-limit-3 {
	-webkit-line-clamp: 3;
}
.line-limit-2 {
	-webkit-line-clamp: 2;
}



/* aspect ratio*/
.ar-16-9 {
    aspect-ratio: 16/9
}

.ar-9-16 {
    aspect-ratio: 9/16
}

.ar-4-3 {
    aspect-ratio: 4/3
}

.ar-3-4 {
    aspect-ration: 3/4
}

.ar-1-1 {
    aspect-ratio: 1/1
}

.shadow-standard {
	box-shadow: 0px 5px 16px -5px rgba(33, 33, 33, 0.2);
	transition: all .2s ease-in;
}

.shadow-standard:hover {
	box-shadow: 0px 8px 32px 0px rgba(33, 33, 33, 0.1);
}



/* no underline */
.no-ul, .no-ul a {
    text-decoration: none
}


/* border radius */
:root {
	--radius-xs: 	.125rem;
	--radius-s:		.25rem;
	--radius-m: 	.5rem;
	--radius-l:  	1rem;
	--radius-xl:	1.5rem;
	--radius-xxl:  	2rem;
	--radius-50:	50%;
	--radius-circle:	50%;
}

 
:root {
/* These HAVE TO match what is in the Customizer > Typography. Pull in font familys using font manager. Set headline-font as ‘All Headlings', set body-font as HTML*/
--headline-font: Fira Sans;	
--body-font: Fira Sans;
--fs-body: clamp(1rem, calc(0.96rem + 0.2vw), 1.125rem);/*original*/
/*--fs-body: clamp(1.0625rem, 1.0625rem + 0vw, 1.0625rem);/*17px-17px*/

--fs-headline-pre: clamp(0.75rem, 0.75rem + 0vw, 0.75rem);/*adapted*/
	
--fs-headline-h1: clamp(3rem, 2.0909rem + 3.0303vw, 4.25rem);
--fs-headline-h2: clamp(2.5rem, 1.9545rem + 1.8182vw, 3.25rem);
--fs-headline-h3: clamp(2rem, 1.6364rem + 1.2121vw, 2.5rem);
--fs-headline-h4: clamp(1.5rem, 1.3182rem + 0.6061vw, 1.75rem);
--fs-headline-h5: clamp(1.25rem, 1.25rem + 0vw, 1.25rem);
--fs-headline-h6: clamp(1.25rem, 1rem + 0vw, 1rem);
	
--fs-headline-body-l: clamp(1.5rem, 1.3182rem + 0.6061vw, 1.75rem);
--fs-headline-body-m: clamp(1.125rem, 1.0341rem + 0.303vw, 1.25rem);	
--fs-headline-body-d: clamp(1rem, 1rem + 0vw, 1rem);
--fs-headline-body-s: clamp(0.875rem, 0.875rem + 0vw, 0.875rem);
--fs-headline-body-xs: clamp(0.75rem, 0.75rem + 0vw, 0.75rem);

--fs-headline-label-d: clamp(0.75rem, 0.75rem + 0vw, 0.75rem);
--fs-headline-label-s: clamp(0.875rem, 0.875rem + 0vw, 0.875rem);
}


/* Default Body / p font settings */
p, ul{
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.5;
	margin-bottom: 1.5rem;
	font-family: var(--body-font);

}

/* Default headings weight, margin, font-family */

h1, h2, h3, h4, h5, h6, .gb-headline-xl, .gb-headline-h1, .gb-headline-h2, .gb-headline-h3, .gb-headline-h4, .gb-headline-h5, .gb-headline-h6, .gb-headline-h1 p, .gb-headline-h2 p, .gb-headline-h3 p, .gb-headline-h4 p{

	
	margin-bottom: .5em;
	font-family: var(--headline-font);
}



h1, .gb-headline-h1, .gb-headline-h1 p{
	font-size: var(--fs-headline-h1);
	line-height:1.05;
	font-weight:700 ;
	letter-spacing:–0.02em;
}

h2, .gb-headline-h2, .gb-headline-h2 p{
	font-size: var(--fs-headline-h2);
	line-height:1.1;
	font-weight:700 ;
	letter-spacing:–0.02em;
}
h3, .gb-headline-h3, .gb-headline-h3 p{
	font-size: var(--fs-headline-h3);
	line-height:1.15;
	font-weight:600 ;
	letter-spacing:–0.02em;
	
}
h4, .gb-headline-h4, .gb-headline-h4 p{
	font-size: var(--fs-headline-h4);
	line-height:1.1;
	font-weight:600 ;
	letter-spacing:–0.02em;
	
}
h5, .gb-headline-h5, .gb-headline-h5 p{
	font-size: var(--fs-headline-h5);
	line-height:1.25;
	font-weight:600 ;
}
h6, .gb-headline-h6{
	font-size: var(--fs-headline-h6);
	line-height:1.4;
	font-weight:600 ;
}

.gb-headline-pre{
	font-size: var(--fa-headline-pre);
	text-transform: uppercase;
	line-height: .1em;
	font-weight:500;
	margin-bottom:1.25em;
}


/* additional body font size */


.gb-headline-body-l{
	font-family: var(--body-font);
	font-size: var(--fs-headline-body-l);
}
.gb-headline-body-d{
	font-family: var(--body-font);
	font-size: var(--fs-headline-body-d);
	line-height:1.5em;
}
.gb-headline-body-m{
	font-family: var(--body-font);
	font-size: var(--fs-headline-body-m);
	line-height:1.5em;
}
.gb-headline-body-s{
	font-family: var(--body-font);
	font-size: var(--fs-headline-body-s);
	line-height:1.5em;
}
.gb-headline-body-xs{
	font-family: var(--body-font);
	font-size: var(--fs-headline-body-xs);
}
.gb-headline-label-d{
	font-family: var(--body-font);
	font-size: var(--fs-headline-label-d);
}
.gb-headline-label-s{
	font-family: var(--body-font);
	font-size: var(--fs-headline-label-s);
}


/* button global line height */
.gb-button {
	line-height: 1em;
}


/* Remove bottom margin on last paragraph */
.gb-container p:last-child:last-of-type {
    margin-bottom: 0px;
}

.block-editor-block-list__layout .gb-container p:nth-last-child(2) {
    margin-bottom: 0px;
}

/* sections */
.gb-container-section-xs {
padding: 1rem clamp(1rem, 0.848rem + 0.758vw, 1.5rem) 1rem clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
}

.gb-container-section-s {
padding: clamp(1.5rem, 1.5rem + 0vw, 1.5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem) clamp(1.5rem, 1.5rem + 0vw, 1.5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
}

.gb-container-section-m {
padding: clamp(1.5rem, 1.197rem + 1.515vw, 2.5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem) clamp(1.5rem, 1.197rem + 1.515vw, 2.5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
}

.gb-container-section-d {
padding: clamp(3rem, 2.294rem + 3.03vw, 5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem) clamp(3rem, 2.394rem + 3.03vw, 5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
}

.gb-container-section-l {
padding: clamp(4.5rem, 3.591rem + 4.545vw, 7.5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem) clamp(4.5rem, 3.591rem + 4.545vw, 7.5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
}

.gb-container-section-xl {
padding: clamp(6rem, 4.788rem + 6.061vw, 10rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem) clamp(6rem, 4.788rem + 6.061vw, 10rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
}

/* container widths */
:root {
	--width-m: 64rem;
	--width-s: 48rem;
	--width-xs: 40rem;
	--width-xss: 24rem;

}
@media (max-width: 768px){
:root {
	--width-m: 100%;
	--width-s: 100%;
	--width-xs: 100%;
	--width-xss: 100%;

}
}


/****
 * 
 * 
 * 6. CSS Grid
 * 
 * 
 * ***/

/* Simple CSS grid */

.grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.grid-3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}
.grid-4 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grid-5 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.grid-6 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.gap-xs{
	gap: .5rem;
}

.gap-s{
	gap: 1rem;
}
.gap-m{
	gap: 2rem;
}
.gap-l{
	gap: 4rem;
}
.gap-xl{
	gap: 6rem;
}
/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
	.grid-2{
		grid-template-columns: 1fr;
	}
	.grid-3, .grid-4{
		grid-template-columns: 1fr 1fr;
	}
	.grid-5, .grid-6{
		grid-template-columns: 1fr 1fr 1fr;
	}
	.gap-xs{
	gap: .5rem;
	}

	.gap-s{
	gap: 1rem;
	}
	.gap-m{
	gap: 1.5rem;
	}
	.gap-l{
	gap: 3rem;
	}
	.gap-xl{
	gap: 4rem;
	}
}

/* Mobile */
@media (min-width: 768px){
	.grid-2, .grid-3, .grid-4{
		grid-template-columns: 1fr;
	}
	.grid-5, .grid-6{
		grid-template-columns: 1fr 1fr;
	}
	.gap-xs{
	gap: .25rem;
	}

	.gap-s{
	gap: .5rem;
	}
	.gap-m{
	gap: 1rem;
	}
	.gap-l{
	gap: 3rem;
	}
	.gap-xl{
	gap: 4rem;
	}
}
/* Site Wrapper */
.site-wrapper {
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
}
/*
 * 
 * 
 * 
 * 
 * ****** Fluent Forms ******/


/* To target individual forms replace .fluentform .frm-fluent-form with form.fluent_form_# */

/* label style */
.fluentform .frm-fluent-form .ff-el-input--label {
	font-family: var(--body-font);
}

/* fluent forms field style */
.fluentform .frm-fluent-form .ff-el-form-control {
  background-color: #fff;
  color: #000;
  /*border: 1px solid #000;*/
  border-radius: 0px;
  font-size: 17px;
  line-height: 1.7em;
  padding: 14px 24px;
}

/* fluent forms focus field style */
.fluentform .frm-fluent-form .ff-el-form-control:focus {
  border: 1px solid #999;
  outline: none;
}

/* control space below fields */
.fluentform .frm-fluent-form .ff-el-group {
  margin-bottom: 15px;
}

/* fluent forms placeholder text style */
.fluentform .frm-fluent-form .ff-el-form-control::placeholder {
  /*color: #999;*/
  	font-family: var(--body-font);
}

/* placeholder focus text style */
.fluentform .frm-fluent-form .ff-el-form-control:focus::placeholder {
  color: #000;
}

/* fluent forms button style */
.fluentform .frm-fluent-form .ff-btn-submit {
  background-color:var(--primary);
  color: #fff;
  opacity: 100%;
  border-radius: var(--radius-s);
	font-size: var(--fs-headline-h5);
	font-family: var(--headline-font);
  line-height: 1.5em;
  text-transform: uppercase;

  padding: 14px 24px;
  transition: all 0.5s ease 0s;
}

/* fluent forms button hover style */
.fluentform .frm-fluent-form .ff-btn-submit:hover {
  background-color: var(--primary-alt);
  color: #fff;
}

/* mobile full width button */
@media (max-width: 768px) {
  .fluentform .frm-fluent-form .ff-btn-submit {
    width: 100%;
  }
}

/* form error text style */
.fluentform .ff-el-is-error .text-danger {
  font-size: 14px !important;
  color: #999;
}

/* success message style */
.fluentform .ff-message-success {
  position: relative;
  border: none;
  box-shadow: none;
  font-size: 15px;
  padding: 0px;
  margin-top: 20px;
}