/* ==========================================================================
   contact.css -- Contact page (build/contact.py). Scoped to body.page-slug-contact
   and ac-contact-* classes. Colours via Elementor kit variables only.
   The FAQ accordion is styled by the site plugin (assets/faqs.css).
   ========================================================================== */

/* --- Icon tiles (Figma "Icon tile", 48px, 24px line icon) ----------------- */
.ac-contact-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	color: var(--e-global-color-secondary);
	background: var(--e-global-color-indigo100);
}
.ac-contact-tile svg { display: block; }
.ac-contact-tile--red { background: var(--e-global-color-red100); }
.ac-contact-tile--navy { background: var(--e-global-color-navy800); color: var(--e-global-color-white); }
.ac-contact-tile-wrap .elementor-widget-container { line-height: 0; }

/* --- Contact method cards ------------------------------------------------- */
body.page-slug-contact .ac-contact-value .elementor-heading-title a { color: inherit; }
body.page-slug-contact .ac-contact-value .elementor-heading-title a:hover { color: var(--e-global-color-primary); }
body.page-slug-contact .ac-contact-value--email .elementor-heading-title { overflow-wrap: anywhere; }

/* --- Enquiry: Pro form ----------------------------------------------------- */
.ac-contact-form .elementor-field-group:not(.elementor-field-type-upload) .elementor-field:not(.elementor-select-wrapper) {
	min-height: 50px;
	padding: 0 14px;
	box-shadow: none;
}
.ac-contact-form .elementor-field-group .elementor-select-wrapper select.elementor-field { padding-right: 40px; }
/* Figma chevron-down (2.2px line) in place of Elementor's solid caret. */
.ac-contact-form .elementor-select-wrapper .select-caret-down-wrapper { right: 14px; width: 20px; height: 20px; line-height: 0; }
.ac-contact-form .elementor-select-wrapper .select-caret-down-wrapper > * { display: none; }
.ac-contact-form .elementor-select-wrapper .select-caret-down-wrapper::after {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background: var(--e-global-color-secondary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 20px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.ac-contact-form .elementor-field-group textarea.elementor-field { height: 120px; padding: 12px 14px; resize: vertical; }
.ac-contact-form .elementor-field-group .elementor-field::placeholder { color: var(--e-global-color-slate500); opacity: 1; }
/* field :focus styling lives in global.css (site-wide, beats Elementor's generated rule) */
.ac-contact-form .elementor-form-fields-wrapper { align-items: center; }
.ac-contact-form .elementor-field-type-submit .elementor-button { min-height: 56px; }
/* Note + button row: the note takes the slack, the button keeps its natural width
   (Elementor's 66/33 columns would wrap "Send message" between 1025 and 1280). */
body.page-slug-contact .ac-contact-form .elementor-field-group.elementor-field-type-html { flex: 1 1 0; width: auto; max-width: none; min-width: 0; }
body.page-slug-contact .ac-contact-form .elementor-field-group.elementor-field-type-submit { flex: none; width: auto; max-width: none; }

/* --- Office hours ---------------------------------------------------------- */
.ac-contact-hours { margin: 0; font-family: var(--e-global-typography-text-font-family), sans-serif; font-size: 16px; line-height: 1.55; }
.ac-contact-hours__row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--e-global-color-navy700);
}
.ac-contact-hours dt { margin: 0; font-weight: 700; color: var(--e-global-color-white); }
.ac-contact-hours dd { margin: 0; text-align: right; color: var(--e-global-color-slate100); }

/* --- Find us: map card ----------------------------------------------------- */
.e-con.ac-contact-map-card { overflow: hidden; }
.ac-contact-map,
.ac-contact-map .elementor-widget-container,
.ac-contact-map__link { display: block; height: 100%; }
.ac-contact-map .ac-contact-map__img { display: block; width: 100%; height: 460px; object-fit: cover; object-position: center; }
.ac-contact-details .elementor-widget-text-editor a { color: inherit; }

/* --- FAQs intro ------------------------------------------------------------ */
body.page-slug-contact .ac-contact-faq-intro .ac-text a { color: inherit; text-decoration: none; white-space: nowrap; }
body.page-slug-contact .ac-contact-faq-intro .ac-text a:hover { color: var(--e-global-color-accent); text-decoration: underline; }

/* --- Tablet / mobile -------------------------------------------------------- */
@media (max-width: 1024px) {
	.e-con.ac-contact-card__text { --width: auto; flex: 1 1 0%; }
	/* 44px finger targets without moving the layout: pad the hit area, take it back with margin. */
	body.page-slug-contact .ac-contact-value .elementor-heading-title a,
	body.page-slug-contact .ac-contact-faq-intro .ac-text a { display: inline-block; padding: 12px 0; margin: -12px 0; }
	.ac-contact-map .ac-contact-map__img { height: 340px; }
	.e-con.ac-contact-details { border-top: 1px solid var(--e-global-color-line200); }
}
@media (max-width: 767px) {
	.ac-contact-map .ac-contact-map__img { height: 240px; }
	/* Note under the full-width button on phones. */
	body.page-slug-contact .ac-contact-form .elementor-field-group.elementor-field-type-submit { flex: 1 1 100%; width: 100%; order: 1; }
	body.page-slug-contact .ac-contact-form .elementor-field-group.elementor-field-type-html { flex: 1 1 100%; width: 100%; order: 2; margin-top: 4px; }
	body.page-slug-contact .ac-contact-form .elementor-field-type-submit .elementor-button { width: 100%; }
}