/* =============================================================
   epikoinonia.css — Contact page sections
   Figma node 3:378 — contact info cards + form
   ============================================================= */

/* ── 1. Contact Details — white bg, H2 + 3-col info cards ── */

.contact-details {
	background-color: var(--color-white);
}

.contact-details__inner {
	padding-top: var(--section-py);
	padding-bottom: 0;
}

.contact-details__heading {
	font-family: var(--font-primary);
	font-size: var(--text-h2-sm);
	font-weight: var(--weight-medium);
	color: var(--color-primary);
	line-height: var(--lh-h2-sm);
	text-align: center;
	margin-bottom: var(--gap-xl);
}

/* ── Contact info grid — 3 columns ── */

.contact-info-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--grid-3col-gap);
}

/* ── Contact info card — centered icon + heading + text ── */

.contact-info-card {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.contact-info-card__icon {
	width: var(--contact-icon-size);
	height: var(--contact-icon-size);
	color: var(--color-primary);
	margin-bottom: var(--gap-sm);
}

.contact-info-card__icon img,
.contact-info-card__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.contact-info-card__title {
	font-family: var(--font-primary);
	font-size: var(--text-h3);
	font-weight: var(--weight-medium);
	color: var(--color-text);
	line-height: var(--lh-h3);
	margin-bottom: var(--gap-sm);
}

.contact-info-card__text {
	font-family: var(--font-primary);
	font-size: var(--text-body-sm);
	font-weight: var(--weight-regular);
	color: var(--color-text-secondary);
	line-height: var(--lh-body);
}

.contact-info-card__text a {
	color: var(--color-text-secondary);
	text-decoration: none;
	transition: color 0.2s;
}

.contact-info-card__text a:hover {
	color: var(--color-primary);
}

/* Email link styled in primary color per Figma */
.contact-info-card__email-link {
	color: var(--color-primary) !important;
}

.contact-info-card__email-link:hover {
	opacity: 0.7;
}

/* ── Social links inside contact card ── */

.contact-info-card__social-links {
	display: flex;
	gap: var(--social-icon-gap);
	justify-content: center;
}

.contact-info-card__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
	transition: opacity 0.2s;
}

.contact-info-card__social-link:hover {
	opacity: 0.7;
}

/* ── 2. Contact Form Section ── */

.contact-form-section {
	background-color: var(--color-white);
}

.contact-form-section__inner {
	max-width: var(--container-narrow);
	margin-left: auto;
	margin-right: auto;
	padding-top: var(--gap-xxl);
	padding-bottom: var(--section-py);
}

.contact-form-section__heading {
	font-family: var(--font-primary);
	font-size: var(--text-h2-sm);
	font-weight: var(--weight-medium);
	color: var(--color-primary);
	line-height: var(--lh-h2-sm);
	text-align: center;
	margin-bottom: var(--gap-lg);
}

/* ── Required field indicator ── */

.form-field__required {
	color: var(--color-primary);
}

/* ── Native form layout ── */

.contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--form-field-gap);
}

/* ── CF7 form styling to match Figma ── */

.contact-form-wrap .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: var(--form-field-gap);
}

.contact-form-wrap .wpcf7-form label {
	font-family: var(--font-primary);
	font-size: var(--text-body-sm);
	font-weight: var(--weight-medium);
	color: var(--color-text-secondary);
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	gap: var(--form-label-gap);
}

.contact-form-wrap .wpcf7-form input[type="text"],
.contact-form-wrap .wpcf7-form input[type="email"],
.contact-form-wrap .wpcf7-form textarea {
	width: 100%;
	height: var(--input-height);
	padding: 0.75rem 1rem;
	border: 1px solid var(--color-input-border);
	border-radius: var(--radius-none);
	background-color: var(--color-white);
	font-family: var(--font-primary);
	font-size: var(--text-body-sm);
	color: var(--color-text);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.2s;
}

.contact-form-wrap .wpcf7-form textarea {
	height: auto;
	min-height: var(--textarea-min-height);
	resize: vertical;
}

.contact-form-wrap .wpcf7-form input[type="text"]:focus,
.contact-form-wrap .wpcf7-form input[type="email"]:focus,
.contact-form-wrap .wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--color-primary);
}

.contact-form-wrap .wpcf7-form input[type="submit"] {
	display: block;
	width: 100%;
	height: var(--input-height);
	padding: 0.75rem 1.5rem;
	background-color: var(--color-primary);
	color: var(--color-white);
	border: none;
	border-radius: var(--radius-none);
	font-family: var(--font-primary);
	font-size: var(--text-body-sm);
	font-weight: var(--weight-medium);
	line-height: 1.5;
	cursor: pointer;
	transition: background-color 0.2s;
}

.contact-form-wrap .wpcf7-form input[type="submit"]:hover {
	background-color: var(--color-primary-hover);
}

/* ── Form notice (success / error) ── */

.form-notice {
	padding: 1rem;
	margin-bottom: var(--gap-lg);
	font-family: var(--font-primary);
	font-size: var(--text-body-sm);
	line-height: var(--lh-body);
}

.form-notice--success {
	background-color: var(--color-success-bg);
	color: var(--color-success);
	border: 1px solid var(--color-success-border);
}

.form-notice--error {
	background-color: var(--color-error-bg);
	color: var(--color-error);
	border: 1px solid var(--color-error-border);
}

/* ── Responsive ── */

@media (max-width: 768px) {
	.contact-info-grid {
		grid-template-columns: 1fr;
		gap: var(--gap-xl);
	}
}