/**
 * Site-Rahmen: Kopfbereich, Navigations-Overlay, Fußbereich, Titelband, 404 und Suche.
 *
 * Basis-Verhalten (sticky Header, Streifen, Telefon-Button nur Symbol < 480px,
 * Overlay 600 bis 1023px) steht in theme.css. Hier liegt die Gestaltung.
 */

/* ---------- Seitengerüst ---------- */

/*
 * Kurze Seiten: Der Fußbereich sitzt trotzdem unten am Fenster, darunter bleibt kein heller Streifen.
 * Nur im Frontend: Im Website-Editor trägt die Block-Liste (.is-root-container) dieselbe Klasse.
 */
.wp-site-blocks:not(.is-root-container) {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks:not(.is-root-container) > main {
	flex: 1 0 auto;
}

/* ---------- Kopfbereich ---------- */

/* Gesamthöhe inkl. CI-Streifen und Linie = Header-Token (5.25rem). */
.ezam-header__bar {
	min-height: calc(var(--wp--custom--header--height, 5.25rem) - 6px);
	padding-block: 0.375rem;
}

/*
 * Logo: Höhe statt Breite steuern, damit das Querformat immer gleich wirkt (schlägt Core „is-default-size“).
 * Mindestens 2.75rem (44px): Der Logo-Link ist auch auf dem Handy ein ausreichend großes Touch-Ziel.
 */
.ezam-header .ezam-brand .wp-block-site-logo img {
	display: block;
	width: auto;
	height: clamp(2.75rem, 1.75rem + 2.4vw, 3.5rem);
	max-width: 100%;
}

.ezam-header .ezam-brand .wp-block-site-logo a {
	display: block;
	border-radius: 0.5rem;
}

/*
 * html hat scroll-padding-top in Header-Höhe, damit der klebende Header fokussierte Inhalte nicht
 * verdeckt. Für Elemente im Header selbst löst das beim Fokussieren (Klick auf „Menü“ oder den
 * Telefon-Button, Tab-Taste, Rückkehr aus dem Menü) einen Sprung der Seite nach oben aus.
 * Ein negativer scroll-margin gleicht das genau aus.
 */
.ezam-header :is(a, button, input, [tabindex]) {
	scroll-margin-top: calc(-1 * (var(--ezam-header-offset, 5.25rem) + 1rem));
}

/* Hauptmenü auf dem Desktop: große Klickflächen, aktuelle Seite mit Korallenlinie. */
.ezam-header .ezam-nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding-block: 0.25rem;
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.5em;
	transition:
		color var(--ezam-fast) var(--ezam-ease),
		text-decoration-color var(--ezam-fast) var(--ezam-ease);
}

.ezam-header .ezam-nav .wp-block-navigation-item__content:hover {
	text-decoration-color: currentColor;
}

/* Aktuelle Seite; auf Beiträgen und Archiven zusätzlich „Aktuelles“ als aktueller Bereich (inc/news.php). */
.ezam-header .ezam-nav .wp-block-navigation-item__content[aria-current="page"],
.ezam-header .ezam-nav .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
	text-decoration-color: var(--wp--preset--color--coral);
	text-decoration-thickness: 3px;
}

/* Kontakt-Buttons im Menü erscheinen nur im Overlay (auf dem Desktop steht der Telefon-Button rechts daneben). */
.ezam-header .wp-block-navigation__responsive-container:not(.is-menu-open) .ezam-nav-contact {
	display: none;
}

/* Menü-Button: Symbol plus sichtbares Wort „Menü“, Schließen-Button ebenso. */
.ezam-header .wp-block-navigation__responsive-container-open,
.ezam-header .wp-block-navigation__responsive-container-close {
	align-items: center;
	gap: 0.5rem;
	min-height: 3rem;
	padding: 0 1rem 0 0.85rem;
	border: 2px solid var(--wp--preset--color--blue-light);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--blue);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	touch-action: manipulation;
	transition:
		background-color var(--ezam-fast) var(--ezam-ease),
		border-color var(--ezam-fast) var(--ezam-ease),
		color var(--ezam-fast) var(--ezam-ease);
}

.ezam-header .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open,
.ezam-header .wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: 1rem;
	font-weight: 700;
}

.ezam-header .wp-block-navigation__responsive-container-close {
	display: inline-flex;
	background: var(--wp--preset--color--base);
}

.ezam-header .wp-block-navigation__responsive-container-open:hover,
.ezam-header .wp-block-navigation__responsive-container-close:hover {
	background-color: var(--wp--preset--color--blue-wash);
	border-color: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--ink);
}

.ezam-header .wp-block-navigation__responsive-container-open::before,
.ezam-header .wp-block-navigation__responsive-container-close::before {
	content: "";
	flex: none;
	width: 1.375rem;
	height: 1.375rem;
	background-color: currentColor;
	-webkit-mask: url("../../icons/regular/list.svg") center / contain no-repeat;
	mask: url("../../icons/regular/list.svg") center / contain no-repeat;
}

.ezam-header .wp-block-navigation__responsive-container-close::before {
	-webkit-mask-image: url("../../icons/regular/x.svg");
	mask-image: url("../../icons/regular/x.svg");
}

/* Sehr schmale Geräte (unter 340px): Menü-Button nur als Symbol, das Wort bleibt für Screenreader erhalten. */
@media (max-width: 339.98px) {
	.ezam-header .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open {
		width: 3rem;
		padding: 0;
		justify-content: center;
		font-size: 0;
	}
}

/* Auf Handy und Tablet enger zusammen, damit Logo, Menü und Telefon in eine Zeile passen. */
@media (max-width: 1023.98px) {
	.ezam-header__bar.ezam-header__bar {
		gap: 0.5rem;
		min-height: 4rem;
	}
}

/* ---------- Navigations-Overlay (unter 1024px) ---------- */

/* Unscharfer Header-Hintergrund würde das fixierte Overlay auf die Header-Höhe begrenzen. */
.ezam-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background-color: var(--wp--preset--color--base);
}

.ezam-header .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: stretch;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: stretch;
	padding-top: calc(env(safe-area-inset-top, 0px) + 5px + 0.5rem);
	padding-right: max(var(--wp--style--root--padding-right, 1rem), env(safe-area-inset-right, 0px));
	padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 2rem);
	padding-left: max(var(--wp--style--root--padding-left, 1rem), env(safe-area-inset-left, 0px));
	overscroll-behavior: contain;
	color: var(--wp--preset--color--blue);
}

/* CI-Streifen oben und eine Pflanzenzeichnung unten rechts: das Overlay gehört sichtbar zur Marke. */
.ezam-header .wp-block-navigation__responsive-container.is-menu-open::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--blue) 0 33.333%,
		var(--wp--preset--color--sage) 33.333% 66.666%,
		var(--wp--preset--color--coral) 66.666% 100%
	);
}

.ezam-header .wp-block-navigation__responsive-container.is-menu-open::after {
	content: "";
	position: fixed;
	z-index: -1;
	right: max(0.5rem, env(safe-area-inset-right, 0px));
	/*
	 * Nicht über den unteren Rand hinaus: Die Einblend-Animation des Overlays hinterlässt ein
	 * transform, dann ist das Overlay der Bezugsrahmen und ein negativer Wert macht es scrollbar.
	 */
	bottom: env(safe-area-inset-bottom, 0px);
	width: clamp(6rem, 22vw, 10rem);
	aspect-ratio: 340 / 650;
	background: url("../../images/deko-blatt-zweig.webp") center / contain no-repeat;
	opacity: 0.45;
	pointer-events: none;
}

.ezam-header .is-menu-open .wp-block-navigation__responsive-dialog {
	min-height: 100%;
}

.ezam-header .is-menu-open .wp-block-navigation__responsive-container-content {
	width: min(100%, 34rem);
	gap: var(--wp--preset--spacing--40);
}

.ezam-header .is-menu-open .wp-block-navigation__responsive-container-content.wp-block-navigation__responsive-container-content {
	padding-top: 5rem;
}

.ezam-header .is-menu-open .wp-block-navigation__container.wp-block-navigation__container {
	gap: 0;
	width: 100%;
	border-top: 1px solid var(--wp--preset--color--sage-light);
}

.ezam-header .is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--sage-light);
}

.ezam-header .is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: flex;
	width: 100%;
	min-height: 3.5rem;
	padding: 0.7rem 0;
	font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-underline-offset: 0.3em;
}

.ezam-header .is-menu-open .wp-block-navigation-item__content[aria-current="page"],
.ezam-header .is-menu-open .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
}

/* Anruf und WhatsApp direkt im Menü. */
.ezam-header .is-menu-open .ezam-nav-contact {
	width: 100%;
}

.ezam-header .is-menu-open .ezam-nav-contact .wp-element-button {
	width: 100%;
	min-height: 3.5rem;
	font-size: 1.125rem;
}

.ezam-header .is-menu-open .ezam-nav-contact:first-of-type {
	margin-top: var(--wp--preset--spacing--30);
}

/* Die Nummer im Overlay-Button immer ausschreiben (theme.css blendet sie im Header unter 480px aus). */
.ezam-header .is-menu-open .ezam-nav-contact .ezam-contact__label {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: nowrap;
}

.ezam-header .is-menu-open .ezam-nav-contact .wp-element-button.wp-element-button {
	width: 100%;
	height: auto;
	padding: 0.8rem 1.6rem;
	border-radius: var(--wp--custom--radius--pill);
}

@media (prefers-reduced-motion: no-preference) {
	.ezam-header .is-menu-open .wp-block-navigation-item,
	.ezam-header .is-menu-open .ezam-nav-contact {
		animation: ezam-rise 420ms var(--ezam-ease) both;
	}

	.ezam-header .is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 40ms; }
	.ezam-header .is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 80ms; }
	.ezam-header .is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 120ms; }
	.ezam-header .is-menu-open .wp-block-navigation-item:nth-child(n + 5) { animation-delay: 160ms; }
	.ezam-header .is-menu-open .ezam-nav-contact { animation-delay: 180ms; }
}

/*
 * Handy quer (niedrige Fenster): kompaktere Menüzeilen, Anruf und WhatsApp nebeneinander,
 * damit der Anruf-Button ohne Scrollen sichtbar ist und „Schließen“ im Blick bleibt.
 */
@media (max-height: 500px) {
	.ezam-header .wp-block-navigation__responsive-container.is-menu-open {
		padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
	}

	.ezam-header .is-menu-open .wp-block-navigation__responsive-container-content.wp-block-navigation__responsive-container-content {
		padding-top: 3.5rem;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	.ezam-header .is-menu-open .wp-block-navigation__container {
		flex: 1 1 100%;
	}

	/* Zeilen genau 44px hoch (Touch-Ziel), Text mittig. */
	.ezam-header .is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
		align-items: center;
		min-height: 2.75rem;
		padding-block: 0;
		font-size: 1.375rem;
	}

	.ezam-header .is-menu-open .ezam-nav-contact.ezam-nav-contact {
		width: auto;
		flex: 1 1 0;
		margin-top: 0;
	}

	.ezam-header .is-menu-open .ezam-nav-contact .wp-element-button.wp-element-button {
		min-height: 3rem;
		padding-block: 0.6rem;
	}
}

/* ---------- Fußbereich ---------- */

/*
 * Endet die Seite mit einer farbigen Fläche (etwa dem Kontakt-Abschnitt), ragt die Wellenkante
 * in deren Innenabstand hinein: Die Welle zeigt dann deren Farbe statt eines hellen Streifens
 * dazwischen. Endet die Seite mit normalem Inhalt auf hellem Grund, bleibt alles, wie es ist,
 * damit die Welle keinen Text überdeckt.
 */
.wp-site-blocks:not(.is-root-container):has(
	> main > :last-child:is([class*="is-style-section-"], .alignfull.has-background),
	> main > .wp-block-post-content:last-child > :last-child:is([class*="is-style-section-"], .alignfull.has-background)
) > footer .ezam-footer.ezam-wave-top {
	position: relative;
	z-index: 1;
	margin-top: calc(-1 * var(--ezam-wave-h));
}

.ezam-footer .ezam-brand .wp-block-site-logo img {
	width: min(13rem, 62vw);
	height: auto;
}

.ezam-footer .ezam-brand .wp-block-site-logo a {
	display: inline-block;
	border-radius: 0.5rem;
}

.ezam-footer__claim {
	letter-spacing: 0.01em;
	hyphens: manual;
	-webkit-hyphens: manual;
}

/* Tablet: Logo und Leitsatz über die volle Breite, darunter Kontakt und Praxis nebeneinander. */
@media (min-width: 782px) and (max-width: 1099.98px) {
	.ezam-footer .ezam-footer__grid.wp-block-columns {
		flex-wrap: wrap !important;
		row-gap: var(--wp--preset--spacing--50);
	}

	.ezam-footer .ezam-footer__grid > .ezam-footer__brand {
		display: flex;
		flex: 1 1 100% !important;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	}

	.ezam-footer .ezam-footer__grid > .ezam-footer__brand > * {
		margin: 0;
	}

	.ezam-footer .ezam-footer__grid > .wp-block-column:not(.ezam-footer__brand) {
		flex: 1 1 0 !important;
	}
}

.ezam-footer .wp-block-heading {
	letter-spacing: 0;
}

/* Kurze Zeilen im Fußbereich nicht trennen („ärztli-cher“ liest sich schlecht). */
.ezam-footer :where(p, li, a, address) {
	hyphens: manual;
	-webkit-hyphens: manual;
}

.ezam-footer__contact-list > * {
	margin: 0;
}

/* Kontakt- und Seitenlinks: mindestens 44px hoch, damit sie auch mit zittriger Hand treffen. */
.ezam-footer .ezam-contact-link,
.ezam-footer .ezam-contact-text {
	align-items: flex-start;
	padding-block: 0.45rem;
}

.ezam-footer .ezam-footer-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding-block: 0;
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

.ezam-footer .ezam-footer-nav .wp-block-navigation-item__content[aria-current="page"],
.ezam-footer .ezam-footer-nav .current-menu-ancestor > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--coral);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.35em;
}

.ezam-footer__note {
	margin-top: var(--wp--preset--spacing--40) !important;
	color: var(--wp--preset--color--ink);
}

.ezam-footer__note .wp-block-icon {
	flex: none;
	margin-top: 0.2em;
}

.ezam-footer__note p {
	margin: 0;
}

.ezam-footer__legal .wp-block-separator {
	margin-block: 0;
	border: 0;
	height: 1px;
}

.ezam-footer__legal p {
	margin: 0;
}

.ezam-footer__legal a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

.ezam-footer__links a {
	font-weight: 700;
}

/* Webdesign-Credit: bewusst kleiner als die übrigen Footer-Links. */
.ezam-footer .ezam-credit {
	font-size: 0.8125rem;
	letter-spacing: 0.01em;
}

.ezam-footer .ezam-credit a {
	font-weight: 400;
	text-decoration: underline;
	text-decoration-color: rgb(32 80 104 / 0.35);
}

.ezam-footer .ezam-credit a:hover {
	text-decoration-color: currentColor;
}

/* Randbereiche von Geräten mit Aussparung (Notch, Home-Indikator). */
.ezam-footer {
	padding-left: max(var(--wp--style--root--padding-left), env(safe-area-inset-left, 0px)) !important;
	padding-right: max(var(--wp--style--root--padding-right), env(safe-area-inset-right, 0px)) !important;
}

.ezam-footer__legal {
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 781.98px) {
	.ezam-footer__grid.ezam-footer__grid {
		gap: var(--wp--preset--spacing--50);
	}
}

/* ---------- Landingpage-Vorlage ---------- */

/*
 * Die Vorlage „Seite ohne Titelband“ erwartet vollbreite Abschnitte mit eigenem Innenabstand.
 * Beginnt oder endet der Inhalt mit normalem Text, bekommt er trotzdem Luft zu Header und Footer.
 */
.ezam-landing-content > :first-child:not(.alignfull) {
	margin-block-start: var(--wp--preset--spacing--60);
}

.ezam-landing-content > :last-child:not(.alignfull) {
	margin-block-end: var(--wp--preset--spacing--70);
}

/* ---------- Titelband (Seiten, Beiträge, Archive, Suche) ---------- */

.ezam-page-title__heading {
	margin-block: 0;
}

/* Korallenlinie unter dem Titel, wie der Heading-Stil „rule“. */
.ezam-page-title .ezam-page-title__heading::after {
	content: "";
	display: block;
	width: 4.5rem;
	height: 3px;
	margin-top: var(--wp--preset--spacing--30);
	border-radius: 3px;
	background: var(--wp--preset--color--coral);
}

.ezam-page-title .wp-block-post-date {
	margin-bottom: 0;
}

.ezam-page-title .wp-block-term-description p {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--large);
}

/*
 * Telefonnummer im Titelband (Klasse .ezam-title-phone am Kontakt-Block): Unter 480px zeigt der Header
 * nur das Telefon-Symbol (theme.css). Vorlagen ohne Anruf-Button im Hero (Aktuelles, Beiträge, Archive,
 * Textseiten) schreiben die Nummer deshalb hier aus, damit sie ohne Scrollen lesbar ist. Ab 480px steht
 * sie im Header-Button, das Titelband bleibt dann schlicht.
 */
.wp-block-ezam-contact.ezam-title-phone {
	display: none;
}

@media (max-width: 479.98px) {
	.wp-block-ezam-contact.ezam-title-phone {
		display: flex;
	}

	.ezam-title-phone .ezam-contact-link {
		align-items: center;
		min-height: 2.75rem;
		font-size: var(--wp--preset--font-size--medium);
	}

	.ezam-title-phone .ezam-contact-link .ezam-icon {
		margin-top: 0;
	}
}

/* ---------- Beitragslisten (Suche) ---------- */

/* Karten für Aktuelles, Archive und Einzelbeitrag: news.css. Hier nur die schlichte Trefferliste der Suche. */
.ezam-post-list .wp-block-post-title {
	margin-block: 0;
}

.ezam-post-list .wp-block-post-excerpt__more-link {
	font-weight: 700;
}

/* ---------- Suche ---------- */

.wp-block-search .wp-block-search__label {
	font-family: var(--wp--preset--font-family--raleway);
	font-weight: 700;
	color: var(--wp--preset--color--blue);
}

.wp-block-search .wp-block-search__inside-wrapper {
	gap: 0.5rem;
	flex-wrap: wrap;
}

.wp-block-search .wp-block-search__input {
	flex: 1 1 14rem;
	min-width: 0;
	min-height: 3rem;
	padding: 0.6rem 1.25rem;
	border: 2px solid var(--wp--preset--color--blue-light);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--medium);
	transition: border-color var(--ezam-fast) var(--ezam-ease);
}

.wp-block-search .wp-block-search__input::placeholder {
	color: rgb(22 56 73 / 0.62);
}

.wp-block-search .wp-block-search__input:hover {
	border-color: var(--wp--preset--color--blue);
}

.wp-block-search .wp-block-search__button {
	margin-left: 0;
	flex: none;
}

/* ---------- 404 ---------- */

.ezam-404__links a {
	display: inline-block;
	padding-block: 0.3rem;
	font-weight: 700;
}

.ezam-404__call {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* Zwei gezeichnete Blätter als ruhiger Akzent (rein dekorativ). */
.ezam-404__call::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -0.5rem;
	right: -1rem;
	width: clamp(6rem, 12vw, 8.5rem);
	aspect-ratio: 420 / 357;
	background: url("../../images/deko-blaetter-paar.webp") center / contain no-repeat;
	opacity: 0.7;
	pointer-events: none;
}

.ezam-404__call > .wp-block-heading {
	padding-right: 4rem;
}

/* Die Buttons bleiben immer innerhalb der Karte (die Karte schneidet Überstehendes ab). */
.ezam-404__call .wp-element-button {
	max-width: 100%;
}

/*
 * Tablet (782 bis 1023px): Die 42-%-Spalte ist zu schmal für den WhatsApp-Button.
 * Beide Spalten stapeln, die Anruf-Karte bekommt die volle Breite.
 */
@media (min-width: 782px) and (max-width: 1023.98px) {
	.ezam-404 > .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.ezam-404 > .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}