/*
 * NRW spielt – Mobile-Optimierung v1.0.4
 * Theme: Travelogged 0.7 (Weblizar, Bootstrap 3-basiert)
 *
 * Theme-spezifische CSS-Overrides plus generelle Mobile-Verbesserungen.
 * Lädt nach allen Theme- und Plugin-Styles.
 */

/* ============================================================
   GLOBAL — bessere Lesbarkeit auf allen Geräten
   ============================================================ */

@media (max-width: 991px) {
	/* iOS Auto-Zoom auf Forms verhindern: alle Inputs min 16px */
	input[type="text"], input[type="email"], input[type="search"], input[type="number"],
	input[type="tel"], input[type="url"], input[type="password"], input[type="date"],
	select, textarea {
		font-size: 16px !important;
		min-height: 44px;
	}

	body {
		font-size: 16px;
		line-height: 1.55;
	}
}

/* ============================================================
   TRAVELOGGED: BURGER-MENÜ FIX
   Hauptproblem: Submenüs sind permanent ausgeklappt sichtbar als leere blaue Flächen.
   Ursache: Bootstrap 3 .dropdown-menu wird auf Mobile nicht korrekt versteckt.
   Lösung: Submenüs verstecken bis explizit geöffnet, klare Akkordeon-Logik.
   ============================================================ */

@media (max-width: 991px) {
	/* Burger-Icon-Button: größer, klarer */
	.navbar-toggle,
	button.navbar-toggle {
		min-width: 48px !important;
		min-height: 48px !important;
		padding: 10px 12px !important;
		margin: 12px 12px 12px 0 !important;
		border-radius: 6px !important;
		background-color: #fff !important;
		border: 2px solid #fff !important;
		box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
	}
	.navbar-toggle .icon-bar {
		background-color: #003DA5 !important;
		width: 26px !important;
		height: 3px !important;
		margin: 5px 0 !important;
		display: block;
		border-radius: 2px;
	}

	/* Hauptmenü: dezentere Trennlinien, kompakter */
	.navbar-nav,
	.nav.navbar-nav {
		margin: 0 !important;
		padding: 0 !important;
		background: #003DA5;
	}
	.navbar-nav > li,
	.nav.navbar-nav > li {
		border-bottom: 1px solid rgba(255,255,255,0.12) !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.navbar-nav > li > a,
	.nav.navbar-nav > li > a {
		padding: 16px 20px !important;
		font-size: 17px !important;
		color: #fff !important;
		min-height: 56px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		line-height: 1.3 !important;
	}

	/* ── KERN-FIX: Submenüs (Dropdown) verstecken, bis explizit aufgeklappt ── */
	.navbar-nav .dropdown-menu,
	.nav.navbar-nav .dropdown-menu,
	.navbar-collapse .dropdown-menu {
		display: none !important;
		position: static !important;
		float: none !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		background-color: rgba(0,0,0,0.18) !important;
		border: 0 !important;
		box-shadow: none !important;
	}
	/* Nur ausgeklappte Items zeigen */
	.navbar-nav .open > .dropdown-menu,
	.nav.navbar-nav .open > .dropdown-menu,
	.dropdown.open .dropdown-menu {
		display: block !important;
	}

	/* Submenu-Container: leicht dunklerer Hintergrund für Abgrenzung */
	.navbar-collapse .dropdown-menu,
	.navbar-collapse .sub-menu,
	.navbar-nav .dropdown-menu,
	.navbar-nav .sub-menu,
	.nav.navbar-nav .dropdown-menu,
	.nav.navbar-nav .sub-menu,
	.navbar-nav ul.sub-menu,
	#site-navigation .sub-menu,
	.main-navigation .sub-menu {
		background-color: rgba(0,0,0,0.28) !important;
	}

	/* === KERN-FIX === Das andere Plugin nrw-spielt-menue.css setzt
	   auf dem dropdown-menu Container opacity:0, visibility:hidden und
	   pointer-events:none ("Soft Fade-in" nur für Desktop-Hover gedacht).
	   Auf Touch/Mobile gibt's keinen Hover → Container bleibt unsichtbar.
	   Wir müssen das auf dem Container selbst zurücksetzen, sobald .open
	   gesetzt wird (durch unser menu-accordion.js oder Bootstrap-JS). */
	.navbar-nav > li.open > .dropdown-menu,
	.navbar-nav > li.dropdown.open > .dropdown-menu,
	.navbar-nav > li.menu-item-has-children.open > .dropdown-menu,
	.nav.navbar-nav > li.open > .dropdown-menu,
	.nav.navbar-nav > li.dropdown.open > .dropdown-menu,
	ul.navbar-nav > li.open > .dropdown-menu,
	ul.navbar-nav > li.dropdown.open > .dropdown-menu,
	header.home_hader .navbar-nav > li.open > .dropdown-menu,
	header.home_hader .navbar-nav > li.dropdown.open > .dropdown-menu,
	body header.home_hader .navbar-nav > li.open > .dropdown-menu,
	body header.home_hader .navbar-nav > li.dropdown.open > .dropdown-menu,
	body .navbar-nav > li.open > .dropdown-menu,
	body .navbar-nav > li.dropdown.open > .dropdown-menu,
	body .navbar-nav > li.menu-item-has-children.open > .dropdown-menu {
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: none !important;
	}

	/* Geschlossen: zurück auf opacity:0 — aber wir respektieren das vom Menue-Plugin,
	   solange .open nicht gesetzt ist. Falls die mobile.css Akkordeon-Verhalten
	   ohnehin will, dann gerne komplett ausblenden statt nur transparent: */
	.navbar-nav > li:not(.open) > .dropdown-menu,
	.navbar-nav > li.dropdown:not(.open) > .dropdown-menu,
	header.home_hader .navbar-nav > li:not(.open) > .dropdown-menu {
		display: none !important;
	}

	/* Submenu-Items: HOCHSPEZIFISCHE Selektoren, um nrw-spielt-menue.css zu überschreiben.
	   Das Menue-Plugin setzt color:#1f1f1f !important ohne @media-Guard — daher
	   muss unser Selektor höhere Spezifität haben.
	   Trick: body + header.home_hader vorne dranhängen erhöht Spezifität auf gleichem Niveau. */
	body header.home_hader .navbar-nav .dropdown-menu li a,
	body header.home_hader .navbar-nav .dropdown-menu li a:link,
	body header.home_hader .navbar-nav .dropdown-menu li a:visited,
	body header.home_hader .navbar-nav .dropdown .dropdown-menu li a,
	body header.home_hader .navbar-nav .dropdown .dropdown-menu li a:link,
	body header.home_hader .navbar-nav .dropdown .dropdown-menu li a:visited,
	body .navbar-nav .dropdown-menu li a,
	body .navbar-nav .dropdown-menu li a:link,
	body .navbar-nav .dropdown-menu li a:visited,
	body .navbar-nav .dropdown .dropdown-menu li a,
	body .navbar-nav .sub-menu li a,
	body .navbar-nav .sub-menu li a:link,
	body .navbar-nav .sub-menu li a:visited {
		color: #ffffff !important;
		background-color: transparent !important;
	}

	/* Submenu-Items: BREITE Selektoren-Liste + maximale Spezifität.
	   WICHTIG: Wir adressieren ALLE Pseudo-Klassen-States gleich,
	   damit Text immer sichtbar ist — nicht erst bei :hover. */
	.navbar-collapse .dropdown-menu > li > a,
	.navbar-collapse .dropdown-menu > li > a:link,
	.navbar-collapse .dropdown-menu > li > a:visited,
	.navbar-collapse .sub-menu > li > a,
	.navbar-collapse .sub-menu > li > a:link,
	.navbar-collapse .sub-menu > li > a:visited,
	.navbar-nav .dropdown-menu li a,
	.navbar-nav .dropdown-menu li a:link,
	.navbar-nav .dropdown-menu li a:visited,
	.navbar-nav .sub-menu li a,
	.navbar-nav .sub-menu li a:link,
	.navbar-nav .sub-menu li a:visited,
	.nav.navbar-nav .dropdown-menu li a,
	.nav.navbar-nav .sub-menu li a,
	#site-navigation .sub-menu li a,
	.main-navigation .sub-menu li a,
	.menu-item-has-children .sub-menu > li > a,
	ul.dropdown-menu li a,
	ul.sub-menu li a {
		color: #ffffff !important;
		opacity: 1 !important;
		visibility: visible !important;
		background-color: transparent !important;
		padding: 14px 20px 14px 40px !important;
		font-size: 16px !important;
		font-weight: 500 !important;
		min-height: 48px !important;
		display: flex !important;
		align-items: center !important;
		line-height: 1.35 !important;
		border-bottom: 1px solid rgba(255,255,255,0.18) !important;
		text-shadow: 0 1px 2px rgba(0,0,0,0.4);
		text-decoration: none !important;
	}

	/* Hover/Focus: nur Hintergrund-Schimmer, Farbe bleibt weiß */
	.navbar-collapse .dropdown-menu > li > a:hover,
	.navbar-collapse .dropdown-menu > li > a:focus,
	.navbar-collapse .dropdown-menu > li > a:active,
	.navbar-collapse .sub-menu > li > a:hover,
	.navbar-collapse .sub-menu > li > a:focus,
	.navbar-nav .dropdown-menu li a:hover,
	.navbar-nav .sub-menu li a:hover,
	.menu-item-has-children .sub-menu > li > a:hover {
		background-color: rgba(255,255,255,0.18) !important;
		color: #ffffff !important;
	}

	/* Falls Theme die Items via opacity:0 oder display ausblendet — alles überschreiben */
	.navbar-collapse .dropdown-menu li,
	.navbar-collapse .sub-menu li,
	.navbar-nav .dropdown-menu li,
	.navbar-nav .sub-menu li {
		opacity: 1 !important;
		visibility: visible !important;
		display: list-item !important;
	}

	/* Auch verschachtelte Submenüs (Level 3) lesbar */
	.navbar-nav .dropdown-menu .dropdown-menu > li > a,
	.navbar-nav .sub-menu .sub-menu > li > a {
		padding-left: 60px !important;
		font-size: 15px !important;
		color: #ffffff !important;
	}

	/* Caret-Icon NUR EINMAL — das Theme hat schon einen Caret, daher unser eigener entfällt.
	   Falls Theme keinen hat, kommt :empty-Check nicht zum Tragen — Theme-Caret reicht. */
	.navbar-nav > li.dropdown > a::after,
	.nav.navbar-nav > li.dropdown > a::after {
		content: none !important;
	}
	/* Theme-Caret größer und deutlicher machen */
	.navbar-nav > li.dropdown > a .caret,
	.nav.navbar-nav > li.dropdown > a .caret,
	.navbar-nav > li > a > .fa-angle-down,
	.navbar-nav > li > a > .fa-chevron-down {
		width: 22px !important;
		height: 22px !important;
		font-size: 18px !important;
		border-width: 8px 6px 0 6px !important;
		margin-left: 8px;
		opacity: 0.85;
		transition: transform 0.2s ease;
	}
	.navbar-nav > li.dropdown.open > a .caret,
	.nav.navbar-nav > li.dropdown.open > a .caret,
	.navbar-nav > li.open > a > .fa-angle-down,
	.navbar-nav > li.open > a > .fa-chevron-down {
		transform: rotate(180deg);
		opacity: 1;
	}

	/* Such-Feld im Burger-Menü: nicht so dominant */
	.navbar-collapse .search-form,
	.navbar-collapse form[role="search"],
	.navbar-collapse .searchform {
		padding: 12px 20px !important;
		background: rgba(0,0,0,0.1);
	}
	.navbar-collapse input[type="search"],
	.navbar-collapse input[name="s"] {
		width: 100% !important;
		font-size: 16px !important;
		padding: 10px 14px !important;
		border-radius: 6px;
		border: 0 !important;
	}
}

/* JavaScript-Fallback: Falls Theme-JS Akkordeon nicht macht, helfen wir per CSS ─
   Hover-Aufklappen für Touch funktioniert nicht, daher injezieren wir später
   via JS einen Click-Handler. */

/* ============================================================
   HERO-HEADER auf Karte/Kalender REDUZIEREN
   Karten-Seite zeigt riesigen "KARTE"-Banner, der wertvollen Platz frisst.
   ============================================================ */

@media (max-width: 768px) {
	.page-title-section,
	.page-banner,
	.entry-header-banner,
	.travelogged-page-title,
	.page-header-banner {
		min-height: 100px !important;
		max-height: 140px !important;
		padding: 20px 12px !important;
	}
	.page-title-section h1,
	.page-banner h1,
	.travelogged-page-title h1 {
		font-size: 24px !important;
		line-height: 1.2 !important;
	}
}

/* ============================================================
   KARTE (Spieletreffs Karte) — mobile-tauglich
   Hauptziel: Karte rückt nach oben, Filter werden ausklappbar
   ============================================================ */

@media (max-width: 768px) {
	.spieletreffs-karte {
		font-size: 14px;
	}

	/* Hinweis-Box (Zielgruppen-Warnung) kleiner */
	.spieletreffs-karte > div:first-child p,
	.entry-content > p:first-of-type {
		font-size: 13px;
		padding: 8px 12px;
		background: #fff8e1;
		border-radius: 6px;
		margin-bottom: 12px;
	}

	/* Toolbar wrap statt overflow */
	.spk-controls,
	.spk-map-controls {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 6px !important;
		padding: 8px !important;
	}

	.spk-map-control-btn {
		min-height: 40px;
		padding: 8px 12px !important;
		font-size: 13px !important;
		white-space: nowrap;
	}

	.spk-controls input[type="text"],
	.spk-controls input[type="search"],
	.spk-controls select {
		font-size: 16px !important;
		min-height: 44px !important;
		padding: 8px 12px !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	/* Karten-Höhe: mehr Platz */
	.spieletreffs-karte .leaflet-container,
	#spieletreffs-karte .leaflet-container,
	[id*="spieletreffs-karte"] .leaflet-container {
		min-height: 65vh !important;
	}

	/* Popups vergrößern */
	.leaflet-popup-content {
		min-width: 240px !important;
		font-size: 14px !important;
	}
	.spk-popup h3 {
		font-size: 16px !important;
		margin-bottom: 6px !important;
	}
	.spk-events li {
		padding: 8px 4px !important;
		font-size: 14px !important;
		line-height: 1.5 !important;
	}

	/* Sidebar 'Nächste Termine' unter der Karte (statt overlay) */
	.spk-sidebar,
	[data-spk-sidebar] {
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		top: auto !important;
		right: auto !important;
		margin-top: 12px !important;
		max-height: 60vh !important;
	}

	/* Days-Pills und Audience-Pills */
	.spk-day-pill, .spk-audience-pill {
		min-height: 38px !important;
		padding: 7px 12px !important;
		font-size: 13px !important;
	}
}

/* ============================================================
   KALENDER (NRW spielt Kalender) — mobile-tauglich
   Hauptproblem: Filter-Buttons werden abgeschnitten (kein wrap).
   ============================================================ */

@media (max-width: 768px) {
	.nrwk-calendar,
	.nrw-spielt-kalender {
		font-size: 14px;
	}

	/* Quick-Chips: WRAP statt overflow! */
	.nrwk-quick-chips,
	.nrwk-weekday-pills,
	.nrwk-audience-pills,
	[class*="nrwk-"][class*="-chips"],
	[class*="nrwk-"][class*="-pills"] {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 6px !important;
		padding-bottom: 4px;
		overflow: visible !important;
	}

	.nrwk-chip,
	.nrwk-pill,
	[class*="nrwk-chip"],
	[class*="nrwk-pill"] {
		min-height: 40px !important;
		padding: 8px 14px !important;
		font-size: 13px !important;
		flex-shrink: 0;
		white-space: nowrap;
	}

	/* Stadt-Akkordeon-Header */
	.nrwk-city-header,
	.nrwk-city-toggle,
	[class*="city-header"] {
		min-height: 56px !important;
		padding: 14px 16px !important;
		font-size: 17px !important;
	}

	/* Event-Karten kompakt */
	.nrwk-event {
		padding: 12px 14px !important;
	}
	.nrwk-event-title {
		font-size: 16px !important;
		line-height: 1.35 !important;
	}

	/* Jump-to-City Links scrollbar */
	.nrwk-jump-bar {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		display: flex !important;
		gap: 6px !important;
		padding: 8px 12px !important;
	}
	.nrwk-jump-link {
		flex-shrink: 0 !important;
		min-height: 36px !important;
		padding: 6px 12px !important;
		font-size: 13px !important;
		white-space: nowrap !important;
	}

	/* Map-Modal Vollbreite */
	.nrwk-map-modal {
		padding: 8px !important;
	}
	.nrwk-map-modal .nrwk-map-dialog {
		max-width: 100% !important;
		margin: 0 !important;
		max-height: 95vh !important;
	}
	.nrwk-map-modal .leaflet-container {
		min-height: 55vh !important;
	}
}

/* ============================================================
   FRONTPAGE / SIDEBAR / CONTAINER
   ============================================================ */

@media (max-width: 768px) {
	.sidebar, #secondary, .widget-area {
		float: none !important;
		width: 100% !important;
		margin-top: 24px;
	}

	.container, .entry-content, .site-content {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	/* Logo nicht zu groß */
	.site-logo img, .custom-logo, .navbar-brand img {
		max-height: 56px !important;
		width: auto !important;
	}

	table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ============================================================
   FOCUS-STATES für a11y
   ============================================================ */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid #f4c20d !important;
	outline-offset: 2px !important;
}

/* ============================================================
   SAFE-AREA für iPhone-Notch
   ============================================================ */

@supports (padding: max(0px)) {
	body {
		padding-left: env(safe-area-inset-left);
		padding-right: env(safe-area-inset-right);
	}
}