/*
 * Kontakt — loaded only on that page template (inc/contact-page.php).
 *
 * Every selector here addresses markup this theme writes itself, in
 * template-parts/contact/. Mobile-first, single class names, no
 * defensive specificity: nothing else on the site uses these classes.
 *
 * The sheet loads render-blocking (fk2026_blocking_style_handles),
 * because the heading and the banner are the first screen.
 */

/* ==================================================================
 * SECTION FRAME
 * ================================================================== */

/* Full-bleed band, content on the site's column. max() keeps the
   element edge to edge and pushes the padding out to the column edge,
   so no inner wrapper is needed. */
.contact-section {
	padding-block: clamp(3rem, 7vw, 5rem);
	padding-inline: max(var(--fk-space), (100% - var(--fk-max-width)) / 2);
	background: var(--fk-color-bg);
	color: var(--fk-color-body);
}

.contact-lead {
	margin: 0 0 1.5rem;
	font-size: 1.0625rem;
	line-height: 1.75;
}

/* The section heading and eyebrow styles come from global.css; the
   serif weight, the tighter leading and the sage eyebrow are what make
   them this theme's rather than the browser's. */
.contact-section .section-title {
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	line-height: 1.14;
	margin: 0 0 1.25rem;
	color: var(--fk-color-text);
}

.contact-section .section-eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	/* Computed, not eyeballed: 5.6:1 on white, 5.2:1 on the greige
	   band — both past AA for body-size text. */
	color: var(--fk-color-sage-text);
}

/* ==================================================================
 * HERO
 * ================================================================== */

/* The greige band the page opens on, one step warmer than the white the
   form sits on further down. */
.contact-hero {
	background: var(--fk-color-greige);
	text-align: center;
}

.contact-hero__head {
	max-width: 52rem;
	margin-inline: auto;
}

/*
 * The one heading on the page that must not break inside a word.
 * `overflow-wrap: break-word` is right in narrow product cards and
 * wrong here — it once hyphenated "Firmengeschenke" after the k.
 */
.contact-hero__title {
	margin: 0;
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: clamp(2.25rem, 6vw, 4rem);
	line-height: 1.08;
	color: var(--fk-color-text);
	overflow-wrap: normal;
}

.contact-hero .contact-lead {
	max-width: 44rem;
	margin: 1.25rem auto 0;
}

/*
 * The banner sits on the column rather than running edge to edge, and
 * the box holds its own proportions: a fixed ratio plus object-fit
 * means the layout is decided before the picture arrives, so swapping
 * it in the Customizer can never move the page. Taller on a phone,
 * because a 16:9 slice of a photograph on a 380px screen is a stripe.
 */
.contact-hero__media {
	max-width: 60rem;
	margin: clamp(2rem, 5vw, 3rem) auto 0;
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(31, 31, 31, 0.18);
}

.contact-hero__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (min-width: 48em) {
	.contact-hero__image {
		aspect-ratio: 16 / 9;
	}
}

/* ==================================================================
 * DETAILS AND FORM
 * ================================================================== */

/*
 * One row on desktop, stacked on a phone — and stacked in the order it
 * reads: who is there for you, then the form that reaches them. The
 * form column is the wider of the two because it carries pairs of
 * fields; `minmax(0, …)` because a grid track's default minimum is its
 * content, and one long mail address would otherwise push the row wider
 * than the screen.
 */
.contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 60em) {
	.contact-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
		gap: clamp(2.5rem, 5vw, 4.5rem);
		align-items: start;
	}
}

.contact-hours {
	margin: 0 0 2rem;
	line-height: 1.7;
}

.contact-hours strong {
	color: var(--fk-color-text);
}

/* ==================================================================
 * CHANNELS
 * ================================================================== */

.contact-channels {
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-channel {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	padding-block: 0.875rem;
}

/* The rule belongs BETWEEN the rows, not under each of them: a line
   under the last one would read as the start of something that is not
   there. */
.contact-channel + .contact-channel {
	border-top: 1px solid rgba(31, 31, 31, 0.12);
}

.contact-channel__label {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--fk-color-text);
}

.contact-channel__value {
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--fk-color-sage-text);
}

/* Underlined on hover and on focus rather than always, because these
   two sit in a labelled list and not in running text — but the moment a
   pointer or the keyboard is on them, they say they are links. The
   padding is what makes the touch target: 0.875rem above and below the
   line gives roughly 44px of height without enlarging the text. */
.contact-channel__value a {
	color: inherit;
	text-decoration: none;
}

.contact-channel__value a:hover,
.contact-channel__value a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ==================================================================
 * CARD
 * ================================================================== */

.contact-card {
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	background: var(--fk-color-bg);
	border: 1px solid rgba(31, 31, 31, 0.12);
	border-radius: 0.75rem;
	box-shadow: 0 12px 32px rgba(31, 31, 31, 0.06);
}

.contact-card__title {
	margin: 0 0 0.75rem;
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.2;
	color: var(--fk-color-text);
}

.contact-card__text {
	margin: 0 0 1.75rem;
	font-size: 1rem;
	line-height: 1.7;
}

/* ==================================================================
 * FORM
 * ================================================================== */

.contact-form__field {
	margin-bottom: 1.25rem;
}

.contact-form__label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 1rem;
	color: var(--fk-color-text);
}

/*
 * The same shape global.css uses for form controls, plus one class — and
 * that is not decoration. Its selector carries three attribute
 * :not()s, so a plain class here would lose the specificity race and
 * the fields would keep the 30rem cap that is right in a page of body
 * copy and wrong inside a card.
 */
.contact-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.contact-form select,
.contact-form textarea {
	width: 100%;
	max-width: none;
	padding: 0.75rem 1rem;
	background: var(--fk-color-bg);
	border: 1px solid #d7d2ca;
	border-radius: 0.5rem;
	color: var(--fk-color-body);
}

/* 4.8:1 on white. A placeholder is a hint and not the label — the label
   is above the field and stays there — but a hint nobody can read is
   just noise in the box. */
.contact-form ::placeholder {
	color: #77726b;
	opacity: 1;
}

.contact-form__control--textarea {
	min-height: 7rem;
	resize: vertical;
}

/*
 * The caret is drawn here rather than left to the platform, so the
 * select matches the inputs next to it on every OS. Inline SVG in a
 * data URI: no request, no sprite, no icon font.
 */
.contact-form__control--select {
	appearance: none;
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%235f6b59' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 0.75rem auto;
}

/* The focus ring is a border colour plus a soft halo, on :focus rather
   than :focus-visible — a text field that is being typed in should show
   it whether it was reached by tab or by tap. The global outline still
   applies on top for keyboard focus. */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
	border-color: var(--fk-color-sage-dark);
	box-shadow: 0 0 0 3px rgba(111, 124, 104, 0.22);
}

.contact-form input[aria-invalid="true"],
.contact-form select[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] {
	border-color: #a33028;
}

/* Two fields share a line as soon as there is room for two. Below that
   they stack, because a 160px-wide input for a surname is a worse
   answer than a second line. */
.contact-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 1rem;
}

@media (min-width: 30em) {
	.contact-form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 7:1 on white — an error message is the one line on the page that must
   not be hard to read. */
.contact-form__error {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: #a33028;
}

.contact-form__summary {
	margin-bottom: 1.75rem;
	padding: 1rem 1.25rem;
	background: rgba(163, 48, 40, 0.06);
	border-left: 3px solid #a33028;
	border-radius: 0.5rem;
}

.contact-form__summary p {
	margin: 0 0 0.5rem;
	font-weight: 700;
	color: var(--fk-color-text);
}

.contact-form__summary ul {
	margin: 0;
	padding-left: 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.contact-form__summary a {
	color: #a33028;
}

/*
 * Out of sight, out of the tab order and out of the accessibility tree —
 * but still in the layout, which is the point. `display: none` would
 * hide it from the simple bots too, and this field only works if
 * something that reads markup decides to fill it in.
 */
.contact-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*
 * The one solid button on the page. Sage rather than the near-black of
 * the site's other CTAs, because it sits inside a card and is the
 * card's own action.
 *
 * The colour is --fk-color-sage-text and not --fk-color-sage-dark: white
 * on the darker sage is 5.6:1, on the lighter one 4.4:1 — and 4.4 is
 * under AA for a 1rem label. Same family, one step down, computed
 * rather than guessed.
 *
 * The selector carries the element and its type attribute because
 * global.css styles `button` and `input[type="submit"]` for the whole
 * site; a bare class would lose to it.
 */
.contact-form button[type="submit"].contact-form__submit {
	display: block;
	width: 100%;
	min-height: 3rem;
	margin-top: 0.5rem;
	padding: 0.875rem 1.5rem;
	background: var(--fk-color-sage-text);
	color: #fff;
	border: 0;
	border-radius: 2rem;
	font-size: 1rem;
	/* Only transform and box-shadow move: everything else costs layout
	   or a repaint of the blur on every frame. */
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-form button[type="submit"].contact-form__submit:hover,
.contact-form button[type="submit"].contact-form__submit:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(95, 107, 89, 0.35);
}

.contact-form__privacy {
	margin: 1rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--fk-color-body);
}

/* ==================================================================
 * CONFIRMATION
 * ================================================================== */

/* Takes the place of the form once the mail is on its way. The band is
   the brand's sage at a tenth of its strength, so the card reads as
   answered rather than as a different card. */
.contact-success {
	padding: 0.5rem 0;
}

.contact-success .contact-card__title::before {
	content: "";
	display: block;
	width: 2.25rem;
	margin-bottom: 1.25rem;
	border-top: 1px solid rgba(111, 124, 104, 0.6);
}

.contact-success .contact-card__text {
	margin-bottom: 0;
}

/* ==================================================================
 * EDITOR CONTENT
 * ================================================================== */

/* Whatever is typed into the page itself lands under the sections.
   Pasted copy is where an unbreakable string usually enters a page — a
   URL, a long German compound — and any one of them can push a column
   wider than the screen. */
.contact-content {
	max-width: var(--fk-max-width);
	margin: 0 auto;
	padding: clamp(2.5rem, 6vw, 4rem) var(--fk-space);
	overflow-wrap: break-word;
}

/* ==================================================================
 * SCROLL REVEAL
 * ================================================================== */

/*
 * The details and the form rise into place as they enter the viewport —
 * a scroll-driven CSS animation, so there is no JavaScript, no scroll
 * listener and no observer. The browser runs it on the compositor.
 *
 * Wrapped twice on purpose. `@supports` because `animation-timeline` is
 * Chromium-only for now, and `prefers-reduced-motion: no-preference`
 * because content that moves while you are trying to read it is what
 * that setting exists to stop.
 *
 * The hero is left out: it is the largest element on the first screen,
 * and animating the thing a browser is trying to measure as the Largest
 * Contentful Paint reports a slower page than the one you built.
 */

/* Movement only, deliberately NO fade: Lighthouse measures text at the
   start of its animation, and any opacity under 1 lowers the contrast
   ratio it reads. */
@keyframes contact-rise {
	from {
		transform: translateY(1.5rem);
	}

	to {
		transform: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.contact-inquiry .contact-grid {
			animation-name: contact-rise;
			animation-timing-function: linear;
			animation-fill-mode: both;
			/* `auto`, not a number of seconds: the range below drives
			   the animation, and the shorthand would quietly reset this
			   to 0s. */
			animation-duration: auto;
			animation-timeline: view();
			animation-range: entry 5% cover 20%;
		}
	}
}