/**
 * Default content page — page-default.php.
 *
 * Kept out of style.css: that file is shared with the rest of the team and
 * appending to it makes every change here collide with theirs. Same reasoning
 * footer.css and animations.css are already separate.
 *
 * Geometry follows the Article page, which is the same shape and is the only
 * approved reference for a hero over a single constrained column.
 */

.dm-default-hero {
	min-height: 400px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}

.dm-default-hero .dm-breadcrumbs,
.dm-default-hero .dm-breadcrumbs a {
	color: rgba(255, 255, 255, 0.7);
}

.dm-default-hero .dm-breadcrumbs span {
	color: var(--dm-white);
}

.dm-default-hero-title {
	font-family: var(--dm-font-heading);
	font-size: 64px !important;
	line-height: 1 !important;
	color: var(--dm-white) !important;
	margin: 0;
}

.dm-default-hero-intro {
	font-family: var(--dm-font-body);
	font-size: 17px;
	line-height: 27px;
	color: var(--dm-white);
	max-width: 640px;
	margin: 18px 0 0;
	padding-bottom: 0;
}

.dm-default-wrap {
	background: var(--dm-parchment-light);
	/* Measured off the mockup: the content band runs 468..1341 with the
	   eyebrow's ink starting at 594. */
	padding-top: 120px;
	padding-bottom: 40px;
}

.dm-default-eyebrow,
.dm-default-eyebrow p {
	font-family: var(--dm-font-body);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--dm-straw);
	margin: 0 0 14px;
	padding-bottom: 0;
}

/* Matches the article column: 996px, left-aligned rather than centred. */
.dm-default-body {
	max-width: 996px;
}

.dm-default-title {
	font-family: var(--dm-font-heading);
	font-size: 46px !important;
	line-height: 1 !important;
	color: var(--dm-admiralty) !important;
	margin: 0 0 38px;
}

/* Salient's skin stylesheet puts padding-bottom: 1.5em on every paragraph,
   which stacks on top of the margins below and opens the copy right out.
   Spacing here is margin-driven, so the padding is zeroed. */
.dm-default-content p {
	font-family: var(--dm-font-body);
	color: var(--dm-body-text);
	margin: 0 0 22px;
	padding-bottom: 0;
}

/* Legal copy leans on subheadings far more than an article does — these are
   the section markers running down a privacy policy. */
.dm-default-content h2,
.dm-default-content h3,
.dm-default-content h4,
.dm-default-content h5 {
	font-family: var(--dm-font-heading);
	color: var(--dm-admiralty) !important;
	margin: 40px 0 16px;
}

.dm-default-content h2 { font-size: 32px !important; line-height: 1.2 !important; }
.dm-default-content h3 { font-size: 26px !important; line-height: 1.25 !important; }
.dm-default-content h4 { font-size: 21px !important; line-height: 1.3 !important; }
.dm-default-content h5 { font-size: 18px !important; line-height: 1.35 !important; }

.dm-default-content ul,
.dm-default-content ol {
	font-family: var(--dm-font-body);
	color: var(--dm-body-text);
	margin: 0 0 22px 22px;
}

.dm-default-content li {
	margin-bottom: 8px;
}

.dm-default-content a {
	color: var(--dm-admiralty);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.25s ease;
}

.dm-default-content a:hover {
	color: var(--dm-straw);
}

.dm-default-content strong {
	color: var(--dm-admiralty);
}

@media only screen and (max-width: 999px) {

	.dm-default-hero {
		min-height: 260px;
	}

	.dm-default-hero-title {
		font-size: 32px !important;
	}

	.dm-default-hero-intro {
		font-size: 16px;
		line-height: 25px;
	}

	.dm-default-wrap {
		padding-top: 40px;
		padding-bottom: 60px;
	}

	.dm-default-title {
		font-size: 32px !important;
	}

	.dm-default-content h2 { font-size: 26px !important; }
	.dm-default-content h3 { font-size: 22px !important; }
	.dm-default-content h4 { font-size: 19px !important; }
}