/* Wiexenspei Header Manager - frontend styles
   Values for --frame-inset / --tile / --gap-min come from the plugin settings. */

#headermain.whm-header {
	--frame-inset: 40px;
	--tile: 50px;
	--gap-min: 8px;

	/* Set by JS from the border image size - do not edit */
	--tile-w: 50px;
	--tile-h: 50px;
	--frame-gap: 8px;

	--inner-x: calc(var(--frame-inset) + var(--tile-w) + var(--frame-gap));
	--inner-y: calc(var(--frame-inset) + var(--tile-h) + var(--frame-gap));
}

/* ---------- Border frame ---------- */
#headermain.whm-header .border-top,
#headermain.whm-header .border-bottom,
#headermain.whm-header .border-left,
#headermain.whm-header .border-right {
	position: absolute;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	line-height: 0;
	z-index: 5;
	pointer-events: none;
}

#headermain.whm-header .border-top,
#headermain.whm-header .border-bottom {
	left: var(--frame-inset);
	right: var(--frame-inset);
	width: auto;
	height: var(--tile-h);
}
#headermain.whm-header .border-top { top: var(--frame-inset); bottom: auto; }
#headermain.whm-header .border-bottom { bottom: var(--frame-inset); top: auto; }

#headermain.whm-header .border-left,
#headermain.whm-header .border-right {
	top: var(--frame-inset);
	bottom: var(--frame-inset);
	height: auto;
	width: var(--tile-w);
}
#headermain.whm-header .border-left { left: var(--frame-inset); right: auto; }
#headermain.whm-header .border-right { right: var(--frame-inset); left: auto; }

#headermain.whm-header .frame-tile {
	position: absolute;
	display: block;
	width: var(--tile-w);
	height: var(--tile-h);
	max-width: none;
	max-height: none;
	margin: 0;
	pointer-events: auto;
	cursor: pointer;
}

/* ---------- Content inside the frame (setting: "Fit content inside frame") ---------- */
#headermain.whm-header.whm-fit .marquee-container {
	position: absolute;
	top: var(--inner-y);
	left: var(--inner-x);
	right: var(--inner-x);
	bottom: auto;
	width: auto;
	margin: 0;
	z-index: 6;
}
#headermain.whm-header.whm-fit .menu-container {
	position: absolute;
	bottom: var(--inner-y);
	left: var(--inner-x);
	right: var(--inner-x);
	top: auto;
	width: auto;
	margin: 0;
	z-index: 6;
}

/* ---------- Built-in marquee animation (optional) ---------- */
#headermain.whm-header .whm-marquee-anim { overflow: hidden; }
#headermain.whm-header .whm-marquee-anim .marquee-track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	animation: whm-marquee var(--whm-marquee-speed, 40s) linear infinite;
}
#headermain.whm-header .whm-marquee-anim.whm-marquee-right .marquee-track { animation-direction: reverse; }
#headermain.whm-header .whm-marquee-anim .marquee-track > * { flex: 0 0 auto; }

@keyframes whm-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	#headermain.whm-header .whm-marquee-anim .marquee-track { animation: none; }
}