/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


/* DEFINE VARIABLES */
:root {
	
	/*************************** 
	 *          PALETTE        *
	 ************************* */
	
	/* ACTION */
	--action-h: 270;
	--action-s: 25%;
	--action-l: 51%;
	--action-hsl: var(--action-h) var(--action-s) var(--action-l);
	--action: hsl(var(--action-hsl));
	
	/* PRIMARY */
	--primary-h: 181;
	--primary-s: 90%;
	--primary-l: 19%;
	--primary-hsl: var(--primary-h) var(--primary-s) var(--primary-l);
	--primary: hsl(var(--primary-hsl));
	
	/* ACCENT */
	--accent-h: 180;
	--accent-s: 100%;
	--accent-l: 28%;
	--accent-hsl: var(--accent-h) var(--accent-s) var(--accent-l);
	--accent: hsl(var(--accent-hsl));
	
	/* BASE */
	--base-h: 180;
	--base-s: 4%;
	--base-l: 40%;
	--base-hsl: var(--base-h) var(--base-s) var(--base-l);
	--base: hsl(var(--base-hsl));

	
	--white: #ffffff;
	--action-medium: hsl(var(--action-h), 39%, 62%);
	--accent-medium: hsl(var(--accent-h), var(--accent-s), 35%);
	--action-trans-10: hsl(var(--action-hsl) / .1);
	--base-trans-50: hsl(var(--base-hsl) / .5);
	
	
	
	/****************************** 
	 *          TYPOGRAPHY        *
	 ******************************/
	
	/* TEXT SIZE SCALE */
	--text-s: clamp(0.875rem, 0.82rem + 0.2vw, 1rem);
	--text-m: clamp(1rem, 0.945rem + 0.2vw, 1.125rem);
	--text-l: clamp(1.125rem, 1.015rem + 0.4vw, 1.375rem);
	
	/* HEADING SIZE SCALE */
	--h4: clamp(1.25rem, 1.03rem + 0.8vw, 1.75rem);
	--h3: clamp(1.5rem, 1.28rem + 0.8vw, 2rem);
	--h2: clamp(1.75rem, 1.42rem + 1.2vw, 2.5rem);
	--h1: clamp(2rem, 1.56rem + 1.6vw, 3rem);
	
	/* TEXT WIDTH SCALE */
	--width-text-s: 20ch;
	--width-text-m: 25ch;
	--width-text-l: 35ch;
	--width-text-xl: 55ch;
	--width-text-xxl: 60ch;
	
	/****************************** 
	 *          SPACING        *
	 ******************************/
	
	/* GAP SCALE */
    --space-m: clamp(1rem, 0.89rem + 0.4vw, 1.25rem);
    --space-l: clamp(2rem, 1.78rem + 0.8vw, 2.5rem);
	--space-xl: clamp(2.5rem, 1.95rem + 2vw, 3.75rem);

	
	/* SECTION TOP AND BOTTOM PADDING SCALE */
    --pad-section-m: clamp(3.75rem, 2.65rem + 4vw, 6.25rem);
	--pad-section-inline: clamp(1.25rem, 0.3333rem + 3.3333vw, 3.75rem);


    /* CONTEXTUAL GAP VARIABLES */
	--content-gap: var(--space-m); /* Gap between content elements */
	--card-gap: var(--space-m);  /* Gap between card elements */
    --grid-gap: var(--space-l); /* Gap between columns */
    --container-gap: var(--space-xl); /* Gap between multiple containers in sections */
	
	
	
	/****************************** 
	 *          GRID        *
	 ******************************/
	--grid-1: repeat(1, minmax(0,1fr));
	--grid-2: repeat(2, minmax(0,1fr));
	--grid-3: repeat(3, minmax(0,1fr));

}


/* Reset all margins */
body :is(p, h1, h2, h3, h4, h5, h6, ul, ol, li) {
    margin: 0;
} 

/* Adds spacing within Rich Text and Posts */
body .brxe-text :is(h1, h2, h3, h4, h5, h6),
body .brxe-post-content:not([data-source="bricks"]) * + :is(h1, h2, h3, h4, h5, h6) {
    margin-block-start: 1.5em;
	margin-block-end: 0.5em;
} 

body .brxe-text > :first-child{
	margin-block-start: 0; /* Rich-text-ben az első elem előtt ne legyen távolság */
}

body .brxe-text > :is(p, ul, ol):not(:last-child){
	margin-block-end: 1em; /* Rich-text-ben minden elem után 1 em távolság, kivéve az utolsó elemet */
}


/* Makes H2s within Rich Text and blog posts one size smaller */
.brxe-text h2,
.brxe-post-content h2 {
    font-size: var(--h3);
}



/****************************** 
/* Fluent Forms Styling */
/******************************/

.fluentform .ff-el-form-control{
    padding: 10px 20px !important; 
    background-color: transparent; 
    border: 0.1rem solid var(--white) !important;
    border-radius: 2px !important; 
	font-size: var(--text-m) !important;
    line-height: 1.5 !important; 
    color: var(--white) !important; 
}

.fluentform .ff-el-form-control::placeholder{
	 color: var(--white) !important;	
}

/*Change label styles*/
.fluentform .ff-el-input--label label,
.fluentform .ff_t_c{
    font-size: var(--text-m) !important; 
    color:var(--white) !important; 
}

/* Change Input Focus Color */
.fluentform .ff-el-form-control:focus {
    background-color: transparent !important; 
}

/* Change button style*/
.fluentform .ff-btn-submit {
	background-image: linear-gradient(132deg, var(--action), var(--action-medium)) !important;
    box-shadow: 0 4px 8px 0 var(--bricks-color-waivrm) !important;
    color: var(--white) !important;
	padding-top: 0.75em !important;
    padding-right: 1.5em !important;
    padding-bottom: 0.75em !important;
    padding-left: 1.5em !important;
    border-radius: 30px !important;
    
}

/*Change button hover style*/
.fluentform .ff-btn-submit:hover {
	background-image: linear-gradient(132deg, var(--action), var(--action)) !important;
}


/****************************** 
/* GDPR Cookie Banner         */
/******************************/
.gdpr_infobar_postion_bottom_left{
	max-width: 450px !important;
	width: 90% !important;
	box-shadow: 0 4px 8px 0 var(--bricks-color-msbsql);
}

.moove-gdpr-info-bar-content{
	display: flex;
	flex-direction: column;
	align-items: flex-start !important;
}

.moove-gdpr-cookie-notice > p{
	margin-bottom: 1em !important;
}

.moove-gdpr-button-holder{
	padding: 0 !important;
}

.moove-gdpr-modal-footer-content{
	padding-inline: 40px;
}

.moove-gdpr-infobar-close-btn i{
	top: 11px !important;
	right: -10px !important;
	overflow: visible !important;
}

.moove-gdpr-infobar-allow-all{
	font-weight: 600 !important;
	font-size: 14px !important;
	background-image: linear-gradient(132deg, var(--accent), var(--accent-medium));
}

@media (max-width: 766px){
	.moove-gdpr-infobar-close-btn i{
		top: 0px !important;
		right: unset !important;
		left: 14px !important;
	}
}


/************************************** 
/*        Animation overriding        */
/**************************************/
@-webkit-keyframes cwd_fadeInUp {
	0% {
		opacity: 0;
		transform: translate3d(0,30px,0)
	}

	to {
		opacity: 1;
		transform: translateZ(0)
	}
}

@keyframes cwd_fadeInUp {
	0% {
		opacity: 0;
		transform: translate3d(0,30px,0)
	}

	to {
		opacity: 1;
		transform: translateZ(0)
	}
}

.brx-body .brx-animate-fadeInUp {
	animation-name: cwd_fadeInUp
}

@-webkit-keyframes cwd_fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-30px,0,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes cwd_fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-30px,0,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.brx-body .brx-animate-fadeInLeft {
    animation-name: cwd_fadeInLeft
}

@-webkit-keyframes cwd_fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(30px,0,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes cwd_fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(30px,0,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.brx-body .brx-animate-fadeInRight {
    animation-name: cwd_fadeInRight
}

@-webkit-keyframes cwd_fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0,-30px,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes cwd_fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0,-30px,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.brx-body .brx-animate-fadeInDown {
    animation-name: cwd_fadeInDown
}