/*
 * rekos/contact-form "Turite klausimų?" (Figma 106:1020 desktop 1440, 967:10165 mobile 375).
 * Tokens only. Rules that override theme.json, base.css or Fluent Forms styles start with
 * .rk-contact-form / .rk-contact-form__card .fluentform, so they win whatever the load
 * order (Fluent Forms' own rules are 0-2-0 to 0-4-1; inc/forms.php turns its default
 * look, fluentform-public-default.css, off on the site).
 *
 * Desktop: white, 80 / 72 padding, two equal columns 40 apart.
 *   Left (stretches to the form height, spread top to bottom): H2 + text (16/24, ~416 wide)
 *   24 below; contact rows 12 apart (28 px gradient icon, 16 gap, B16 bold); team photo
 *   416 × 233, radius 30 (token 32) with the brand arc.
 *   Right: card in surface colour, radius 30 (token 32), padding 24; labels B12 bold,
 *   6 above the 50 px input (surface-2, 1 px border, radius 12, padding 12, B16);
 *   fields 16 apart; textarea 128; 32 above the full-width ring button "Siųsti".
 * Mobile: 72 / 16 padding, everything stacked 40 apart; heading 30, text B14 (navy, as
 *   in the product, company and sector frames) 16 below; photo 343 × 192 radius 20; card radius 20, padding 16; inputs 46 (B14).
 * Tablet (768–1199, derived): the desktop columns at ~330–560 px, photo full column width.
 * Form states (not in Figma, derived; Otilija approves): hover / focus borders, errors
 * under the field (D11), the D11 consent line under the button, "sending" state, the
 * "sending failed" line under the button and the no-JavaScript line (QA 2026-10-09 A13, A16).
 * Error colour: theme.json has no danger token yet; settings.custom.color.danger is
 * used when it exists, otherwise the primary (indigo) colour.
 */

.rk-contact-form {
	--rk-contact-form-gap: calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--20));
	--rk-contact-form-error: var(--wp--custom--color--danger, var(--wp--preset--color--primary));

	padding-block: var(--wp--preset--spacing--80);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.rk-contact-form__inner {
	display: grid;
	gap: var(--rk-contact-form-gap);
}

/* ---------- Left column ---------- */

.rk-contact-form__info {
	display: flex;
	flex-direction: column;
	gap: var(--rk-contact-form-gap);
	min-width: 0;
}

.rk-contact-form__lead {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.rk-contact-form .rk-contact-form__heading {
	margin: 0;
	color: inherit;
	overflow-wrap: break-word;
	text-wrap: balance;
}

/* Navy at every width: the PP, PF, Apie mus, Kontaktai and sector mobile frames (1018:19752). */
.rk-contact-form__text {
	margin: 0;
	color: inherit;
	font-size: var(--wp--preset--font-size--base);
	line-height: calc(20 / 14);
}

.rk-contact-form__contacts {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Flex rows: no line-box strut around the inline-flex link, so each row is 28 high and
   the 12 px gap gives Figma's 40 px pitch (828:12465 / 1018:19753). */
.rk-contact-form__contacts > li {
	display: flex;
}

.rk-contact-form .rk-contact-form__contact {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	color: inherit;
	font-size: var(--wp--preset--font-size--h-6);
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
}

.rk-contact-form__contact .rk-icon {
	font-size: 28px;
}

.rk-contact-form a.rk-contact-form__contact:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Team photo: any image fits the 416 × 233 frame; the arc overlay has the same ratio. */
.rk-contact-form__media {
	position: relative;
	margin: 0;
	aspect-ratio: 416 / 233;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--media);
	background: var(--wp--preset--color--contrast);
}

.rk-contact-form .rk-contact-form__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rk-contact-form .rk-contact-form__arc {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* ---------- Form card ---------- */

.rk-contact-form__card {
	min-width: 0;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--media);
	background: var(--wp--preset--color--surface);
}

.rk-contact-form__note {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

.rk-contact-form__card .fluentform {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--base);
	line-height: calc(20 / 14);
}

.rk-contact-form__card .fluentform fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.rk-contact-form__card .fluentform .ff-el-group {
	margin: 0 0 var(--wp--preset--spacing--40);
}

/* Labels: B12 bold, 6 above the field. */
.rk-contact-form__card .fluentform .ff-el-input--label {
	display: block;
	float: none;
	margin: 0 0 calc(var(--wp--preset--spacing--10) * 1.5);
	padding: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	line-height: calc(16 / 12);
}

.rk-contact-form__card .fluentform .ff-el-input--label label {
	display: inline;
	margin: 0;
	color: inherit;
	font: inherit;
}

/* Required marker as in Figma: "El. paštas*", same colour, no space. */
.rk-contact-form__card .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
	content: "*";
	margin: 0;
	color: inherit;
}

.rk-contact-form__card .fluentform .ff-el-input--content {
	margin: 0;
}

/* Inputs: 46 px mobile (B14), 50 px from 768 (B16). */
.rk-contact-form__card .fluentform .ff-el-form-control {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--input);
	background: var(--wp--preset--color--surface-2);
	box-shadow: none;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
	line-height: calc(20 / 14);
	-webkit-appearance: none;
	appearance: none;
	transition:
		border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease),
		background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
}

/* Figma 106:1057: the message field is 128 high. */
.rk-contact-form__card .fluentform textarea.ff-el-form-control {
	min-block-size: calc(var(--wp--preset--spacing--60) * 4);
	resize: vertical;
}

.rk-contact-form__card .fluentform .ff-el-form-control::placeholder {
	color: var(--wp--preset--color--contrast);
	opacity: 0.6;
}

.rk-contact-form__card .fluentform .ff-el-form-control:hover {
	border-color: var(--wp--preset--color--accent);
}

.rk-contact-form__card .fluentform .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--base);
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

/* Errors under the field (D11): Fluent Forms adds .ff-el-is-error and div.error.text-danger. */
.rk-contact-form__card .fluentform .ff-el-is-error .ff-el-form-control {
	border-color: var(--rk-contact-form-error);
	box-shadow: inset 0 0 0 1px var(--rk-contact-form-error);
}

.rk-contact-form__card .fluentform .ff-el-input--content .error,
.rk-contact-form__card .fluentform .ff-el-is-error .text-danger {
	margin: calc(var(--wp--preset--spacing--10) * 1.5) 0 0;
	color: var(--rk-contact-form-error);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	line-height: calc(16 / 12);
}

/* Errors that belong to no field (spam check, too many requests), under the form. */
.rk-contact-form__card .ff-errors-in-stack {
	margin-block-start: var(--wp--preset--spacing--40);
	color: var(--rk-contact-form-error);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: calc(20 / 14);
}

.rk-contact-form__card .ff-errors-in-stack .error {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.rk-contact-form__card .ff-errors-in-stack .error-clear {
	margin-inline-start: var(--wp--preset--spacing--10);
	cursor: pointer;
}

/*
 * A13: "sending failed" line under the button (view.js puts it in this role="alert" box), and
 * A16: the no-JavaScript line above the form. Same look as the errors under the form; an
 * empty alert box takes no space.
 */
.rk-contact-form__card .fluentform .rk-contact-form__alert:not(:empty) {
	margin-block-start: var(--wp--preset--spacing--40);
	color: var(--rk-contact-form-error);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: calc(20 / 14);
}

.rk-contact-form__card .rk-contact-form__noscript {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: calc(20 / 14);
}

.rk-contact-form__card :is(.rk-contact-form__alert, .rk-contact-form__noscript) a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* The phone number never breaks across lines (its spaces are no-break spaces too). */
.rk-contact-form__card .rk-contact-form__tel {
	white-space: nowrap;
}

/* Shown only if a redirect ever fails (the form normally redirects to /aciu/). */
.rk-contact-form__card .ff-message-success {
	margin: 0;
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--input);
	background: var(--wp--preset--color--base);
	box-shadow: none;
	color: var(--wp--preset--color--contrast);
}

/* ---------- Submit: base.css .rk-btn .rk-btn--ring .rk-btn--block (classes from inc/forms.php) ---------- */

.rk-contact-form__card .fluentform .ff_submit_btn_wrapper {
	margin: var(--wp--preset--spacing--60) 0 0;
	text-align: start;
}

/* Full width inside the 4 px ring gap + 1 px ring on both sides. */
.rk-contact-form__card .fluentform .ff-btn-submit.rk-btn--block {
	width: calc(100% - 2 * (var(--wp--custom--button--ring-gap) + var(--wp--custom--button--ring-width)));
}

/* Fallback if the theme classes are missing (e.g. a second form): a plain navy pill. */
.rk-contact-form__card .fluentform .ff-btn-submit:not(.rk-btn) {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: var(--wp--custom--button--height-mobile);
	padding: 0 var(--wp--preset--spacing--60);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--custom--typography--button-size);
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
}

/* Sending: Fluent Forms adds .ff-working / disables the button; no stripe inside the pill. */
.rk-contact-form__card .fluentform .ff-btn-submit:disabled,
.rk-contact-form__card .fluentform .ff-btn-submit.disabled,
.rk-contact-form__card .fluentform .ff-btn-submit.ff-working {
	opacity: 0.7;
	cursor: progress;
}

.rk-contact-form__card .fluentform .ff-btn.ff-working::after {
	content: none;
}

/* D11 consent line under the button (custom HTML field, class from the form script). */
.rk-contact-form__card .fluentform .rk-contact-form__consent {
	margin: var(--wp--preset--spacing--40) 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	line-height: calc(16 / 12);
}

.rk-contact-form__card .fluentform .rk-contact-form__consent p {
	margin: 0;
}

.rk-contact-form__card .fluentform .rk-contact-form__consent a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.rk-contact-form__card .fluentform .rk-contact-form__consent a:hover {
	color: var(--wp--preset--color--primary);
}

/* ---------- Tablet and desktop ---------- */

@media (min-width: 768px) {
	.rk-contact-form__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
	}

	/* Without a form (admin note hidden for visitors) the info column takes the row. */
	.rk-contact-form__info:only-child {
		grid-column: 1 / -1;
	}

	.rk-contact-form__info {
		justify-content: space-between;
	}

	.rk-contact-form__lead {
		gap: var(--wp--preset--spacing--50);
	}

	.rk-contact-form__text {
		/* Figma wraps the text at 416 px (a measure, not a token). */
		max-inline-size: 26em;
		line-height: 1.5;
	}

	.rk-contact-form__card {
		padding: var(--wp--preset--spacing--50);
		border-radius: var(--wp--custom--radius--card);
	}

	.rk-contact-form__card .fluentform,
	.rk-contact-form__card .fluentform .ff-el-form-control {
		line-height: 1.5;
	}
}

@media (min-width: 1200px) {
	/* 416 of the 628 px column. */
	.rk-contact-form__media {
		max-inline-size: 66.25%;
		border-radius: var(--wp--custom--radius--card);
	}
}