/**
 * WRC "Please contact" section.
 *
 * Replaces the Elementor icon-box + button pairs at the foot of the
 * partnership pages with a card layout: an eyebrow, a ruled title, the
 * original callout, and one card per detail.
 *
 * The Elementor markup is left in the DOM and hidden, so removing this
 * stylesheet and wrc-contact.js restores the original section exactly.
 *
 * Selectors are deliberately doubled up (.wrc-contact .wrc-contact__x). The
 * Elementor kit styles bare tags at .elementor-kit-255765 h2 / p / ul, which
 * outranks a lone class — this keeps the component winning without !important.
 */

.wrc-contact {
	--wrc-contact-accent: #1a9ad7;
	--wrc-contact-ink: #0f2f4f;
	--wrc-contact-navy: #0b4f9e;
	--wrc-contact-muted: #7b8794;
	--wrc-contact-line: #e6edf3;

	padding: 64px 0 72px;
}

/*
 * Match the page's own section width. The wrapper stays full-bleed and its
 * padding tracks the site-wide alignment line, so the cards start on the same
 * vertical as the section above rather than reading as an indent.
 * See wrc-container.css for --wrc-content-inset.
 */
.wrc-contact .wrc-contact__inner {
	max-width: none;
	margin: 0;
	padding: 0 var( --wrc-content-inset, 5% );
}

/* -- header -------------------------------------------------------------
 *
 * Reproduces the heading row exactly as Elementor authors it, rather than
 * giving it a treatment of its own. Measured on all four partnership pages at
 * a 1440px viewport, with wrc-contact.js suppressed — identical on each:
 *
 *     h3  "please contact:"    32px / 700 / #222 / -1.7px / uppercase, left
 *     h6  the standfirst       12px / 500 / #66777D / no transform, right,
 *                              wrapped in the theme's .dekoline rule
 *
 * The eyebrow is a wrc-contact.js invention with no counterpart in Elementor,
 * so it is hidden. It stays in the DOM: dropping this stylesheet and the
 * script still restores the original Elementor section untouched.
 * ---------------------------------------------------------------------- */

.wrc-contact .wrc-contact__head {
	display: flex;
	align-items: flex-start; /* Elementor top-aligns the title and standfirst */
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.wrc-contact .wrc-contact__eyebrow {
	display: none;
}

/* Below 768px wrc-responsive.css section 8 restyles every h2 with !important,
   so this is the desktop and tablet treatment; phones follow the site-wide
   heading scale, as Elementor's own h3 does. */
.wrc-contact .wrc-contact__title {
	margin: 0;
	color: #222;
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -1.7px;
	text-transform: uppercase;
}

/* Elementor puts no rule under the title — the only rule is .dekoline, under
   the standfirst on the right. */
.wrc-contact .wrc-contact__rule {
	display: none;
}

.wrc-contact .wrc-contact__aside {
	position: relative;
	max-width: 260px; /* wraps to two lines, as the Elementor column does */
	margin: 0;
	padding-bottom: 22px; /* room for the rule, matching .dekoline */
	color: #66777d;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	text-align: left;
}

/* .dekoline is reproduced rather than reused: the theme sets its padding and
   margin with !important, which would fight this flex row. Geometry copied
   from citygov/style.css — a 40px lead segment, then a lighter continuation
   stopping 35% short of the right edge. */
.wrc-contact .wrc-contact__aside::before,
.wrc-contact .wrc-contact__aside::after {
	content: "";
	position: absolute;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
}

.wrc-contact .wrc-contact__aside::before {
	left: 0;
	width: 40px;
	background: #00aeef;
	z-index: 1;
}

.wrc-contact .wrc-contact__aside::after {
	left: 38px;
	right: 35%;
	background: rgba( 204, 204, 204, 0.3 );
}

.wrc-contact .wrc-contact__divider {
	height: 1px;
	margin: 30px 0 34px;
	border: 0;
	background: #e3e9ef;
}

/* -- callout ------------------------------------------------------------ */

.wrc-contact .wrc-contact__callout {
	position: relative;
	margin: 0 0 34px;
	padding: 22px 28px 22px 32px;
	border-radius: 0 10px 10px 0;
	background: #eaf7fd;
	color: #3d4c5a;
	font-size: 16px;
	font-style: italic;
	line-height: 1.6;
}

.wrc-contact .wrc-contact__callout::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient( to bottom, var(--wrc-contact-accent), #8cc63f );
}

.wrc-contact .wrc-contact__callout p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.wrc-contact .wrc-contact__callout a,
.wrc-contact .wrc-contact__callout strong {
	color: #0b5fa5;
	font-style: normal;
	font-weight: 700;
}

.wrc-contact .wrc-contact__callout a:hover {
	color: #0b5fa5;
	text-decoration: underline;
}

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

.wrc-contact .wrc-contact__cards {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wrc-contact .wrc-contact__card {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 24px 26px 20px;
	border: 1px solid var(--wrc-contact-line);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 2px 10px rgba( 16, 42, 67, 0.05 );
	list-style: none;
}

.wrc-contact .wrc-contact__card::before,
.wrc-contact .wrc-contact__card::marker {
	content: none;
}

.wrc-contact .wrc-contact__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
}

.wrc-contact .wrc-contact__chip {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #eaf5fc;
	color: #1a7fc1;
}

.wrc-contact .wrc-contact__chip svg {
	width: 20px;
	height: 20px;
}

.wrc-contact .wrc-contact__label {
	color: var(--wrc-contact-muted);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-align: right;
	text-transform: uppercase;
}

.wrc-contact .wrc-contact__value {
	flex: 1 1 auto;
	color: var(--wrc-contact-ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.wrc-contact .wrc-contact__value a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #1069b4;
	font-weight: 700;
	text-decoration: none;
}

.wrc-contact .wrc-contact__value a:hover {
	color: #1069b4;
	text-decoration: underline;
}

.wrc-contact .wrc-contact__value a svg {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
}

.wrc-contact .wrc-contact__note {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid #eef2f6;
	color: var(--wrc-contact-muted);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
}

/* -- reveal ------------------------------------------------------------- */

.wrc-contact .wrc-contact__card {
	opacity: 0;
	transform: translateY( 14px );
}

.wrc-contact .wrc-contact__card.is-visible {
	opacity: 1;
	transform: translateY( 0 );
	transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.25s ease;
}

.wrc-contact .wrc-contact__card.is-visible:hover {
	box-shadow: 0 8px 24px rgba( 16, 42, 67, 0.09 );
	transform: translateY( -2px );
}

@media ( prefers-reduced-motion: reduce ) {
	.wrc-contact .wrc-contact__card,
	.wrc-contact .wrc-contact__card.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* -- narrow ------------------------------------------------------------- */

@media ( max-width: 767px ) {
	.wrc-contact {
		padding: 44px 0 52px;
	}

	/* wrc-responsive.css drops Elementor's containers to a 16px gutter here. */
	.wrc-contact .wrc-contact__inner {
		padding: 0 16px;
	}

	.wrc-contact .wrc-contact__head {
		gap: 18px;
	}

	.wrc-contact .wrc-contact__aside {
		max-width: none;
		text-align: left;
	}

	.wrc-contact .wrc-contact__callout {
		padding: 18px 20px 18px 24px;
		font-size: 15px;
	}

	.wrc-contact .wrc-contact__cards {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}