/* =============================================================================
   18-admin-toast.css — the "cache cleared" toast, shown to logged-in admins
   Auto-dismisses via the inline script beside where it is echoed in
   template_events_workshops.php. Last in the cascade because it floats over
   everything and should never be overridden by a page.
   ============================================================================= */

.jobshop_admin_toast {
	position: fixed;
	top: 0.75rem;
	right: 1.25rem;
	z-index: 99999;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	max-width: 420px;
	padding: 0.75rem 0.875rem;
	border: 1px solid #34a853;
	border-radius: 8px;
	background: #e6f4ea;
	color: #1e4620;
	font-size: 1rem;
	line-height: 1.4;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	animation: jobshop_toast_in 0.2s ease-out;
}

/* WordPress's admin bar sits at the top at these same heights — drop below it
   rather than overlapping it. 782px is WordPress's own breakpoint, where the
   admin bar gets taller, not one of the theme's. */
body.admin-bar .jobshop_admin_toast {
	top: 2.75rem;
}

@media screen and (max-width: 782px) {
	body.admin-bar .jobshop_admin_toast {
		top: 3.625rem;
	}
}

.jobshop_admin_toast_icon {
	font-weight: bold;
}

.jobshop_admin_toast_text {
	flex: 1;
}

.jobshop_admin_toast_close {
	background: none;
	border: none;
	font-size: 1.125rem;
	line-height: 1;
	color: inherit;
	cursor: pointer;
	padding: 0 2px;
	opacity: 0.6;
}

.jobshop_admin_toast_close:hover,
.jobshop_admin_toast_close:focus-visible {
	opacity: 1;
}

.jobshop_admin_toast_hide {
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}

@keyframes jobshop_toast_in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.jobshop_admin_toast {
		animation: none;
	}

	.jobshop_admin_toast_hide {
		transition: none;
	}
}