/*
 * Asset intake page (/gui-tai-lieu/) — scoped styles.
 * KAITAGO Core Design System v1.
 *
 * Loaded ONLY on pages using template-asset-intake.php.
 *
 * Everything is namespaced under .kai-intake, including the Fluent Forms
 * overrides — no global form styling is changed, and no other page on the site
 * is affected. Form fields, logic and submission handling are untouched; this
 * file only restyles what Fluent Forms already outputs.
 */

.kai-intake {
	--kai-off-white: #F6F5F0;
	--kai-ink: #151716;
	--kai-olive: #46563C;
	--kai-olive-hover: #384629;
	--kai-olive-light: #E8EBE3;
	--kai-blue: #5D7B82;
	--kai-orange: #D66B45;

	--kai-text: #151716;
	--kai-text-secondary: #43463F;
	--kai-text-muted: #6E7168;

	--kai-border: #DEDDD6;
	--kai-border-strong: #C4C3BA;
	--kai-surface-card: #FFFFFF;

	--kai-serif: "Newsreader", Georgia, "Times New Roman", serif;
	--kai-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

	background: var(--kai-off-white);
	color: var(--kai-text);
	font-family: var(--kai-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

.kai-intake *,
.kai-intake *::before,
.kai-intake *::after { box-sizing: border-box; }

/*
 * Kadence adds its own content padding on page templates. Trim the excess above
 * the form without touching any global setting.
 */
.kai-intake > .kai-intake__inner { margin-top: 0; }

.kai-intake__inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: clamp(32px, 4.5vw, 64px) clamp(20px, 5vw, 40px) clamp(48px, 6vw, 88px);
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

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

.kai-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kai-olive);
}

.kai-rule { flex: 0 0 auto; display: block; width: 24px; height: 1.5px; background: var(--kai-olive); }

.kai-h1 {
	margin: 0 0 18px;
	max-width: 22ch;
	font-family: var(--kai-serif);
	font-size: clamp(30px, 3.4vw, 46px);
	font-weight: 500;
	line-height: 1.16;
	letter-spacing: -0.015em;
	text-wrap: pretty;
	color: var(--kai-text);
}

.kai-body {
	margin: 0 0 28px;
	max-width: 48ch;
	font-size: clamp(16px, 1.2vw, 18px);
	line-height: 1.65;
	color: var(--kai-text-secondary);
	text-wrap: pretty;
}

.kai-reassurance {
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 44ch;
	border-top: 1px solid var(--kai-border);
}

.kai-reassurance li {
	padding: 13px 0;
	border-bottom: 1px solid var(--kai-border);
	font-size: 14px;
	line-height: 1.55;
	color: var(--kai-text-muted);
}

/* ---------- Right column: the form shell ---------- */

.kai-intake__form {
	min-width: 0;
	background: var(--kai-surface-card);
	border: 1px solid var(--kai-border);
	border-top: 2px solid var(--kai-olive);
	padding: clamp(22px, 3vw, 40px);
}

/* Kadence/editor wrappers inside the content: strip stray top margins. */
.kai-intake__form > *:first-child { margin-top: 0; }
.kai-intake__form > p:empty { display: none; }
.kai-intake__form .entry-content > *:first-child { margin-top: 0; }

/* ============================================================
 * FLUENT FORMS — scoped restyle
 * ============================================================
 * Structure, fields and behaviour are Fluent Forms'. Only appearance changes.
 */

.kai-intake .fluentform { font-family: var(--kai-sans); }

.kai-intake .fluentform .ff-el-group { margin-bottom: 22px; }
.kai-intake .fluentform .ff-el-group:last-of-type { margin-bottom: 0; }

/* Labels above inputs, never floating or inline. */
.kai-intake .fluentform .ff-el-input--label {
	margin-bottom: 7px;
	padding: 0;
	flex: 0 0 100%;
	max-width: 100%;
}

.kai-intake .fluentform .ff-el-input--label label {
	font-family: var(--kai-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
	color: var(--kai-text);
}

.kai-intake .fluentform .ff-el-input--label.ff-el-is-required label:after,
.kai-intake .fluentform .ff-el-is-required.asterisk-right label:after { color: var(--kai-orange); }

.kai-intake .fluentform .ff-el-input--content { flex: 0 0 100%; max-width: 100%; }

.kai-intake .fluentform .ff-el-help-message {
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--kai-text-muted);
}

/* Consistent input height and hairline borders. */
.kai-intake .fluentform input[type="text"],
.kai-intake .fluentform input[type="email"],
.kai-intake .fluentform input[type="tel"],
.kai-intake .fluentform input[type="url"],
.kai-intake .fluentform input[type="number"],
.kai-intake .fluentform input[type="date"],
.kai-intake .fluentform select,
.kai-intake .fluentform textarea,
.kai-intake .fluentform .ff-el-form-control {
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	background: var(--kai-off-white);
	border: 1px solid var(--kai-border-strong);
	border-radius: 3px;
	box-shadow: none;
	font-family: var(--kai-sans);
	font-size: 15px;
	line-height: 1.5;
	color: var(--kai-text);
	transition: border-color 180ms ease-out, background-color 180ms ease-out;
}

.kai-intake .fluentform textarea,
.kai-intake .fluentform textarea.ff-el-form-control {
	min-height: 148px;
	resize: vertical;
	line-height: 1.6;
}

.kai-intake .fluentform .ff-el-form-control::placeholder { color: #8C8F86; }

.kai-intake .fluentform .ff-el-form-control:hover { border-color: var(--kai-text-muted); }

.kai-intake .fluentform .ff-el-form-control:focus,
.kai-intake .fluentform select:focus,
.kai-intake .fluentform textarea:focus {
	background: var(--kai-surface-card);
	border-color: var(--kai-olive);
	outline: 2px solid var(--kai-blue);
	outline-offset: 1px;
}

/* Checkbox and radio groups. */
.kai-intake .fluentform .ff-el-group.ff-el-form-check,
.kai-intake .fluentform .ff_list_buttons,
.kai-intake .fluentform .ff-el-input--content > .ff-el-form-check-wrapper { margin: 0; }

.kai-intake .fluentform .ff-el-form-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 44px;
	margin: 0;
	padding: 8px 0;
}

.kai-intake .fluentform .ff-el-form-check label,
.kai-intake .fluentform .ff-el-form-check-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--kai-text-secondary);
	cursor: pointer;
}

.kai-intake .fluentform input[type="checkbox"],
.kai-intake .fluentform input[type="radio"] {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	margin: 1px 0 0;
	accent-color: var(--kai-olive);
	cursor: pointer;
}

.kai-intake .fluentform input[type="checkbox"]:focus-visible,
.kai-intake .fluentform input[type="radio"]:focus-visible {
	outline: 2px solid var(--kai-blue);
	outline-offset: 2px;
}

/* Section headings and dividers inside the form. */
.kai-intake .fluentform .ff-el-section-break {
	margin: 30px 0 20px;
	padding-top: 22px;
	border-top: 1px solid var(--kai-border);
}

.kai-intake .fluentform .ff-el-section-break:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.kai-intake .fluentform .ff-el-section-break h3,
.kai-intake .fluentform .ff-section-titles h3 {
	margin: 0 0 6px;
	font-family: var(--kai-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kai-olive);
}

.kai-intake .fluentform .ff-el-section-break p,
.kai-intake .fluentform .ff-section-titles p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--kai-text-muted);
}

/* Submit button — deep olive, no shadow, no gradient. */
.kai-intake .fluentform .ff-el-group.ff-text-left,
.kai-intake .fluentform .ff_submit_btn_wrapper { margin-top: 28px; }

.kai-intake .fluentform .ff-btn,
.kai-intake .fluentform .ff-btn-submit,
.kai-intake .fluentform button[type="submit"] {
	min-height: 50px;
	padding: 14px 30px;
	background: var(--kai-olive);
	border: 1px solid var(--kai-olive);
	border-radius: 3px;
	box-shadow: none;
	font-family: var(--kai-sans);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	color: #FFFFFF;
	cursor: pointer;
	transition: background-color 180ms ease-out, border-color 180ms ease-out;
}

.kai-intake .fluentform .ff-btn-submit:hover,
.kai-intake .fluentform button[type="submit"]:hover {
	background: var(--kai-olive-hover);
	border-color: var(--kai-olive-hover);
	box-shadow: none;
}

.kai-intake .fluentform .ff-btn-submit:focus-visible,
.kai-intake .fluentform button[type="submit"]:focus-visible {
	outline: 2px solid var(--kai-blue);
	outline-offset: 3px;
}

/* Validation — orange as a functional accent, not decoration. */
.kai-intake .fluentform .ff-el-is-error .ff-el-form-control,
.kai-intake .fluentform .ff-el-form-control.ff-el-is-error { border-color: var(--kai-orange); }

.kai-intake .fluentform .error,
.kai-intake .fluentform .text-danger,
.kai-intake .fluentform .ff-el-is-error .error {
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--kai-orange);
}

/*
 * Success and error messages, styled as part of the system rather than as a
 * browser-style alert box.
 */
.kai-intake .fluentform .ff-message-success,
.kai-intake .ff-message-success,
.kai-intake .fluentform_wrapper .ff-message-success {
	margin: 0;
	padding: 22px 24px;
	background: var(--kai-olive-light);
	border: 1px solid var(--kai-border);
	border-left: 2px solid var(--kai-olive);
	border-radius: 0;
	box-shadow: none;
	font-family: var(--kai-sans);
	font-size: 15px;
	line-height: 1.65;
	color: var(--kai-text);
	text-align: left;
}

.kai-intake .fluentform .ff-errors-in-stack,
.kai-intake .fluentform .error_index {
	margin-bottom: 18px;
	padding: 14px 16px;
	background: #FBF1ED;
	border: 1px solid var(--kai-border);
	border-left: 2px solid var(--kai-orange);
	border-radius: 0;
	box-shadow: none;
	font-size: 14px;
	color: var(--kai-text);
}

/* ============================================================
 * MOBILE — 768px and below
 * ============================================================ */

@media (max-width: 768px) {
	.kai-intake__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding-top: clamp(24px, 5vw, 36px);
	}

	.kai-h1 { max-width: none; font-size: clamp(27px, 7vw, 34px); }
	.kai-body { margin-bottom: 22px; }

	.kai-intake__form { padding: 20px 18px; }

	.kai-intake .fluentform .ff-el-group { margin-bottom: 18px; }
	.kai-intake .fluentform .ff-btn-submit,
	.kai-intake .fluentform button[type="submit"] { width: 100%; }
}

@media (max-width: 400px) {
	.kai-intake__form { padding: 18px 14px; }
	.kai-intake .fluentform textarea { min-height: 128px; }
}

@media (prefers-reduced-motion: reduce) {
	.kai-intake *,
	.kai-intake *::before,
	.kai-intake *::after { transition-duration: 0.01ms !important; }
}