/**
 * Responsive Typography
 * Explicit font sizes at specific breakpoints
 *
 * @package rcpharm
 */

/* ============================================
   Mobile First (Base styles - up to 767px)
   ============================================ */

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	margin-top: 0;
	margin-bottom: var(--wp--custom--spacing--xsmall);
}

h1,
.h1 {
	font-size: var(--wp--preset--font-size--mobile-header-xlarge);
	line-height: 44px;
}

h2,
.h2 {
	font-size: var(--wp--preset--font-size--mobile-header-large);
	line-height: 36px;
}

h3,
.h3 {
	font-size: var(--wp--preset--font-size--mobile-header-medium);
	line-height: 36px;
}

h4,
.h4 {
	font-size: var(--wp--preset--font-size--mobile-header-small);
	line-height: 32px;
}

h5,
.h5,
h6,
.h6 {
	font-size: var(--wp--preset--font-size--mobile-header-xsmall);
	line-height: 26px;
}

/* ============================================
   Tablet (768px - 1024px)
   ============================================ */

@media (min-width: 401px) {

	h1,
	.h1 {
		font-size: var(--wp--preset--font-size--header-xlarge);
		line-height: 64px;
	}

	h2,
	.h2 {
		font-size: var(--wp--preset--font-size--header-large);
		line-height: 58px;
	}

	h3,
	.h3 {
		font-size: var(--wp--preset--font-size--header-medium);
		line-height: 48px;
	}

	h4,
	.h4 {
		font-size: var(--wp--preset--font-size--header-small);
		line-height: 38px;
	}

	h5,
	.h5,
	h6,
	.h6 {
		font-size: var(--wp--preset--font-size--header-xsmall);
		line-height: 32px;
	}
}