// Typography from the landing page design.
// Font weights in the site's Adobe Fonts kit (yyu0uhn) for itc-avant-garde-gothic-pro:
// 300 = Book, 500 = Medium, 700 = Bold. Nothing lighter than Book is loaded.

// Section headings ("Landscape Design and Construction", "Contact Us", etc.):
// Overrides the site-wide h1/h2 style (uppercase, 2px letter spacing).
.section-title {
	text-transform: none;
	letter-spacing: normal;
	font-weight: 300;
	color: $light-grey;
	font-size: 1.375rem;
	line-height: 1.3;
	margin-bottom: 1.5rem;

	@include media-breakpoint-up(lg) {
		font-size: 1.6875rem; // 27px
	}
}

// Same as section-title but in the darker heading grey (e.g. "Contact Us").
// Use both classes: "section-title section-title--dark".
.section-title--dark {
	color: $grey;
}


.section-text {
	font-size: 0.95rem;
	line-height: 1.7;
	color: $light-grey;

	p {
		font-size: inherit;
		line-height: inherit;
		margin-bottom: 1.25rem;
	}

	strong, b {
		font-weight: 500;
	}

	@include media-breakpoint-up(lg) {
		font-size: 1rem;
	}
}

// Slightly smaller, tighter body copy (e.g. the text above the contact form).
// Use both classes: "section-text section-text--small".
.section-text--small {
	font-size: .875rem;
	line-height: 1.55;

	p { margin-bottom: 1rem; }

	@include media-breakpoint-up(lg) {
		font-size: .9375rem;
	}
}