/*
Theme Name:   Meereswoge Child
Theme URI:    https://meereswoge-neuwerk.de/
Description:  Child-Theme von Misty Lake. Enthält ausschließlich die responsiven Mobil-Anpassungen (CSS + JS), getrennt vom Original und update-sicher. Erweiterbar.
Author:       pixelfilm
Template:     misty-lake
Version:      1.0.0
Text Domain:  meereswoge-child
*/

/* =========================================================================
   Meereswoge – Responsive Retrofit
   ========================================================================= */

/* [2] Bilder flexibel */
img {
	max-width: 100%;
	height: auto;
}

/* [5] Tabellen / Einbettungen auf Mobil scrollbar */
@media screen and (max-width: 600px) {
	.entry-content table,
	.comment-content table,
	.tablepress {
		display: block;
		width: 100% !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.tablepress td,
	.tablepress th {
		width: auto !important;
		white-space: normal;
	}
	.entry-content iframe,
	.entry-content embed,
	.entry-content object {
		max-width: 100%;
	}
}

/* [6] Defektes Wetter-Widget ausblenden */
.wp_forecast_widget {
	display: none;
}

/* =========================================================================
   Mobile-Feinschliff (nur < 600px)
   ========================================================================= */
@media screen and (max-width: 600px) {

	/* [3a] Kopfzeile: Logo links, Burger + "Menü" rechts, weißer Grund */
	#masthead {
		position: relative;
		background: #fff;
		min-height: 74px;
		overflow: hidden;
	}
	.site-description {
		display: none;
	}
	.site-branding {
		float: left;
		margin: 0;
		padding: 8px 0 8px 12px;
	}
	.site-branding .site-title {
		margin: 0;
		line-height: 0;
	}
	.site-branding .site-title a {
		display: block;
		width: 150px;
		height: 58px;
		background: url("https://meereswoge-neuwerk.de/wp-content/themes/misty-lake/images/Kopfzeile_Meereswoge965.jpg") no-repeat left center;
		background-size: auto 58px;
	}

	/* "Menü"-Umschalter rechtsbündig, rot auf weiß */
	.menu-toggle {
		position: absolute;
		top: 0;
		right: 12px;
		height: 74px;
		display: flex;
		align-items: center;
		margin: 0;
		padding: 0;
		background: transparent;
		color: #993333;
		font-size: 0;
		font-weight: 600;
		cursor: pointer;
	}
	/* Hamburger per CSS gezeichnet (3 symmetrische Striche) */
	.menu-toggle:before {
		content: "";
		display: block;
		width: 20px;
		height: 2px;
		background: #993333;
		box-shadow: 0 -6px 0 #993333, 0 6px 0 #993333;
		margin-right: 12px;
	}
	.menu-toggle:after {
		content: "Menü";
		font-size: 16px;
		line-height: 1;
	}
	/* Geöffnetes Menü: Hamburger wird zum X (zwei diagonale Linien) */
	.menu-toggle.toggled-on:before {
		width: 18px;
		height: 16px;
		background:
			linear-gradient(45deg, transparent 47%, #993333 47%, #993333 53%, transparent 53%),
			linear-gradient(-45deg, transparent 47%, #993333 47%, #993333 53%, transparent 53%);
		background-size: 100% 100%;
		box-shadow: none;
	}

	/* Navigation klappt vollständig UNTER dem Kopf auf */
	.main-small-navigation {
		clear: both;
	}

	/* [3b] Aufgeklappte Liste – klappt mit schneller CSS-Animation nach unten
	   auf (läuft automatisch, sobald small-menu.js das Menü sichtbar macht). */
	.main-small-navigation .menu {
		margin: 8px 12px 1.2em;
		background: transparent;
		animation: mw-menu-open 0.4s ease-out;
		transform-origin: top;
	}
	@keyframes mw-menu-open {
		from { opacity: 0; transform: translateY(-10px); }
		to   { opacity: 1; transform: translateY(0); }
	}
	.main-small-navigation .menu li {
		border: 0;
		padding: 0;
	}
	.main-small-navigation .menu li a {
		display: block;
		margin-bottom: 4px;
		padding: 0.55em 0.85em;
		border: 1px solid #d6d2c8;
		border-radius: 4px;
		background: #fff;
		font-size: 15px;
		line-height: 1.3;
		color: #555;
	}
	/* Hauptpunkte: rahmenlose, kräftige Überschriften */
	.main-small-navigation .menu > li {
		margin-top: 8px;
	}
	.main-small-navigation .menu > li > a {
		border: 0;
		border-radius: 0;
		background: transparent;
		margin-bottom: 2px;
		padding: 0.4em 0.4em 0.2em;
		font-weight: 700;
		color: #993333;
	}
	/* Unterpunkte: eingerückt, kleiner, dezenter */
	.main-small-navigation .menu ul.sub-menu li a {
		margin-left: 1.2em;
		padding: 0.45em 0.85em;
		font-weight: 400;
		font-size: 13.5px;
		color: #777;
	}

	/* [4] Top-/Header-Banner auf angenehme Höhe zuschneiden */
	img[src*="header-images"],
	img[src*="/themes/misty-lake/images/header"] {
		width: 100%;
		height: 140px;
		object-fit: cover;
		object-position: center;
		display: block;
	}

	/* [7] Ränder/Abstände für Inhalt & Sidebar */
	.site-main {
		padding: 1em 1em 2em;
	}
	.widget-area {
		padding: 0 1em;
	}

	/* [10] iOS-Zoom beim Fokus in Formularfeldern unterbinden
	   (iPhone zoomt bei Schriftgröße < 16px automatisch hinein). */
	input,
	textarea,
	select {
		font-size: 16px;
	}

	/* [11] Umflossene Fließtext-Bilder (alignleft/alignright/aligncenter)
	   auf Mobil mittig und als Block (kein Textumfluss).
	   !important, da die Ränder als Inline-Style im Markup gesetzt sind. */
	.entry-content img.alignleft,
	.entry-content img.alignright,
	.entry-content img.aligncenter {
		display: block;
		float: none !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 1em;
	}

	/* [12] Sidebar-Bilder mittig im beige hinterlegten Kasten
	   (Bild und ggf. umgebender Link als zentrierter Block; Titel bleibt links). */
	.widget-area .widget_simpleimage a,
	.widget-area .widget_simpleimage img {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
}

/* =========================================================================
   Desktop-Korrekturen (ab 600px)
   ========================================================================= */
@media screen and (min-width: 600px) {

	/* [8] Untermenüs der letzten zwei Hauptpunkte (Verein, Kontakt) nach links öffnen */
	.main-navigation ul.menu > li:last-child > ul.sub-menu,
	.main-navigation ul.menu > li:nth-last-child(2) > ul.sub-menu {
		left: auto;
		right: 0;
	}
	/* Submenü minimal tiefer, bündig unter dem Menürahmen */
	.main-navigation ul.menu > li > ul.sub-menu {
		margin-top: 2px;
	}

	/* [9] Mehr Abstand zwischen Hero-Banner und erstem Bild darunter */
	.header-image {
		margin-top: 0;
	}
}