/*
 * Contact page: the enquiry form beside its introduction (C22) and the office cards (C23).
 * Markup comes from inc/components/contact.php; the form itself is the nlc/form block
 * (field styles live in theme.css).
 */

/* ------------------------------------------------------------ Form and intro */

.wp-block-columns.nlc-contact-split { gap: var(--wp--preset--spacing--50); align-items: center; }
.nlc-contact-intro > * { margin-block: 0; }
.nlc-contact-intro > * + * { margin-top: var(--wp--preset--spacing--20); }
.nlc-contact-lead > * { margin: 0; }
.nlc-contact-lead { margin-top: var(--wp--preset--spacing--30); }
.nlc-contact-lead a { text-underline-offset: .2em; }
@media (pointer: coarse) {
	.nlc-contact-lead a { display: inline-block; padding-block: .75rem; margin-block: -.75rem; }
}

.nlc-contact-card {
	padding: clamp(1.5rem, 4vw, 3.5rem);
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--preset--shadow--card);
}
.nlc-contact-card > * { margin-block: 0; }

/* The introduction comes first in the markup, so phones read it before the form;
   from 782px the form moves to the left, as on the live site. */
@media (min-width: 782px) {
	.nlc-contact-formcol { order: -1; }
	.nlc-contact-split { padding-inline: 0; }
}

/* --------------------------------------------------------------- Office cards */

/* As on the live site: a 50px copper icon centred over the title, the card's content
   centred in its height, and every line centred on phones. */
.wp-block-columns.nlc-offices { gap: var(--wp--preset--spacing--40); }
.nlc-office {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--white);
	/* The live cards are square except for one generous corner at the bottom left. */
	border-radius: var(--wp--custom--radius--card) var(--wp--custom--radius--card) var(--wp--custom--radius--card) 4.375rem;
	box-shadow: var(--wp--preset--shadow--card);
}
.nlc-office > * { margin-block: 0; }
.nlc-office > * + * { margin-top: var(--wp--preset--spacing--20); }
.nlc-office > .nlc-office__icon { font-size: 3.125rem; margin-bottom: var(--wp--preset--spacing--20); }
.nlc-office h3 {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 300;
	letter-spacing: var(--wp--custom--tracking--title);
	text-transform: uppercase;
}
.nlc-office p { font-size: var(--wp--preset--font-size--small); letter-spacing: .02em; }
.nlc-office p a { display: inline-block; padding-block: .6rem; text-decoration: none; }
.nlc-office p a:hover { text-decoration: underline; text-underline-offset: .2em; }
.nlc-office p + p { margin-top: var(--wp--preset--spacing--30); }
/* A copper pin (Font Awesome map-marker-alt) before each address. */
.nlc-office__address::before {
	content: "";
	display: inline-block;
	width: .75em;
	height: 1em;
	margin-right: .5em;
	vertical-align: -.125em;
	background: var(--wp--preset--color--copper);
	-webkit-mask: url("../../icons/map-marker-alt.svg") center / contain no-repeat;
	mask: url("../../icons/map-marker-alt.svg") center / contain no-repeat;
}

@media (max-width: 781px) {
	.nlc-office,
	.nlc-contact-intro { text-align: center; }
}