/* -----------------------------------------------------------------------
   The theme's form engine (inc/forms.php) — page-agnostic.

   Loaded only on pages that actually carry a form (see shivuk_form_pages()),
   so it costs nothing anywhere else. RTL-first, logical properties only.

   The visual job here is to make a long questionnaire feel short: fields sit
   on a two-column grid so the eye travels down half as far, sections carry
   their own heading rule, and errors are the only thing on the page allowed
   to use red.
   ----------------------------------------------------------------------- */

.shivuk-form-wrap {
	--sf-radius: 12px;
	--sf-gap: 1.1rem;
	--sf-error: #c0392b;
	--sf-success: #17795e;
	--sf-field-bg: #ffffff;

	/* The anchor target for in-page "jump to the form" links — keeps the
	   landing point clear of the sticky site header. */
	scroll-margin-block-start: 90px;
}

/* -----------------------------------------------------------------------
   Notices — the one thing that must be seen after the redirect.
   ----------------------------------------------------------------------- */

.shivuk-form__notice {
	margin-block-end: 1.5rem;
	padding: 1rem 1.15rem;
	border-radius: var(--sf-radius);
	border-inline-start: 4px solid currentColor;
	font-weight: 600;
	line-height: 1.55;
}

.shivuk-form__notice:focus {
	outline: none;
}

.shivuk-form__notice--success {
	color: var(--sf-success);
	background: #eaf7f2;
}

.shivuk-form__notice--error {
	color: var(--sf-error);
	background: #fdeeec;
}

.shivuk-form__again a {
	display: inline-block;
	font-weight: 700;
	color: var(--shivuk-color-accent);
}

/* -----------------------------------------------------------------------
   Sections
   ----------------------------------------------------------------------- */

.shivuk-form__section {
	margin: 0 0 2rem;
	padding: 0;
	border: 0;
}

.shivuk-form__legend {
	display: block;
	inline-size: 100%;
	margin-block-end: 1.1rem;
	padding-block-end: 0.6rem;
	border-block-end: 1px solid var(--shivuk-color-border);
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--shivuk-color-text);
}

.shivuk-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sf-gap);
}

.shivuk-field--full {
	grid-column: 1 / -1;
}

@media (max-width: 700px) {
	.shivuk-form__grid {
		grid-template-columns: 1fr;
	}

	.shivuk-field--half {
		grid-column: 1 / -1;
	}
}

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

.shivuk-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-inline-size: 0;
}

.shivuk-field__label {
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--shivuk-color-text);
}

.shivuk-field__req {
	color: var(--shivuk-color-accent);
}

.shivuk-field__help {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--shivuk-color-muted);
}

.shivuk-field input[type="text"],
.shivuk-field input[type="email"],
.shivuk-field input[type="tel"],
.shivuk-field input[type="url"],
.shivuk-field select,
.shivuk-field textarea {
	inline-size: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--shivuk-color-border);
	border-radius: 10px;
	background: var(--sf-field-bg);
	color: var(--shivuk-color-text);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color 0.18s var(--shivuk-ease), box-shadow 0.18s var(--shivuk-ease);
}

.shivuk-field textarea {
	resize: vertical;
	min-block-size: 6rem;
}

.shivuk-field input:focus,
.shivuk-field select:focus,
.shivuk-field textarea:focus {
	outline: none;
	border-color: var(--shivuk-color-accent);
	box-shadow: 0 0 0 3px var(--shivuk-color-accent-soft);
}

.shivuk-field input::placeholder,
.shivuk-field textarea::placeholder {
	color: #a6a6ac;
}

/* Errors: red border plus a message, never colour alone. */
.shivuk-field.has-error input,
.shivuk-field.has-error select,
.shivuk-field.has-error textarea {
	border-color: var(--sf-error);
}

/* Character counter, added by assets/js/forms.js. */
.shivuk-field__count {
	margin: 0;
	align-self: flex-start;
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
	color: var(--shivuk-color-muted);
}

.shivuk-field__error {
	margin: 0;
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--sf-error);
}

/* -----------------------------------------------------------------------
   Checkbox groups and consent lines
   ----------------------------------------------------------------------- */

.shivuk-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.shivuk-choice {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.8rem;
	border: 1px solid var(--shivuk-color-border);
	border-radius: 999px;
	background: var(--sf-field-bg);
	font-size: 0.9rem;
	cursor: pointer;
	transition: border-color 0.18s var(--shivuk-ease), background 0.18s var(--shivuk-ease);
}

.shivuk-choice:hover {
	border-color: var(--shivuk-color-accent);
}

/* The pill fills in when its box is checked — the state has to read from
   across the page, not from the 13px checkbox alone. */
.shivuk-choice:has(input:checked) {
	border-color: var(--shivuk-color-accent);
	background: var(--shivuk-color-accent-soft);
}

.shivuk-choice input,
.shivuk-consent input {
	inline-size: 1.05rem;
	block-size: 1.05rem;
	accent-color: var(--shivuk-color-accent);
	flex: none;
}

.shivuk-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.92rem;
	line-height: 1.55;
	cursor: pointer;
}

.shivuk-consent input {
	margin-block-start: 0.2rem;
}

/* -----------------------------------------------------------------------
   Photo upload
   ----------------------------------------------------------------------- */

/* A dashed drop-zone look around the native control rather than instead of
   it: ::file-selector-button restyles the browser's own button, so the
   keyboard and screen-reader behaviour stays exactly as the browser built
   it. */
.shivuk-upload {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 0.9rem;
	padding: 0.85rem 1rem;
	border: 1px dashed var(--shivuk-color-border);
	border-radius: var(--sf-radius);
	background: var(--sf-field-bg);
	transition: border-color 0.18s var(--shivuk-ease), background 0.18s var(--shivuk-ease);
}

.shivuk-upload:hover,
.shivuk-upload:focus-within {
	border-color: var(--shivuk-color-accent);
	background: var(--shivuk-color-accent-soft);
}

.shivuk-upload input[type="file"] {
	flex: 1 1 12rem;
	min-inline-size: 0;
	font-size: 0.9rem;
	color: var(--shivuk-color-muted);
	cursor: pointer;
}

.shivuk-upload input[type="file"]::file-selector-button {
	margin-inline-end: 0.7rem;
	padding: 0.45em 1em;
	border: 0;
	border-radius: 999px;
	background: var(--shivuk-color-accent);
	color: #ffffff;
	font-family: inherit;
	font-size: 0.86rem;
	font-weight: 700;
	cursor: pointer;
}

/* The caption doubles as the chosen file's name once one is picked (forms.js
   swaps the text), so it is never just decoration. */
.shivuk-upload__hint {
	flex: 1 1 100%;
	font-size: 0.82rem;
	color: var(--shivuk-color-muted);
	word-break: break-word;
}

/* Local preview of the chosen file, before anything is uploaded. */
.shivuk-upload__preview {
	inline-size: 64px;
	block-size: 64px;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: var(--shivuk-shadow-sm);
	order: -1;
}

.shivuk-field--image.has-error .shivuk-upload {
	border-color: var(--sf-error);
}

/* -----------------------------------------------------------------------
   Captcha
   ----------------------------------------------------------------------- */

.shivuk-field--captcha {
	padding: 1rem 1.15rem;
	border: 1px dashed var(--shivuk-color-border);
	border-radius: var(--sf-radius);
	background: var(--shivuk-color-surface);
}

.shivuk-form__question {
	margin: 0.2rem 0 0.5rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--shivuk-color-text);
}

.shivuk-field--captcha input[type="text"] {
	max-inline-size: 16rem;
}

/* -----------------------------------------------------------------------
   The honeypot: out of sight, out of the tab order, still in the DOM.
   Not display:none — some bots skip hidden inputs, and this one is bait.
   ----------------------------------------------------------------------- */

.shivuk-form__hp {
	position: absolute;
	inset-inline-start: -9999px;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
}

/* -----------------------------------------------------------------------
   Actions
   ----------------------------------------------------------------------- */

.shivuk-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem 1.2rem;
	margin-block-start: 1.6rem;
	padding-block-start: 1.4rem;
	border-block-start: 1px solid var(--shivuk-color-border);
}

.shivuk-form__submit {
	padding: 0.85rem 2.4rem;
	border: 0;
	border-radius: 999px;
	background: var(--shivuk-color-accent);
	color: var(--shivuk-color-accent-contrast);
	font-family: inherit;
	font-size: 1.02rem;
	font-weight: 800;
	cursor: pointer;
	transition: transform 0.18s var(--shivuk-ease), box-shadow 0.18s var(--shivuk-ease), opacity 0.18s var(--shivuk-ease);
}

.shivuk-form__submit:hover {
	box-shadow: var(--shivuk-shadow-md);
	transform: translateY(-1px);
}

.shivuk-form__submit[disabled] {
	opacity: 0.6;
	cursor: default;
	transform: none;
}

.shivuk-form__note {
	margin: 0;
	font-size: 0.82rem;
	color: var(--shivuk-color-muted);
}

@media (prefers-reduced-motion: reduce) {
	.shivuk-form__submit,
	.shivuk-field input,
	.shivuk-field select,
	.shivuk-field textarea,
	.shivuk-choice {
		transition: none;
	}

	.shivuk-form__submit:hover {
		transform: none;
	}
}