/**
 * About Us & Contacts page — column layout spacing and Fluent Forms theming
 * to match the site's design tokens. Layout/stacking itself comes from core's
 * wp-block-columns responsive behavior.
 */

.zozia-about-contact__crumbs a {
	color: inherit;
	text-decoration: none;
}

.zozia-about-contact__row {
	gap: var(--wp--preset--spacing--2-xl);
	align-items: flex-start;
}

.zozia-about-contact__col--main,
.zozia-about-contact__col--aside {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xl);
}

.zozia-about-contact__about,
.zozia-about-contact__about-item,
.zozia-about-contact__form,
.zozia-about-contact__info,
.zozia-about-contact__info-item,
.zozia-about-contact__info-detail {
	display: flex;
	flex-direction: column;
}

/* These groups use flex `gap` for spacing above, but core still ships each as
 * a default "flow" layout — its is-layout-flow block-gap rule adds its own
 * margin-block-start to every non-first child, stacking on top of the gap
 * and inflating the space. Zero it out so `gap` is the only spacing applied. */
.zozia-about-contact__about-item,
.zozia-about-contact__info-item,
.zozia-about-contact__info-detail {
	margin-block-start: 0;
}

.zozia-about-contact__about {
	gap: var(--wp--preset--spacing--lg);
}

.zozia-about-contact__about-item {
	gap: 0.4em;
}

.zozia-about-contact__form {
	gap: var(--wp--preset--spacing--md);
	padding-top: var(--wp--preset--spacing--md);
	border-top: 1px solid var(--wp--preset--color--border-light);
}

.zozia-about-contact__info {
	gap: var(--wp--preset--spacing--md);
}

.zozia-about-contact__info-item {
	gap: 4px;
}

.zozia-about-contact__info-head {
	display: flex;
	align-items: center;
	gap: 14px;
}

.zozia-about-contact__info-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--sale);
}

.zozia-about-contact__info-icon svg {
	width: 18px;
	height: 18px;
}

.zozia-about-contact__info-detail {
	padding-left: 48px;
	gap: 2px;
}

/* Fluent Forms — match the site's field styling. */
.zozia-about-contact__form {
	--fluentform-primary: var(--wp--preset--color--ink);
}

.zozia-about-contact__form .frm-fluent-form,
.zozia-about-contact__form .fluentform {
	max-width: none;
}

.zozia-about-contact__form .ff-el-form-control,
.zozia-about-contact__form select.ff-el-form-control,
.zozia-about-contact__form textarea.ff-el-form-control {
	background-color: var(--wp--preset--color--surface) !important;
	border: none !important;
	border-radius: 4px !important;
	padding: 12px 16px !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	color: var(--wp--preset--color--ink) !important;
}

.zozia-about-contact__form .ff-el-form-control:focus {
	outline: 2px solid var(--wp--preset--color--primary) !important;
	outline-offset: 1px;
}

.zozia-about-contact__form .ff-el-input--label label,
.zozia-about-contact__form label.ff-label {
	font-weight: 600 !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	color: var(--wp--preset--color--ink) !important;
}

.zozia-about-contact__form button.ff-btn-submit,
.zozia-about-contact__form .ff-btn-submit,
.zozia-about-contact__form .ff-btn-submit:not(.ff_btn_no_style) {
	background-color: var(--wp--preset--color--ink) !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 14px 30px !important;
	font-weight: 700 !important;
	font-size: var(--wp--preset--font-size--large) !important;
}

.zozia-about-contact__form button.ff-btn-submit:hover,
.zozia-about-contact__form .ff-btn-submit:hover {
	background-color: var(--wp--preset--color--primary-dark) !important;
}