/*
 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
*/

:root {
	--bricks-color-primary: #81313e !important;
	--bricks-color-secondary: #30231d !important;
	--bricks-text-dark: #212121 !important;
	--bricks-bg-dark: #262626 !important;
	--bricks-text-light: #faf8f5 !important;
	--bricks-bg-light: #faf8f5 !important;

	--clr-card__bg: #f5f3ef;

	--clr-button__bg: #81313e;
	--clr-button__txt: #faf8f5;
	--clr-button__bg-hover: #e2af36;
	--clr-button__txt-hover: #faf8f5;
	--clr-button--outline: #d9bfa6;
}

html {
	font-size: 10px;
}

body {
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.5;
	color: #846d62;
}

:where(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5) {
	font-weight: 600;
	line-height: 1.2;
}

h1, .h1 {
	font-size: 7.2rem;
}

h2, .h2 {
	font-size: 4.8rem;
}

h3, .h3 {
	font-size: 2.4rem;
}

h4, .h4 {
	font-size: 2rem;
}

h5, .h5 {
	font-size: 1.8rem;
}

.brxe-heading.bricks-type-lead {}
.brxe-heading.bricks-type-hero {}

.brxe-section {
	padding-inline: clamp(16px, 5vw, 100px);
}

.brxe-container {
	width: 1400px;
}

.brxe-button {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	min-width: 122px;
	width: max-content;
	font-size: 16px;
	text-align: center;
	color: var(--clr-button__txt);
	background-color: var(--clr-button__bg);
	border: 2px solid var(--clr-button__bg);
	transition: all .3s ease-in-out;
}

.brxe-button.bricks-background-primary {
	background-color: var(--bricks-color-primary);
	border-color: var(--bricks-color-primary);
}

.brxe-button.bricks-background-secondary {
	background-color: var(--bricks-color-secondary);
	border-color: var(--bricks-color-secondary);
}

.brxe-button.bricks-background-dark {
	background-color: var(--bricks-bg-dark);
	border-color: var(--bricks-bg-dark);
	color: var(--bricks-text-light);
}

.brxe-button.bricks-background-light {
	background-color: var(--bricks-bg-light);
	border-color: var(--bricks-bg-light);
	color: var(--bricks-text-dark);
}

.brxe-button.outline {
	--main-clr: var(--clr-button--outline);
	
	color: var(--main-clr);
	border-color: var(--main-clr);
	background-color: #f5f3ef80;
}

.brxe-button.outline.bricks-color-primary {
	--main-clr: var(--bricks-color-primary);
}

.brxe-button.outline.bricks-color-secondary {
	--main-clr: var(--bricks-color-secondary);
}

.brxe-button.outline.bricks-color-dark {
	--main-clr: var(--bricks-text-dark);
}

.brxe-button.outline.bricks-color-light {
	--main-clr: var(--bricks-text-light);
}

.brxe-button svg path {
	stroke: currentColor;
}

.brxe-button:hover {
	color: var(--bricks-text-dark);
	background-color: var(--clr-button__bg-hover);
	border-color: var(--clr-button__bg-hover);
}

/*  */