/*
 * /sl/kontakt/ — the contact page.
 *
 * PART ONE is the measured CSS gap against the service bundle, emitted verbatim
 * from the design source in source order. Sixteen rules, forty-six
 * declarations, and every one of them belongs to a selector no other page in
 * this site renders: .contact-grid, .contact-panel, .form-grid, .field,
 * .info-item. Nothing here is a shared primitive and nothing was promoted —
 * `.grid-4` reached three consumers on Cenik and moved; these reached one.
 *
 * The two duplicated selectors near the end are the source's own late
 * overrides, kept in source order for the reason Slice 8 recorded: emitting the
 * earlier rule after the later one inverts the cascade and ships a value the
 * design never renders.
 *
 * PART TWO is what the static source has no equivalent of, because it has no
 * working form: a validation error, a delivery failure and a thank-you. These
 * are FUNCTIONAL EXTENSIONS, not parity defects, and they are drawn in the
 * design's own language — the panel's radius, the section's spacing, the
 * eyebrow's uppercase weight — rather than as a new visual idea.
 */

/* -------------------------------------------------- the measured gap -- */

.contact-grid {
	display: grid;
	grid-template-columns: 1.25fr .75fr;
	gap: 32px;
}

.contact-panel {
	padding: 48px;
	border: 1px solid var(--line);
	border-radius: 36px;
	background: var(--white);
	box-shadow: var(--shadow);
}

.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.field {
	margin-bottom: 20px;
}

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

.field label {
	display: block;
	margin: 0 0 8px 4px;
	color: #758197;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .15em;
	text-transform: uppercase;
}

.field input, .field textarea {
	width: 100%;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: 16px;
	outline: none;
	background: var(--soft);
}

.field textarea {
	min-height: 170px;
	resize: vertical;
}

.field input:focus, .field textarea:focus {
	border-color: var(--blue);
	background: var(--white);
}

/*
 * THE FOCUS RING, PUT BACK. Slice 14.
 *
 * `shell-base.css` carries the design's site-wide rule --
 * `a, button, input, textarea :focus-visible { outline: 3px solid rgba(0, 194,
 * 232, .5); outline-offset: 4px }` -- transcribed from the source verbatim.
 * `.field input` above resets `outline: none` for the resting state, also
 * transcribed verbatim. In the SOURCE both live in one stylesheet and the
 * focus rule comes AFTER the reset, so at equal specificity (0,1,1 each) the
 * ring wins. Splitting the file by family put the reset in a bundle that loads
 * LATER than the shell, which silently reversed that and left the four contact
 * fields as the only focusable controls on the site with no outline: measured
 * `3px none rgb(0,0,0)` here against `3px solid rgba(0,194,232,0.5)` in the
 * source, on the form a visitor is most likely to reach by keyboard.
 *
 * The fix is one rule in the file that caused it, at a specificity the reset
 * cannot reach (0,2,1 against 0,1,1) so file order stops deciding. Not
 * `!important`, which would win by force and hide the next reordering; not a
 * change to `shell-base.css`, which is correct and shared by every other
 * control on the site; and not a change to the resting state, whose parity is
 * measured and unchanged.
 *
 * The declaration is the source's own, character for character.
 */
.field input:focus-visible,
.field textarea:focus-visible {
	outline: 3px solid rgba(0, 194, 232, .5);
	outline-offset: 4px;
}

.info-item {
	padding: 20px 0;
	border-bottom: 1px solid var(--line);
}

.info-item small {
	display: block;
	margin-bottom: 6px;
	color: var(--accent-ink);
	font-weight: 900;
	letter-spacing: .14em;
	text-transform: uppercase;
}

@media (max-width: 1020px) {
	.split, .contact-grid {
		grid-template-columns: 1fr;
		gap: 45px;
	}
}

@media (max-width: 680px) {
	.grid-2, .grid-3, .grid-4, .article-grid, .stats, .form-grid, .feature-list {
		grid-template-columns: 1fr;
	}

	.contact-panel {
		padding: 30px 22px;
	}
}

/*
 * The source's own late overrides. Kept here, after the rules they override,
 * exactly where the source has them.
 */
.contact-panel {
	border-color: rgba(228,234,244,.9);
	box-shadow: 0 25px 70px rgba(11,20,40,.09);
}

.field input,
.field textarea {
	border-width: 1.5px;
	background: #f7f9fc;
}

/* ------------------------------------------------ the starter's forms -- */

/*
 * A COMPAT SHIM, and it is here rather than in service-compat.css because the
 * selectors it repairs exist on exactly one page.
 *
 * The starter's base.css styles form controls the design source never styles:
 *
 *   input[type="text"], input[type="email"], ..., textarea, select {
 *       color: var(--wp--preset--color--contrast);
 *       max-width: 100%;
 *       ...
 *   }
 *
 * Everything else in that rule the gap above already overrides. Two properties
 * survive it, because the SOURCE NEVER DECLARES THEM and a gap tool can only
 * report what the source declares and the candidate settles differently — it
 * cannot see what the candidate declares alone. They were found by adding
 * `color` and `maxWidth` to the parity style probes for these controls, which
 * is the check that does see it: source `rgb(0, 0, 0)` and `none` against
 * `rgb(26, 26, 26)` and `100%`.
 *
 * The literal black is the user agent's own default for a form control, which
 * is what the design renders, written out because this shim exists precisely to
 * restore a value the starter took away.
 *
 * ONE MORE THING THIS SHIM MAKES CONSISTENT. The starter's rule is keyed to
 * `[type=...]`, and the design's name and subject inputs carry no type
 * attribute at all — so without this, two of the four fields were styled and
 * two were not, inside the same form.
 */
.field input,
.field textarea {
	max-width: none;
	color: #000;
}

/* ------------------------------------------- functional extensions -- */

/*
 * THE HONEYPOT.
 *
 * Off-screen rather than `display: none`, and never `visibility: hidden`: the
 * field must stay a real control that a scripted client will find and fill,
 * while `aria-hidden` and `tabindex="-1"` on the markup keep it away from
 * anybody using a screen reader or a keyboard. If this stylesheet ever fails to
 * load, the field appears as an ordinary question with its own instruction
 * rather than as an unexplained empty box.
 */
.hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*
 * THE RESULT BANNER.
 *
 * The state is carried by a word, a border weight and an icon-free colour block
 * together, never by colour alone — the page has to read correctly in
 * monochrome and to somebody who cannot separate red from green.
 */
.form-notice {
	margin: 0 0 28px;
	padding: 20px 22px;
	border: 1.5px solid var(--line);
	border-left-width: 5px;
	border-radius: 16px;
	background: var(--soft);
}

.form-notice:focus {
	outline: 2px solid var(--blue);
	outline-offset: 3px;
}

.form-notice-title {
	margin: 0;
	font-weight: 800;
}

.form-notice-word {
	display: inline-block;
	margin-right: 6px;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .15em;
	text-transform: uppercase;
	vertical-align: 1px;
}

.form-notice-text {
	margin: 6px 0 0;
}

.form-notice-list {
	margin: 12px 0 0;
	padding-left: 20px;
}

.form-notice-list li {
	margin-bottom: 4px;
}

.form-notice-success {
	border-color: #b7e4c7;
	border-left-color: #2f9e5f;
	background: #f2fbf5;
}

.form-notice-success .form-notice-word {
	color: #1d7a46;
}

.form-notice-error {
	border-color: #f3c9c9;
	border-left-color: #c0392b;
	background: #fdf5f4;
}

.form-notice-error .form-notice-word {
	color: #a5281c;
}

/*
 * THE FIELD ERROR. Referenced by `aria-describedby`, so it is read out with the
 * control rather than sitting near it, and marked with a glyph as well as a
 * colour for the same reason as the banner.
 */
.field-error {
	margin: 8px 0 0 4px;
	color: #a5281c;
	font-size: 13px;
	font-weight: 600;
}

.field-error::before {
	content: "\26A0\FE0E";
	margin-right: 6px;
}

.field [aria-invalid="true"] {
	border-color: #c0392b;
}

.field [aria-invalid="true"]:focus {
	border-color: #c0392b;
}