/* ============================================================
   MF Social Icons – Frontend CSS
   ============================================================ */

/* Custom Properties Defaults */
.mf-social-icons {
	--mf-size: 40px;
	--mf-padding: 10px;
	--mf-gap: 10px;
	--mf-radius: 50%;
	--mf-border-w: 0px;
	--mf-border-color: #cccccc;
	--mf-icon-color: var(--mf-brand-color);
	--mf-bg-color: var(--mf-brand-color);
	--mf-brand-color: #555555;
	--mf-hover-opacity: 0.8;
	--mf-per-row: 6;
	--mf-label-size: 12px;
	--mf-mobile-size: 34px;

	display: block;
	line-height: 1;
}

/* ── Liste ── */
.mf-social-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--mf-gap);
}

/* ── Ausrichtung ── */
.mf-align-left .mf-social-list   { justify-content: flex-start; }
.mf-align-center .mf-social-list { justify-content: center; }
.mf-align-right .mf-social-list  { justify-content: flex-end; }

/* ── Layout: vertikal ── */
.mf-layout-vertical .mf-social-list {
	flex-direction: column;
	align-items: flex-start;
}
.mf-layout-vertical.mf-align-center .mf-social-list { align-items: center; }
.mf-layout-vertical.mf-align-right .mf-social-list  { align-items: flex-end; }

/* ── Layout: Grid ── */
.mf-layout-grid .mf-social-list {
	display: grid;
	grid-template-columns: repeat(var(--mf-per-row), auto);
}

/* ── Item ── */
.mf-social-item {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ── Link ── */
.mf-social-link {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-decoration: none !important;
	color: inherit;
	transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
	position: relative;
	outline: none;
}

.mf-social-link:focus-visible {
	outline: 2px solid var(--mf-brand-color);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ── Label-Positionen ── */
.mf-has-labels.mf-label-right .mf-social-link,
.mf-has-labels.mf-label-left .mf-social-link {
	flex-direction: row;
}
.mf-has-labels.mf-label-left .mf-social-link {
	flex-direction: row-reverse;
}
.mf-has-labels.mf-label-top .mf-social-link {
	flex-direction: column-reverse;
}

/* ── Icon-Wrapper ── */
.mf-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--mf-size) + var(--mf-padding) * 2);
	height: calc(var(--mf-size) + var(--mf-padding) * 2);
	color: var(--mf-icon-color);
	background: var(--mf-bg-color);
	border-radius: var(--mf-radius);
	border: var(--mf-border-w) solid var(--mf-border-color);
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
	flex-shrink: 0;
}

.mf-icon-wrap i {
	font-size: var(--mf-size);
	line-height: 1;
	display: block;
}

/* ── Label ── */
.mf-icon-label {
	font-size: var(--mf-label-size);
	color: var(--mf-brand-color);
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}

/* ============================================================
   Stile
   ============================================================ */

/* Plain (nur Icon, kein Hintergrund) */
.mf-style-plain .mf-icon-wrap {
	background: transparent !important;
	border: none !important;
	color: var(--mf-icon-color) !important;
}

/* ============================================================
   Schatten
   ============================================================ */
.mf-shadow-soft .mf-icon-wrap    { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.mf-shadow-medium .mf-icon-wrap  { box-shadow: 0 4px 14px rgba(0,0,0,0.2); }
.mf-shadow-hard .mf-icon-wrap    { box-shadow: 0 6px 20px rgba(0,0,0,0.35); }
.mf-shadow-colored .mf-icon-wrap { box-shadow: 0 4px 14px color-mix(in srgb, var(--mf-brand-color) 50%, transparent); }

/* ============================================================
   Hover-Effekte
   ============================================================ */

/* Lift */
.mf-hover-lift .mf-social-link:hover .mf-icon-wrap {
	transform: translateY(-4px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

/* Grow */
.mf-hover-grow .mf-social-link:hover .mf-icon-wrap {
	transform: scale(1.15);
}

/* Shrink */
.mf-hover-shrink .mf-social-link:hover .mf-icon-wrap {
	transform: scale(0.88);
}

/* Rotate */
.mf-hover-rotate .mf-social-link:hover .mf-icon-wrap {
	transform: rotate(15deg) scale(1.05);
}

/* Fade */
.mf-hover-fade .mf-social-link:hover {
	opacity: var(--mf-hover-opacity);
}

/* Pulse */
@keyframes mf-pulse {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.12); }
	100% { transform: scale(1); }
}
.mf-hover-pulse .mf-social-link:hover .mf-icon-wrap {
	animation: mf-pulse 0.6s ease infinite;
}

/* Shake */
@keyframes mf-shake {
	0%, 100% { transform: rotate(0deg); }
	20%       { transform: rotate(-8deg); }
	40%       { transform: rotate(8deg); }
	60%       { transform: rotate(-6deg); }
	80%       { transform: rotate(6deg); }
}
.mf-hover-shake .mf-social-link:hover .mf-icon-wrap {
	animation: mf-shake 0.5s ease;
}

/* Bounce */
@keyframes mf-bounce {
	0%, 100% { transform: translateY(0); }
	30%       { transform: translateY(-8px); }
	60%       { transform: translateY(-4px); }
}
.mf-hover-bounce .mf-social-link:hover .mf-icon-wrap {
	animation: mf-bounce 0.5s ease;
}

/* ============================================================
   Einblend-Animationen
   ============================================================ */
@keyframes mf-fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes mf-slideUp {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes mf-slideLeft {
	from { opacity: 0; transform: translateX(-20px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes mf-zoomIn {
	from { opacity: 0; transform: scale(0.6); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes mf-bounceIn {
	0%   { opacity: 0; transform: scale(0.3); }
	50%  { opacity: 1; transform: scale(1.05); }
	70%  { transform: scale(0.9); }
	100% { opacity: 1; transform: scale(1); }
}

.mf-animate-fadeIn .mf-social-item   { animation: mf-fadeIn 0.5s ease both; }
.mf-animate-slideUp .mf-social-item  { animation: mf-slideUp 0.5s ease both; }
.mf-animate-slideLeft .mf-social-item { animation: mf-slideLeft 0.5s ease both; }
.mf-animate-zoomIn .mf-social-item   { animation: mf-zoomIn 0.4s ease both; }
.mf-animate-bounceIn .mf-social-item { animation: mf-bounceIn 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; }

/* Stagger-Delay für Animationen */
.mf-social-item:nth-child(1)  { animation-delay: 0.05s; }
.mf-social-item:nth-child(2)  { animation-delay: 0.10s; }
.mf-social-item:nth-child(3)  { animation-delay: 0.15s; }
.mf-social-item:nth-child(4)  { animation-delay: 0.20s; }
.mf-social-item:nth-child(5)  { animation-delay: 0.25s; }
.mf-social-item:nth-child(6)  { animation-delay: 0.30s; }
.mf-social-item:nth-child(7)  { animation-delay: 0.35s; }
.mf-social-item:nth-child(8)  { animation-delay: 0.40s; }
.mf-social-item:nth-child(9)  { animation-delay: 0.45s; }
.mf-social-item:nth-child(10) { animation-delay: 0.50s; }

/* ============================================================
   Tooltip
   ============================================================ */
.mf-social-link[data-tooltip] {
	position: relative;
}
.mf-social-link[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: rgba(0,0,0,0.82);
	color: #fff;
	font-size: 11px;
	padding: 4px 8px;
	border-radius: 4px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 9999;
}
.mf-social-link[data-tooltip]:hover::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
	.mf-hide-mobile {
		display: none !important;
	}
	.mf-icon-wrap {
		width: calc(var(--mf-mobile-size) + var(--mf-padding) * 1.5);
		height: calc(var(--mf-mobile-size) + var(--mf-padding) * 1.5);
	}
	.mf-icon-wrap i {
		font-size: var(--mf-mobile-size);
	}
}