/* ==========================================================================
   Just Name IT theme: Kontakt and Support (F-0013)
   --------------------------------------------------------------------------
   Loaded on /kontakt/ and /support/ (PAGE_STYLES in inc/assets.php) and in
   the editor with every page stylesheet, so every selector names one of
   these pages' own sections (.section-*; theme.md *Pages*, checked by
   check_design.py).

   The form is site-core's jni/contact-form block (ADR-0017): the design
   system's field component (design/system/components.css "Form field")
   ported to the tokens-alias.css names. Errors use colour, an icon and text,
   never colour alone. The form needs no script.
   ========================================================================== */

/* ---------- Call or e-mail ---------- */
.section-contact-direct .jni-company--contact,
.section-contact-direct .jni-company--support {
	margin-block: var(--space-50);
}
.section-contact-direct .jni-company__phone-link {
	font-size: var(--fs-large);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
}
.section-contact-direct a.jni-company__phone-link:hover { text-decoration: underline; }
.section-contact-direct .jni-company__phone-label { color: var(--color-muted); }
.section-contact-direct .jni-company__support {
	display: grid;
	gap: var(--space-30);
	margin: 0;
}
.section-contact-direct .jni-company__support dt {
	font-weight: var(--font-weight-semibold);
	color: var(--color-muted);
	font-size: var(--fs-small);
}
.section-contact-direct .jni-company__support dd { margin: 0; }

/* ---------- Offices: the map link and the postal card ---------- */
.section-offices .jni-company__map { margin-block: var(--space-30) 0; }
.section-offices .jni-company__org-nr { margin-block: var(--space-20) 0; color: var(--color-muted); }

/* ---------- Downloads (Fjärrsupport) ---------- */
.section-downloads .jni-downloads {
	display: grid;
	gap: var(--space-30);
	list-style: none;
	margin-block: var(--space-50);
	padding: 0;
}
.section-downloads .jni-downloads a {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--space-20);
	min-height: 2.75rem;
	padding-block: var(--space-20);
	font-weight: var(--font-weight-semibold);
}
.section-downloads .jni-downloads__info {
	font-weight: var(--font-weight-regular);
	color: var(--color-muted);
}

/* ---------- The form ---------- */
/* Compact and as wide as its column (the Director, 2026-10-01: "formuläret
   är dessutom galet stort", "allting med formuläret känns för stort"):
   labels at 16 px, fields about 44 px high, the help text small right under
   the label, the message box 8rem. From 48em the fields go two by two
   (Namn and Företag, E-post and Telefon, Ärende beside an empty cell);
   Meddelande and the button take the whole width. theme.md, Pages. */
.section-form .contact-form { margin-block-start: var(--space-50); }
.section-form .contact-form__form {
	display: grid;
	gap: var(--space-50) var(--space-50);
}
@media (min-width: 48em) {
	.section-form .contact-form__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.section-form .field--meddelande,
	.section-form .contact-form__actions { grid-column: 1 / -1; }
}
.section-form .field {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	margin: 0;
}
.section-form .field__label {
	font-weight: var(--font-weight-semibold);
	font-size: 1rem;
	color: var(--color-contrast);
}
.section-form .field__optional { font-weight: var(--font-weight-regular); color: var(--color-muted); }
.section-form .field__help { font-size: var(--fs-small); color: var(--color-muted); margin: 0; }
.section-form .input {
	width: 100%;
	min-height: 2.75rem;
	padding: var(--space-20) var(--space-30);
	font: inherit;
	font-size: 1rem;
	color: var(--color-contrast);
	background: var(--color-base);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-m);
}
.section-form textarea.input { height: 8rem; min-height: 8rem; resize: vertical; }
.section-form .input:hover { border-color: var(--color-primary); }
.section-form .input:focus-visible {
	outline: var(--focus-width) solid var(--color-focus);
	outline-offset: 1px;
	border-color: var(--color-primary);
}
.section-form .input[aria-invalid="true"] { border: 2px solid var(--color-error); }
.section-form .field__error {
	display: flex;
	gap: var(--space-20);
	align-items: flex-start;
	margin: 0;
	font-size: var(--fs-small);
	font-weight: var(--font-weight-semibold);
	color: var(--color-error);
}
/* The icon is decoration: "/ ''" keeps it out of the accessible name. */
.section-form .field__error::before {
	content: "!";
	content: "!" / "";
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 1.25em;
	height: 1.25em;
	margin-top: 0.1em;
	border-radius: 50%;
	background: var(--color-error);
	color: var(--color-base);
	font-size: 0.85em;
}

/* Summary of the errors, and a notice for the whole form. */
.section-form .contact-form__summary,
.section-form .contact-form__notice {
	margin: 0 0 var(--space-60);
	padding: var(--space-50);
	border: 2px solid var(--color-error);
	border-radius: var(--radius-m);
	background: var(--color-base);
	color: var(--color-contrast);
}
.section-form .contact-form__summary-text { margin: 0; font-weight: var(--font-weight-semibold); }
.section-form .contact-form__summary-list { margin: var(--space-30) 0 0; padding-left: 1.25em; }
.section-form .contact-form__summary-list a { color: var(--color-error); font-weight: var(--font-weight-semibold); }
.section-form .contact-form__notice { font-weight: var(--font-weight-semibold); }

/* The honeypot: off-screen for everyone. Its label says to leave it empty. */
.section-form .contact-form__trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* The send button: the primary button of the design system. */
.section-form .contact-form__actions { margin: 0; }
.section-form .contact-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-20);
	min-height: 2.75rem;
	padding: var(--space-20) var(--space-50);
	font: inherit;
	font-weight: var(--font-weight-semibold);
	font-size: 1rem;
	line-height: 1.2;
	border: 2px solid var(--color-primary);
	border-radius: var(--radius-m);
	background: var(--color-primary);
	color: var(--color-base);
	cursor: pointer;
}
.section-form .contact-form__submit::after { content: "→"; content: "→" / ""; display: inline-block; }
.section-form .contact-form__submit:hover {
	background: var(--color-primary-strong);
	border-color: var(--color-primary-strong);
}
.section-form .contact-form__submit:focus-visible {
	outline: var(--focus-width) solid var(--color-focus);
	outline-offset: var(--focus-offset);
}

.section-form .contact-form__privacy {
	margin: var(--space-50) 0 0;
	font-size: var(--fs-small);
	color: var(--color-muted);
}

/* The confirmation after a send. */
.section-form .contact-form--sent {
	padding: var(--space-60);
	border-left: 4px solid var(--color-primary);
	background: var(--color-primary-soft);
	border-radius: var(--radius-m);
}
.section-form .contact-form--sent:focus { outline: none; }
.section-form .contact-form__title { margin: 0 0 var(--space-30); font-size: var(--fs-large); }
.section-form .contact-form__text { margin: 0; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
	.section-form .input,
	.section-form .contact-form__submit {
		transition: background-color var(--duration-fast) ease-out, border-color var(--duration-fast) ease-out, color var(--duration-fast) ease-out;
	}
}