/* ==========================================================================
   Touch layer for the things a visitor REACHES us with — US-003.

   Loaded last on every page (inc/responsive-forms.php enqueues it at priority
   60, after assets/css/responsive.css), so it is the final word on:

     1. the Contact Form 7 output — stacked full-width fields with visible
        labels, a 16px minimum field size so iOS never zooms the page on focus,
        44px minimum field and submit heights, and validation/response messages
        that wrap inside the screen instead of overflowing it;
     2. the cookie consent banner — capped height with its own scrolling, so it
        never covers the screen, and accept/decline buttons that are full-width
        and at least 44px high within thumb reach at the bottom of the viewport;
     3. the Contact page details — the tel: and mailto: links are tap targets,
        not 16px-tall inline text, and a long address or address-like e-mail
        wraps rather than widening the page;
     4. the Careers button to the external jobs site — full-width on a phone.

   Every colour, size, radius and duration comes from the design tokens in
   assets/css/design-tokens.css; --tap-target (44px, WCAG 2.5.5) is the single
   source of every minimum touch size below.

   Selector note: the Contact Form 7 rules name BOTH the form element's own
   plugin class and the `wp-site-form` class inc/responsive-forms.php adds to
   it. Either one on its own is enough, so the styling survives a plugin
   version that renames the other, and the three-level selector
   (`.wpcf7 form.… .wpcf7-form-control`) outranks the page-level rules in
   assets/css/contact-form.css without a single !important.
   ========================================================================== */

/* ==========================================================================
   1. Contact Form 7 — fields
   ========================================================================== */

/*
 * The plugin wrapper and the form never exceed their column, whatever the
 * `size`/`cols` attributes the plugin writes on the controls say.
 */
.wpcf7,
.wpcf7 form {
	max-width: 100%;
}

/*
 * The plugin runs autop over the form template, so every field sits in a <p>.
 * style.css caps a paragraph at a reading measure, which would stop a field
 * filling its column.
 */
.wpcf7 form p {
	max-width: none;
}

.wpcf7 form .wpcf7-form-control-wrap {
	display: block;
	max-width: none;
}

/* A visible label above every control, never a placeholder standing in for one. */
.wpcf7 form label {
	display: block;
	max-width: none;
}

/*
 * Nothing here sets the field grid's column count: assets/css/contact-form.css
 * already starts it at one full-width column and moves to two only from 640px,
 * and restating it later would undo that breakpoint. What this file guarantees
 * is that each field FILLS whichever column it is in, at a size a thumb and an
 * iPhone are happy with.
 */
.enquiry-form__grid > * {
	min-width: 0;
}

.wpcf7 form.wpcf7-form .wpcf7-form-control,
.wpcf7 form.wp-site-form .wpcf7-form-control {
	/*
	 * max(16px, …) rather than 1rem: a visitor who has enlarged or reduced the
	 * browser's base size still gets at least the 16px below which mobile
	 * Safari zooms the whole page when the field takes focus.
	 */
	font-size: max(16px, var(--text-base));
	line-height: var(--leading-normal);
}

.wpcf7 form.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-list-item-label):not(textarea),
.wpcf7 form.wp-site-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-list-item-label):not(textarea) {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: var(--tap-target);
}

/* A checkbox or radio keeps its own small box; its row carries the tap target. */
.wpcf7 form .wpcf7-form-control input[type="checkbox"],
.wpcf7 form .wpcf7-form-control input[type="radio"] {
	width: auto;
	min-height: 0;
}

.wpcf7 form .wpcf7-list-item {
	display: block;
	margin-left: 0;
}

.wpcf7 form .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--tap-target);
}

/*
 * The message box is the one field that needs more than a tap target: four of
 * them, which is the height assets/css/contact-form.css designed for it, so
 * this layer never shrinks it while still filling the column.
 */
.wpcf7 form textarea.wpcf7-form-control {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: calc(var(--tap-target) * 4);
	resize: vertical;
}

/* ==========================================================================
   2. Contact Form 7 — submit, validation and response output
   ========================================================================== */

.wpcf7 form .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--tap-target);
	min-width: var(--tap-target);
	max-width: 100%;
}

.enquiry-form__actions {
	max-width: none;
}

/*
 * The validation tip under a field and the plugin's own response banner wrap
 * inside the column. `anywhere` (not break-word) because only it also shrinks
 * the element's min-content width, which is what a grid track measures — a
 * long e-mail address in an error message cannot widen the page at 320px.
 */
.wpcf7 form .wpcf7-not-valid-tip,
.wpcf7 form .wpcf7-response-output,
.wpcf7 .screen-reader-response ul,
.wpcf7 .screen-reader-response li {
	box-sizing: border-box;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
	white-space: normal;
}

.wpcf7 form .wpcf7-response-output {
	display: block;
	/* The plugin's inline-block default would let a long sentence set its own
	   width; a block fills the column and wraps. */
	width: 100%;
}

.wpcf7 form .wpcf7-not-valid-tip {
	display: block;
	position: static;
	width: auto;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-error);
}

/* The spinner sits beside the button without pushing the row sideways. */
.wpcf7 form .wpcf7-spinner {
	flex: 0 0 auto;
	margin-inline: var(--space-3) 0;
}

@media (max-width: 599px) {
	/* One column of full-width controls, and a submit a thumb cannot miss. */
	.enquiry-form__actions {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-3);
	}

	.wpcf7 form .wpcf7-submit {
		width: 100%;
	}

	.wpcf7 form .wpcf7-spinner {
		margin-inline: auto;
	}
}

/* ==========================================================================
   3. The cookie consent banner
   ========================================================================== */

/*
 * Capped height with its own scrolling: the banner is a strip at the bottom of
 * the viewport, never a full-screen wall. overscroll-behavior keeps a scroll
 * gesture inside it from running on into the page behind. The safe-area inset
 * lifts the buttons clear of the iOS home indicator. Once a choice is stored
 * the banner is hidden, body's reserved padding goes with it (the :has() rule
 * in assets/css/cookie-consent.css) and the page scrolls normally again.
 */
.cookie-banner {
	max-width: 100%;
	max-height: 70vh;
	max-height: min(70svh, 32rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.cookie-banner__inner {
	max-width: min(var(--container-max), 100%);
}

.cookie-banner__text,
.cookie-banner__nojs,
.cookie-banner__description {
	overflow-wrap: anywhere;
}

/* Every control in the banner is a 44px tap target. */
.cookie-banner__btn,
.cookie-banner__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--tap-target);
	min-width: var(--tap-target);
	max-width: 100%;
}

.cookie-banner__choice {
	min-height: var(--tap-target);
}

.cookie-banner__label {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	min-height: var(--tap-target);
	cursor: pointer;
}

.cookie-banner__checkbox {
	width: 1.4rem;
	height: 1.4rem;
}

@media (max-width: 599px) {
	/*
	 * A shorter strip on a phone, so the page behind stays visible, and the
	 * accept/decline buttons stack full-width at the bottom of the viewport
	 * where a thumb reaches without stretching.
	 */
	.cookie-banner {
		max-height: 20rem;
		max-height: min(60svh, 20rem);
	}

	.cookie-banner__actions {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-3);
	}

	.cookie-banner__btn,
	.cookie-banner__toggle {
		flex: 0 0 auto;
		width: 100%;
	}

	.cookie-banner__categories {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The embed placeholder's own button is a tap target too. */
.cookie-embed-block__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tap-target);
	min-width: var(--tap-target);
	max-width: 100%;
}

/* The footer's "Cookie settings" control, which reopens the banner. */
.site-footer .site-footer__cookie-settings {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-target);
}

/* ==========================================================================
   4. Contact details — the tel: and mailto: links
   ========================================================================== */

/*
 * Each detail link is a real tap target and clearly marked as a link (the
 * underline from assets/css/contact.css stays). A long address or e-mail wraps
 * inside the card instead of widening the page at 320px.
 */
.contact-details .contact-card__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-target);
	overflow-wrap: anywhere;
	word-break: break-word;
}

.contact-details .contact-card__value,
.contact-details .contact-card__label {
	max-width: 100%;
	overflow-wrap: anywhere;
}

/*
 * A phone number breaks only if it genuinely cannot fit: `normal` keeps it on
 * one readable line at 320px, and overflow-wrap still lets a very long number
 * an owner enters wrap rather than widening the card.
 */
.contact-details .contact-card--phone .contact-card__link {
	word-break: normal;
	overflow-wrap: break-word;
}

.contact-details .contact-card__link:focus-visible {
	outline: 3px solid var(--color-accent-600);
	outline-offset: 2px;
}

/* ==========================================================================
   5. The Careers button to the external jobs site
   ========================================================================== */

.careers-cta__button {
	min-height: var(--tap-target);
	max-width: 100%;
	overflow-wrap: anywhere;
}

@media (max-width: 599px) {
	.careers-cta__actions {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-3);
	}

	.careers-cta__button {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cookie-banner {
		scroll-behavior: auto;
	}
}