/*
 * EHT globales Frontend-Stylesheet.
 * Ergänzt theme.json (Farben/Typografie/Presets werden dort verwaltet) um
 * Dinge, die sich darüber nicht abbilden lassen: Sektions-Rhythmus,
 * Kontext-Farbregeln, Fixed-Header-Offset, Icon-Font-Basis.
 */

/* -------------------------------------------------------------------- */
/* Basis                                                                  */
/* -------------------------------------------------------------------- */

/*
 * Überschriftengrößen des Originals als eigene Custom Properties.
 *
 * Bewusst NICHT als theme.json-Preset-Slugs "h1"…"h6": WordPress wandelt
 * Slugs mit Ziffer in Kebab-Case um ("h1" → `--wp--preset--font-size--h-1`).
 * Ein `var(--wp--preset--font-size--h1)` wäre also undefiniert und jede
 * Überschrift würde still auf die geerbte Fließtextgröße zurückfallen.
 */
:root {
	--eht-fs-h1: clamp( 2.1rem, 1.42504rem + 2.10045vw, 3.000375rem );
	--eht-fs-h2: clamp( 1.9rem, 1.38758rem + 1.6509vw, 2.62575rem );
	--eht-fs-h3: clamp( 1.7rem, 1.3626rem + 1.3512vw, 2.376rem );
	--eht-fs-h4: clamp( 1.5rem, 1.32503rem + 0.9003vw, 2.00025rem );
	--eht-fs-h5: 1.375875rem;
	--eht-fs-h6: 1.125rem;
}

html {
	scroll-behavior: smooth;
}

body {
	overflow-x: hidden;
}

::selection {
	background: var( --wp--preset--color--eht-primary );
	color: var( --wp--preset--color--eht-white );
}

a {
	transition: color 0.2s ease;
}

/* Fixierter Header (110px, siehe Block eht/site-header) – Platz reservieren */
body {
	padding-top: 110px;
}

/*
 * Sticky Footer: Auf kurzen Seiten (Impressum, Danke-Seite …) soll der Footer
 * am unteren Rand kleben statt mitten im Viewport zu enden.
 */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc( 100vh - 110px );
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* -------------------------------------------------------------------- */
/* Buttons – eckig, uppercase, Blender 700 (Basis bereits in theme.json)  */
/* -------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link,
.eht-btn-primary,
.eht-btn-secondary {
	cursor: pointer;
	letter-spacing: 0.02em;
	box-shadow: none;
	display: inline-block;
	text-decoration: none;
	border: none;
	border-radius: 0;
	font-family: var( --wp--preset--font-family--blender );
	font-weight: 700;
	text-transform: uppercase;
	font-size: var( --wp--preset--font-size--medium );
	padding: 0.875rem 1.875rem;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Eigenständige Utility-Klassen (für Blöcke, die nicht über core/button
   laufen, z. B. hero-slide/cta-banner/contact-form CTA-Links) — visuell
   identisch zum globalen .wp-element-button aus theme.json. */
.eht-btn-primary {
	background-color: var( --wp--preset--color--eht-primary );
	color: var( --wp--preset--color--eht-white );
}

.eht-btn-primary:hover,
.eht-btn-primary:focus {
	background-color: var( --wp--preset--color--eht-primary-hover );
	color: var( --wp--preset--color--eht-white );
}

.eht-btn-secondary {
	background-color: var( --wp--preset--color--eht-secondary );
	color: var( --wp--preset--color--eht-white );
}

.eht-btn-secondary:hover,
.eht-btn-secondary:focus {
	background-color: #1a1a1a;
	color: var( --wp--preset--color--eht-white );
}

.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
.eht-btn-primary:focus-visible,
.eht-btn-secondary:focus-visible {
	box-shadow: 0 0 0 0.2rem rgba( 255, 100, 41, 0.25 );
	outline: none;
}

.wp-block-button.is-style-eht-secondary .wp-block-button__link {
	background-color: var( --wp--preset--color--eht-secondary );
	color: var( --wp--preset--color--eht-white );
}

.wp-block-button.is-style-eht-secondary .wp-block-button__link:hover {
	background-color: #1a1a1a;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid var( --wp--preset--color--eht-primary );
}

/* Kontext-Farbregel: Button auf orangem Hintergrund → Kontrastumkehr (wie Original) */
.has-eht-primary-background-color .wp-element-button:not(.is-style-eht-secondary .wp-block-button__link),
.has-eht-primary-background-color .wp-block-button__link:not(.is-style-eht-secondary .wp-block-button__link) {
	background-color: var( --wp--preset--color--eht-light );
	color: var( --wp--preset--color--eht-primary );
}

.has-eht-primary-background-color .wp-element-button:hover {
	background-color: var( --wp--preset--color--eht-white );
}

/* -------------------------------------------------------------------- */
/* Sektions-Rhythmus (wie Original: 50px mobil → 70px Tablet → 80px Desktop) */
/* -------------------------------------------------------------------- */

/*
 * Sektionen stoßen im Original direkt aneinander — der gesamte vertikale
 * Rhythmus kommt aus dem eigenen `padding` der Sektion, nicht aus Abständen
 * dazwischen. WordPress verteilt über den globalen blockGap sonst
 * `margin-block-start: 1.875rem` an alle Geschwister; zwischen zwei
 * gleichfarbigen Sektionen entsteht dadurch ein heller Streifen und über dem
 * Hero bzw. vor dem Footer eine Lücke.
 */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/*
 * Nachfahren- statt Kind-Selektor mit Absicht: Die Sektionen hängen je nach
 * Template direkt in <main> (front-page) oder im `.entry-content`-Wrapper des
 * post-content-Blocks (page, single). Zwei Klassen im Selektor sind zudem
 * spezifischer als die Core-Regel `:root :where(.is-layout-flow) > *`, die den
 * blockGap setzt — sonst gewinnt weiterhin der Abstand.
 *
 * Innerhalb von `.eht-container` bleiben Überschriften, Absätze und Listen
 * unangetastet und behalten ihre normalen Abstände.
 */
.wp-site-blocks .eht-section,
.wp-site-blocks .eht-hero-slider,
.wp-site-blocks .eht-page-hero {
	margin-block-start: 0;
	margin-block-end: 0;
}

.eht-section {
	padding: 50px 0;
}

@media ( min-width: 768px ) {
	.eht-section {
		padding: 70px 0;
	}
}

@media ( min-width: 992px ) {
	.eht-section {
		padding: 80px 0;
	}
}

.eht-section--pt-0 {
	padding-top: 0;
}

/*
 * Inhaltscontainer wie im Original (Bootstrap `.container`): 1140px inkl.
 * 15px Innenabstand, zentriert. Alle EHT-Sektionsblöcke sind selbst
 * vollbreit und setzen diesen Container innen.
 */
.eht-container {
	box-sizing: border-box;
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 15px;
}

/* Sektionshintergründe (Original: bg-white / bg-light / bg-primary / bg-secondary) */
.eht-bg-white {
	background-color: var( --wp--preset--color--eht-white );
}

.eht-bg-light {
	background-color: var( --wp--preset--color--eht-light );
}

.eht-bg-primary {
	background-color: var( --wp--preset--color--eht-primary );
	color: var( --wp--preset--color--eht-white );
}

.eht-bg-secondary {
	background-color: var( --wp--preset--color--eht-secondary );
	color: var( --wp--preset--color--eht-white );
}

/* Auf orangem Grund kippt „text-primary" im Original auf Dunkelgrau. */
.eht-bg-primary .eht-text-primary,
.eht-bg-primary h1,
.eht-bg-primary h2,
.eht-bg-primary h3 {
	color: var( --wp--preset--color--eht-secondary );
}

.eht-section--half {
	padding-top: 25px;
	padding-bottom: 25px;
}

@media ( min-width: 768px ) {
	.eht-section--half {
		padding-top: 35px;
		padding-bottom: 35px;
	}
}

@media ( min-width: 992px ) {
	.eht-section--half {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}

/* -------------------------------------------------------------------- */
/* News-Artikel (single.html) — Aufbau wie im Original                   */
/* -------------------------------------------------------------------- */

.eht-article__title {
	font-family: var( --wp--preset--font-family--blender );
	font-size: var( --eht-fs-h1 );
	font-weight: 700;
	line-height: 1.2;
	color: var( --wp--preset--color--eht-primary );
	margin: 0 0 1rem;
}

.eht-article__lead {
	font-family: var( --wp--preset--font-family--nunito );
	font-size: var( --wp--preset--font-size--lead );
	margin: 0 0 1.5rem;
}

.eht-article__lead .wp-block-post-excerpt__more-text {
	display: none;
}

.eht-article__date {
	font-family: var( --wp--preset--font-family--blender );
	font-size: var( --eht-fs-h4 );
	font-weight: 500;
	color: var( --wp--preset--color--eht-secondary );
	margin: 0 0 2.5rem;
}

.eht-article__image {
	margin: 0 0 2.5rem;
}

.eht-article__image img {
	width: 100%;
	height: auto;
}

.eht-article__body > * + * {
	margin-top: 1.5rem;
}

/* -------------------------------------------------------------------- */
/* Formulare (Kontaktformular, Suchfeld etc.)                            */
/* -------------------------------------------------------------------- */

.eht-input,
input[ type='text' ].wp-block-search__input,
input[ type='email' ].wp-block-search__input {
	height: calc( 1.5em + 1.75rem + 2px );
	padding: 0.875rem 1.875rem;
	border: 1px solid var( --wp--preset--color--eht-border );
	border-radius: 0;
	font-family: var( --wp--preset--font-family--nunito );
	color: #495057;
	background: var( --wp--preset--color--eht-white );
}

.eht-input:focus {
	border-color: #ffc0a9;
	box-shadow: 0 0 0 0.2rem rgba( 255, 100, 41, 0.25 );
	outline: none;
}

/* -------------------------------------------------------------------- */
/* Hilfsklassen für Inhalte                                              */
/* -------------------------------------------------------------------- */

/*
 * Wird auf 28 Inhaltsseiten an Überschriften vergeben (z. B. „Beste
 * Technologien für Entzunderungssysteme."). Die Regel fehlte bislang, sodass
 * diese Überschriften nur dort versal wirkten, wo der Text ohnehin schon in
 * Großbuchstaben eingetragen war.
 */
.eht-uppercase {
	text-transform: uppercase;
}

/* -------------------------------------------------------------------- */
/* Alt-Klassen aus dem TYPO3-/Bootstrap-Import                           */
/* -------------------------------------------------------------------- */

/*
 * Der Inhaltsimport von evertz-hydro.com hat Bootstrap-Utility-Klassen im
 * Fließtext mitgebracht (Inline-Auszeichnungen, Buttons, Bilder, die
 * Vergleichstabellen des Systemkonfigurators). Sie hier auf das EHT-Design
 * abzubilden ist deutlich verlässlicher, als sie aus jedem einzelnen Absatz
 * zu entfernen — und Redakteure, die alten Text einfügen, bekommen weiterhin
 * ein korrektes Ergebnis.
 */

.entry-content .text-primary,
.eht-container .text-primary {
	color: var( --wp--preset--color--eht-primary );
}

.entry-content .text-secondary,
.eht-container .text-secondary {
	color: var( --wp--preset--color--eht-secondary );
}

/* Auf orangem Grund kippt „text-primary" wie überall auf Dunkelgrau. */
.eht-bg-primary .text-primary {
	color: var( --wp--preset--color--eht-secondary );
}

.text-uppercase {
	text-transform: uppercase;
}

.d-none {
	display: none;
}

.d-block {
	display: block;
}

.img-fluid {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Inline-Links, die im Original als Button ausgezeichnet waren. */
.entry-content a.btn,
.eht-container a.btn {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.875rem 1.875rem;
	border: none;
	border-radius: 0;
	font-family: var( --wp--preset--font-family--blender );
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.entry-content a.btn-primary,
.eht-container a.btn-primary {
	background-color: var( --wp--preset--color--eht-primary );
	color: var( --wp--preset--color--eht-white );
}

.entry-content a.btn-primary:hover,
.eht-container a.btn-primary:hover {
	background-color: var( --wp--preset--color--eht-primary-hover );
}

.entry-content a.btn-secondary,
.eht-container a.btn-secondary {
	background-color: var( --wp--preset--color--eht-secondary );
	color: var( --wp--preset--color--eht-white );
}

.entry-content a.btn-secondary:hover,
.eht-container a.btn-secondary:hover {
	background-color: #1a1a1a;
}

/* Auf orangem Grund: Kontrastumkehr wie bei allen anderen Buttons. */
.eht-bg-primary a.btn-primary {
	background-color: var( --wp--preset--color--eht-light );
	color: var( --wp--preset--color--eht-primary );
}

/*
 * Vergleichstabellen des Systemkonfigurators („Das Sprühmedium",
 * „Die Ansteuerung" …). Je Zeile steht links das Merkmal, rechts die
 * Ausprägungen — verfügbare sind mit `.active`, nicht verfügbare mit
 * `.disable` ausgezeichnet.
 */
.eht-container table.table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-family: var( --wp--preset--font-family--nunito );
}

.eht-container table.table td {
	padding: 0.875rem 1rem;
	border-bottom: 1px solid var( --wp--preset--color--eht-border );
	vertical-align: top;
}

.eht-container table.table td:first-child {
	width: 40%;
	font-family: var( --wp--preset--font-family--blender );
	font-weight: 700;
	color: var( --wp--preset--color--eht-primary );
}

.eht-container table.table td p {
	margin: 0;
}

.eht-container table.table span.d-block + span.d-block {
	margin-top: 0.5rem;
}

.eht-container table.table span.active {
	color: var( --wp--preset--color--eht-secondary );
	font-weight: 700;
}

/* Nicht verfügbare Ausprägung: sichtbar, aber deutlich zurückgenommen. */
.eht-container table.table span.disable {
	color: #9a9a9a;
	text-decoration: line-through;
}

@media ( max-width: 575.98px ) {
	.eht-container table.table td {
		display: block;
		border-bottom: none;
	}

	.eht-container table.table td:first-child {
		width: auto;
		padding-bottom: 0;
	}

	.eht-container table.table tr {
		display: block;
		border-bottom: 1px solid var( --wp--preset--color--eht-border );
	}
}

/* -------------------------------------------------------------------- */
/* Skip-Link                                                             */
/* -------------------------------------------------------------------- */

.skip-link {
	background: var( --wp--preset--color--eht-primary );
	color: var( --wp--preset--color--eht-white );
	padding: 0.75rem 1.5rem;
	position: absolute;
	left: 1rem;
	top: -100px;
	z-index: 100000;
	transition: top 0.2s ease;
}

.skip-link:focus {
	top: 1rem;
}