/*
 * Kontakt (page-kontakt.php), new design without a mockup (DESIGN-SYSTEM.md §7).
 * Breadcrumb and heading reuse .cat-breadcrumb / .cat-head (components/catalog.css),
 * section headings .nd-sec-h (components/nd-sec-heading.css).
 * Classes: .kontakt, .kontakt-head,
 * .kontakt-main(__grid|__contacts), .kontakt-cards, .kontakt-card(__icon|__body|__label|__value(--link)|__note),
 * .kontakt-social(__label|__link), .kontakt-map(__frame),
 * .kontakt-info(__grid), .kontakt-detail(--stack|__part|__title|__text|__strong|__code),
 * .kontakt-hours(__row(--closed)|__day|__time),
 * .kontakt-form(__card) + Contact Form 7 markup inside the card (.wpcf7*, .wa-cf7_*).
 * Mobile first: cards in a row from 721px, cards beside the map from 861px,
 * details 1 → 2 (521) → 4 (1101) columns.
 */

/* The form band sits right on the footer. */
body {
	--wa-footer-gap: 0;
}

.kontakt {
	font-family: var(--nd-font);
	font-size: var(--nd-fs-body);
	line-height: var(--nd-lh-body);
	color: var(--nd-c-ink);
}

/* layout.css makes "section > div" a flex column with the ACSS gap; these are plain blocks. */
.kontakt-info > .wa-container,
.kontakt-form > .wa-container {
	display: block;
}

/* The page has a single crumb: show it on phones too (catalog.css hides the current crumb <721px). */
.kontakt .cat-breadcrumb__crumb--current {
	display: inline-flex;
}

/* ---- Contact cards + map ---- */
.kontakt-main {
	padding: var(--nd-sp-22) 0 var(--nd-home-sec-pb);
}

.kontakt-main > .wa-container.kontakt-main__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--nd-sp-16);
}

.kontakt-main__contacts {
	display: flex;
	flex-direction: column;
	gap: var(--nd-sp-12);
}

.kontakt-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--nd-sp-10);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kontakt-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--nd-sp-14);
	height: 100%;
	padding: var(--nd-sp-14) var(--nd-sp-16);
	border: 1px solid var(--nd-c-line);
	border-radius: var(--nd-radius);
	background: var(--nd-c-surface);
	transition: border-color var(--nd-dur-fast), box-shadow var(--nd-dur-fast);
}

.kontakt-card:hover,
.kontakt-card:focus-within {
	border-color: var(--nd-c-brand);
	box-shadow: var(--nd-shadow);
}

.kontakt-card__icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: var(--nd-tap);
	height: var(--nd-tap);
	border-radius: var(--nd-radius-round);
	background: var(--nd-c-brand-tint);
	color: var(--nd-c-brand);
}

.kontakt-card__icon svg {
	width: var(--nd-icon-m);
	height: var(--nd-icon-m);
	fill: currentcolor;
}

.kontakt-card__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.kontakt-card__label {
	font-size: var(--nd-fs-13);
	line-height: var(--nd-lh-snug);
	color: var(--nd-c-muted);
}

.kontakt-card__value {
	font-size: var(--nd-fs-17);
	font-weight: var(--nd-fw-bold);
	line-height: var(--nd-lh-snug);
	color: var(--nd-c-head);
	overflow-wrap: anywhere;
}

/* The whole card (position: relative above) is the hit area of its link. */
.kontakt-card__value--link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--nd-radius);
}

.kontakt-card__value--link:hover,
.kontakt-card__value--link:focus-visible {
	color: var(--nd-c-brand);
}

.kontakt-card__value--link:focus-visible {
	outline: none;
}

.kontakt-card:has(.kontakt-card__value--link:focus-visible) {
	outline: var(--focus-width) solid var(--nd-c-brand);
	outline-offset: var(--focus-width);
}

.kontakt-card__note {
	margin-top: var(--nd-sp-2);
	font-size: var(--nd-fs-13);
	line-height: var(--nd-lh-snug);
	color: var(--nd-c-muted);
}

/* ---- Social links (only filled-in profiles are printed) ---- */
.kontakt-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nd-sp-8);
}

.kontakt-social__label {
	margin-right: var(--nd-sp-4);
	font-size: var(--nd-fs-13);
	color: var(--nd-c-muted);
}

.kontakt-social__link {
	display: grid;
	place-items: center;
	width: var(--nd-btn-h);
	height: var(--nd-btn-h);
	border: 1px solid var(--nd-c-line);
	border-radius: var(--nd-radius-round);
	background: var(--nd-c-surface);
	color: var(--nd-c-brand);
	transition: border-color var(--nd-dur-fast), background-color var(--nd-dur-fast);
}

.kontakt-social__link:hover,
.kontakt-social__link:focus-visible {
	border-color: var(--nd-c-brand);
	background: var(--nd-c-brand-tint);
}

.kontakt-social__link svg {
	width: var(--nd-icon-s);
	height: var(--nd-icon-s);
	fill: currentcolor;
}

/* ---- Map ---- */
.kontakt-map {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--nd-c-line);
	border-radius: var(--nd-radius);
	background: var(--nd-c-surface-muted);
	aspect-ratio: 4 / 3;
}

.kontakt-map__frame {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---- Company details ---- */
.kontakt-info {
	padding: var(--nd-home-sec-pt) 0 var(--nd-sp-40);
}

.kontakt-info__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--nd-sp-10);
}

.kontakt-detail {
	display: flex;
	flex-direction: column;
	gap: var(--nd-sp-8);
	padding: var(--nd-sp-16) var(--nd-sp-18);
	border: 1px solid var(--nd-c-line);
	border-radius: var(--nd-radius);
	background: var(--nd-c-surface);
}

.kontakt-detail--stack {
	gap: var(--nd-sp-16);
}

.kontakt-detail__part {
	display: flex;
	flex-direction: column;
	gap: var(--nd-sp-8);
}

.kontakt-detail__part + .kontakt-detail__part {
	padding-top: var(--nd-sp-16);
	border-top: 1px solid var(--nd-c-line);
}

.kontakt-detail__title {
	margin: 0;
	font-family: var(--nd-font);
	font-size: var(--nd-fs-16);
	font-weight: var(--nd-fw-bold);
	line-height: var(--nd-lh-snug);
	color: var(--nd-c-head);
}

.kontakt-detail__text {
	margin: 0;
	font-size: var(--nd-fs-14);
	line-height: var(--nd-lh-body);
	color: var(--nd-c-ink);
}

.kontakt-detail__strong {
	font-weight: var(--nd-fw-semibold);
	color: var(--nd-c-head);
}

.kontakt-detail__code {
	overflow-wrap: anywhere;
}

/* Opening hours: day / hours, one row per day. */
.kontakt-hours {
	margin: 0;
	font-size: var(--nd-fs-14);
	line-height: var(--nd-lh-body);
}

.kontakt-hours__row {
	display: flex;
	justify-content: space-between;
	gap: var(--nd-sp-12);
	padding: var(--nd-sp-2) 0;
	border-bottom: 1px solid var(--nd-c-line-soft);
}

.kontakt-hours__row:last-child {
	border-bottom: 0;
}

.kontakt-hours__day {
	color: var(--nd-c-ink);
}

.kontakt-hours__time {
	margin: 0;
	font-weight: var(--nd-fw-semibold);
	color: var(--nd-c-head);
	white-space: nowrap;
}

.kontakt-hours__row--closed .kontakt-hours__time {
	font-weight: var(--nd-fw-regular);
	color: var(--nd-c-muted);
}

/* ---- Contact form band ---- */
.kontakt-form {
	padding: var(--nd-sp-32) 0 var(--nd-sp-40);
	background: var(--nd-c-brand-tint);
}

.kontakt-form__card {
	padding: var(--nd-sp-18) var(--nd-sp-16);
	border: 1px solid var(--nd-c-line);
	border-radius: var(--nd-radius);
	background: var(--nd-c-surface);
}

/* CF7 form 258 (markup in the DB). The wrapper's own grid comes from Scripts Organizer
   snippet 165; the gaps are re-set here with tokens. The second child of the layout
   wrapper has a broken class attribute in the form template, so it is addressed by position. */
.kontakt-form__card .wpcf7 .wa-cf7_layout_wrapper {
	gap: var(--nd-sp-14);
}

.kontakt-form__card .wpcf7 .wa-cf7_layout_wrapper p {
	margin: 0;
}

.kontakt-form__card .wpcf7 .wa-cf7_layout_wrapper .wa-cf7_inputs_wrapper p {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--nd-sp-14);
}

.kontakt-form__card .wa-cf7_layout_wrapper > div:nth-child(2) {
	display: flex;
	flex-direction: column;
	gap: var(--nd-sp-12);
}

.kontakt-form__card .wa-cf7_layout_wrapper p:empty,
.kontakt-form__card .wa-cf7_layout_wrapper p > br {
	display: none;
}

.kontakt-form__card .wpcf7-form-control-wrap {
	display: block;
}

/* Text fields. Snippet 165 sets padding, border, radius, outline, transition and the focus
   ring of ".wpcf7 input/textarea" with !important, so only !important can replace them. */
.kontakt-form__card .wpcf7 :is(input[type="text"], input[type="email"], textarea) {
	width: 100%;
	min-height: var(--nd-btn-h);
	padding: var(--nd-sp-10) var(--nd-sp-14) !important; /* beats snippet 165 */
	border: var(--nd-border-strong) solid var(--nd-c-brand-tint-2) !important; /* beats snippet 165 */
	border-radius: var(--nd-radius-m) !important; /* beats snippet 165 */
	outline: none !important; /* beats snippet 165; the focus state is the border below */
	background: var(--nd-c-surface);
	box-shadow: none !important; /* beats snippet 165 */
	font-family: var(--nd-font);
	font-size: var(--nd-fs-15);
	line-height: var(--nd-lh-body);
	color: var(--nd-c-head);
	transition: border-color var(--nd-dur-fast) !important; /* beats snippet 165 */
}

.kontakt-form__card .wpcf7 textarea {
	display: block;
	height: calc(150px * var(--nd-fs-scale));
	min-height: calc(110px * var(--nd-fs-scale));
	resize: vertical;
}

.kontakt .kontakt-form__card .wpcf7 :is(input[type="text"], input[type="email"], textarea)::placeholder {
	color: var(--nd-c-placeholder) !important; /* beats snippet 165 */
	font-family: var(--nd-font);
	letter-spacing: normal;
}

.kontakt-form__card .wpcf7 :is(input[type="text"], input[type="email"], textarea):hover {
	border-color: var(--nd-c-brand-border) !important; /* beats snippet 165 */
}

.kontakt-form__card .wpcf7 :is(input[type="text"], input[type="email"], textarea):focus {
	border-color: var(--nd-c-brand) !important; /* beats snippet 165 */
	box-shadow: 0 0 0 1px var(--nd-c-brand) !important; /* beats snippet 165 */
}

.kontakt-form__card .wpcf7 :is(input, textarea):is(.wpcf7-not-valid, [aria-invalid="true"]) {
	border-color: var(--nd-c-out) !important; /* beats snippet 165 */
}

/* Consent checkbox: native box in the brand colour, the whole label is a 44px row. */
.kontakt-form__card .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.kontakt-form__card .wpcf7-acceptance label {
	display: inline-flex;
	align-items: center;
	gap: var(--nd-sp-10);
	min-height: var(--nd-btn-h);
	font-size: var(--nd-fs-14);
	line-height: var(--nd-lh-snug);
	color: var(--nd-c-ink);
	cursor: pointer;
}

.kontakt-form__card .wpcf7 .wpcf7-acceptance input[type="checkbox"] {
	flex: 0 0 auto;
	width: var(--nd-icon-s);
	height: var(--nd-icon-s);
	margin: 0;
	padding: 0 !important; /* beats snippet 165 (".wpcf7 input" padding) */
	border: 0 !important; /* beats snippet 165 */
	border-radius: var(--nd-radius-xs) !important; /* beats snippet 165 */
	box-shadow: none !important; /* beats snippet 165 */
	accent-color: var(--nd-c-brand);
	cursor: pointer;
}

.kontakt-form__card .wpcf7-acceptance a {
	color: var(--nd-c-brand);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kontakt-form__card .wpcf7-acceptance a:hover {
	color: var(--nd-c-brand-hover);
}

/* Submit: the brand (secondary) button, like .cat-empty__btn. */
.kontakt-form .kontakt-form__card .wpcf7-form .wpcf7-submit {
	width: 100%;
	height: var(--nd-btn-h);
	margin: 0;
	padding: 0 var(--nd-sp-22) !important; /* beats snippet 165 (".wpcf7 input" padding) */
	border: 0 !important; /* beats snippet 165 */
	border-radius: var(--nd-radius-btn) !important; /* beats snippet 165 */
	background: var(--nd-c-brand);
	box-shadow: none !important; /* beats snippet 165 */
	font-family: var(--nd-font);
	font-size: var(--nd-fs-15);
	font-weight: var(--nd-fw-bold);
	letter-spacing: normal;
	text-transform: none;
	color: var(--nd-c-on-brand);
	cursor: pointer;
	transition: background-color var(--nd-dur-fast) !important; /* beats snippet 165 */
}

.kontakt-form .kontakt-form__card .wpcf7-form .wpcf7-submit:hover,
.kontakt-form .kontakt-form__card .wpcf7-form .wpcf7-submit:focus-visible {
	background: var(--nd-c-brand-hover);
	box-shadow: none !important; /* beats snippet 165 */
	color: var(--nd-c-on-brand);
}

.kontakt-form .kontakt-form__card .wpcf7-form .wpcf7-submit:focus-visible {
	outline: var(--focus-width) solid var(--nd-c-brand) !important; /* beats snippet 165 ("outline: none") */
	outline-offset: var(--focus-width);
}

/* CF7 keeps the button disabled until the consent box is ticked. */
.kontakt-form .kontakt-form__card .wpcf7-form .wpcf7-submit:disabled {
	background: var(--nd-c-brand);
	opacity: var(--nd-opacity-disabled);
	cursor: not-allowed;
}

/* The spinner (hidden by CF7 until submit) would wrap under the full-width button and leave a gap. */
.kontakt-form__card .wpcf7-spinner {
	display: none;
	margin: var(--nd-sp-8) 0 0;
}

.kontakt-form__card .wpcf7-form.submitting .wpcf7-spinner {
	display: inline-block;
}

/* Validation tip under a field. */
.kontakt-form__card .wpcf7-not-valid-tip {
	margin-top: var(--nd-sp-4);
	font-size: var(--nd-fs-13);
	line-height: var(--nd-lh-snug);
	color: var(--nd-c-out);
}

/* Response message: inline under the form instead of the fixed toast of snippet 201801,
   in token colours instead of the pulsing boxes of snippet 165. */
.kontakt .kontakt-form__card .wpcf7 .wpcf7-form .wpcf7-response-output {
	position: static !important; /* beats snippet 201801 (fixed toast) */
	margin: var(--nd-sp-14) 0 0 !important; /* beats snippet 165 */
	padding: var(--nd-sp-10) var(--nd-sp-14);
	border: 1px solid var(--nd-c-line) !important; /* beats snippet 165 */
	border-left: var(--nd-sp-4) solid var(--nd-c-brand) !important; /* beats snippet 165 */
	border-radius: var(--nd-radius-m);
	background: var(--nd-c-brand-tint) !important; /* beats snippet 165 */
	box-shadow: none;
	font-size: var(--nd-fs-14);
	line-height: var(--nd-lh-snug);
	color: var(--nd-c-head);
	transform: none;
	animation: none;
}

.kontakt .kontakt-form__card .wpcf7 .wpcf7-form .wpcf7-response-output::before {
	display: none;
}

.kontakt .kontakt-form__card .wpcf7 .wpcf7-form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output {
	border-left-color: var(--nd-c-out) !important; /* beats snippet 165 */
	background: color-mix(in srgb, var(--nd-c-out) 6%, var(--nd-c-surface)) !important; /* beats snippet 165 */
	color: var(--nd-c-out);
}

.kontakt .kontakt-form__card .wpcf7 .wpcf7-form.sent .wpcf7-response-output {
	border-left-color: var(--nd-c-ok) !important; /* beats snippet 165 */
	background: color-mix(in srgb, var(--nd-c-ok) 6%, var(--nd-c-surface)) !important; /* beats snippet 165 */
	color: var(--nd-c-ok);
}

.kontakt .kontakt-form__card .wpcf7 .wpcf7-form.init .wpcf7-response-output {
	display: none;
}

/* Keyboard focus ring in the brand colour (as on the category page). */
.kontakt :is(.cat-breadcrumb, .kontakt-social, .kontakt-form__card) a:focus-visible {
	outline: var(--focus-width) solid var(--nd-c-brand);
	outline-offset: var(--focus-width);
}

.kontakt-form__card .wpcf7 .wpcf7-acceptance input[type="checkbox"]:focus-visible {
	outline: var(--focus-width) solid var(--nd-c-brand) !important; /* beats snippet 165 (".wpcf7 input" outline: none !important) */
	outline-offset: var(--focus-width);
}

/* ---- Breakpoints ---- */
@media (min-width: 521px) {
	.kontakt-info__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.kontakt-form__card .wpcf7 .wa-cf7_layout_wrapper .wa-cf7_inputs_wrapper p {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.kontakt-form .kontakt-form__card .wpcf7-form .wpcf7-submit {
		width: auto;
		min-width: calc(200px * var(--nd-fs-scale));
	}
}

@media (min-width: 721px) {
	.kontakt-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.kontakt-card {
		flex-direction: column;
		align-items: flex-start;
	}

	.kontakt-map {
		aspect-ratio: 16 / 7;
	}

	.kontakt-form__card {
		padding: var(--nd-sp-24) var(--nd-sp-28);
	}
}

@media (min-width: 861px) {
	.kontakt-main > .wa-container.kontakt-main__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: var(--nd-layout-gap);
	}

	.kontakt-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.kontakt-card {
		flex-direction: row;
		align-items: center;
		padding: var(--nd-sp-16) var(--nd-sp-20);
	}

	.kontakt-card__value {
		font-size: var(--nd-fs-19);
	}

	.kontakt-map {
		aspect-ratio: auto;
		min-height: calc(300px * var(--nd-fs-scale));
	}
}

@media (min-width: 1101px) {
	.kontakt-info__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.kontakt-card__icon {
		width: var(--nd-btn-h);
		height: var(--nd-btn-h);
	}

	.kontakt-card__icon svg {
		width: var(--nd-icon-s);
		height: var(--nd-icon-s);
	}

	.kontakt-info {
		padding-bottom: var(--nd-sp-30);
	}

	.kontakt-form {
		padding: var(--nd-sp-28) 0 var(--nd-sp-32);
	}
}