/*
Theme Name:  OceanWP Child – Naturheilpraxis Emmermann
Description: Child-Theme für native Anpassungen ohne Zusatz-Plugins: Sticky Header, mobile Kontakt-Leiste, Design-Feinschliff.
Template:    oceanwp
Version:     1.0.0
Author:      Naturheilpraxis Emmermann
Text Domain: oceanwp-child
*/

/* =========================================================
   1. Nativer Sticky Header
   (ersetzt das Plugin "Ocean Sticky Header")
   position:fixed statt sticky, weil das Parent-Theme
   #wrap{overflow:hidden} und html{overflow-x:hidden} setzt.
   Der Body-Abstand wird per Inline-Script (functions.php)
   auf die tatsächliche Headerhöhe gesetzt.
   ========================================================= */
#site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.28);
}

.admin-bar #site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar #site-header {
		top: 46px;
	}
}

/* Fallback, bis das Script die exakte Höhe gesetzt hat */
body {
	padding-top: 74px;
}

/* Logo und Navigation vertikal zentrieren.
   OceanWPs Minimal-Header nutzt Floats (beide Blöcke hängen oben);
   als Flex-Container zentrieren sich Logo (45px) und Menü (42px) sauber. */
#site-header.minimal-header #site-header-inner {
	display: flex;
	align-items: center;
}

/* Navigation rechtsbündig wie im Float-Layout zuvor —
   gilt auch für das Burger-Icon der mobilen Ansicht */
#site-header.minimal-header #site-navigation-wrap,
#site-header.minimal-header .oceanwp-mobile-menu-icon {
	margin-left: auto;
}

/* =========================================================
   2. Mobile Kontakt-Leiste (Anrufen / Route)
   Markup kommt aus functions.php (wp_footer)
   ========================================================= */
.npx-mobile-cta {
	display: none;
}

@media screen and (max-width: 768px) {
	.npx-mobile-cta {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9998;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.18);
	}

	.npx-mobile-cta a {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 14px 8px;
		font-size: 15px;
		font-weight: 600;
		text-decoration: none;
		color: #ffffff;
		letter-spacing: 0.02em;
	}

	.npx-mobile-cta a:focus {
		outline: 2px solid #FAF8F3;
		outline-offset: -4px;
	}

	.npx-mobile-cta .npx-cta-call {
		background-color: #2E5240;
	}

	.npx-mobile-cta .npx-cta-route {
		background-color: #223D30;
	}

	.npx-mobile-cta svg {
		width: 18px;
		height: 18px;
		fill: currentColor;
		flex-shrink: 0;
	}

	/* Platz schaffen, damit die Leiste den Footer nicht verdeckt */
	body {
		padding-bottom: 52px;
	}
}

/* =========================================================
   3. Elementor-Stretch absichern (kleine Viewports)
   Das Stretch-Script misst die Fensterbreite per JS und kann
   auf Mobilgeräten falsche Werte liefern (Rotation, Scroll-
   leisten, Headless-Minimum). CSS-Override erzwingt exakte
   Viewport-Breite — !important schlägt die Inline-Styles.
   ========================================================= */
@media screen and (max-width: 1024px) {
	.elementor-section-stretched {
		width: 100vw !important;
		left: 50% !important;
		right: auto !important;
		margin-left: -50vw !important;
	}
}

/* =========================================================
   4. HappyForms: Formular-Button in Praxisfarben
   ========================================================= */
.happyforms-form .happyforms-submit,
.happyforms-form .happyforms-button--submit {
	background-color: #2E5240 !important;
	border-color: #2E5240 !important;
	color: #ffffff !important;
}

.happyforms-form .happyforms-submit:hover,
.happyforms-form .happyforms-submit:focus {
	background-color: #223D30 !important;
	border-color: #223D30 !important;
}

/* =========================================================
   5. Therapie-Karten: einheitliches Bildformat 3:2
   ========================================================= */
.elementor-widget-image-box .elementor-image-box-img img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
}

/* =========================================================
   6. Feinschliff: Lesbarkeit
   ========================================================= */
/* Blocksatz global abschalten – ruhigeres Schriftbild */
.elementor-widget-text-editor,
.entry-content p {
	text-align: left !important;
}

/* Einzelwort-Umbrüche in Überschriften vermeiden
   (progressive enhancement, ältere Browser ignorieren es) */
.elementor-heading-title {
	text-wrap: balance;
}

/* Rezensionen-Link in der Trust-Leiste: Gold auf Waldschatten,
   weiß beim Hover (Standard-Linkfarbe wäre dort unlesbar) */
.elementor-element-npx0014 a {
	color: #C9B287;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.elementor-element-npx0014 a:hover,
.elementor-element-npx0014 a:focus {
	color: #FFFFFF;
}

/* =========================================================
   7. Typografie-Konsistenz: Theme-Chrome (Menü, Footer,
   Widgets) auf denselben lokal gehosteten Roboto-Stack wie
   die Elementor-Inhalte. OceanWP deklariert "Open Sans",
   lädt die Schrift aber nie — das Rendering wäre sonst
   geräteabhängig.
   ========================================================= */
body {
	font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select,
textarea {
	font-family: inherit;
}

/* Footer-Widget-Titel nicht kapitalisieren
   (Parent setzt text-transform: capitalize → "Folge Mir Auf …") */
#footer-widgets .footer-box .widget-title {
	text-transform: none;
}

/* =========================================================
   8. Mobile UX-Feinschliff
   ========================================================= */
/* FAQ-Akkordeon: Tap-Flächen auf mind. 44px bringen */
.elementor-accordion .elementor-tab-title {
	padding-top: 14px;
	padding-bottom: 14px;
}

/* Hero-Porträt mobil als Porträt-Ausschnitt (quadratisch,
   Kopf/Oberkörper) statt Ganzkörper (Widget npx0007, Startseite).
   aspect-ratio statt vh: unabhängig von der Viewport-Höhe. */
@media screen and (max-width: 767px) {
	.elementor-element-npx0007 img {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		/* nur unten beschneiden, Kopf/Haare vollständig erhalten */
		object-position: top center;
	}

	/* Hero-Buttons mobil volle Breite: Elementors width-auto
	   (Inline-Layout für Desktop) kommt aus dem später geladenen
	   Post-CSS — !important nötig */
	.elementor-element-npx0004.elementor-widget__width-auto,
	.elementor-element-npx0005.elementor-widget__width-auto {
		width: 100% !important;
	}

	.elementor-element-npx0004 .elementor-button,
	.elementor-element-npx0005 .elementor-button {
		display: block;
		width: 100%;
		text-align: center;
	}
}