/*
    Headings
*/
h1,
.h1,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
	font-family: var(--heading-font);
	font-weight: 900;
	font-style: normal;
	line-height: 1.1;
	margin-bottom: 0.5rem;
	margin-top: 0;
	color: inherit;
	text-wrap: balance;
}

h2,
.h2,
h6,
.h6 {
	font-family: var(--body-font);
	font-weight: 700;
	font-style: normal;
	line-height: 1.3;
	margin-bottom: 0.2em;
	margin-top: 0;
	color: inherit;
	text-wrap: balance;
	letter-spacing: 3px;
}

h6,
.h6 {
	font-weight: 800;
	text-transform: uppercase;
}

h6.subtitle,
.h6.subtitle {
	display: grid;
	place-content: center;
	place-items: center;
	grid-template-columns: 1fr auto 1fr;
	gap: 1rem;
	margin-bottom: 1rem;
}

h6.subtitle::before,
.h6.subtitle::before,
h6.subtitle::after,
.h6.subtitle::after {
	content: '';
	position: relative;
	display: block;
	height: 1px;
	width: clamp(5rem, 10vw, 10rem);
	background-color: rgba(0, 0, 0, 0.1);
}

h6.subtitle::before,
.h6.subtitle::before {
	justify-self: end;
}

h6.subtitle::after,
.h6.subtitle::after {
	justify-self: start;
}

h6.subtitle.fluid::before,
.h6.subtitle.fluid::before,
h6.subtitle.fluid::after,
.h6.subtitle.fluid::after {
	width: 100%;
}

.text-left h6.subtitle:not(.text-center),
.text-left .h6.subtitle:not(.text-center),
h6.text-left.subtitle,
.h6.text-left.subtitle {
	grid-template-columns: auto 1fr;
}

.text-left h6.subtitle:not(.text-center)::before,
.text-left .h6.subtitle:not(.text-center)::before,
h6.text-left.subtitle::before,
.h6.text-left.subtitle::before {
	display: none !important;
}

.text-right h6.subtitle:not(.text-center),
.text-right .h6.subtitle:not(.text-center),
h6.text-right.subtitle,
.h6.text-right.subtitle {
	grid-template-columns: 1fr auto;
}

.text-right h6.subtitle:not(.text-center)::after,
.text-right .h6.subtitle:not(.text-center)::after,
h6.text-right.subtitle::after,
.h6.text-right.subtitle::after {
	display: none !important;
}

h6.subtitle.text-white::before,
.h6.subtitle.text-white::before,
h6.subtitle.text-white::after,
.h6.subtitle.text-white::after {
	background-color: rgba(255, 255, 255, 0.5);
}

/* 
    Header 1 
*/
h1,
.h1 {
	font-size: 3.4rem;
}
@media (min-width: 576px) {
	h1,
	.h1 {
		font-size: 4.4rem;
	}
}
@media (min-width: 768px) {
	h1,
	.h1 {
		font-size: 5.4rem;
	}
}
@media (min-width: 1024px) {
	h1,
	.h1 {
		font-size: 6.4rem;
	}
}
@media (min-width: 1280px) {
	h1,
	.h1 {
		font-size: 7.4rem;
	}
}
@media (min-width: 1540px) {
	h1,
	.h1 {
		font-size: 8.4rem;
	}
}

/* 
    Header 2
*/
h2,
.h2 {
	font-size: 2.9rem;
}
@media (min-width: 576px) {
	h2,
	.h2 {
		font-size: 3.4rem;
	}
}
@media (min-width: 768px) {
	h2,
	.h2 {
		font-size: 4.2rem;
	}
}
@media (min-width: 1024px) {
	h2,
	.h2 {
		font-size: 5rem;
	}
}
@media (min-width: 1280px) {
	h2,
	.h2 {
		font-size: 5.8rem;
	}
}
@media (min-width: 1540px) {
	h2,
	.h2 {
		font-size: 6.6rem;
	}
}

/* 
    Header 3 
*/
h3,
.h3 {
	font-size: 2.5rem;
}
@media (min-width: 576px) {
	h3,
	.h3 {
		font-size: 2.8rem;
	}
}
@media (min-width: 768px) {
	h3,
	.h3 {
		font-size: 3.3rem;
	}
}
@media (min-width: 1024px) {
	h3,
	.h3 {
		font-size: 3.8rem;
	}
}
@media (min-width: 1280px) {
	h3,
	.h3 {
		font-size: 4.4rem;
	}
}
@media (min-width: 1540px) {
	h3,
	.h3 {
		font-size: 4.8rem;
	}
}

/* 
    Header 4
*/
h4,
.h4 {
	font-size: 2.1rem;
}
@media (min-width: 576px) {
	h4,
	.h4 {
		font-size: 2.3rem;
	}
}
@media (min-width: 768px) {
	h4,
	.h4 {
		font-size: 2.6rem;
	}
}
@media (min-width: 1024px) {
	h4,
	.h4 {
		font-size: 3rem;
	}
}
@media (min-width: 1280px) {
	h4,
	.h4 {
		font-size: 3.4rem;
	}
}
@media (min-width: 1540px) {
	h4,
	.h4 {
		font-size: 3.8rem;
	}
}

/* 
    Header 5 
*/
h5,
.h5 {
	font-size: 1.8rem;
}
@media (min-width: 576px) {
	h5,
	.h5 {
		font-size: 1.9rem;
	}
}
@media (min-width: 768px) {
	h5,
	.h5 {
		font-size: 2.1rem;
	}
}
@media (min-width: 1024px) {
	h5,
	.h5 {
		font-size: 2.3rem;
	}
}
@media (min-width: 1280px) {
	h5,
	.h5 {
		font-size: 2.5rem;
	}
}
@media (min-width: 1540px) {
	h5,
	.h5 {
		font-size: 2.8rem;
	}
}

/* 
    Header 6 
*/
h6,
.h6 {
	font-size: 1.3rem;
}
@media (min-width: 576px) {
	h6,
	.h6 {
		font-size: 1.3rem;
	}
}
@media (min-width: 768px) {
	h6,
	.h6 {
		font-size: 1.4rem;
	}
}
@media (min-width: 1024px) {
	h6,
	.h6 {
		font-size: 1.4rem;
	}
}
@media (min-width: 1280px) {
	h6,
	.h6 {
		font-size: 1.5rem;
	}
}
@media (min-width: 1540px) {
	h6,
	.h6 {
		font-size: 1.5rem;
	}
}

/*
    Paragraphs
*/
p {
	margin-top: 0;
	margin-bottom: 1rem;
}

/*
    Lead Paragraphs
*/
.lead {
	font-weight: 300;
	line-height: 1.5;
	text-wrap: balance;
}

.lead {
	font-size: 1.8rem;
}
@media (min-width: 576px) {
	.lead {
		font-size: 1.9rem;
	}
}
@media (min-width: 768px) {
	.lead {
		font-size: 2rem;
	}
}
@media (min-width: 1024px) {
	.lead {
		font-size: 2.1rem;
	}
}
@media (min-width: 1280px) {
	.lead {
		font-size: 2.2rem;
	}
}
@media (min-width: 1540px) {
	.lead {
		font-size: 2.3rem;
	}
}

/*
    Last child elements
*/
h1:last-child,
.h1:last-child,
h2:last-child,
.h2:last-child,
h3:last-child,
.h3:last-child,
h4:last-child,
.h4:last-child,
h5:last-child,
.h5:last-child,
h6:last-child,
.h6:last-child,
p:last-child {
	margin-bottom: 0 !important;
}

/* if there are 2 p in flex div no margin bottom for both p */
.flex:has(> p + p) > p {
	margin-bottom: 0 !important;
}
/*
    Text highlighting
*/
::selection,
mark,
.highlight {
	background-color: var(--color-primary) !important;
	color: var(--color-primary-contrast) !important;
}

.black-weight {
	font-weight: 800;
}