/*
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
*/
body.vbi__phase1 {
	font-weight: 300;
	--text-color: var(--neutral);
	--body-color: var(--white);
	--radius: 0px;
	::selection {
		color: var(--selection-text-color, var(--white));
		background: var(--selection-bg-color, var(--neutral));
	}
	main {
		--text-line-height: 1.3;
		--default-font-size: clamp(15.747px, 0.984rem + ((1vw - 3.2px) * 0.645), 24px);		
		--text-xs: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.156), 16px);
		--text-s: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.313), 18px);
		--text-m: clamp(15.747px, 0.984rem + ((1vw - 3.2px) * 0.645), 24px);	
		--text-l: clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 0.863), 30px);
		--text-xl: clamp(22.041px, 1.378rem + ((1vw - 3.2px) * 1.091), 36px);
		--text-xxl: clamp(28.836px, 1.802rem + ((1vw - 3.2px) * 1.653), 50px);
		--text-huge: clamp(33.419px, 2.089rem + ((1vw - 3.2px) * 2.077), 60px);
		font-size: var(--default-font-size, var(--text-m));
		font-weight: 100;
		font-variation-settings: 'wght' 100;
	}
	footer,
	footer * {
		font-style: normal;
		font-variation-settings: 'wght' 300;
	}
	h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .h--1, .h--2, .h--3, .h--4, .h--5, .h--6 {		
		--heading-line-height: 1.3;
	}

	h1,
	.h1 {
		--h1: var(--text-xxl);
		--h1-line-height: 1.3;
		font-family: "mokoko-variable";
	}

	h2,
	.h2 {
		--h2: var(--text-xxl);
		--h2-line-height: 1.3;
		font-family: "mokoko-variable";
		max-width: 30ch;
	}

	h3,
	.h3 {
		--h3: var(--text-l);
		--h3-line-height: 1.3;
	}
	/*h4,
	.h4{
	--h4: clamp(1.125rem, calc(2.3333333333vw + 0.6rem), 32px);
	--h4-line-height: 1.3;
}*/


}
body.vbi__phase2 {
	font-weight: 600;
	--text-color: var(--primary);
	--body-color: var(--primary);
	::selection {
		color: var(--selection-text-color, var(--white));
		background: var(--selection-bg-color, var(--accent2));
	}
	h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .h--1, .h--2, .h--3, .h--4, .h--5, .h--6 {
		--heading-font-weight: 500;		
		--heading-line-height: 0.9;
	}
	h1,
	.h1 {
		--h1: clamp(85px, calc(25.333333333333336vw + -73.2px), 170px);
		--heading-font-weight: 500;
		font-family: "mokoko-variable";
		font-variation-settings: 'wght' 800;
	}

	h2,
	.h2 {
		font-family: "mokoko-variable";
	}

	h3,
	.h3 {
		--h3: clamp(30px, calc(7.000000000000001vw + -7.200000000000003px), 60px);
		--heading-line-height: 1.25;
		--h3-line-height: 1.25;
		letter-spacing: 0.0125em;
		font-style: normal;
		font-weight: 900;
	}
	h4,
	.h4{
		--h4: clamp(1.125rem, calc(2.3333333333vw + 0.6rem), 32px);
		--heading-line-height: 1.25;
		--h4-line-height: 1.25;
		letter-spacing: 0.0125em;
		font-style: normal;
		font-weight: 900;
	}


}


.bricks-button {
	position: relative;
	top:0;
	transition: .3s;	
}
.bricks-button:hover {
	top: -5px;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 8px;
}

/* ===== Scrollbar CSS ===== */
/* For browsers that support `scrollbar-*` properties */
/*@supports (scrollbar-color: auto) {
body.vbi__phase2 * {
scrollbar-width: thin;
scrollbar-color: var(--base) var(--base-ultra-light);
}
}*/

/* Otherwise, use `::-webkit-scrollbar-*` pseudo-elements */
@supports selector(::-webkit-scrollbar) {
	/* Chrome, Edge, and Safari */
	body.vbi__phase1::-webkit-scrollbar,	
	body.vbi__phase1 *::-webkit-scrollbar{
		width:8px;
	}
	/* Chrome, Edge, and Safari */
	body.vbi__phase2::-webkit-scrollbar,	
	body.vbi__phase2 *::-webkit-scrollbar{
		width:8px;
	}

	body.vbi__phase1::-webkit-scrollbar-track,
	body.vbi__phase1 *::-webkit-scrollbar-track {
		background: var(--neutral-ultra-light);
	}
	body.vbi__phase2::-webkit-scrollbar-track,
	body.vbi__phase2 *::-webkit-scrollbar-track {
		background: var(--base-ultra-light);
	}

	body.vbi__phase1::-webkit-scrollbar-thumb,
	body.vbi__phase1 *::-webkit-scrollbar-thumb {
		background-color: var(--neutral);
		border-radius: 30px !important;
		border: 0px none transparent;
	}
	body.vbi__phase2::-webkit-scrollbar-thumb,
	body.vbi__phase2 *::-webkit-scrollbar-thumb {
		background-color: var(--base);
		border-radius: 30px !important;
		border: 0px none transparent;
	}
}