/* Contact method cards — Contact page (components/contact-cards/contact-cards.php) */

/* Tighten the gap down to the Calendly section. */
.section:has(.contact-cards) { padding-bottom: 24px; }

.contact-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	align-items: stretch;
}

/* Card — cream fill, hairline navy border, 12px radius. Slow navy hover. */
.contact-card {
	background: var(--color-cream-card);
	border: 1px solid var(--color-navy-mid);
	border-radius: 12px;
	padding: 36px 32px;
	transition: background-color 0.45s ease;
}
.contact-card:hover {
	background: var(--color-navy-mid);
}
/* The "Book an appointment" card is a clickable anchor that scrolls to Calendly. */
.contact-card--link,
.contact-card--link:hover,
.contact-card--link:focus-visible {
	display: block;
	cursor: pointer;
	text-decoration: none;
}

/* Navy icon chip. The blue glyph is filtered white so it reads on the navy chip;
   on hover the chip turns cream and the glyph returns to its natural blue. */
.contact-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 12px;
	background: var(--color-navy-deep);
	margin-bottom: 28px;
	transition: background-color 0.45s ease;
}
.contact-card__icon-img {
	width: 30px;
	height: 30px;
	object-fit: contain;
	display: block;
	filter: brightness(0) invert(1);
	transition: filter 0.45s ease;
}
.contact-card:hover .contact-card__icon {
	background: var(--color-cream-card); /* FAF9F6 */
}
.contact-card:hover .contact-card__icon-img {
	filter: none;
}

/* Title — DM Serif Display Regular 20, deep teal. */
.contact-card__title {
	font-family: var(--font-display);
	font-weight: var(--weight-regular);
	font-size: 20px;
	color: var(--color-ink-teal);
	margin: 0 0 10px;
	transition: color 0.45s ease;
}
/* Subtitle ("Let's get connected") — Montserrat Light 16, deep teal. */
.contact-card__subtitle {
	font-family: var(--font-body);
	font-weight: var(--weight-light);
	font-size: 16px;
	color: var(--color-ink-teal);
	margin: 0;
	transition: color 0.45s ease;
}

/* Contact list (Email / Call cards). */
.contact-card__contacts {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 6px;
}
/* Name — Montserrat Bold 16, deep teal. */
.contact-line__name {
	font-family: var(--font-body);
	font-weight: var(--weight-bold);
	font-size: 16px;
	color: var(--color-ink-teal);
	margin: 0 0 4px;
	transition: color 0.45s ease;
}
/* Value (email / phone) — Montserrat Light 16, deep teal. */
.contact-line__value {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: var(--weight-light);
	font-size: 16px;
	color: var(--color-ink-teal);
	margin: 0;
	text-decoration: none;
	transition: color 0.45s ease;
}

/* Hover: navy card → light text so the content stays readable. */
.contact-card:hover .contact-card__title,
.contact-card:hover .contact-card__subtitle,
.contact-card:hover .contact-line__name,
.contact-card:hover .contact-line__value {
	color: var(--color-page-bg); /* F9F9F9 */
}

@media (max-width: 1024px) {
	.contact-cards { grid-template-columns: 1fr; gap: 24px; }
}