/*
Theme Name: GeneratePress Child
Theme URI: https://imp-eventproduction.com/
Description: Child Theme fuer IMP Event Production. Enthaelt die Templates und Felder fuer den Projekte-Bereich.
Author: Ruben Amon
Author URI: https://ruben-amon.de/
Template: generatepress
Version: 1.0.0
Text Domain: imp-child
*/

/* ==========================================================================
   Design-Tokens
   Identisch zu den bestehenden Leistungsseiten, damit Template-gebaute und
   blockgebaute Seiten nicht auseinanderlaufen.
   ========================================================================== */

:root {
	--imp-bg: #0e0e11;
	--imp-bg-alt: #0b0b0e;
	--imp-surface: #17171b;
	--imp-surface-2: #1e1e23;

	--imp-text: #f4f4f6;
	--imp-text-muted: #a3a3ac;
	--imp-text-dim: #7c7c85;

	--imp-gold: #d19a34;
	--imp-accent: #f5b301;
	--imp-accent-ink: #171006;
	--imp-grad: linear-gradient(90deg, #f7b500 0%, #ff6a00 55%, #ff3d00 100%);

	--imp-border: #2a2a31;
	--imp-border-strong: #3a3a43;

	--imp-maxw: 1180px;
	--imp-pad-x: 24px;
	--imp-sec-pad: 96px;
	--imp-sec-pad-sm: 56px;

	--imp-radius: 14px;
	--imp-radius-sm: 6px;
	--imp-radius-pill: 999px;

	--imp-shadow: 0 14px 40px rgba(0, 0, 0, .45);
	--imp-shadow-sm: 0 6px 20px rgba(0, 0, 0, .35);
}

@media (max-width: 1100px) {
	:root {
		--imp-sec-pad: 72px;
	}
}

@media (max-width: 768px) {
	:root {
		--imp-sec-pad: 56px;
	}
}

/* ==========================================================================
   Marken-Raster
   Ausgabe des Shortcodes [imp_marken], siehe inc/marken.php.
   Liegt bewusst hier und nicht in projekte.css: Die Marken stehen auf den
   Leistungsseiten, und die laden projekte.css nicht.
   ========================================================================== */

.imp-marken {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.imp-marken li {
	background: var(--imp-surface);
	border: 1px solid var(--imp-border);
	border-radius: 10px;
	min-height: 82px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 14px;
	color: var(--imp-text-muted);
	font-weight: 700;
	font-size: .98rem;
	line-height: 1.25;
	transition: border-color .2s ease, color .2s ease;
}

.imp-marken li:hover {
	border-color: var(--imp-accent);
	color: var(--imp-text);
}

@media (max-width: 1100px) {
	.imp-marken {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 480px) {
	.imp-marken {
		grid-template-columns: repeat(2, 1fr);
	}

	.imp-marken li {
		min-height: 68px;
		font-size: .88rem;
	}
}

/* ==========================================================================
   Mobiles Slideout-Menü: Pfeil neben den Text
   GeneratePress rendert den Aufklapp-Pfeil als <span class="dropdown-menu-toggle">
   INNERHALB des Menü-Links, mit display:block. Ein Blockelement bricht immer
   in die nächste Zeile, egal wie viel Platz daneben wäre. Bei einem langen
   Eintrag wie "Veranstaltungstechnik" entsteht dadurch eine leere Zeile mit
   einsamem Pfeil darunter.
   Lösung: den Link zur Flex-Zeile machen, Text links, Pfeil rechts.
   ========================================================================== */

#generate-slideout-menu .menu-item-has-children > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-right: 20px;
}

#generate-slideout-menu .dropdown-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	/* Grössere Tippfläche, ohne die Zeilenhöhe zu verändern */
	min-width: 44px;
	min-height: 44px;
	margin-right: -12px;
}

#generate-slideout-menu .dropdown-menu-toggle .gp-icon {
	display: inline-flex;
}

/* Breiteres Slideout und grössere Tippfläche für den Aufklapp-Pfeil.
   Vorher: 265px auf einem 375px-Display, also 71 Prozent. Der Pfeil sass
   dadurch weit links vom Displayrand und war mit dem Daumen schlecht zu
   treffen. Jetzt 88 Prozent der Breite, gedeckelt auf 400px, damit es auf
   Tablets nicht ins Absurde läuft. */

#generate-slideout-menu {
	width: min(88vw, 400px);
}

/* Der Pfeil bekommt eine sichtbar abgesetzte Fläche, damit erkennbar ist,
   dass er ein eigener Schalter ist und nicht Teil des Links. */
#generate-slideout-menu .dropdown-menu-toggle {
	min-width: 56px;
	min-height: 56px;
	margin-right: -14px;
	border-left: 1px solid rgba(255, 255, 255, .12);
	transition: background-color .2s ease;
}

#generate-slideout-menu .dropdown-menu-toggle:hover,
#generate-slideout-menu .dropdown-menu-toggle:focus-visible {
	background-color: rgba(255, 255, 255, .06);
}

#generate-slideout-menu .dropdown-menu-toggle .gp-icon svg {
	width: 1.15em;
	height: 1.15em;
}