/**
 * Bitly type-scale utilities used by report content.
 *
 * Report HTML is authored against the blog design system's utility classes
 * (.h1–.h6, .p0–.p2, .preheading, .caption), which the old theme supplied
 * globally. They are reproduced here so reports keep their typography on a
 * theme that has no equivalent scale.
 *
 * Scope and specificity are both deliberate:
 *
 * - Scoped to .bitly-report-page so the host theme's own header, nav, and
 *   footer keep their typography on report pages. A destination theme may
 *   already define .p0/.p1 with different steps, and those must keep applying
 *   outside the report.
 * - Two classes deep (0,2,0) — above a theme's bare `.p0` (0,1,0) so reports
 *   win inside their own region, and below reports.css context rules such as
 *   `body.report .article-header-report .p0` (0,3,1) so per-block overrides
 *   still take precedence. Load order also matters: this file is enqueued
 *   before reports.css.
 *
 * Values mirror the live design system (main.min.css); breakpoints are plain
 * 768px / 1024px, not Foundation's em breakpoints.
 */

.bitly-report-page .h1,
.bitly-report-page .h2,
.bitly-report-page .h3,
.bitly-report-page .h4,
.bitly-report-page .h5,
.bitly-report-page .h6,
.bitly-report-page .p0,
.bitly-report-page .p1,
.bitly-report-page .p2,
.bitly-report-page .caption,
.bitly-report-page .preheading,
.bitly-report-page .preheading2 {
	font-family: "Bitly Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #031f39;
}

/* Headings ---------------------------------------------------------------- */

.bitly-report-page .h1 {
	font-weight: 700;
	font-size: 36px;
	line-height: 110%;
}

.bitly-report-page .h2 {
	font-weight: 700;
	font-size: 30px;
	line-height: 120%;
}

.bitly-report-page .h3 {
	font-weight: 700;
	font-size: 28px;
	line-height: 120%;
}

.bitly-report-page .h4 {
	font-weight: 600;
	font-size: 24px;
	line-height: 120%;
}

.bitly-report-page .h5 {
	font-weight: 600;
	font-size: 20px;
	line-height: 120%;
}

.bitly-report-page .h6 {
	font-weight: 600;
	font-size: 18px;
	line-height: 140%;
}

/* Body ------------------------------------------------------------------- */

.bitly-report-page .p0 {
	font-weight: 400;
	font-size: 18px;
	line-height: 160%;
}

.bitly-report-page .p1 {
	font-weight: 400;
	font-size: 16px;
	line-height: 160%;
}

.bitly-report-page .p2 {
	font-weight: 400;
	font-size: 14px;
	line-height: 160%;
}

.bitly-report-page .caption {
	font-weight: 400;
	font-size: 12px;
	line-height: 160%;
}

/* Eyebrows --------------------------------------------------------------- */

.bitly-report-page .preheading {
	font-weight: 500;
	font-size: 16px;
	line-height: 140%;
	text-transform: uppercase;
}

.bitly-report-page .preheading2 {
	font-weight: 500;
	font-size: 14px;
	line-height: 140%;
	color: #6c6965;
	letter-spacing: 1.28px;
	text-transform: uppercase;
}

/* Steps ------------------------------------------------------------------ */

@media screen and (min-width: 768px) {
	.bitly-report-page .h1 {
		font-size: 48px;
	}

	.bitly-report-page .h2 {
		font-size: 40px;
	}

	.bitly-report-page .h3 {
		font-size: 32px;
	}

	.bitly-report-page .p0 {
		font-size: 22px;
	}

	.bitly-report-page .p1 {
		font-size: 18px;
	}

	.bitly-report-page .p2 {
		font-size: 16px;
	}

	.bitly-report-page .caption {
		font-size: 14px;
	}

	.bitly-report-page .preheading {
		font-size: 20px;
	}

	.bitly-report-page .preheading2 {
		font-size: 16px;
	}
}

@media screen and (min-width: 1024px) {
	.bitly-report-page .h1 {
		font-size: 64px;
	}

	.bitly-report-page .h2 {
		font-size: 48px;
	}

	.bitly-report-page .h3 {
		font-size: 40px;
	}

	.bitly-report-page .h4 {
		font-size: 32px;
	}

	.bitly-report-page .h5 {
		font-size: 24px;
	}

	.bitly-report-page .h6 {
		font-size: 20px;
	}

	.bitly-report-page .p0 {
		font-size: 24px;
	}
}
