/**
 * Fuze Play – Contact page and forms.
 *
 * 1. Contact details column (pattern: contact-details)
 * 2. "Get in Touch" card + plugin fallback
 * 3. Contact Form 7 (6.x markup). Selectors start with `body` so they win over
 *    CF7's own stylesheet, which is printed later on the page.
 */

/* ------------------------------------------------------------------ *
 * 1. Contact details
 * ------------------------------------------------------------------ */
.fuze-contact__info > .is-style-eyebrow {
	margin-block-end: 0.35rem;
}

.fuze-contact__info > .is-style-brush-heading {
	margin-block-start: 0;
}

.fuze-contact__info > .is-style-lead {
	color: var(--wp--preset--color--heading);
}

.fuze-contact-list {
	display: flex;
	flex-direction: column;
	padding: 0.35rem var(--wp--preset--spacing--30);
	border-radius: var(--fuze-radius-lg);
	background: var(--wp--preset--color--cream);
}

.fuze-contact-list > p {
	margin: 0;
	padding-block: 0.8rem;
	min-height: 48px;
	align-items: center !important;
	line-height: 1.4;
	color: var(--wp--preset--color--heading);
	font-weight: 600;
}

.fuze-contact-list > p + p {
	border-top: 2px dashed rgb(112 48 160 / 0.18);
}

.fuze-contact-list > p::before {
	margin-top: 0 !important;
	width: 1.35em !important;
	height: 1.35em !important;
}

.fuze-contact-list a {
	font-weight: 700;
	color: var(--wp--preset--color--purple);
}

/* A row whose only content is a link (phone, directions) is tappable across the whole row, and the
 * link itself is 44px tall like the footer's (it fits the row's 48px, so the row keeps its size). */
.fuze-contact-list > p > a:only-child {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.fuze-contact-list > p:has(> a:only-child) {
	position: relative;
}

.fuze-contact-list > p > a:only-child::after {
	content: "";
	position: absolute;
	inset: 0;
}

.fuze-contact-list .fuze-icon-phone a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	text-decoration: none;
}

.fuze-contact-list .fuze-icon-phone a:hover {
	text-decoration: underline;
}

/* Social links as friendly labelled pills. */
.fuze-contact-social.wp-block-social-links {
	gap: 0.6rem;
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: 16px;
}

.fuze-contact-social .wp-social-link {
	background: var(--wp--preset--color--purple) !important;
	color: var(--wp--preset--color--white) !important;
	transition: background-color 0.2s var(--fuze-ease), box-shadow 0.25s var(--fuze-ease), transform 0.25s var(--fuze-ease-spring, ease);
}

.fuze-contact-social .wp-social-link:hover {
	background: var(--wp--preset--color--pink-strong) !important;
	box-shadow: 0 4px 0 var(--fuze-press, rgb(15 27 61 / 0.28));
}

@media (prefers-reduced-motion: no-preference) {
	.fuze-contact-social .wp-social-link:hover {
		transform: translateY(-2px);
	}

	.fuze-contact-social .wp-social-link:active {
		transform: translateY(1px);
		box-shadow: none;
	}
}

.fuze-contact-social .wp-social-link a {
	min-height: 48px;
	align-items: center;
	padding: 0.55em 1.1em 0.55em 0.95em !important;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1rem;
}

.fuze-contact-social .wp-social-link svg {
	fill: currentColor;
	width: 22px;
	height: 22px;
}

.fuze-contact-social .wp-block-social-link-label {
	padding-inline-start: 0.45em;
	font-size: 1rem !important;
	line-height: 1.2;
}

/* Opening times row (full width below the two columns). */
.fuze-contact__hours {
	padding-top: var(--wp--preset--spacing--50);
	border-top: 2px dashed rgb(112 48 160 / 0.18);
}

.fuze-contact__hours > .fuze-contact__hours-title {
	margin-block: 0 var(--wp--preset--spacing--40);
}

.fuze-contact__hours .wp-block-table {
	margin-block-end: 0;
}

/* ------------------------------------------------------------------ *
 * 2. Get in Touch card
 * ------------------------------------------------------------------ */
.fuze-contact-card {
	border-color: var(--wp--preset--color--purple-tint);
	border-radius: var(--fuze-radius-lg);
	box-shadow: var(--wp--preset--shadow--lift);
}

/* Colourful top strip. */
.fuze-contact-card::before {
	content: "";
	display: block;
	height: 10px;
	background: var(--wp--preset--gradient--purple-to-pink);
}

/* The card holds a form: no jumping while someone types. */
.fuze-contact-card:hover,
.fuze-contact-card:focus-within {
	transform: none;
	border-color: var(--wp--preset--color--purple-tint);
	box-shadow: var(--wp--preset--shadow--lift);
}

.fuze-contact-card .fuze-card__body {
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) !important;
}

.fuze-contact-card .fuze-card__body > :last-child {
	margin-top: 0 !important;
	padding-top: 0;
}

/* …but the no-form fallback box keeps its own even padding on all sides. */
.fuze-contact-card .fuze-card__body > .fuze-fallback--contact:last-child {
	padding-top: var(--wp--preset--spacing--40);
}

.fuze-contact-card .is-style-brush-heading {
	font-size: var(--wp--preset--font-size--x-large);
}

@media (min-width: 782px) {
	.fuze-contact__form-col {
		position: sticky;
		align-self: flex-start;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--custom--header--height, 84px) + 1.5rem);
	}

	.fuze-contact-card .fuze-card__body {
		padding: var(--wp--preset--spacing--50) !important;
	}
}

/* Fallback shown when Contact Form 7 is not active. */
.fuze-contact-card .fuze-fallback--contact,
.fuze-fallback--contact {
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--fuze-radius-md);
	background: var(--wp--preset--color--purple-tint);
	text-align: left;
	color: var(--wp--preset--color--heading);
}

.fuze-fallback--contact > p {
	margin: 0;
}

.fuze-fallback--contact > p:first-child {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
}

.fuze-fallback--contact > p + p {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-start: var(--wp--preset--spacing--30);
}

.fuze-fallback--contact .wp-element-button {
	flex: 1 1 14rem;
	margin: 0;
	min-height: 52px;
}

.fuze-fallback--contact .wp-element-button::before {
	content: "";
	flex: none;
	width: 1.2em;
	height: 1.2em;
	background: currentColor;
	-webkit-mask: url(../../images/icons/phone.svg) center / contain no-repeat;
	mask: url(../../images/icons/phone.svg) center / contain no-repeat;
}

.fuze-fallback--contact .wp-element-button.is-secondary::before {
	-webkit-mask-image: url(../../images/icons/arrow.svg);
	mask-image: url(../../images/icons/arrow.svg);
}

.fuze-fallback--contact .wp-element-button:hover {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* ------------------------------------------------------------------ *
 * 3. Contact Form 7
 * ------------------------------------------------------------------ */
body .wpcf7 {
	--fuze-field-border: #9A76B8;
	color: var(--wp--preset--color--heading);
}

body .wpcf7 form > p,
body .wpcf7 form > div:not(.wpcf7-response-output) {
	margin-block: 0 var(--wp--preset--spacing--30);
}

body .wpcf7 label {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
	color: var(--wp--preset--color--heading);
}

body .wpcf7 label br {
	display: none;
}

body .wpcf7 .wpcf7-form-control-wrap {
	display: block;
	position: relative;
	margin-top: 0.4rem;
}

body .wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea) {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-height: 52px;
	padding: 0.75rem 1rem;
	border: 2px solid var(--fuze-field-border);
	border-radius: var(--fuze-radius-md);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--heading);
	font-family: var(--wp--preset--font-family--body);
	font-size: max(16px, var(--wp--preset--font-size--medium));
	font-weight: 500;
	line-height: 1.4;
	box-shadow: inset 0 2px 0 rgb(15 27 61 / 0.04);
	transition: border-color 0.2s var(--fuze-ease), box-shadow 0.2s var(--fuze-ease), background-color 0.2s var(--fuze-ease);
	-webkit-appearance: none;
	appearance: none;
}

body .wpcf7 textarea {
	min-height: 9.5rem;
	resize: vertical;
}

body .wpcf7 :is(input, select, textarea)::placeholder {
	color: #6E6A6C;
	opacity: 1;
}

body .wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea):hover {
	border-color: var(--wp--preset--color--purple);
}

body .wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea):focus {
	outline: none;
	border-color: var(--wp--preset--color--purple);
	background: var(--wp--preset--color--white);
	box-shadow: 0 0 0 4px rgb(112 48 160 / 0.2);
}

body .wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea):focus-visible {
	outline: 3px solid transparent;
	outline-offset: 0;
	border-radius: var(--fuze-radius-md);
}

/* Invalid fields */
body .wpcf7 .wpcf7-not-valid {
	border-color: var(--wp--preset--color--pink-ink) !important;
	background: #FFF5FA !important;
}

body .wpcf7 .wpcf7-not-valid-tip {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin-top: 0.4rem;
	color: var(--wp--preset--color--pink-ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

body .wpcf7 .wpcf7-not-valid-tip::before {
	content: "!";
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 1.3em;
	height: 1.3em;
	border-radius: 50%;
	background: var(--wp--preset--color--pink-ink);
	color: var(--wp--preset--color--white);
	font-size: 0.85em;
	line-height: 1;
}

/* Acceptance / checkboxes / radios */
body .wpcf7 .wpcf7-acceptance,
body .wpcf7 .wpcf7-checkbox,
body .wpcf7 .wpcf7-radio {
	display: block;
}

body .wpcf7 .wpcf7-list-item {
	display: block;
	margin: 0 0 0.5rem;
}

body .wpcf7 .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	min-height: 44px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	cursor: pointer;
}

body .wpcf7 :is(input[type="checkbox"], input[type="radio"]) {
	flex: none;
	width: 28px;
	height: 28px;
	margin: 0;
	accent-color: var(--wp--preset--color--purple);
	cursor: pointer;
}

body .wpcf7 .wpcf7-list-item-label {
	padding-top: 0.15em;
}

/* Submit */
body .wpcf7 input[type="submit"],
body .wpcf7 .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0.85em 2em;
	border: 0;
	border-radius: var(--fuze-radius-pill);
	background: var(--wp--preset--color--pink-strong);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: var(--wp--preset--shadow--pink-glow);
	transition: background-color 0.2s var(--fuze-ease), transform 0.2s var(--fuze-ease), box-shadow 0.2s var(--fuze-ease);
	-webkit-appearance: none;
	appearance: none;
}

/* The site-wide "press": rise onto a darker ledge when hovered, sink when pressed. */
body .wpcf7 .wpcf7-submit:hover {
	background: var(--wp--preset--color--purple);
	box-shadow: 0 4px 0 var(--fuze-press, rgb(15 27 61 / 0.28)), 0 12px 20px -10px var(--fuze-press-soft, rgb(15 27 61 / 0.3));
}

body .wpcf7 .wpcf7-submit:active {
	box-shadow: 0 1px 0 var(--fuze-press, rgb(15 27 61 / 0.28));
}

@media (prefers-reduced-motion: no-preference) {
	body .wpcf7 .wpcf7-submit:hover {
		transform: translateY(-2px);
	}

	body .wpcf7 .wpcf7-submit:active {
		transform: translateY(1px);
	}
}

body .wpcf7 .wpcf7-submit:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 3px;
	box-shadow: 0 0 0 7px var(--wp--preset--color--yellow);
}

body .wpcf7 .wpcf7-submit:disabled,
body .wpcf7 .wpcf7-submit[disabled] {
	background: #8A8588;
	box-shadow: none;
	transform: none;
	cursor: not-allowed;
}

@media (max-width: 599.98px) {
	body .wpcf7 .wpcf7-submit {
		width: 100%;
	}
}

/* Spinner (shown while sending) */
body .wpcf7 .wpcf7-spinner {
	visibility: hidden;
	display: inline-block;
	position: relative;
	width: 26px;
	height: 26px;
	margin: 0 0 0 1rem;
	padding: 0;
	border: 3px solid var(--wp--preset--color--purple-tint);
	border-top-color: var(--wp--preset--color--purple);
	border-radius: 50%;
	background: none;
	opacity: 1;
	vertical-align: middle;
}

body .wpcf7 .wpcf7-spinner::before {
	content: none;
}

body .wpcf7 form.submitting .wpcf7-spinner {
	visibility: visible;
	animation: fuze-spin 0.8s linear infinite;
}

@media (max-width: 599.98px) {
	body .wpcf7 .wpcf7-spinner {
		display: block;
		margin: 0.75rem auto 0;
	}
}

@keyframes fuze-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Response message */
body .wpcf7 form .wpcf7-response-output {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0.9rem 1.1rem;
	border: 0;
	border-left: 6px solid var(--wp--preset--color--purple);
	border-radius: var(--fuze-radius-sm) var(--fuze-radius-md) var(--fuze-radius-md) var(--fuze-radius-sm);
	background: var(--wp--preset--color--purple-tint);
	color: var(--wp--preset--color--heading);
	font-weight: 700;
	line-height: 1.45;
}

body .wpcf7 form.init .wpcf7-response-output,
body .wpcf7 form.resetting .wpcf7-response-output,
body .wpcf7 form.submitting .wpcf7-response-output {
	display: none;
}

body .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--lime);
	background: #EEF8E6;
	color: var(--wp--preset--color--lime-ink);
}

body .wpcf7 form.invalid .wpcf7-response-output,
body .wpcf7 form.unaccepted .wpcf7-response-output,
body .wpcf7 form.payment-required .wpcf7-response-output {
	border-color: var(--wp--preset--color--yellow);
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--heading);
}

body .wpcf7 form.failed .wpcf7-response-output,
body .wpcf7 form.aborted .wpcf7-response-output,
body .wpcf7 form.spam .wpcf7-response-output {
	border-color: var(--wp--preset--color--pink-ink);
	background: #FFF0F7;
	color: var(--wp--preset--color--pink-ink);
}

/* Screen-reader summary that CF7 prints above the form. */
body .wpcf7 .screen-reader-response {
	position: absolute;
	overflow: hidden;
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow-wrap: normal !important;
}

body .wpcf7 .hidden-fields-container {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	body .wpcf7 form.submitting .wpcf7-spinner {
		animation-duration: 1.6s !important;
		animation-iteration-count: infinite !important;
	}
}