/*
 * Einklang theme CSS: only what theme.json can't express.
 *
 * Breakpoints follow the old Bootstrap 4 site:
 *   576 / 768 / 992 / 1200px. The header switches to the hamburger menu below 1200px
 *   (the old site switched at 992px but wrapped the menu labels onto 2–3 lines
 *   between 992 and ~1400px).
 */

/* ---------------------------------------------------------------------------
 * Content width: Bootstrap's stepped .container (incl. 15px padding each side
 * = 540/720/960/1140px). The 15px live in the root padding, so the content
 * size is 30px smaller. theme.json points contentSize at this variable.
 * ------------------------------------------------------------------------- */
:root {
	--einklang-content-size: 100%;
	--einklang-header-height: 115px;
	/* Centred narrower content (old Bootstrap col-md-6/8/10 with empty columns
	   beside it): full width on phones, N/12 of the row from 768px. */
	--einklang-col-6: 100%;
	--einklang-col-8: 100%;
	--einklang-col-10: 100%;
}

@media (min-width: 576px) {
	:root { --einklang-content-size: 510px; }
}

@media (min-width: 768px) {
	:root {
		--einklang-content-size: 690px;
		/* Bootstrap: N/12 × (row + 30px gutter) − 30px */
		--einklang-col-6: calc(50% - 15px);
		--einklang-col-8: calc(66.6667% - 10px);
		--einklang-col-10: calc(83.3333% - 5px);
	}
}

@media (min-width: 992px) {
	:root { --einklang-content-size: 930px; }
}

@media (min-width: 1200px) {
	:root {
		--einklang-content-size: 1110px;
		--einklang-header-height: 148px;
	}
}

/* The old header got lower on wide screens (148px → 120px → 100px). */
@media (min-width: 1340px) {
	:root { --einklang-header-height: 120px; }
}

@media (min-width: 1700px) {
	:root { --einklang-header-height: 100px; }
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Headings sit close to the following block (old site: 6px). */
:root :where(.is-layout-flow, .is-layout-constrained) > :is(h1, h2, h3, h4, h5, h6) + * {
	margin-block-start: 6px;
}

/* ---------------------------------------------------------------------------
 * Columns: stack below 768px (Bootstrap md) instead of core's 782px.
 * functions.php copies each column's width into --einklang-column-width.
 * ------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 781px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: nowrap !important;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: var(--einklang-column-width, 0) !important;
		flex-grow: 1;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column[style*="--einklang-column-width"] {
		flex-grow: 0;
	}
}

/* Block style "Zeilen ausrichten" (is-style-rows): the n-th block of every
   column shares one grid row with the n-th block of its neighbours, so
   headings, images, texts and boxes line up across columns even when a heading
   wraps onto more lines (old Massagen grid). Phones keep the stacked columns.
   Up to 8 blocks per column; unused rows collapse to zero height. */
@media (min-width: 768px) {
	.wp-block-columns.is-style-rows {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		grid-template-rows: repeat(8, auto);
		row-gap: 0;
	}

	.wp-block-columns.is-style-rows > .wp-block-column {
		display: grid;
		grid-row: span 8;
		grid-template-rows: subgrid;
		align-items: start;
	}
}

/* ---------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------- */
.site-header {
	position: relative;
	box-sizing: border-box;
	min-height: var(--einklang-header-height);
	align-items: center;
	gap: 20px;
	padding-inline: 15px;
}

.site-header__logo {
	/* Old site: about 31% of the window width, at most 500px. */
	flex: 0 1 min(31.25vw, 500px);
	min-width: 0;
}

.site-header__logo img {
	width: 100%;
	height: auto;
}

.site-header__right {
	flex: 0 0 auto;
	gap: 25px;
	/* The mobile menu panel is positioned against .site-header. */
	position: static;
}

.site-header .wp-block-navigation {
	position: static;
}

/* Desktop navigation */
.site-header__nav--desktop .wp-block-navigation__container {
	gap: 0 clamp(18px, 3.6vw - 26px, 46px);
}

.site-header__nav--desktop .wp-block-navigation-item__content {
	white-space: nowrap;
}

.site-header__nav--desktop .wp-block-navigation-item__content {
	color: var(--wp--preset--color--blue-light);
}

.site-header__nav .wp-block-navigation-item__content:hover,
.site-header__nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--blue) !important;
}

/* Parent items without a URL render as <a> without href, which browsers show
   with the text cursor. They open their submenu, so use the link cursor. */
.wp-block-navigation a.wp-block-navigation-item__content:not([href]) {
	cursor: pointer;
}

/* Dropdowns (old: white card with a soft shadow, 220px min width). */
.site-header__nav--desktop .wp-block-navigation__submenu-container {
	min-width: 220px !important;
	padding: 16px 0 !important;
	border: 0 !important;
	border-radius: 4px;
	background: var(--wp--preset--color--white) !important;
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.08);
	color: var(--wp--preset--color--blue-light) !important;
	font-weight: 400;
	z-index: 20;
}

.site-header__nav--desktop .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 4px 24px !important;
	line-height: 1.86;
}

.site-header__nav--desktop .has-child > .wp-block-navigation__submenu-container {
	top: calc(100% + 12px);
	left: -24px;
}

/* Invisible bridge so the hover doesn't drop between label and dropdown. */
.site-header__nav--desktop .has-child > .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	inset: -12px 0 auto;
	height: 12px;
}

/* Header social icons: stacked like on the old site, side by side on wide screens. */
.site-header__social {
	flex-direction: column;
	gap: 6px !important;
}

@media (min-width: 1700px) {
	.site-header__social {
		flex-direction: row;
		gap: 14px !important;
	}
}

.site-header__social .wp-social-link {
	color: var(--wp--preset--color--dark);
}

.site-header .site-header__nav--mobile {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Header below 1200px: hamburger + drop-down panel (custom overlay part).
 * ------------------------------------------------------------------------- */
@media (max-width: 1199px) {
	.site-header__logo {
		flex-basis: 399px;
	}

	.site-header__nav--desktop {
		display: none !important;
	}

	.site-header .site-header__nav--mobile {
		display: flex;
		order: -1;
	}

	/* Hamburger on top, social icons below it (like the old site). */
	.site-header__right {
		flex-direction: column;
		align-items: flex-end;
		gap: 10px;
	}

	.site-header__social {
		flex-direction: row;
		gap: 14px !important;
	}
}

/* Hamburger: core's "menu" icon with slightly bolder bars (old: Font Awesome). */
.site-header__nav--mobile .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--dark);
	padding: 0;
}

.site-header__nav--mobile .wp-block-navigation__responsive-container-open svg,
.site-header__nav--mobile .wp-block-navigation__responsive-container-close svg {
	width: 30px;
	height: 30px;
}

.site-header__nav--mobile .wp-block-navigation__responsive-container-open svg path,
.site-header__nav--mobile .wp-block-navigation__responsive-container-close svg path {
	stroke: currentColor;
	stroke-width: 0.75px;
}

/*
 * The open overlay covers the header (transparent) plus a white card below it.
 * The close button sits exactly where the hamburger was.
 */
.site-header__nav--mobile .wp-block-navigation__responsive-container.is-menu-open {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 100;
	padding: var(--einklang-header-height) 15px 0 !important;
	background: transparent !important;
	overflow: visible;
	animation: none;
}

.site-header__nav--mobile .is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute;
	/* Same place as the hamburger: centred block of hamburger (30px) + gap + icons (16px). */
	top: calc((var(--einklang-header-height) - 56px) / 2);
	right: 15px;
	color: var(--wp--preset--color--dark);
}

.site-header__nav--mobile .is-menu-open .wp-block-navigation__responsive-dialog,
.site-header__nav--mobile .is-menu-open .wp-block-navigation__responsive-close {
	position: static;
	margin: 0;
	max-width: none;
}

.site-header__nav--mobile .is-menu-open .wp-block-navigation__responsive-container-content {
	display: block !important;
	box-sizing: border-box;
	max-height: calc(100dvh - var(--einklang-header-height) - 15px);
	overflow-y: auto;
	padding: 30px !important;
	background: var(--wp--preset--color--white);
	border-radius: 4px;
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.08);
}

/* Menu inside the panel: full-width rows with separators, accordion submenus. */
.mobile-menu__nav,
.mobile-menu__nav .wp-block-navigation__container {
	display: block !important;
	width: 100%;
}

.mobile-menu__nav .wp-block-navigation-item {
	display: block;
	width: 100%;
	border-bottom: 1px solid #e9ecef;
}

.mobile-menu__nav .wp-block-navigation-item:last-child {
	border-bottom: 0;
}

.mobile-menu__nav .wp-block-navigation-item__content {
	display: inline-block;
	padding: 12px 0 !important;
	line-height: 1.75;
}

/*
 * Submenus: in core's overlay they are always expanded (their open state follows
 * the overlay), so the parent entries act as group labels without an arrow.
 */
.mobile-menu__nav .wp-block-navigation-submenu__toggle {
	padding: 12px 0 !important;
	cursor: default;
}

.mobile-menu__nav .wp-block-navigation__submenu-icon {
	display: none !important;
}

.mobile-menu__nav .wp-block-navigation__submenu-container {
	position: static !important;
	display: block !important;
	min-width: 0 !important;
	width: auto !important;
	height: auto !important;
	opacity: 1 !important;
	visibility: visible !important;
	padding: 0 0 0 15px !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-weight: 400;
}

.mobile-menu__nav .wp-block-navigation__submenu-container .wp-block-navigation-item:first-child {
	border-top: 1px solid #e9ecef;
}

.mobile-menu__nav .wp-block-navigation-item__content,
.mobile-menu__nav .wp-block-navigation-submenu__toggle {
	color: var(--wp--preset--color--blue-light) !important;
}

/* While the panel is open, the close button replaces the hamburger. */
.site-header__nav--mobile:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
	visibility: hidden;
}

/* ---------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------- */
.site-footer {
	padding-top: 16px;
	padding-bottom: 24px;
	margin-block-start: 0;
}

.site-footer :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--white);
	margin-block-start: 6px;
}

.site-footer a {
	color: var(--wp--preset--color--grey);
}

.site-footer a[href^="tel:"] {
	color: inherit;
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.site-footer__columns {
	gap: 19.5px 30px;
}

.site-footer__legal {
	line-height: 1.75;
}

.site-footer__copyright {
	color: var(--wp--preset--color--white);
	font-weight: 600;
	margin-block-start: 12px !important;
}

.site-footer__social {
	gap: 24px !important;
}

.site-footer__social .wp-social-link {
	color: var(--wp--preset--color--grey);
}

.site-footer__social .wp-social-link:hover {
	color: var(--wp--preset--color--white);
}

/* No gap between the main content and the footer / header and content. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------------------
 * Block styles (colours and paddings live in styles/blocks/*.json; this is
 * only what theme.json can't express).
 * ------------------------------------------------------------------------- */

/* "Kreis": 10rem circle with centred content (old .circle-blue). */
.wp-block-group.is-style-circle {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 10rem;
	height: 10rem;
	margin-inline: auto !important;
	padding: 1rem;
	text-align: center;
	overflow: hidden;
}

.wp-block-group.is-style-circle > * {
	margin-block: 0 !important;
}

/* "Blocksatz": justified text needs hyphenation, otherwise German words leave gaps. */
.is-style-justify {
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}

/* Slider dots: white on blue backgrounds (old: dark dots, barely visible on blue). */
.is-style-blue .wp-block-einklang-slider,
.is-style-box .wp-block-einklang-slider,
.is-style-box-large .wp-block-einklang-slider {
	--einklang-slider-dots: var(--wp--preset--color--white);
}

/* ---------------------------------------------------------------------------
 * Media & Text: half image / half text rows (old "Über mich").
 * Stack below 768px like Bootstrap (core: 600px); image at least 400px high
 * (old: 200px padding top and bottom on the image column).
 * ------------------------------------------------------------------------- */
.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media {
	min-height: 400px;
}

.wp-block-media-text.is-style-blue > .wp-block-media-text__content {
	padding: clamp(50px, 8.2vw, 105px) clamp(20px, 5vw, 60px);
}

/* Plain Media & Text (no colour style, no background) at content width: the
   text lines up with the content edge like the blocks around it, with a 15px
   gutter towards the image (old Bootstrap col-md-6 pair, Firmenworkshops). */
.wp-block-media-text.has-media-on-the-right:not([class*="is-style-"], .has-background) > .wp-block-media-text__content {
	padding: 0 15px 0 0;
}

.wp-block-media-text:not(.has-media-on-the-right, [class*="is-style-"], .has-background) > .wp-block-media-text__content {
	padding: 0 0 0 15px;
}

@media (max-width: 767px) {
	.wp-block-media-text.is-stacked-on-mobile:not([class*="is-style-"], .has-background) > .wp-block-media-text__content {
		padding: 19.5px 0 0;
	}
}

@media (max-width: 767px) {
	.wp-block-media-text.is-stacked-on-mobile {
		grid-template-columns: 100% !important;
	}

	.wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media {
		grid-column: 1;
		grid-row: 1;
	}

	.wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
		grid-column: 1;
		grid-row: 2;
	}
}

/* Name under a quote in the "Kundenstimmen" slider. */
.einklang-quote-author {
	font-weight: 600;
}

/* Full-width sections sit directly on each other (old site: no gaps between sections). */
.wp-block-post-content > .alignfull + *,
.wp-block-post-content > * + .alignfull {
	margin-block-start: 0;
}

/* Page title as invisible <h1> (the old site hid it; screen readers and search engines still need it). */
.screen-reader-text:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
 * Spacers stand in for the old dividers, which had no margins of their own:
 * only the element before brought its bottom margin (text 19.5px, heading 6px).
 * ------------------------------------------------------------------------- */
:root :where(.is-layout-flow, .is-layout-constrained) > .wp-block-spacer,
:root :where(.is-layout-flow, .is-layout-constrained) > .wp-block-spacer + * {
	margin-block-start: 0;
}

:root :where(.is-layout-flow, .is-layout-constrained) > :is(p, ul, ol) + .wp-block-spacer {
	margin-block-start: 19.5px;
}

:root :where(.is-layout-flow, .is-layout-constrained) > :is(h1, h2, h3, h4, h5, h6) + .wp-block-spacer,
:root :where(.is-layout-flow, .is-layout-constrained) > .wp-block-spacer + :is(h1, h2, h3, h4, h5, h6) {
	margin-block-start: 6px;
}

/* The old paragraphs and lists always kept their 19.5px bottom margin, also as
   the last element of a column, box or section. */
.wp-block-post-content :where(.is-layout-flow, .is-layout-constrained):not(.wp-block-einklang-slide) > :is(p, ul, ol):last-child {
	margin-block-end: 19.5px;
}

/* Long German words in narrow columns: hyphenate instead of breaking mid-word. */
:is(h1, h2, h3, h4, h5, h6) {
	hyphens: auto;
	-webkit-hyphens: auto;
	hyphenate-limit-chars: 10 4 4;
}

/* Media & Text content has no layout spacing of its own: use the old margins. */
.wp-block-media-text__content > * {
	margin-block: 0;
}

.wp-block-media-text__content > :is(p, ul, ol) {
	margin-block-end: 19.5px;
}

.wp-block-media-text__content > :is(h1, h2, h3, h4, h5, h6) {
	margin-block: 6px;
}

/* Lists had a slightly larger line height on the old site (27.86px at 15px). */
.wp-block-post-content :where(ul, ol) {
	line-height: 1.857;
}