/**
 * Guided Enquiry Tool.
 *
 * Remember: html root font-size is 10px on this site, so 1rem = 10px.
 *
 * Shares the language of the case-study and sector templates — brand rule under
 * the heading, grey panels, white chips, ink text, no hover underlines — so the
 * form does not read as a bolted-on plugin.
 *
 *   brand yellow  #f6c445   ink #212121   rules/panels #ebebeb / #f4f4f4
 */

/* ------------------------------------------------ the white card

   Total gives singles their white card by styling #single-blocks, and ordinary
   pages get one only because their WPBakery rows paint their own background. A
   page whose content is just this shortcode has neither, so it sat on the dark
   body texture. Padding matches Total's own #single-blocks (40px 60px).

   The body class comes from has_shortcode(), so this follows the form wherever
   it is placed rather than being tied to one page. */
.makers-has-enquiry #content {
	background: #fff;
	padding: 4rem 6rem 6rem;
	margin-bottom: 6rem;
}

/* The page's own introduction sits in Total's .single-content, OUTSIDE the form
   markup. Centring the form alone left that paragraph full width and hard left
   while everything below it sat in the middle. Same measure, same centring, so
   the whole column lines up. */
.makers-has-enquiry .single-content {
	max-width: 82rem;
	margin-left: auto;
	margin-right: auto;
}

.makers-enq {
	--enq-brand: #f6c445;
	--enq-ink: #212121;
	--enq-muted: #5a5a5a;
	--enq-rule: #ebebeb;
	--enq-panel: #f4f4f4;
	--enq-error: #a4232b;   /* 6.5:1 on white — readable, not alarming */

	font-size: 1.8rem;
	line-height: 2.3rem;
	font-weight: 300;
	color: #000;

	/* The form is held to a readable measure rather than run to the full width
	   of the content area — long rows of input are hard to scan. Auto margins
	   centre that column, so the shorter block reads as deliberate rather than
	   as something that failed to fill the space.

	   The block is centred, NOT the text: centre-aligned labels and inputs are
	   much harder to fill in, because the eye loses the left edge it returns to
	   on every line. */
	max-width: 82rem;
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------ steps

   The no-JS layout is the default: every fieldset visible, one submit button.
   .is-enhanced is added by the script, and only then do the steps hide. That
   ordering matters — if the script never runs, nothing is hidden. */

.makers-enq__step {
	margin: 0 0 4rem;
	padding: 0;
	border: 0;
}

.makers-enq.is-enhanced .makers-enq__step {
	margin: 0;
}

.makers-enq__step[hidden] {
	display: none;
}

.makers-enq__step-title {
	display: block;
	width: 100%;
	padding: 0 0 1.2rem;
	margin: 0 0 2rem;
	border-bottom: 2px solid var(--enq-brand);
	font-family: 'Lato', sans-serif;
	font-size: 2.4rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--enq-ink);
}

.makers-enq__step-count {
	display: block;
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--enq-muted);
	margin-bottom: .4rem;
}

/* Without JS the "Step 1 of 5" label is misleading — everything is on one
   page — so it is hidden until the script has made it true. */
.makers-enq:not(.is-enhanced) .makers-enq__step-count {
	display: none;
}

.makers-enq__step-intro {
	margin: 0 0 2.8rem;
	font-size: 1.7rem;
	line-height: 2.4rem;
	color: var(--enq-muted);
}

/* ------------------------------------------------ progress */

.makers-enq__progress {
	margin: 0 0 3rem;
}

.makers-enq__ticks {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 2rem;
	margin: 0 0 1.2rem;
	padding: 0;
	list-style: none;
	counter-reset: enq;
}

.makers-enq__tick {
	display: flex;
	align-items: center;
	gap: .8rem;
	font-size: 1.4rem;
	line-height: 1.3;
	color: var(--enq-muted);
	cursor: pointer;
	background: none;
	border: 0;
	counter-increment: enq;
	transition: color .3s ease;
}

.makers-enq__tick::before {
	content: counter(enq);
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	flex: 0 0 auto;
	border: 1px solid var(--enq-rule);
	border-radius: 50%;
	background: #fff;
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--enq-muted);
	transition: background .3s ease, border-color .3s ease, color .3s ease;
}

.makers-enq__tick.is-done::before {
	background: var(--enq-brand);
	border-color: var(--enq-brand);
	color: var(--enq-ink);
}

.makers-enq__tick.is-current {
	color: var(--enq-ink);
	font-weight: 700;
}

.makers-enq__tick.is-current::before {
	border-color: var(--enq-ink);
	color: var(--enq-ink);
}

.makers-enq__bar {
	height: 4px;
	background: var(--enq-rule);
	overflow: hidden;
}

.makers-enq__bar-fill {
	display: block;
	height: 100%;
	width: 20%;
	background: var(--enq-brand);
	transition: width .35s ease;
}

/* ------------------------------------------------ fields */

.makers-enq__field {
	margin: 0 0 2.8rem;
}

.makers-enq__group {
	margin: 0;
	padding: 0;
	border: 0;
}

.makers-enq__label {
	display: block;
	margin: 0 0 .8rem;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--enq-ink);
}

.makers-enq__optional {
	font-weight: 300;
	font-size: 1.4rem;
	color: var(--enq-muted);
	margin-left: .6rem;
}

.makers-enq__help {
	margin: 0 0 1.2rem;
	font-size: 1.5rem;
	line-height: 2.1rem;
	color: var(--enq-muted);
}

.makers-enq__error {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	line-height: 2.1rem;
	font-weight: 700;
	color: var(--enq-error);
}

/* ------------------------------------------------ choices

   Whole-tile targets rather than a bare 13px checkbox — these get filled in on
   a phone, on site, one-handed. */

.makers-enq__options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
	gap: .8rem;
}

.makers-enq__option {
	display: flex;
	align-items: flex-start;
	gap: 1.2rem;
	padding: 1.2rem 1.6rem;
	background: #fff;
	border: 1px solid var(--enq-rule);
	font-size: 1.6rem;
	line-height: 2.2rem;
	cursor: pointer;
	transition: border-color .3s ease, background .3s ease;
}

.makers-enq__option:hover {
	border-color: var(--enq-brand);
}

.makers-enq__option input {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	margin: .1rem 0 0;
	accent-color: var(--enq-ink);
}

/* :has is safe here — where it is unsupported the tile simply does not tint,
   and the native control still shows the state. */
.makers-enq__option:has(input:checked) {
	border-color: var(--enq-ink);
	background: var(--enq-panel);
}

.makers-enq__option:has(input:focus-visible) {
	outline: 2px solid var(--enq-ink);
	outline-offset: 2px;
}

.makers-enq__option--consent {
	align-items: flex-start;
	background: var(--enq-panel);
}

/* ------------------------------------------------ text inputs */

.makers-enq__field input[type="text"],
.makers-enq__field input[type="email"],
.makers-enq__field input[type="tel"],
.makers-enq__field textarea {
	display: block;
	width: 100%;
	padding: 1.2rem 1.4rem;
	border: 1px solid var(--enq-rule);
	background: #fff;
	font-family: inherit;
	font-size: 1.7rem;
	line-height: 2.3rem;
	color: var(--enq-ink);
	transition: border-color .3s ease;
}

.makers-enq__field input:focus,
.makers-enq__field textarea:focus {
	outline: none;
	border-color: var(--enq-ink);
	box-shadow: 0 0 0 3px rgba(246, 196, 69, .35);
}

.makers-enq__field.is-error input,
.makers-enq__field.is-error textarea,
.makers-enq__field.is-error .makers-enq__option {
	border-color: var(--enq-error);
}

/* ------------------------------------------------ navigation */

.makers-enq__nav {
	display: flex;
	gap: 1.2rem;
	align-items: center;
	margin: 3rem 0 0;
}

.makers-enq__back,
.makers-enq__next,
.makers-enq__submit {
	display: inline-block;
	padding: 1.2rem 2.6rem;
	border: 2px solid var(--enq-ink);
	background: #fff;
	font-family: inherit;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--enq-ink);
	cursor: pointer;
	transition: background .3s ease, color .3s ease;
}

.makers-enq__next,
.makers-enq__submit {
	background: var(--enq-ink);
	color: #fff;
}

.makers-enq__back:hover,
.makers-enq__back:focus-visible {
	background: var(--enq-panel);
}

.makers-enq__next:hover,
.makers-enq__next:focus-visible,
.makers-enq__submit:hover,
.makers-enq__submit:focus-visible {
	background: var(--enq-brand);
	color: var(--enq-ink);
	border-color: var(--enq-brand);
}

.makers-enq__back[hidden],
.makers-enq__next[hidden],
.makers-enq__actions[hidden] {
	display: none;
}

.makers-enq__actions {
	margin: 3rem 0 0;
}

/* The script moves Send into the last step; without it, Send sits at the end of
   the whole form where it belongs. */
.makers-enq.is-enhanced .makers-enq__actions {
	margin: 0;
}

.makers-enq.is-enhanced .makers-enq__nav {
	justify-content: space-between;
}

.makers-enq.is-enhanced .makers-enq__nav:has(.makers-enq__back[hidden]) {
	justify-content: flex-end;
}

/* ------------------------------------------------ messages */

.makers-enq__notice {
	margin: 0 0 2.4rem;
	padding: 1.6rem 2rem;
	background: var(--enq-panel);
	border-left: 4px solid var(--enq-error);
	font-size: 1.6rem;
	line-height: 2.2rem;
}

.makers-enq__done {
	padding: 3rem;
	background: var(--enq-panel);
	border-left: 4px solid var(--enq-brand);
}

.makers-enq__done-title {
	margin: 0 0 1.2rem;
	font-size: 2.4rem;
	font-weight: 400;
}

.makers-enq__done p {
	margin: 0 0 1.2rem;
	font-size: 1.8rem;
	line-height: 2.4rem;
}

.makers-enq__done p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------ hidden bits */

/* The honeypot. Not display:none — some bots skip anything hidden that way,
   and a few screen readers would still announce it. Off-screen and out of the
   tab order instead, with aria-hidden on the wrapper. */
.makers-enq__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.makers-enq__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------ no hover underlines */

.makers-enq a:hover,
.makers-enq a:focus,
.makers-enq a:focus-visible {
	text-decoration: none;
}

/* ------------------------------------------------ narrower screens */

@media only screen and (max-width: 767px) {

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

	.makers-enq__ticks {
		gap: .6rem 1.2rem;
	}

	/* Numbers only on a phone — five labels wrap into a wall of text. */
	.makers-enq__tick span {
		display: none;
	}

	.makers-enq__tick.is-current span {
		display: inline;
	}

	.makers-enq__nav {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.makers-enq__back,
	.makers-enq__next,
	.makers-enq__submit {
		width: 100%;
	}

	/* 60px of side padding is too much on a phone. */
	.makers-has-enquiry #content {
		padding: 2.4rem 2rem 3rem;
	}
}