/* ==========================================================================
   Contact page layout (form fields are styled in theme.css).
   Loaded on the Contact page and pages that show a Contact Form 7 form.
   ========================================================================== */
.dd-contact__head {
	max-width: 720px;
	margin-bottom: 32px;
}

.dd-contact__intro {
	color: var(--dd-muted);
}

.dd-contact__grid {
	display: grid;
	gap: 24px;
	align-items: start;
}

/* Info card */
.dd-contact__info {
	padding: 28px 24px;
	border-radius: var(--dd-radius);
	background: var(--dd-dark);
	color: rgba(255, 255, 255, .78);
}

.dd-contact__info-title {
	margin-bottom: 22px;
	color: var(--dd-white);
	font-size: 20px;
}

.dd-contact__list {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dd-contact__list li {
	display: flex;
	gap: 14px;
	line-height: 1.5;
	align-items: center;
}

.dd-contact__list small {
	display: block;
	margin-bottom: 2px;
	color: rgba(255, 255, 255, .55);
	font-size: 13px;
}

.dd-contact__list a {
	color: var(--dd-white);
	text-decoration: none;
}

.dd-contact__list a:hover {
	text-decoration: underline;
}

.dd-contact__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--dd-primary);
	color: var(--dd-white);
	font-size: 18px;
}

/* Form box */
.dd-contact__form {
	padding: 28px 24px;
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius);
	background: var(--dd-white);
}

.dd-contact__form-title {
	margin-bottom: 20px;
	font-size: 22px;
}

.dd-contact__form-title span {
	color: var(--dd-primary);
}

@media (min-width: 992px) {
	.dd-contact__grid {
		grid-template-columns: 5fr 7fr;
		gap: 32px;
	}

	.dd-contact__info,
	.dd-contact__form {
		padding: 36px;
	}

	/* Stays in view below the sticky header while the form scrolls. */
	.dd-contact__info {
		position: sticky;
		top: calc(var(--dd-sticky-h, 0px) + 20px);
	}
}