/* Floating Menu (Kern-stil) – inline element */
.kfm {
	--kfm-bg: rgba(10, 10, 10, 0.35);
	--kfm-blur: 10px;
	--kfm-radius: 5px;
	--kfm-text: #fff;
	--kfm-muted: color-mix(in srgb, var(--kfm-text) 80%, transparent);
	--kfm-hover: #ccc;
	--kfm-width: 300px;
	--kfm-bar: 40px;
	--kfm-ease: cubic-bezier(0.44, 0, 0.56, 1);

	position: relative;
	z-index: 999;
	width: var(--kfm-width);
	max-width: 100%;
	height: var(--kfm-bar); /* only the bar takes up space – the open panel floats over content */
	font-family: inherit;
	-webkit-font-smoothing: antialiased;
}
.kfm--right  { margin-left: auto; }
.kfm--center { margin-left: auto; margin-right: auto; }

.kfm *, .kfm *::before, .kfm *::after { box-sizing: border-box; }

.kfm__panel {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: var(--kfm-bg-x);
	-webkit-backdrop-filter: blur(var(--kfm-blur));
	backdrop-filter: blur(var(--kfm-blur));
	border-radius: var(--kfm-radius);
	color: var(--kfm-text-x);
}

/* Light / reversed theme – for white pages */
.kfm--light {
	--kfm-bg: rgba(10, 10, 10, 0.07);
	--kfm-text: #0a0a0a;
	--kfm-muted: #555;
	--kfm-hover: #777;
}
/* Auto: dark on the front page, light on sub pages */
body:not(.home) .kfm--auto {
	--kfm-bg: rgba(10, 10, 10, 0.07);
	--kfm-text: #0a0a0a;
	--kfm-muted: #555;
	--kfm-hover: #777;
}
/* Colours chosen in the Elementor widget (--kfm-c-*) win over the themes */
.kfm .kfm__panel,
.kfm .kfm__panel * {
	--kfm-bg-x: var(--kfm-c-bg, var(--kfm-bg));
	--kfm-text-x: var(--kfm-c-text, var(--kfm-text));
	--kfm-hover-x: var(--kfm-c-hover, var(--kfm-hover));
}

/* The bar – whole bar is the toggle */
.kfm .kfm__top {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: var(--kfm-bar);
	padding: 0 14px;
	cursor: pointer;
	color: var(--kfm-text-x) !important;
	background: transparent !important;
	border-radius: var(--kfm-radius);
}
.kfm .kfm__top:focus-visible { outline: 1px solid var(--kfm-text-x); outline-offset: 2px; }

.kfm__label { color: var(--kfm-text-x); }
.kfm__label,
.kfm__place,
.kfm__time {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.012em;
	text-transform: uppercase;
}

/* 4-square icon that turns into an X */
.kfm__icon {
	position: relative;
	width: 12px;
	height: 12px;
	display: block;
	flex: none;
}
.kfm__icon i {
	position: absolute;
	width: 5px;
	height: 5px;
	background: var(--kfm-text-x) !important;
	border: 0 !important;
	transition: transform 0.4s var(--kfm-ease), width 0.4s var(--kfm-ease), height 0.4s var(--kfm-ease), top 0.4s var(--kfm-ease), left 0.4s var(--kfm-ease);
}
.kfm__icon i:nth-child(1) { top: 0; left: 0; }
.kfm__icon i:nth-child(2) { top: 0; left: 7px; }
.kfm__icon i:nth-child(3) { top: 7px; left: 0; }
.kfm__icon i:nth-child(4) { top: 7px; left: 7px; }
.kfm[data-open="true"] .kfm__icon i { width: 14px; height: 2px; top: 5px; left: -1px; }
.kfm[data-open="true"] .kfm__icon i:nth-child(odd)  { transform: rotate(45deg); }
.kfm[data-open="true"] .kfm__icon i:nth-child(even) { transform: rotate(-45deg); }

/* Expanding body */
.kfm__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.5s var(--kfm-ease);
}
.kfm[data-open="true"] .kfm__body { grid-template-rows: 1fr; }
.kfm__inner {
	overflow: hidden;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 0 14px;
	opacity: 0;
	transition: opacity 0.3s var(--kfm-ease), padding 0.5s var(--kfm-ease);
}
.kfm[data-open="true"] .kfm__inner {
	opacity: 1;
	padding: 24px 14px 16px;
	transition-delay: 0.1s, 0s;
}

.kfm .kfm__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.kfm .kfm__links li {
	margin: 0;
	padding: 0;
	transform: translateY(8px);
	opacity: 0;
	transition: transform 0.4s var(--kfm-ease), opacity 0.4s var(--kfm-ease);
}
.kfm .kfm__links li::before { display: none; }
.kfm .kfm__links a {
	display: inline-block;
	color: var(--kfm-text-x);
	text-decoration: none;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	transition: color 0.2s ease;
}
.kfm .kfm__links a:hover,
.kfm .kfm__links a:focus-visible,
.kfm .kfm__links .current-menu-item > a,
.kfm .kfm__links .current_page_item > a { color: var(--kfm-hover-x); }

.kfm[data-open="true"] .kfm__links li { transform: none; opacity: 1; }
.kfm[data-open="true"] .kfm__links li:nth-child(1) { transition-delay: 0.10s; }
.kfm[data-open="true"] .kfm__links li:nth-child(2) { transition-delay: 0.14s; }
.kfm[data-open="true"] .kfm__links li:nth-child(3) { transition-delay: 0.18s; }
.kfm[data-open="true"] .kfm__links li:nth-child(4) { transition-delay: 0.22s; }
.kfm[data-open="true"] .kfm__links li:nth-child(5) { transition-delay: 0.26s; }
.kfm[data-open="true"] .kfm__links li:nth-child(n+6) { transition-delay: 0.30s; }

.kfm__meta { display: flex; align-items: center; gap: 10px; }
.kfm__img { width: 50px; height: 35px; object-fit: cover; border-radius: 3px; display: block; }
.kfm__meta-text { display: flex; flex-direction: column; gap: 4px; }
.kfm__place { color: var(--kfm-muted); }
.kfm__time  { color: var(--kfm-text-x); min-height: 18px; }

@media (prefers-reduced-motion: reduce) {
	.kfm *, .kfm *::before, .kfm *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

/* Lifted out of a blending header (see float-menu.js) */
.kfm-placeholder {
	width: var(--kfm-width, 300px);
	max-width: 100%;
	height: 40px;
	pointer-events: none;
}
.kfm.kfm--portal {
	position: fixed;
	z-index: 10000;
	margin: 0;
	max-width: none;
}

/* Mobile: narrower so it lines up with the logo (Elementor widget width overrides this) */
@media (max-width: 767px) {
	.kfm, .kfm-placeholder { width: var(--kfm-width-mobile, var(--kfm-width, 200px)); }
}