/**
 * JC Lalnunsanga child theme - Contact page.
 *
 * Loaded only on that page. Every colour comes from a theme-colors.css token,
 * so light and dark both work without a second set of rules. The one exception
 * is the WhatsApp button, noted where it appears.
 *
 * This replaces a page that carried its colours inline in the block markup -
 * a navy slab with #16223b, #faf8f4 and #c7cedb baked in. Those are only
 * correct against a dark background, so the page fought the rest of the site
 * once the header went light, and an editor could not fix it without hand-
 * editing block attributes.
 *
 * @package kadence-child-jcl
 */

/* ==========================================================================
   Page header
   ========================================================================== */

.jcl-contact-head {
	max-width: 760px;
	margin: 0 0 40px;
}

.jcl-contact-head .jcl-eyebrow {
	margin: 0 0 10px;
}

.jcl-contact-head h1 {
	margin: 0 0 14px;
	padding-bottom: 16px;
	position: relative;
	font-size: clamp( 30px, 4.4vw, 44px );
	line-height: 1.12;
}

.jcl-contact-head h1::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 46px;
	height: 3px;
	background: var( --gold );
}

.jcl-contact-head p {
	margin: 0;
	font-size: 17.5px;
	color: var( --text-color );
}

/* ==========================================================================
   The three ways to reach him
 *
 * Given their own row at the top, because on a contact page these are what
 * most people came for - a form is the slowest of the four options and was
 * previously the only prominent one.
   ========================================================================== */

.jcl-contact-actions {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 190px, 1fr ) );
	gap: 14px;
	margin: 0 0 48px;
}

.jcl-cbtn {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 18px;
	border-radius: var( --jcl-radius );
	text-decoration: none;
	border: 1px solid transparent;
	transition: transform .12s ease, box-shadow .12s ease, background-color .2s ease;
}

.jcl-cbtn:hover,
.jcl-cbtn:focus-visible {
	transform: translateY( -1px );
	box-shadow: 0 4px 14px -6px rgba( 22, 34, 59, .5 );
}

.jcl-cbtn-icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

.jcl-cbtn-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	min-width: 0;
}

.jcl-cbtn-text b {
	font-size: 15px;
	font-weight: 600;
}

.jcl-cbtn-text span {
	font-size: 13px;
	opacity: .82;
	overflow-wrap: anywhere;
}

/* Call - solid, using the tokens so it inverts correctly in dark mode. */
.jcl-cbtn--call {
	background: var( --heading-color );
	color: var( --bg-color );
}

/*
 * WhatsApp. Their brand green (#25d366) carries white text at 1.98:1, which is
 * unreadable, so this uses their darker brand tone instead: 5.16:1 and still
 * unmistakably WhatsApp. Fixed rather than tokenised - a brand colour should
 * not change with the site theme.
 */
.jcl-cbtn--whatsapp {
	background: #0f7b6c;
	color: #ffffff;
}

.jcl-cbtn--whatsapp:hover,
.jcl-cbtn--whatsapp:focus-visible {
	background: #0c6659;
}

/* Email - quieter, so the two faster routes lead. */
.jcl-cbtn--email {
	background: var( --card-bg );
	color: var( --text-color );
	border-color: var( --border-color );
}

.jcl-cbtn--email:hover,
.jcl-cbtn--email:focus-visible {
	border-color: var( --gold );
}

.jcl-cbtn--call .jcl-cbtn-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 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.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 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.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.jcl-cbtn--whatsapp .jcl-cbtn-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.64.07-.3-.15-1.25-.46-2.39-1.47-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.6.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.06 2.88 1.21 3.08c.15.2 2.09 3.2 5.07 4.49.71.3 1.26.49 1.69.63.71.22 1.36.19 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.42-.07-.12-.27-.2-.57-.35z'/%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.86 9.86 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm0 18.13h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.19 8.19 0 0 1-1.26-4.36c0-4.54 3.7-8.24 8.25-8.24a8.2 8.2 0 0 1 8.24 8.25c0 4.54-3.7 8.21-8.24 8.21z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.64.07-.3-.15-1.25-.46-2.39-1.47-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.6.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.06 2.88 1.21 3.08c.15.2 2.09 3.2 5.07 4.49.71.3 1.26.49 1.69.63.71.22 1.36.19 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.42-.07-.12-.27-.2-.57-.35z'/%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.86 9.86 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm0 18.13h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.19 8.19 0 0 1-1.26-4.36c0-4.54 3.7-8.24 8.25-8.24a8.2 8.2 0 0 1 8.24 8.25c0 4.54-3.7 8.21-8.24 8.21z'/%3E%3C/svg%3E");
}

.jcl-cbtn--email .jcl-cbtn-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 4h16v16H4z'/%3E%3Cpath d='M4 4l8 8 8-8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 4h16v16H4z'/%3E%3Cpath d='M4 4l8 8 8-8'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Form and chambers
   ========================================================================== */

.jcl-contact-grid {
	display: grid;
	grid-template-columns: minmax( 0, 1.4fr ) minmax( 0, 1fr );
	gap: 40px;
	align-items: start;
	margin-bottom: 56px;
}

.jcl-contact-form-wrap h2,
.jcl-contact-offices h2 {
	font-size: 22px;
	margin: 0 0 6px;
}

.jcl-contact-form-wrap .jcl-sub,
.jcl-contact-offices .jcl-sub {
	margin: 0 0 22px;
	color: var( --muted-color );
	font-size: 15px;
}

.jcl-office {
	padding: 20px 0;
	border-top: 1px solid var( --border-color );
}

.jcl-office:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.jcl-office h3 {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --muted-color );
	margin: 0 0 8px;
	font-family: 'Work Sans', sans-serif;
}

.jcl-office p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: var( --text-color );
}

/* ==========================================================================
   Maps
   ========================================================================== */

.jcl-maps-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) );
	gap: 32px;
}

.jcl-map {
	border: 1px solid var( --border-color );
	border-radius: var( --jcl-radius );
	overflow: hidden;
	background: var( --raised-bg );
}

.jcl-map iframe {
	display: block;
	width: 100%;
	height: 260px;
	border: 0;
}

.jcl-map__note {
	margin: 0;
	padding: 12px 16px;
	border-top: 1px solid var( --border-color );
	background: var( --card-bg );
	font-size: 14px;
}

.jcl-map__note a {
	color: var( --link-color );
	text-decoration: none;
}

.jcl-map__note a:hover,
.jcl-map__note a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media ( max-width: 860px ) {
	.jcl-contact-grid {
		grid-template-columns: minmax( 0, 1fr );
		gap: 34px;
	}
}