/* Contact section: the section with the CSS class qc-contact (tools/divi/layouts/contact.php).
   Columns, gaps, the address card, type, colours, the form fields and the button are Divi
   settings on the modules. This file only holds what those settings cannot say, copied
   from the old contact.css: the hairline and line icon on each phone/email link, and
   Divi's own 10px under every heading, which no heading setting removes. */

/* Headings in this section: the space under them is the module's own margin (12px under
   the headline, 8px under the organisation name), as in the old build. */
.qc-contact .et_pb_heading .et_pb_module_header {
	padding-bottom: 0;
}

/* Phone and email (the Text module with the CSS class qc-contact-lines in the address
   card): each link is a row with a hairline above it, 10px of air above and below, and
   the old build's 16px line icon in blue before the text. The icon follows the link:
   a phone (tel:) link gets the handset, an email (mailto:) link the envelope, so the
   lines can be edited, reordered or added to in the text editor. */
.qc-contact-lines p {
	margin: 0;
	padding: 0;
}
.qc-contact-lines a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-top: 1px solid #e3e6e8;
}
.qc-contact-lines a[href^="tel:"]::before,
.qc-contact-lines a[href^="mailto:"]::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background-color: #009ad9;
	-webkit-mask: var(--qc-line-icon) center / 16px 16px no-repeat;
	mask: var(--qc-line-icon) center / 16px 16px no-repeat;
}
/* The two icons, drawn exactly as the old template's inline SVGs (1.5px strokes). */
.qc-contact-lines a[href^="tel:"] {
	--qc-line-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M3 2h3l1.5 3.5L6 7a8 8 0 0 0 3 3l1.5-1.5L14 10v3a1 1 0 0 1-1 1A11 11 0 0 1 2 3a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}
.qc-contact-lines a[href^="mailto:"] {
	--qc-line-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Crect x='1.5' y='3.5' width='13' height='9' rx='1.5'/%3E%3Cpath d='m2 4.5 6 4.5 6-4.5'/%3E%3C/svg%3E");
}

/* The form (the Contact Form with the CSS class qc-contact-form): the message box only
   grows downwards, and the blue focus border and ring set in Divi replace the browser's
   focus outline, as in the old form. */
.qc-contact-form textarea {
	resize: vertical;
}
.qc-contact-form .et_pb_contact_field .input:focus {
	outline: none;
}