/**
 * Site-wide toast notifications.
 *
 * @package Zenova_Child
 */

/*
 * The region spans the full viewport width and the toast aligns to its right
 * edge, so a long message wraps instead of running off screen. Nothing here
 * clips: `overflow: hidden` turns a box into a scroll container, which kills
 * `position: sticky` for anything inside it — the reason `.zenova-home-products`
 * uses `clip`. This region holds only fixed-position content today, but a rule
 * that has to be re-reasoned every time something is nested in it is a trap.
 */
.zenova-toast-region {
	position: fixed;
	top: 1rem;
	right: 1rem;
	left: 1rem;
	/* Above the fixed site header (z-index 200) and its mobile panel (190). */
	z-index: 300;
	display: flex;
	justify-content: flex-end;
	/* The region covers the page width; only the toast itself takes clicks. */
	pointer-events: none;
}

body.admin-bar .zenova-toast-region {
	top: calc(1rem + var(--wp-admin--admin-bar--height, 32px));
}

.zenova-toast {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	max-width: 34rem;
	padding: 1.25rem 1.5rem;
	border-radius: var(--zenova-radius, 8px);
	background: #1a1a1a;
	color: #ffffff;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
	pointer-events: auto;
	opacity: 0;
	transform: translateY(-0.5rem);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.zenova-toast.is-visible {
	opacity: 1;
	transform: none;
}

/*
 * Both forms are dark-on-white per the reference, so the only thing separating
 * "done" from "you missed something" would be reading the sentence. The edge
 * says which one it is before the text is read.
 */
.zenova-toast--error {
	border-left: 4px solid #e0483c;
}

.zenova-toast__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.zenova-toast__message {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.4;
}

.zenova-toast__link {
	align-self: flex-start;
	color: #ffffff;
	font-size: 1rem;
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.zenova-toast__link:hover,
.zenova-toast__link:focus,
.zenova-toast__link:focus-visible {
	color: #ffffff;
	text-decoration: underline;
}

.zenova-toast__close {
	flex: none;
	margin: 0;
	padding: 0.25rem;
	border: 0;
	border-radius: 2px;
	background: none;
	box-shadow: none;
	color: rgba(255, 255, 255, 0.7);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.zenova-toast__close:hover,
.zenova-toast__close:focus,
.zenova-toast__close:focus-visible {
	background: none;
	color: #ffffff;
}

.zenova-toast__close:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

@media (max-width: 640px) {
	.zenova-toast {
		max-width: 100%;
		gap: 1rem;
		padding: 1rem 1.125rem;
	}

	.zenova-toast__message {
		font-size: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.zenova-toast {
		opacity: 1;
		transform: none;
		transition: none;
	}
}