/* Marks the trigger <li> as the positioning anchor for its panel. */
.zwmm-has-panel {
	position: relative;
}

/* Fixed (not absolute) is deliberate here — position:absolute centers
   relative to its containing block, which is the trigger <li> itself,
   not the viewport. That meant the panel centered around wherever the
   nav item happened to sit, not the actual middle of the screen —
   shifting off one edge or the other depending on viewport width.
   position:fixed is always relative to the viewport, which is what
   "centered at whatever width the browser reports" actually requires.
   Vertical position (top) is set by JS based on the header's actual
   bottom edge, since percentage top values on a fixed element are
   relative to viewport height, not "below this element" the way they
   were with absolute positioning. */
.zwmm-panel {
	position: fixed;
	left: 0;
	right: 0;
	width: auto;

	background: var(--wp--preset--color--base, #faf8f5);
	border-top: 1px solid var(--wp--preset--color--contrast, #1c1b1a);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	pointer-events: none;

	z-index: 100;
}

.zwmm-panel.zwmm-panel-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.zwmm-panel-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 48px;
	display: flex;
	gap: 48px;
}

.zwmm-columns {
	display: flex;
	gap: 40px;
	flex: 1 1 auto;
}

.zwmm-column-heading {
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #1c1b1a);
	margin: 0 0 12px;
}

.zwmm-column-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.zwmm-column-links li {
	margin-bottom: 8px;
}

.zwmm-column-links a {
	font-size: 14px;
	color: var(--wp--preset--color--contrast, #1c1b1a);
	text-decoration: none;
}

.zwmm-column-links a:hover {
	color: var(--wp--preset--color--accent, #1d3557);
	text-decoration: underline;
}

/* Deliberately capped at a small number by the admin editor's own
   guidance, not enforced here — but the layout itself stays modest
   too, so even if someone adds many tiles, it doesn't stretch into an
   unrestrained grid. */
.zwmm-tiles {
	display: flex;
	gap: 20px;
	flex: 0 0 auto;
}

.zwmm-tile {
	display: block;
	width: 160px;
	text-decoration: none;
	color: var(--wp--preset--color--contrast, #1c1b1a);
}

.zwmm-tile img {
	width: 100%;
	height: 120px;
	object-fit: cover;
	border-radius: 4px;
	margin-bottom: 8px;
	display: block;
}

.zwmm-tile-label {
	font-size: 13px;
	font-weight: 500;
}