/**
 * Contact page — card treatment for the "Contact Information" details block
 * (Address / Phone / Email) and the "Drop us a line" CF7 form.
 *
 * UI ONLY. No markup or content changes: the details rows come from the ACF
 * WYSIWYG (`contact_form_fields > fields_content`) and the form from CF7
 * (id 214) — both keep their existing .cstm-row / .contact-label / .form-group
 * classes. Everything here only repaints them.
 *
 * All three page rows share the same .contact-info wrapper, so each card is
 * gated on what it contains: :has(.cstm-row) for the details block and
 * :has(.wpcf7-form) for the form. The third row ("Business / Credentials", a
 * plain <ul>) matches neither and is left exactly as it is. Browsers without
 * :has() skip the cards and keep the flat layout.
 *
 * Palette stays on the brand tokens (--dark-font-color / --light-font-color /
 * --dark-btn-color) with a few local tokens for spacing and shadows only.
 */

.contact-section {
	--ci-card-bg: #ffffff;
	--ci-border: #e6e8e9;
	--ci-rule: #eef0f0;
	--ci-icon-bg: #f5f6f6;
	--ci-muted: var(--light-font-color, #797e7f);
	--ci-ink: var(--dark-font-color, #353b3d);
	--ci-accent: var(--dark-btn-color, #353b3d);
	--ci-radius: 14px;
	--ci-shadow: 0 1px 2px rgba(16, 24, 28, .04), 0 10px 30px rgba(16, 24, 28, .05);
}

/* ============================================================
   1. Left column headings ("CONTACT / INFORMATION" and
   "REACH OUT / DROP US A LINE") — matched so the two carded
   rows read as a set. The "Business / Credentials" row is not
   selected here, so its heading keeps the original styling.
   ============================================================ */
.contact-section .row:has(.cstm-row) .contact-title p,
.contact-section .row:has(.wpcf7-form) .contact-title p {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .16em;
	color: var(--ci-muted);
}
.contact-section .row:has(.cstm-row) .contact-title h3,
.contact-section .row:has(.wpcf7-form) .contact-title h3 {
	letter-spacing: .02em;
}
.contact-section .row:has(.cstm-row) .contact-title h3::after,
.contact-section .row:has(.wpcf7-form) .contact-title h3::after {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	margin-top: 14px;
	border-radius: 2px;
	background: var(--ci-accent);
}

/* ============================================================
   2. The details card
   ============================================================ */
.contact-section .contact-info:has(.cstm-row) {
	background: var(--ci-card-bg);
	border: 1px solid var(--ci-border);
	border-radius: 5px;
	box-shadow: var(--ci-shadow);
	padding: 10px 30px;
}
/* WYSIWYG output sometimes trails a stray paragraph — don't let it add slack
   below the last row. */
.contact-section .contact-info:has(.cstm-row) > p:last-child:empty {
	display: none;
}

/* ============================================================
   3. Rows (Address / Phone / Email)
   ============================================================ */
.contact-section .contact-info .cstm-row {
	align-items: flex-start;
	gap: 16px;
	margin: 0;
	padding: 18px 0;
	border-bottom: 1px solid var(--ci-rule);
	font-size: 15px;
	line-height: 24px;
	color: var(--ci-ink);
}
.contact-section .contact-info .cstm-row:last-child {
	border-bottom: 0;
}

/* Leading icon — a CSS-only pseudo-element, so the markup is untouched.
   Order-based by default, with the mailto rule last so the envelope wins for
   the email row wherever it sits. */
.contact-section .contact-info .cstm-row::before {
	content: "";
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	margin-top: -6px;
	border-radius: 50%;
	background-color: var(--ci-icon-bg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23353b3d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");
	transition: background-color .15s ease;
}
/* Address — map pin */
.contact-section .contact-info .cstm-row:nth-of-type(1)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23353b3d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
/* Phone — handset */
.contact-section .contact-info .cstm-row:nth-of-type(2)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23353b3d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.2 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
/* Email — envelope (matched on the mailto link, not on position) */
.contact-section .contact-info .cstm-row:has(a[href^="mailto:"])::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23353b3d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3.7 7 8.3 5.8L20.3 7'/%3E%3C/svg%3E");
}
.contact-section .contact-info .cstm-row:hover::before {
	background-color: #ecedee;
}

/* Labels ("Address:" / "Phone:" / "Email:") — small uppercase meta column,
   still aligned to a fixed width so the values line up. */
.contact-section .contact-info .cstm-row .contact-label,
.contact-section .contact-info .cstm-row > strong,
.contact-section .contact-info .cstm-row > b {
	flex: 0 0 96px;
	min-width: 96px;
	max-width: 96px;
	margin: 0;
	padding-top: 3px;
	font-size: 12px;
	line-height: 18px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ci-muted);
}

/* Links inside the rows (mailto: / tel: / maps) pick up the brand ink instead
   of the browser's default blue. */
.contact-section .contact-info .cstm-row a {
	color: var(--ci-ink);
	text-decoration: none;
	border-bottom: 1px solid rgba(53, 59, 61, .28);
	transition: color .15s ease, border-color .15s ease;
}
.contact-section .contact-info .cstm-row a:hover,
.contact-section .contact-info .cstm-row a:focus {
	color: var(--ci-accent);
	border-bottom-color: var(--ci-accent);
}

/* ============================================================
   4. "Drop us a line" — the same card around the CF7 form
   Fields and labels are deliberately left alone (style.css owns
   them); this only adds the surface they sit on.
   ============================================================ */
.contact-section .contact-info:has(.wpcf7-form) {
	background: var(--ci-card-bg);
	border: 1px solid var(--ci-border);
	border-radius: 5px;
	box-shadow: var(--ci-shadow);
	padding: 26px 15px 10px;
}

/* CF7's field grid is a Bootstrap .row, so it carries -15px side margins that
   would pull the outer fields out through the card padding. Zeroing them lets
   the cols' own 15px gutter sit inside the card instead — outer fields end up
   30px (15 card + 15 col) from the border, matching the details card above,
   and the gap between fields stays the original 30px. */
.contact-section .contact-info .wpcf7-form > .row {
	margin-left: 0;
	margin-right: 0;
}

/* Keep CF7's response message (sent / validation summary) aligned with the
   fields rather than using its default 2em/0.5em margins. */
.contact-section .contact-info .wpcf7-response-output {
	margin: 4px 15px 14px;
	border-radius: 5px;
	padding: 10px 14px;
	font-size: 14px;
	line-height: 20px;
}

/* ============================================================
   5. Responsive
   ============================================================ */
@media (max-width: 767px) {
	.contact-section .contact-info:has(.cstm-row) {
		padding: 6px 18px;
		border-radius: 12px;
	}
	/* Cols go full width here, so the card only needs to top up the col's
	   existing 15px padding to an 18px inset. */
	.contact-section .contact-info:has(.wpcf7-form) {
		padding: 20px 3px 4px;
	}
	.contact-section .contact-info .wpcf7-response-output {
		margin: 4px 15px 12px;
	}
	.contact-section .contact-info .cstm-row {
		flex-wrap: wrap;
		gap: 6px 14px;
		padding: 15px 0;
		line-height: 23px;
	}
	/* Icon + label on the first line, the value on its own line below. */
	.contact-section .contact-info .cstm-row .contact-label,
	.contact-section .contact-info .cstm-row > strong,
	.contact-section .contact-info .cstm-row > b {
		flex: 1 1 calc(100% - 52px);
		min-width: 0;
		max-width: none;
		padding-top: 9px;
	}
	.contact-section .contact-info .cstm-row::before {
		flex-basis: 34px;
		width: 34px;
		height: 34px;
		margin-top: 0;
		background-size: 17px 17px;
	}
}