//
// Headings
//

.brand-headline {
	font-family: var(--brand-headline);
}

.text-secondary-light-1 {
	color: @brand-secondary-light-1;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	margin-top: 2rem;
	margin-bottom: 0.5rem;
	color: var(--brand-secondary);
	text-wrap: balance;

	&:first-child {
		margin-top: 0;
	}

	.material-icons,
	:is(
		i[class^="at-"],
		i[class*=" at-"],
		i[class^="swepay-icon-"],
		i[class*=" swepay-icon-"]
	) {
		display: inline-flex;
		vertical-align: text-top;
	}
}

.hero {
	font-size: 3.5rem;
	line-height: 4.25rem;
	font-family: var(--brand-headline);
	font-weight: var(--font-weight-header, 400);

	.material-icons,
	:is(
		i[class^="at-"],
		i[class*=" at-"],
		i[class^="swepay-icon-"],
		i[class*=" swepay-icon-"]
	) {
		font-size: 3.5rem;
		line-height: 4.25rem;
	}
}

h1,
.h1 {
	font-size: 2rem;
	font-family: var(--brand-headline);
	line-height: 2.875rem;
	font-weight: var(--font-weight-header, 400);

	.material-icons,
	:is(
		i[class^="at-"],
		i[class*=" at-"],
		i[class^="swepay-icon-"],
		i[class*=" swepay-icon-"]
	) {
		font-size: 2rem;
		line-height: 2.875rem;
	}
}

h2,
.h2 {
	font-size: 1.5rem;
	font-family: var(--brand-headline);
	line-height: 2.125rem;
	font-weight: var(--font-weight-header, 400);

	.material-icons,
	:is(
		i[class^="at-"],
		i[class*=" at-"],
		i[class^="swepay-icon-"],
		i[class*=" swepay-icon-"]
	) {
		font-size: 1.5rem;
		line-height: 2.125rem;
	}
}

h3,
.h3 {
	font-size: 1.25rem;
	font-family: var(--brand-headline);
	line-height: 1.75rem;
	font-weight: var(--font-weight-header, 400);

	.material-icons,
	:is(
		i[class^="at-"],
		i[class*=" at-"],
		i[class^="swepay-icon-"],
		i[class*=" swepay-icon-"]
	) {
		font-size: 1.25rem;
		line-height: 1.75rem;
	}
}

// any change here should also be applied to `.form-group label` (in form.less)
h4,
.h4 {
	font-family: var(--brand-headline);
	font-weight: var(--font-weight-header, 400);
	font-size: 1.125rem;
	line-height: 1.625rem;

	.material-icons,
	:is(
		i[class^="at-"],
		i[class*=" at-"],
		i[class^="swepay-icon-"],
		i[class*=" swepay-icon-"]
	) {
		font-size: 1.125rem;
		line-height: 1.625rem;
	}
}

h5,
.h5 {
	font-family: var(--brand-headline);
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: var(--font-weight-header, 400);

	.material-icons,
	:is(
		i[class^="at-"],
		i[class*=" at-"],
		i[class^="swepay-icon-"],
		i[class*=" swepay-icon-"]
	) {
		font-size: 1rem;
		line-height: 1.5rem;
	}
}

h6,
.h6 {
	font-family: var(--brand-headline);
	font-size: 0.875rem;
	line-height: 1.375rem;
	font-weight: var(--font-weight-header, 400);

	.material-icons,
	:is(
		i[class^="at-"],
		i[class*=" at-"],
		i[class^="swepay-icon-"],
		i[class*=" swepay-icon-"]
	) {
		font-size: 0.875rem;
		line-height: 1.375rem;
	}
}

//
// Paragraphs
//

.lead {
	font-size: 1.25rem;
	font-family: var(--brand-headline);
	font-weight: var(--font-weight-header, 400);
	line-height: 1.75rem;
	margin-bottom: var(--base-margin-xxl);
}

p {
	margin-top: 0;
	margin-bottom: var(--base-margin);
	text-wrap: pretty;
}

//
// Emphasis
//

small,
.small {
	font-size: 0.875rem;
	font-weight: var(--font-weight-normal);
	line-height: 1.25rem;
}

.extra-small {
	font-size: 0.75rem;
	line-height: 1.125rem;
}

mark,
.mark {
	padding: 0.2rem;
	background-color: rgb(0 0 0 / 10%);
}

strong {
	font-weight: var(--font-weight-bold) !important;
}

//
// Abbreviations and acronyms
//

abbr[title] {
	cursor: help;
}

.initialism {
	font-size: 90%;
	.text-uppercase();
}

//
// Blockquotes
//

blockquote,
.blockquote {
	padding: var(--base-padding);
	padding-left: calc(var(--base-padding) * 2.5);
	margin: calc(var(--base-margin) * 2) 0 calc(var(--base-margin) * 2);
	font-size: calc(var(--base-font-size) * 1.1);
	border-left: 5px solid @brand-primary;

	&.brand {
		border-color: @brand-primary-faded;
	}

	p,
	ul,
	ol {
		&:last-child {
			margin-bottom: 0;
		}
	}

	footer {
		display: block;
		font-size: 80%;
		color: @list-gray;

		&:before {
			content: "\2014 \00A0";
		}
	}
}

@media screen and (min-width: @screen-sm-min) {
	.hero {
		font-size: 5rem;
		line-height: 6rem;
	}

	h1,
	.h1 {
		font-size: 2.5rem;
		line-height: 3.5rem;

		.material-icons,
		:is(
			i[class^="at-"],
			i[class*=" at-"],
			i[class^="swepay-icon-"],
			i[class*=" swepay-icon-"]
		) {
			font-size: 2.5rem;
			line-height: 3.5rem;
		}
	}

	h2,
	.h2 {
		font-size: 2rem;
		line-height: 2.75rem;

		.material-icons,
		:is(
			i[class^="at-"],
			i[class*=" at-"],
			i[class^="swepay-icon-"],
			i[class*=" swepay-icon-"]
		) {
			font-size: 2rem;
			line-height: 2.75rem;
		}
	}

	h3,
	.h3 {
		font-size: 1.5rem;
		line-height: 2.125rem;

		.material-icons,
		:is(
			i[class^="at-"],
			i[class*=" at-"],
			i[class^="swepay-icon-"],
			i[class*=" swepay-icon-"]
		) {
			font-size: 1.5rem;
			line-height: 2.125rem;
		}
	}

	// any change here should also be applied to `.form-group label` (in form.less)
	h4,
	.h4 {
		font-size: 1.25rem;
		line-height: 1.875rem;

		.material-icons,
		:is(
			i[class^="at-"],
			i[class*=" at-"],
			i[class^="swepay-icon-"],
			i[class*=" swepay-icon-"]
		) {
			font-size: 1.25rem;
			line-height: 1.875rem;
		}
	}

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

	h6,
	.h6 {
		font-size: 0.875rem;
		line-height: 1.25rem;

		.material-icons,
		:is(
			i[class^="at-"],
			i[class*=" at-"],
			i[class^="swepay-icon-"],
			i[class*=" swepay-icon-"]
		) {
			font-size: 0.875rem;
			line-height: 1.25rem;
		}
	}
}