/*
 * The site's request form (components/lead-form/lead-form.php, Stage 6).
 *
 * A white card on the white page (a border and a soft shadow set it apart).
 * Fields: visible labels above, a calm border that turns navy on focus with
 * the turquoise halo, errors in words under the field (never colour alone:
 * the message, aria-invalid and a thicker border). The extra fields fold
 * under one <details>. After sending: the thank-you, a tick drawn inside the
 * Growth Line's ring with the seed beside it.
 *
 * States set by assets/js/components/lead-form.js: data-gb-busy on the card
 * while sending.
 */

.gb-lead-form {
	position: relative;
	padding: var(--gb-space-l);
	border: 1px solid var(--gb-border);
	border-radius: var(--gb-radius-l);
	background-color: var(--gb-bg);
	color: var(--gb-text);
	box-shadow: 0 1.75rem 3.5rem -2.5rem rgb(12 35 66 / 0.45);
	scroll-margin-block-start: 6rem;
}

@media (max-width: 30rem) {
	.gb-lead-form {
		padding: var(--gb-space-m);
	}
}

/* Receives focus after a send (to read the result); the ring is not needed on the whole card. */
.gb-lead-form:focus {
	outline: none;
	box-shadow: 0 1.75rem 3.5rem -2.5rem rgb(12 35 66 / 0.45);
}

.gb-lead-form__form[hidden],
.gb-lead-form__sent[hidden],
.gb-lead-form__summary[hidden] {
	display: none;
}

/* ---------- Head ---------- */

.gb-lead-form__head {
	display: grid;
	gap: var(--gb-space-2xs);
	margin-block-end: var(--gb-space-m);
}

.gb-lead-form__title {
	margin: 0;
	font-family: var(--gb-font-display);
	font-size: var(--gb-step-3);
	line-height: var(--gb-leading-heading);
}

.gb-lead-form__intro {
	margin: 0;
	color: var(--gb-text-muted);
}

/* The decision room's path, as chips. */
.gb-lead-form__path {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gb-space-3xs) var(--gb-space-2xs);
	margin: var(--gb-space-2xs) 0 0;
	font-size: var(--gb-step--1);
	color: var(--gb-text-muted);
}

.gb-lead-form__chip {
	padding-block: 0.25em;
	padding-inline: 0.85em;
	border-radius: var(--gb-radius-pill);
	background-color: var(--gb-color-turquoise-a20);
	color: var(--gb-color-navy);
	font-weight: var(--gb-weight-bold);
}

/* ---------- The summary of errors (focus moves here) ---------- */

.gb-lead-form__summary {
	margin-block-end: var(--gb-space-m);
	padding-block: var(--gb-space-s);
	padding-inline: var(--gb-space-m);
	border-inline-start: 4px solid #C2410C;
	border-radius: var(--gb-radius-m);
	background-color: #FFF3EC;
	color: #8A2C05;
	font-weight: var(--gb-weight-bold);
}

.gb-lead-form__summary:focus-visible {
	outline-offset: 3px;
}

/* ---------- The honeypot: out of sight, out of the reading order ---------- */

.gb-lead-form__hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Fields ---------- */

.gb-lead-form__grid {
	display: grid;
	gap: var(--gb-space-m) var(--gb-space-s);
}

@media (min-width: 36rem) {
	.gb-lead-form__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gb-lead-form__grid > .gb-field--wide {
		grid-column: 1 / -1;
	}
}

.gb-field {
	display: grid;
	gap: var(--gb-space-3xs);
	align-content: start;
	min-inline-size: 0;
}

.gb-field__label {
	font-weight: var(--gb-weight-bold);
}

.gb-field__optional {
	font-size: var(--gb-step--1);
	font-weight: var(--gb-weight-regular);
	color: var(--gb-text-muted);
}

.gb-field__input {
	inline-size: 100%;
	min-block-size: 3rem;
	margin: 0;
	padding-block: 0.6em;
	padding-inline: 0.9em;
	border: 1.5px solid var(--gb-color-neutral-300);
	border-radius: var(--gb-radius-m);
	background-color: var(--gb-bg);
	color: var(--gb-text);
	font: inherit;
	line-height: 1.5;
	transition:
		border-color var(--gb-duration-fast) linear,
		box-shadow var(--gb-duration-fast) linear;
}

.gb-field__input:hover {
	border-color: var(--gb-color-neutral-600);
}

.gb-field__input:focus,
.gb-field__input:focus-visible {
	outline: none;
	border-color: var(--gb-color-navy);
	box-shadow: 0 0 0 4px var(--gb-color-turquoise-a35);
}

/* Numbers, e-mail and links are written left to right; in Arabic they sit at the field's start (right). */
:root[dir="rtl"] .gb-field__input--ltr {
	text-align: right;
}

.gb-field__input--area {
	min-block-size: 8rem;
	resize: vertical;
}

/* The select draws its own chevron (it points down in both directions). */
select.gb-field__input {
	appearance: none;
	padding-inline-end: 2.6em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C2342' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 1.1em;
	cursor: pointer;
}

:root[dir="rtl"] select.gb-field__input {
	background-position: left 0.9em center;
}

:root[dir="ltr"] select.gb-field__input {
	background-position: right 0.9em center;
}

/* An error: thicker warm border and a faint warm fill, plus the words under the field. */
.gb-field__input[aria-invalid="true"] {
	border-width: 2px;
	border-color: #C2410C;
	background-color: #FFFBF8;
}

.gb-field__hint {
	margin: 0;
	font-size: var(--gb-step--1);
	color: var(--gb-text-muted);
}

.gb-field__error {
	margin: 0;
	font-size: var(--gb-step--1);
	font-weight: var(--gb-weight-bold);
	color: #B42318;
}

.gb-field__error:empty {
	display: none;
}

/* ---------- More about the company (folded) ---------- */

.gb-lead-form__more {
	padding-block: var(--gb-space-s);
	padding-inline: var(--gb-space-m);
	border: 1px dashed var(--gb-color-neutral-300);
	border-radius: var(--gb-radius-m);
}

.gb-lead-form__more > summary {
	display: flex;
	align-items: center;
	gap: var(--gb-space-2xs);
	min-block-size: 2.75rem;
	font-weight: var(--gb-weight-bold);
	color: var(--gb-color-navy);
	list-style: none;
	cursor: pointer;
}

.gb-lead-form__more > summary::-webkit-details-marker {
	display: none;
}

/* + / − in a small turquoise circle. */
.gb-lead-form__more > summary::before {
	content: "+";
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	border-radius: 50%;
	background-color: var(--gb-color-turquoise-a20);
	font-size: 1.1em;
	line-height: 1;
}

.gb-lead-form__more[open] > summary::before {
	content: "−";
}

.gb-lead-form__more > .gb-lead-form__grid {
	margin-block: var(--gb-space-s) var(--gb-space-2xs);
}

/* ---------- Consent ---------- */

.gb-field--check {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	column-gap: var(--gb-space-xs);
}

.gb-field__check {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin: 0.2em 0 0;
	accent-color: var(--gb-color-navy);
	cursor: pointer;
}

.gb-field__check[aria-invalid="true"] {
	outline: 2px solid #C2410C;
	outline-offset: 2px;
}

.gb-field__check-label {
	line-height: 1.6;
	cursor: pointer;
}

.gb-field__check-label a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.gb-field--check .gb-field__error {
	grid-column: 1 / -1;
}

/* ---------- Send ---------- */

.gb-lead-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gb-space-s) var(--gb-space-m);
	margin-block-start: var(--gb-space-l);
}

.gb-lead-form__submit {
	min-inline-size: 12rem;
}

.gb-lead-form__arrow {
	inline-size: 1.1rem;
	block-size: 1.1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Drawn pointing forward in Arabic (left); mirrored in English. */
:root[dir="ltr"] .gb-lead-form__arrow {
	scale: -1 1;
}

.gb-lead-form[data-gb-busy] .gb-lead-form__submit {
	opacity: 0.75;
	cursor: progress;
}

.gb-lead-form__privacy {
	flex: 1 1 14rem;
	margin: 0;
	font-size: var(--gb-step--1);
	color: var(--gb-text-muted);
}

/* ---------- Sent ---------- */

.gb-lead-form__sent {
	display: grid;
	justify-items: center;
	gap: var(--gb-space-s);
	padding-block: var(--gb-space-l);
	text-align: center;
}

.gb-lead-form__sent-art {
	inline-size: 5.5rem;
	block-size: 5.5rem;
	overflow: visible;
}

.gb-lead-form__sent-ring {
	fill: none;
	stroke: var(--gb-primary);
	stroke-width: 3;
}

.gb-lead-form__sent-tick {
	fill: none;
	stroke: var(--gb-color-navy);
	stroke-width: 4.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gb-lead-form__sent-seed {
	fill: var(--gb-seed);
}

.gb-lead-form__sent-title {
	margin: 0;
	font-family: var(--gb-font-display);
	font-size: var(--gb-step-3);
	font-weight: var(--gb-weight-bold);
	line-height: var(--gb-leading-heading);
}

.gb-lead-form__sent-text {
	max-inline-size: 38ch;
	margin: 0;
	color: var(--gb-text-muted);
}

.gb-lead-form__sent-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gb-space-s);
	margin: var(--gb-space-2xs) 0 0;
}

/* The ring closes, the tick is drawn, the seed lands (once). */
@media (prefers-reduced-motion: no-preference) {
	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-lead-form__sent:not([hidden]) .gb-lead-form__sent-ring {
		stroke-dasharray: 214;
		animation: gb-lf-draw 0.7s var(--gb-ease-out) both;
	}

	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-lead-form__sent:not([hidden]) .gb-lead-form__sent-tick {
		stroke-dasharray: 44;
		animation: gb-lf-draw 0.45s var(--gb-ease-out) 0.5s both;
	}

	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-lead-form__sent:not([hidden]) .gb-lead-form__sent-seed {
		transform-box: fill-box;
		transform-origin: center;
		animation: gb-lf-seed 0.5s var(--gb-ease-out) 0.85s both;
	}
}

@keyframes gb-lf-draw {
	from {
		stroke-dashoffset: var(--gb-lf-len, 214);
	}

	to {
		stroke-dashoffset: 0;
	}
}

.gb-lead-form__sent-tick {
	--gb-lf-len: 44;
}

@keyframes gb-lf-seed {
	from {
		opacity: 0;
		scale: 0.2;
		translate: 0 -0.6rem;
	}

	to {
		opacity: 1;
		scale: 1;
		translate: 0 0;
	}
}