/*
 * Avatar-Menü - Farben/Schrift ziehen sich aus dem Elementor Global Kit
 * (Site Settings -> Global Colors / Global Fonts). Die --e-global-*
 * Custom Properties werden von Elementor automatisch auf :root gesetzt,
 * sobald irgendwo auf der Seite ein Global Color/Font genutzt wird - hier
 * wird bewusst NICHTS mehr hart codiert (Original-Plugin nutzte feste
 * Werte wie Arial/#4a90e2). Ändert ihr Farben/Schrift in Elementor, zieht
 * dieses Menü automatisch nach. Fallback-Werte hinter dem Komma greifen
 * nur, falls das Kit aus irgendeinem Grund nicht geladen ist.
 */

.mma-avatar-menu {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 100%;
	font-family: var( --e-global-typography-primary-font-family, inherit );
}

/* Wichtig gegen den Höhenversatz aus dem alten Setup: kein festes
   padding-top mehr auf Widget-Ebene nötig - die Ausrichtung übernimmt
   flex align-items:center hier plus "Vertical Align: Middle" auf der
   Elementor-Spalte. Siehe README, Abschnitt "Avatar-Menü". */
.elementor-widget-mma_avatar_menu .elementor-widget-container {
	display: flex;
	align-items: center;
	height: 100%;
	padding-top: 0;
	padding-bottom: 0;
}

.mma-avatar-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	background: none;
	border: none;
	padding: 6px;
	margin: 0;
	border-radius: 999px;
	transition: background-color 0.15s ease;
}

.mma-avatar-toggle:hover,
.mma-avatar-toggle:focus-visible {
	background-color: color-mix( in srgb, var( --e-global-color-primary, #4377bb ) 8%, transparent );
	outline: none;
}

.mma-avatar-circle {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: var( --e-global-color-secondary, #f2f2ef );
	border: 2px solid transparent;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.mma-avatar-toggle:hover .mma-avatar-circle,
.mma-avatar-toggle[aria-expanded="true"] .mma-avatar-circle {
	border-color: var( --e-global-color-primary, #4377bb );
	transform: scale( 1.04 );
}

.mma-avatar-circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.mma-avatar-circle--initials {
	color: #fff;
	background: var( --e-global-color-primary, #4377bb );
	font-family: var( --e-global-typography-primary-font-family, inherit );
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.5px;
}

.mma-avatar-circle--guest {
	background: var( --e-global-color-secondary, #f2f2ef );
	color: var( --e-global-color-9fcad6e, #393434 );
	font-size: 15px;
}

.mma-avatar-menu--guest {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	padding: 6px;
	border-radius: 999px;
	transition: background-color 0.15s ease;
}

.mma-avatar-menu--guest:hover {
	background-color: color-mix( in srgb, var( --e-global-color-primary, #4377bb ) 8%, transparent );
}

.mma-avatar-guest-label {
	font-family: var( --e-global-typography-primary-font-family, inherit );
	font-size: 14px;
	color: var( --e-global-color-9fcad6e, #393434 );
}

.mma-avatar-arrow {
	width: 9px;
	height: 9px;
	border-right: 2px solid var( --e-global-color-9fcad6e, #555 );
	border-bottom: 2px solid var( --e-global-color-9fcad6e, #555 );
	transform: rotate( 45deg );
	transition: transform 0.2s ease;
	margin-top: -3px;
}

.mma-avatar-toggle[aria-expanded="true"] .mma-avatar-arrow {
	transform: rotate( 225deg );
	margin-top: 3px;
}

.mma-avatar-dropdown {
	position: absolute;
	top: calc( 100% + 10px );
	right: 0;
	min-width: 210px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.14 );
	padding: 8px 0;
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transform: translateY( -6px );
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.mma-avatar-menu[data-open] .mma-avatar-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}

.mma-avatar-dropdown a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	color: var( --e-global-color-9fcad6e, #333 );
	text-decoration: none;
	font-family: var( --e-global-typography-primary-font-family, inherit );
	font-size: 22px;
	transition: background-color 0.12s ease;
}

.mma-avatar-dropdown a:hover,
.mma-avatar-dropdown a:focus-visible {
	background-color: var( --e-global-color-secondary, #f5f7fb );
	outline: none;
}

.mma-avatar-dropdown-icon {
	width: 16px;
	text-align: center;
	color: var( --e-global-color-primary, #4377bb );
	font-size: 14px;
}

.mma-avatar-dropdown hr {
	border: none;
	border-top: 1px solid var( --e-global-color-secondary, #eee );
	margin: 6px 0;
}

.mma-avatar-dropdown-logout {
	color: var( --e-global-color-9fcad6e, #333 );
}


/* Mobile: an die Groesse des Hauptmenues (Hamburger-Ansicht) angleichen,
   das auf schmalen Bildschirmen auf 10px verkleinert wird. */
@media (max-width: 767px) {
	.mma-avatar-dropdown a {
		font-size: 10px;
	}
}