/*
 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);
}


/*  Animation override  */

@-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
}