/**
 * AOR typography.
 *
 * Two ways in, both scoped — nothing here restyles a bare element, so this
 * file cannot alter existing Salient pages:
 *
 *   1. Utility classes  — .aor-h3, .aor-text-p-sm on a single element
 *   2. Scope class      — .aor-typography on a wrapper, styling the WYSIWYG
 *                         content inside it
 *
 * To apply the scale to every heading on the site, see global-typography.css.
 */

/* ==========================================================================
   Utilities
   ========================================================================== */

.aor-h1,
.aor-h2,
.aor-h3,
.aor-h4,
.aor-h5,
.aor-h6 {
	font-family: var(--aor-font-heading);
	font-weight: var(--aor-weight-heading);
	color: var(--aor-color-heading);
}

.aor-h1 { font-size: var(--aor-text-h1); line-height: var(--aor-leading-h1); }
.aor-h2 { font-size: var(--aor-text-h2); line-height: var(--aor-leading-h2); }
.aor-h3 { font-size: var(--aor-text-h3); line-height: var(--aor-leading-h3); }
.aor-h4 { font-size: var(--aor-text-h4); line-height: var(--aor-leading-h4); }
.aor-h5 { font-size: var(--aor-text-h5); line-height: var(--aor-leading-h5); }
.aor-h6 { font-size: var(--aor-text-h6); line-height: var(--aor-leading-h6); }

.aor-text-p-lg,
.aor-text-p-md,
.aor-text-p-sm,
.aor-text-p-xs {
	font-family: var(--aor-font-body);
	line-height: var(--aor-leading-body);
}

.aor-text-p-lg { font-size: var(--aor-text-p-lg); }
.aor-text-p-md { font-size: var(--aor-text-p-md); }
.aor-text-p-sm { font-size: var(--aor-text-p-sm); }
.aor-text-p-xs { font-size: var(--aor-text-p-xs); }

/* ==========================================================================
   WYSIWYG scope

   Put .aor-typography on a wrapper and everything an editor can produce inside
   it picks up the scale. Vertical rhythm uses the margin-top-only convention:
   spacing belongs between blocks, never before the first or after the last.
   ========================================================================== */

.aor-typography {
	font-family: var(--aor-font-body);
	font-size: var(--aor-text-base);
	line-height: var(--aor-leading-body);
	color: var(--aor-color-body);
}

.aor-typography > * {
	margin-top: var(--aor-space-3xs);
	margin-bottom: 0;
}

.aor-typography > :first-child {
	margin-top: 0;
}

/* Salient sets p { padding-bottom: 27px } globally; inside this scope the
 * margin-top convention above owns the rhythm, so strip the padding. */
.aor-typography p {
	padding-bottom: 0;
}

.aor-typography h1,
.aor-typography h2,
.aor-typography h3,
.aor-typography h4,
.aor-typography h5,
.aor-typography h6 {
	font-family: var(--aor-font-heading);
	font-weight: var(--aor-weight-heading);
	color: var(--aor-color-heading);
}

.aor-typography h1 { font-size: var(--aor-text-h1); line-height: var(--aor-leading-h1); }
.aor-typography h2 { font-size: var(--aor-text-h2); line-height: var(--aor-leading-h2); }
.aor-typography h3 { font-size: var(--aor-text-h3); line-height: var(--aor-leading-h3); }
.aor-typography h4 { font-size: var(--aor-text-h4); line-height: var(--aor-leading-h4); }
.aor-typography h5 { font-size: var(--aor-text-h5); line-height: var(--aor-leading-h5); }
.aor-typography h6 { font-size: var(--aor-text-h6); line-height: var(--aor-leading-h6); }

/* A heading following body copy needs more air above it than a paragraph does. */
.aor-typography > h1,
.aor-typography > h2,
.aor-typography > h3,
.aor-typography > h4,
.aor-typography > h5,
.aor-typography > h6 {
	margin-top: var(--aor-space-sm);
}

.aor-typography ul,
.aor-typography ol {
	padding-left: 1.25em;
}

.aor-typography li + li {
	margin-top: var(--aor-space-6xs);
}

.aor-typography a {
	color: var(--aor-color-brand);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.aor-typography a:hover,
.aor-typography a:focus {
	color: var(--aor-color-brand-dark);
}

.aor-typography strong,
.aor-typography b {
	font-weight: var(--aor-weight-bold);
}

.aor-typography blockquote {
	padding-left: var(--aor-space-4xs);
	border-left: 3px solid var(--aor-color-brand);
	font-size: var(--aor-text-p-lg);
}

.aor-typography img {
	max-width: 100%;
	height: auto;
}

/* Size modifiers for a whole block of WYSIWYG content. */
.aor-typography--lg { font-size: var(--aor-text-p-lg); }
.aor-typography--md { font-size: var(--aor-text-p-md); }
.aor-typography--sm { font-size: var(--aor-text-p-sm); }
.aor-typography--xs { font-size: var(--aor-text-p-xs); }