/* ABOUTME: Typography styles for heading elements with size classes and icons. */
/* ABOUTME: Defines heading scales, hgroup layout, labels, and soft-hyphen support. */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
	font-family: "Inter Youth";
	line-height: 0.9;
	display: flex;
	justify-content: center;
	flex-direction: column;
	hyphens: auto;
	overflow-wrap: break-word;
	word-break: normal;
	text-wrap: balance;
}

.size-supreme,
.size-colossal,
.size-extremely-large {
	hyphenate-limit-chars: 8 4 4;
}

.size-supreme {
	font-size: var(--step-7);
}
.size-colossal {
	font-size: var(--step-6);
}
.size-extremely-large {
	font-size: var(--step-5);
}
h1,
.size-extra-large {
	font-size: var(--step-4);
}
h2,
.size-very-large {
	font-size: var(--step-3);
	line-height: 1.1;
}
h3,
.size-larger {
	font-size: var(--step-2);
	line-height: 1.2;
}
h4,
.size-large {
	font-size: var(--step-1);
	line-height: 1.2;
}
h5 {
	font-size: var(--step-0);
	line-height: 1.3;
}
h6 {
	font-size: var(--step-0);
	line-height: 1.3;
}

.size-regular {
	font-size: var(--step-0);
}

.size-small {
	font-size: var(--step--1);
}

.size-extra-small {
	font-size: var(--step--2);
}

h1 em,
h2 em,
h3 em,
h4 em,
h5 em,
h6 em {
	font-weight: 400;
	font-style: normal;
}

hgroup {
	width: 100%;
}

hgroup:has(svg) {
	display: grid;
	grid-column-gap: 0.5rem;
	grid-row-gap: 0px;
	grid-template-rows: auto 1fr;
}

hgroup .svg-icon {
	height: 100%;
}

.svg-icon svg {
	width: auto;
	height: 100%;
}

hgroup.size-supreme {
	grid-template-columns: var(--step-7) 1fr;
}

hgroup.size-colossal {
	grid-template-columns: var(--step-6) 1fr;
}

hgroup.size-extremely-large {
	grid-template-columns: var(--step-5) 1fr;
}

hgroup.size-extra-large,
hgroup:has(h1) {
	grid-template-columns: var(--step-4) 1fr;
}

hgroup.size-very-large,
hgroup:has(h2) {
	grid-template-columns: var(--step-3) 1fr;
}
hgroup.size-larger,
hgroup:has(h3) {
	grid-template-columns: var(--step-2) 1fr;
}
hgroup.size-large,
hgroup:has(h4) {
	grid-template-columns: var(--step-1) 1fr;
}

hgroup:has(h5),
hgroup:has(h6) {
	grid-template-columns: var(--step-0) 1fr;
}

hgroup hgroup span {
	grid-area: 1 / 2 / 2 / 3;
}
hgroup .heading-icon {
	grid-area: 2 / 1 / 3 / 2;
	aspect-ratio: 1;
}
hgroup h1,
hgroup h2,
hgroup h3,
hgroup h4,
hgroup h5,
hgroup h6 {
	grid-area: 2 / 2 / 3 / 3;
}
hgroup svg {
	width: 100%;
	height: 100%;
	float: left;
	display: block;
	clear: both;
}

hgroup .heading-label {
	grid-area: 1 / 2 / 1 / 3;
	font-size: 1rem;
}

.section--card-background-colored.section--background-dark-blue hgroup span,
.section--background-colored.section--background-dark-blue hgroup span {
	color: var(--color-regular-turquoise);
}

.section--card-background-colored.section--background-regular-turquoise
	hgroup
	span,
.section--background-colored.section--background-regular-turquoise hgroup span {
	color: #fff;
}