/*
 * Mark Germany — global refinements.
 * theme.json carries every token; this file holds only the few rules theme.json
 * cannot express (focus ring, block styles, motion). Tokens only — no raw colours.
 */

/* ── Spacing token aliases for digit-leading slugs ─────────────────────────
   WordPress emits inline-style preset refs (var:preset|spacing|4xl) verbatim as
   var(--wp--preset--spacing--4xl), but generates the *actual* variable via
   _wp_to_kebab_case(), which inserts a hyphen at the digit↔letter boundary:
   --wp--preset--spacing--4-xl. The two names never meet, so every inline padding
   /margin using 2xl–5xl silently resolves to 0. (blockGap is unaffected — its
   layout CSS is kebab-cased too.) Alias the un-hyphenated names to the real ones
   so the theme's existing token references work as written. */
:root {
	--wp--preset--spacing--2xl: var(--wp--preset--spacing--2-xl);
	--wp--preset--spacing--3xl: var(--wp--preset--spacing--3-xl);
	--wp--preset--spacing--4xl: var(--wp--preset--spacing--4-xl);
	--wp--preset--spacing--5xl: var(--wp--preset--spacing--5-xl);
}

/* ── Accessible focus ring (WCAG 2.2 AA) ───────────────────────────────── */
:where(a, button, input, textarea, select, summary, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

/* ── Skip link ─────────────────────────────────────────────────────────── */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
}

.skip-link:focus {
	position: fixed;
	left: var(--wp--preset--spacing--sm);
	top: var(--wp--preset--spacing--sm);
	z-index: 1000;
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--base);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	border-radius: var(--wp--custom--radius--md);
}

html {
	scroll-behavior: smooth;
}

/* ── Header: sticky (default) + transparent overlay (front page) ───────── */
.mg-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--canvas);
}

.mg-header--transparent {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background-color: transparent;
}

.mg-header--transparent :where(a, .wp-block-site-title a, .wp-block-navigation-item__content) {
	color: var(--wp--preset--color--on-primary);
}

/* ── Header: responsive collapse (mobile + tablet) ───────────────────────────
   The header's controls sit in an is-nowrap flex row. Left unmanaged the
   standalone "Kontakt" button can't shrink below its content, so at narrow
   widths its label wraps one letter per line — stretching the header past
   250px tall and overflowing the viewport. Below 1024px we collapse navigation
   to the hamburger sheet and keep only the logo (left) plus a compact language
   switcher + menu trigger (right). WordPress reveals the inline nav list at
   ≥600px by default; we extend the overlay up to the tablet ceiling so every
   small screen gets one calm, single-row header. */

@media (width <= 1023px) {
	/* Reveal the menu trigger (44px tap target); hide the inline list until
	   the sheet is opened. Overrides WordPress's ≥600px inline-nav styles. */
	:is(.mg-header, .mg-header--transparent) .wp-block-navigation__responsive-container-open {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
	}

	:is(.mg-header, .mg-header--transparent)
		.wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	:is(.mg-header, .mg-header--transparent) .wp-block-navigation__responsive-container-open svg {
		width: 28px;
		height: 28px;
		fill: currentcolor;
	}

	.mg-header .wp-block-navigation__responsive-container-open {
		color: var(--wp--preset--color--primary);
	}

	.mg-header--transparent .wp-block-navigation__responsive-container-open {
		color: var(--wp--preset--color--on-primary);
	}

	/* Order the right cluster as [language switcher][trigger] — trigger last. */
	:is(.mg-header, .mg-header--transparent) .mg-lang-switcher {
		order: 1;
	}

	:is(.mg-header, .mg-header--transparent) .wp-block-navigation {
		order: 2;
	}

	/* The standalone Kontakt button is the overflow culprit — drop it on small
	   screens. Contact stays reachable via the hamburger sheet and hero CTA. */
	:is(.mg-header, .mg-header--transparent) .wp-block-buttons {
		display: none;
	}

	/* Compact the switcher so it sits cleanly beside the trigger (36px targets
	   still clear the 24px WCAG 2.2 AA minimum). Header-scoped so it overrides
	   the 44px base rule regardless of source order. */
	:is(.mg-header, .mg-header--transparent) .mg-lang-switcher__link {
		min-width: 36px;
		min-height: 36px;
		padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--xs);
	}
}

/* Phone: drop the tagline, ease the wordmark and reduce the switcher to DE/EN
   labels (flags hidden) so the lockup, switcher and trigger share one row
   without crowding or overflowing the viewport. */
@media (width <= 600px) {
	.mg-brand__tag {
		display: none;
	}

	/* Header-scoped so it overrides the canonical .mg-brand__word size (which
	   appears later in the file); leaves the footer lockup untouched. */
	:is(.mg-header, .mg-header--transparent) .mg-brand__word {
		font-size: var(--wp--preset--font-size--body);
		letter-spacing: 0.04em;
	}

	:is(.mg-header, .mg-header--transparent) .mg-lang-switcher__flag {
		display: none;
	}
}

/* Open menu sheet: the navy panel + light text come from the navigation block's
   overlayBackgroundColor / overlayTextColor attributes (WordPress-native). Here
   we centre and enlarge the rows so the items read as generous, tappable list
   entries (the switcher is outside the nav block, so it stays in the bar). The
   bar's right-justified layout would otherwise push the items hard against the
   screen edge and clip them. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	justify-content: center;
	align-items: center;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-right {
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--heading-sm);
	padding-block: var(--wp--preset--spacing--xs);
}

/* Close (X): WordPress pins it flush to the viewport's top-right corner
   (position:absolute; top:0; right:0; padding:0) with a fixed 24px icon. Add
   top/right *padding* — not margin — so the icon sits inset from the corner with
   breathing room, while the same padding grows the box to a comfortable ~48px tap
   target. The box stays corner-anchored, so the inset whitespace remains tappable
   (well past the 24px WCAG 2.2 AA target-size minimum). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	padding-top: var(--wp--preset--spacing--lg);
	padding-right: var(--wp--preset--spacing--lg);
}

/* Desktop: keep the inline nav on one line (no 2-row wrap inflating height). */
@media (width >= 1024px) {
	:is(.mg-header, .mg-header--transparent) .wp-block-navigation {
		flex-wrap: nowrap;
		align-items: center;
		gap: var(--wp--preset--spacing--base);
	}
}

/* Hero cover: solid dark backstop behind the photo. Keeps text readable if the image
   fails, and lets contrast checkers measure light text against a real dark surface. */
.mg-hero-cover {
	background-color: var(--wp--preset--color--ink-surface);
}

/* ── Front page: seamless full-bleed bands under the transparent header ──────
   The transparent header is an absolute overlay, so main must sit flush at the
   viewport top — the root blockGap margin would otherwise collapse through the
   body and expose a white canvas strip above the hero. Each band carries its
   own vertical padding, so dropping the inter-band gap (and the gap above the
   footer) lets the bands stack seamlessly with no canvas strips between a dark
   band and its lighter neighbour. */
.mg-front-main,
.mg-front-main > * + *,
.mg-front-main + footer {
	margin-block-start: 0;
}

/* ── Stats / trust band ─────────────────────────────────────────────────────
   A fixed two-line value cell keeps every caption on the same baseline: a title
   that wraps (e.g. "Bodensee · Oberschwaben") fills the reserved height while a
   single-line title is centred within it, so the captions never drift out of
   line. Collapses to a 2×2 grid on tablet and below — at 4-up the long German
   titles only get ~205px and shatter into 4-line stacks, so 2-up (≈2× the
   width) is held all the way up to the desktop nav breakpoint (1024px).
   Scoped to .wp-block-columns too (0,2,0): WordPress injects the per-block
   .wp-block-columns{display:flex} rule AFTER this stylesheet, so a single-class
   .mg-stats-grid would lose display:grid on source order and the band would
   render as a flex row of 4 at every width. */
.wp-block-columns.mg-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg);
}

.mg-stats-grid > .wp-block-column {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	margin: 0;
}

.mg-stats-grid > .wp-block-column > * {
	margin-block: 0;
}

.mg-stats-grid .wp-block-heading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.4em; /* two lines at the line-height below — reserves space so
	                       single- and multi-line values share one baseline */
	line-height: 1.2;
}

@media (width <= 1023px) {
	.wp-block-columns.mg-stats-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--wp--preset--spacing--lg);
	}
}

/* Phone: at a ~150px column the longest value ("Bodensee · Oberschwaben")
   wraps to three lines while its row-neighbour stays at two, breaking the
   shared caption baseline the reserved two-line cell is meant to hold. Step
   the value down one size so every title fits the reserved two lines.
   !important beats core's preset class (.has-heading-md-font-size is emitted
   with !important), matching how this file already overrides core utilities. */
@media (width <= 600px) {
	.wp-block-columns.mg-stats-grid .wp-block-heading {
		font-size: var(--wp--preset--font-size--heading-sm) !important;
	}
}

/* ── Services grid ──────────────────────────────────────────────────────────
   The columns already stretch to equal height in the flex row; making each
   column's card a flex column and giving the last child (the "Mehr erfahren"
   link) margin-top:auto drops every CTA onto one shared bottom baseline,
   regardless of how many lines the body copy runs. Absorbs the slack as extra
   space above the link — exactly the trade the design calls for. */
.mg-services-grid > .wp-block-column {
	display: flex;
}

.mg-services-grid > .wp-block-column > .wp-block-group {
	display: flex;
	flex: 1;
	flex-direction: column;
}

/* WP's constrained layout centres children with margin-inline:auto !important;
   harmless in a block flow, but in this flex column those auto cross-axis
   margins stop the short eyebrow/title from stretching and centre them. Reset
   to 0 (matching !important to beat core) so children stay full-width left. */
.mg-services-grid > .wp-block-column > .wp-block-group > * {
	margin-inline: 0 !important;
}

.mg-services-grid > .wp-block-column > .wp-block-group > :last-child {
	margin-top: auto;
}

/* CTA: guaranteed breathing room above the link (on top of the auto margin that
   bottom-pins it), and a navy ghost-button treatment so it reads as a call to
   action rather than body copy — fills on hover/focus. */
.mg-services-grid .mg-service-cta {
	padding-top: var(--wp--preset--spacing--lg);
}

.mg-services-grid .mg-service-cta a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--base);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--md);
	font-weight: 600;
	text-decoration: none;
	transition:
		background-color var(--wp--custom--motion--duration-base) var(--wp--custom--motion--easing-standard),
		color var(--wp--custom--motion--duration-base) var(--wp--custom--motion--easing-standard);
}

.mg-services-grid .mg-service-cta a:hover,
.mg-services-grid .mg-service-cta a:focus-visible {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

/* ── Brand logo lockup (header/footer) ─────────────────────────────────── */
.mg-brand {
	display: inline-flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xxs);
	text-decoration: none;
	line-height: 1;
}

.mg-brand__word {
	font-size: var(--wp--preset--font-size--heading-sm);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	white-space: nowrap; /* keep the lockup on one line so it never floats/wraps */
}

.mg-brand__tag {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* Dark contexts (transparent header over hero, ink-surface footer) flip to light. */
.mg-header--transparent .mg-brand__word,
.is-style-ink-surface .mg-brand__word {
	color: var(--wp--preset--color--on-primary);
}

.mg-header--transparent .mg-brand__tag,
.is-style-ink-surface .mg-brand__tag {
	color: var(--wp--preset--color--on-ink-surface);
}

/* ── Block style: eyebrow label ────────────────────────────────────────── */
.is-style-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--eyebrow);
	color: var(--wp--preset--color--muted);
}

/* ── Block style: inverted dark band ──────────────────────────────────── */
.is-style-ink-surface {
	background-color: var(--wp--preset--color--ink-surface);
	color: var(--wp--preset--color--on-ink-surface);
}

.is-style-ink-surface :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--on-primary);
}

/* ── Block style: framed image ─────────────────────────────────────────── */
.is-style-framed img {
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--lg);
}

/* ── Block style: elevated card with hover lift ───────────────────────── */
.is-style-elevated-card {
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--e1);
	transition:
		box-shadow var(--wp--custom--motion--duration-base) var(--wp--custom--motion--easing-standard),
		transform var(--wp--custom--motion--duration-base) var(--wp--custom--motion--easing-standard);
}

.is-style-elevated-card:hover {
	box-shadow: var(--wp--preset--shadow--e2);
	transform: translateY(-2px);
}

/* ── List style: no bullets (footer nav) ──────────────────────────────── */
.is-style-no-bullets {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

/* ── Contact Form 7 — token-styled per the input spec ──────────────────── */
.wpcf7-form p {
	margin: 0 0 var(--wp--preset--spacing--lg);
}

.wpcf7-form p:last-of-type {
	margin-bottom: 0;
}

.wpcf7-form label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin-top: var(--wp--preset--spacing--xs);
	padding: 12px 14px;
	min-height: 48px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--surface-soft);
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--md);
}

.wpcf7-form textarea {
	min-height: 140px;
}

.wpcf7-form :where(input, textarea):focus-visible {
	border-color: var(--wp--preset--color--primary);
	border-width: 2px;
	outline: none;
}

.wpcf7-form .wpcf7-submit {
	margin-top: var(--wp--preset--spacing--base);
	padding: 12px 22px;
	min-height: 48px;
	font-size: var(--wp--preset--font-size--title);
	font-weight: 600;
	color: var(--wp--preset--color--on-primary);
	background-color: var(--wp--preset--color--primary);
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--duration-base) var(--wp--custom--motion--easing-standard);
}

.wpcf7-form .wpcf7-submit:hover {
	background-color: var(--wp--preset--color--primary-hover);
}

.wpcf7-form .wpcf7-acceptance {
	display: block;
	margin: var(--wp--preset--spacing--sm) 0;
}

.wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.wpcf7-form .wpcf7-acceptance label {
	display: flex;
	gap: var(--wp--preset--spacing--sm);
	align-items: center;
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--body);
}

.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
	flex-shrink: 0;
	width: var(--wp--preset--spacing--base);
	height: var(--wp--preset--spacing--base);
	accent-color: var(--wp--preset--color--primary);
}

.wpcf7-form .wpcf7-not-valid-tip {
	margin-top: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--danger);
}

.wpcf7-form .wpcf7-not-valid {
	border-color: var(--wp--preset--color--danger);
}

/* Box model is scoped to the message states (not the always-present empty
   container) so no blank padded gap appears below the button before submit. */
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	display: flex;
	gap: var(--wp--preset--spacing--sm);
	align-items: center;
	margin: var(--wp--preset--spacing--base) 0 0;
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--base);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
	line-height: 1.4;
	border-radius: var(--wp--custom--radius--md);
}

/* Status icon: a single SVG silhouette tinted via mask + currentColor, so it
   inherits the success/danger token instead of carrying a raw colour. */
.wpcf7 form.sent .wpcf7-response-output::before,
.wpcf7 form.invalid .wpcf7-response-output::before,
.wpcf7 form.unaccepted .wpcf7-response-output::before,
.wpcf7 form.failed .wpcf7-response-output::before {
	content: "";
	flex-shrink: 0;
	width: var(--wp--preset--spacing--lg);
	height: var(--wp--preset--spacing--lg);
	background-color: currentcolor;
	mask: var(--mg-status-icon) center / contain no-repeat;
}

.wpcf7 form.sent .wpcf7-response-output {
	--mg-status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");

	color: var(--wp--preset--color--success);
	background-color: var(--wp--preset--color--success-soft);
	border: 1px solid var(--wp--preset--color--success);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	--mg-status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");

	color: var(--wp--preset--color--danger);
	background-color: var(--wp--preset--color--danger-soft);
	border: 1px solid var(--wp--preset--color--danger);
}

/* ── Language switcher (flag + label) ──────────────────────────────────── */
.mg-lang-switcher {
	display: inline-flex;
	gap: var(--wp--preset--spacing--xs);
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mg-lang-switcher__item {
	margin: 0;
}

.mg-lang-switcher__link {
	display: inline-flex;
	gap: var(--wp--preset--spacing--xs);
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	color: var(--wp--preset--color--muted);
	border-radius: var(--wp--custom--radius--sm);
}

.mg-lang-switcher__flag {
	display: block;
	width: 20px;
	height: 14px;
	border-radius: 2px;
}

.mg-lang-switcher__item.is-current .mg-lang-switcher__link {
	color: var(--wp--preset--color--primary);
}

.mg-lang-switcher__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Dark contexts (transparent header over hero, ink-surface footer). */
.mg-header--transparent .mg-lang-switcher__link,
.is-style-ink-surface .mg-lang-switcher__link {
	color: var(--wp--preset--color--on-ink-surface);
}

.mg-header--transparent .mg-lang-switcher__item.is-current .mg-lang-switcher__link,
.is-style-ink-surface .mg-lang-switcher__item.is-current .mg-lang-switcher__link {
	color: var(--wp--preset--color--on-primary);
}

.mg-header--transparent .mg-lang-switcher__link:focus-visible,
.is-style-ink-surface .mg-lang-switcher__link:focus-visible {
	outline-color: var(--wp--preset--color--on-primary);
}

/* Visually-hidden helper (full language names for assistive tech). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ── Respect reduced-motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}