/*
 * Contact page — built to assets-source/reference/foodyx_contactpagina_met_kaart.png.
 *
 * Quiet by construction: off-white ground, two bordered white panels, hairline
 * separators, no shadow, no gradient, small radii. The strongest horizontal
 * move on the page is the full-bleed map band, exactly as in the comp.
 *
 * Every value is a theme.json token. Mobile-first: the 360px case is the
 * unconditional default, widened with min-width only.
 */

.fx-contact {
	margin-block-start: var(--wp--preset--spacing--80);
}

/* ---- Intro -------------------------------------------------------------- */

/*
 * Heading, intro and trust row are direct grid children. On phones that is one
 * column and they stack in source order; on desktop the trust row moves beside
 * the paragraph and shares its row.
 */
.fx-contact__intro {
	display: grid;
	gap: var(--wp--preset--spacing--70);
}

.fx-contact__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--display-sm);
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.fx-contact__sub {
	margin: var(--wp--preset--spacing--50) 0 0;
	max-width: 46ch;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.55;
}

/*
 * Trust points. Lightweight and horizontal — a row of three, divided by a
 * hairline, never three cards. The comp is explicit about this and it is the
 * difference between a calm page and a SaaS feature grid.
 */
.fx-trust {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fx-trust__item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	max-width: none;
}

.fx-trust__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: var(--wp--custom--surface--accent-soft);
	color: var(--wp--preset--color--accent);
}

.fx-trust__icon svg {
	display: block;
	width: 1.125rem;
	height: 1.125rem;
}

.fx-trust__text {
	display: block;
}

.fx-trust__title {
	display: block;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.3;
}

.fx-trust__what {
	display: block;
	margin-block-start: 2px;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.4;
}

/* ---- The two panels ----------------------------------------------------- */

.fx-contact__grid {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	margin-block-start: var(--wp--preset--spacing--80);
}

/*
 * Bordered, not floating. A hairline and a 4px radius is the whole elevation
 * story — DESIGN.md puts borders before shadows and this page has no shadow.
 */
.fx-panel {
	padding: var(--wp--preset--spacing--60);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--field);
}

.fx-panel__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.fx-panel__sub {
	margin: var(--wp--preset--spacing--30) 0 0;
	max-width: 46ch;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

/* ---- Form --------------------------------------------------------------- */

.fx-form__form {
	margin-block-start: var(--wp--preset--spacing--60);
}

.fx-form__rows {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.fx-field {
	margin: 0;
	max-width: none;
}

.fx-field__label {
	display: block;
	margin-block-end: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.3;
}

/* The asterisk is decorative; `required` carries the meaning to assistive tech. */
.fx-field__req {
	color: var(--wp--preset--color--accent);
}

/*
 * Crisp and professional, per the brief: a real border, a small radius, no
 * inner shadow and no rounded-pill styling.
 */
.fx-field__input {
	display: block;
	/*
	 * width:100% plus 16px of padding each side and a 1px border made every
	 * field 34px wider than the panel holding it — fields clipped at the panel
	 * edge, and a textarea that reached under the floating controls.
	 */
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--50);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--field);
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

.fx-field__area {
	min-height: 8.5rem;
	padding-block: var(--wp--preset--spacing--40);
	resize: vertical;
}

.fx-field__input::placeholder {
	color: var(--wp--preset--color--connector);
	opacity: 1;
}

.fx-field__input:focus-visible {
	border-color: var(--wp--preset--color--accent);
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

/*
 * The page's one filled control. Disabled until a handler exists — see the
 * pattern. Styled at full strength rather than greyed out so the design can be
 * judged; the note underneath says plainly that it is not wired.
 */
.fx-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
	width: 100%;
	min-height: 48px;
	margin-block-start: var(--wp--preset--spacing--60);
	padding: 0 var(--wp--preset--spacing--60);
	border: var(--wp--custom--border--hairline) solid transparent;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--field);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	cursor: pointer;
}

.fx-form__submit:hover:not(:disabled),
.fx-form__submit:focus-visible {
	background-color: var(--wp--preset--color--accent-strong);
}

.fx-form__submit:disabled {
	cursor: not-allowed;
}

.fx-form__arrow svg {
	display: block;
	width: 1.125rem;
	height: 1.125rem;
}

/*
 * Cloudflare's widget renders inside an iframe whose size is theirs, not ours.
 * The only things this rule owns are the space above it and the guarantee that
 * it cannot push the form wider than its column at 360px.
 */
.fx-form__turnstile {
	margin-block-start: var(--wp--preset--spacing--50);
	max-inline-size: 100%;
	overflow-x: auto;
}

.fx-form__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--50) 0 0;
	max-width: none;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.4;
}

.fx-form__lock svg {
	display: block;
	width: 0.9375rem;
	height: 0.9375rem;
}

/* ---- Direct contact ----------------------------------------------------- */

.fx-direct__list {
	margin: var(--wp--preset--spacing--60) 0 0;
	padding: 0;
	list-style: none;
}

/*
 * Rows divided by hairlines, not four separate cards. The comp shows one panel
 * with internal rules, which is what keeps this column quiet next to the form.
 */
.fx-direct__row {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: start;
	max-width: none;
	padding-block: var(--wp--preset--spacing--50);
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
}

.fx-direct__row:first-child {
	border-block-start: 0;
	padding-block-start: 0;
}

.fx-direct__icon {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: var(--wp--custom--surface--accent-soft);
	color: var(--wp--preset--color--accent);
}

.fx-direct__icon svg {
	display: block;
	width: 1.125rem;
	height: 1.125rem;
}

.fx-direct__label {
	margin: 0;
	max-width: none;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.4;
}

.fx-direct__value {
	margin: 2px 0 0;
	max-width: none;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.4;
}

.fx-direct__meta {
	margin: 2px 0 0;
	max-width: none;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.4;
}

.fx-direct__link {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.fx-direct__link:hover,
.fx-direct__link:focus-visible {
	color: var(--wp--preset--color--accent-strong);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* The WhatsApp helper ships its own glyph; in a row that already has one, hide it. */
.fx-wa--bare .fx-wa__glyph {
	display: none;
}

/* The route link: outlined, quiet, and a real external destination. */
.fx-direct__route {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--40) 0 0;
	max-width: none;
	min-height: 40px;
	padding: 0 var(--wp--preset--spacing--50);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	text-decoration: none;
}

.fx-direct__route:hover,
.fx-direct__route:focus-visible {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-strong);
}

.fx-direct__route-icon svg {
	display: block;
	width: 1rem;
	height: 1rem;
}

.fx-direct__address {
	display: grid;
	margin: 2px 0 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	font-style: normal;
	line-height: 1.5;
}

.fx-direct__hours-title {
	margin-block-start: var(--wp--preset--spacing--40);
}

/*
 * Opening hours as a description list: the days describe the times, and a
 * screen reader reads them as pairs rather than as six loose strings. Compact
 * on purpose — this is a reference, not a feature.
 */
.fx-hours {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px var(--wp--preset--spacing--50);
	margin: 2px 0 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.45;
}

.fx-hours dt {
	color: var(--wp--preset--color--ink-muted);
}

.fx-hours dd {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-variant-numeric: tabular-nums;
}

/*
 * The honeypot. Taken out of the layout, out of sight and out of the tab order,
 * but NOT display:none — some bots skip fields a browser would not render, and
 * the point of the field is that a bot fills it in.
 *
 * Styled here rather than borrowing the newsletter's class: that one lives in
 * home.css, which does not load on this page, and a honeypot that renders is a
 * honeypot that catches real people.
 */
.fx-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
}

/* ---- Form messages ------------------------------------------------------ */

.fx-form__status {
	margin-block-start: var(--wp--preset--spacing--50);
}

.fx-form__status:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

.fx-formmsg {
	margin: 0;
	max-width: none;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

/* Success is the one place petrol is spent in this panel. */
.fx-formmsg--ok {
	color: var(--wp--preset--color--accent-strong);
}

.fx-formmsg--ok strong {
	display: block;
	font-size: var(--wp--preset--font-size--md);
	letter-spacing: -0.01em;
}

/* Ink, not red: the palette has no error colour and inventing one here would
   put a value on the page that theme.json does not own. */
.fx-formmsg--err {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

.fx-field__input[aria-invalid="true"] {
	border-color: var(--wp--preset--color--accent-strong);
}

.fx-form__form[aria-busy="true"] .fx-form__submit {
	opacity: 0.6;
	cursor: progress;
}

/* `hidden` is only display:none at UA level, and these are grid/flex. */
.fx-form [hidden],
.fx-contact [hidden] {
	display: none;
}

/* ---- Unconfirmed content ------------------------------------------------ */

/*
 * Deliberately conspicuous. These mark values the mockup showed but nobody has
 * confirmed — an address, an email, opening hours, a form backend, a map. They
 * are meant to be impossible to mistake for content and trivial to find and
 * delete. Nothing here ships to a live site.
 */
.fx-todo {
	display: inline-block;
	margin-block-start: var(--wp--preset--spacing--30);
	padding: 2px var(--wp--preset--spacing--30);
	border: 1px dashed var(--wp--preset--color--connector);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	font-style: italic;
	line-height: 1.5;
}

.fx-todo--block {
	display: block;
	max-width: none;
	margin-block-start: var(--wp--preset--spacing--40);
	text-align: center;
}

/* ---- Map band ----------------------------------------------------------- */

/*
 * The page's strongest horizontal break: full bleed, edge to edge, grayscale.
 */
.fx-map {
	margin-block-start: var(--wp--preset--spacing--90);
	background-color: var(--wp--preset--color--ground);
	border-block: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
}

.fx-map__canvas {
	height: 270px;
	background-color: var(--wp--custom--surface--rule-soft);
}

/*
 * Grayscale the TILE PANE, not the map.
 *
 * Filtering .leaflet-container would desaturate everything stacked on it — the
 * petrol pin would come out grey and so would the zoom buttons and the
 * attribution. Leaflet keeps tiles in their own pane, so the filter lands on
 * exactly the layer that should lose its colour and nothing else.
 */
.fx-map .leaflet-tile-pane {
	filter: grayscale(1) contrast(1.06) brightness(1.02);
}

/* The library ships a system font stack; the map should read like the page. */
.fx-map .leaflet-container {
	background-color: var(--wp--custom--surface--rule-soft);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--xs);
}

/* ---- Marker ------------------------------------------------------------- */

/*
 * A divIcon carrying the theme's own pin. Petrol, with a light fill so it stays
 * legible over dark blocks in the grayscale tiles, and no animation: it marks a
 * building, it does not ask for attention.
 */
.fx-map__pin {
	color: var(--wp--preset--color--accent);
}

.fx-map__pin svg {
	display: block;
	width: 36px;
	height: 36px;
	fill: var(--wp--preset--color--field);
}

.fx-map__pin:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

/* ---- Popup -------------------------------------------------------------- */

.fx-map .leaflet-popup-content-wrapper {
	border-radius: var(--wp--custom--radius--md);
}

.fx-map .leaflet-popup-content {
	margin: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

.fx-map__popup {
	display: grid;
	gap: 2px;
}

.fx-map__popup strong {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--base);
}

.fx-map__popup span {
	color: var(--wp--preset--color--ink-muted);
}

.fx-map__route {
	margin-block-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--accent);
	font-weight: 700;
	text-decoration: none;
}

.fx-map__route:hover,
.fx-map__route:focus-visible {
	color: var(--wp--preset--color--accent-strong);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---- Controls ----------------------------------------------------------- */

/*
 * Leaflet's zoom buttons are anchors, so they are keyboard reachable already.
 * They only need to stop looking like Leaflet and start looking like Foodyx.
 */
.fx-map .leaflet-bar a {
	border-radius: 0;
	background-color: var(--wp--preset--color--field);
	color: var(--wp--preset--color--ink);
}

.fx-map .leaflet-bar a:hover,
.fx-map .leaflet-bar a:focus-visible {
	background-color: var(--wp--custom--surface--accent-soft);
	color: var(--wp--preset--color--accent-strong);
}

.fx-map .leaflet-control-attribution {
	background-color: rgb(255 255 255 / 0.85);
	font-size: var(--wp--preset--font-size--xs);
}

.fx-map .leaflet-control-attribution a {
	color: var(--wp--preset--color--accent-strong);
}

/* ---- WhatsApp strip ----------------------------------------------------- */

.fx-wastrip {
	padding-block: var(--wp--preset--spacing--80);
	background-color: var(--wp--custom--surface--accent-wash);
}

.fx-wastrip__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

.fx-wastrip__icon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background-color: var(--wp--custom--surface--accent-soft);
	color: var(--wp--preset--color--accent);
}

.fx-wastrip__icon svg {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

.fx-wastrip__eyebrow {
	margin: 0;
	max-width: none;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.fx-wastrip__title {
	margin: var(--wp--preset--spacing--20) 0 0;
	max-width: none;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.fx-wastrip__sub {
	margin: 2px 0 0;
	max-width: none;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.45;
}

.fx-wastrip__action {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	grid-column: 2;
	margin: var(--wp--preset--spacing--50) 0 0;
	max-width: none;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
}

.fx-wastrip__link {
	color: inherit;
	text-decoration: none;
}

.fx-wastrip__link:hover,
.fx-wastrip__link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.fx-wastrip__arrow svg {
	display: block;
	width: 1.125rem;
	height: 1.125rem;
}

/* ---- Widening: tablet --------------------------------------------------- */

@media (min-width: 48rem) {
	.fx-contact {
		margin-block-start: var(--wp--preset--spacing--90);
	}

	/* Two fields per row, message across both — the comp's field rhythm. */
	.fx-form__rows {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	}

	.fx-field--wide {
		grid-column: 1 / -1;
	}

	.fx-panel {
		padding: var(--wp--preset--spacing--70);
	}

	.fx-form__submit {
		width: auto;
		min-width: 16rem;
	}

	.fx-form__note {
		justify-content: flex-start;
	}

	.fx-map__canvas {
		height: 320px;
	}

	/* Copy left, action right, with the comp's divider between them. */
	.fx-wastrip__inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.fx-wastrip__action {
		grid-column: auto;
		margin: 0;
		padding-inline-start: var(--wp--preset--spacing--70);
		border-inline-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	}
}

/* ---- Widening: laptop --------------------------------------------------- */

@media (min-width: 64rem) {
	/*
	 * Two columns. The heading takes the first row on its own; the intro
	 * paragraph and the trust row share the second, which is what puts the
	 * trust titles level with the paragraph's first line. They align because
	 * they are on the same grid row — no offset to re-tune when the copy
	 * changes.
	 *
	 * The second track is sized to its content but capped, so the three trust
	 * points can never starve the heading down to a word per line.
	 */
	.fx-contact__intro {
		grid-template-columns: minmax(26rem, 1fr) auto;
		column-gap: var(--wp--preset--spacing--80);
		row-gap: var(--wp--preset--spacing--50);
		align-items: start;
	}

	.fx-contact__title {
		grid-column: 1;
		grid-row: 1;
	}

	.fx-contact__sub {
		grid-column: 1;
		grid-row: 2;
		margin-block-start: 0;
	}

	.fx-trust {
		grid-column: 2;
		grid-row: 2;
	}

	.fx-trust {
		grid-auto-flow: column;
		gap: 0;
	}

	.fx-trust__item {
		padding-inline: var(--wp--preset--spacing--50);
	}

	.fx-trust__item:first-child {
		padding-inline-start: 0;
	}

	.fx-trust__item:last-child {
		padding-inline-end: 0;
	}

	.fx-trust__item + .fx-trust__item {
		border-inline-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	}

	.fx-map__canvas {
		height: 400px;
	}

	/*
	 * Form ~60%, direct contact ~40%.
	 *
	 * No align-items here on purpose: grid's default `stretch` makes both
	 * panels the height of the taller one, so their borders end level. Their
	 * contents still start at the top because each panel is an ordinary block —
	 * nothing is centred and no spacer is added to fill the difference.
	 */
	.fx-contact__grid {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		gap: var(--wp--preset--spacing--70);
	}

	.fx-contact__title {
		font-size: var(--wp--preset--font-size--display);
	}
}