/**
 * Redirect page styles for External Link Accessibility plugin.
 *
 * @package WebberZone\External_Link_Accessibility
 * @since 1.0.0
 */

/* Force full-width layout and override theme constraints. */
body:has(.wzlw-redirect-container) .site-content,
body:has(.wzlw-redirect-container) .ast-container,
body:has(.wzlw-redirect-container) #primary,
body:has(.wzlw-redirect-container) .content-area {
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

body:has(.wzlw-redirect-container) #secondary,
body:has(.wzlw-redirect-container) .widget-area {
	display: none !important;
}

:root {
	--wzlw-color-text: #3a3a3a;
	--wzlw-color-text-muted: #666;
	--wzlw-color-text-subtle: #757575;
	--wzlw-color-surface: #fff;
	--wzlw-color-page-bg: #fafbfc;
	--wzlw-color-surface-muted: #f9fafb;
	--wzlw-color-border: #e5e7eb;
	--wzlw-color-border-accent: #0274be;
	--wzlw-color-link: #0274be;
	--wzlw-color-link-hover: #024a7e;
	--wzlw-color-on-primary: #fff;
	--wzlw-color-back-hover: #f3f4f6;
	--wzlw-radius-lg: 8px;
	--wzlw-radius-md: 6px;
	--wzlw-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
	--wzlw-shadow-card-soft: 0 1px 3px rgba(0, 0, 0, 0.08);
	--wzlw-shadow-primary-hover: 0 4px 12px rgba(2, 116, 190, 0.2);
	--wzlw-transition: all 0.2s ease;
}

.wzlw-redirect-container {
	padding: 4rem 2rem;
	margin: 0;
	background-color: var(--wzlw-color-page-bg);
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.wzlw-redirect-content {
	max-width: 700px;
	width: 100%;
	background-color: var(--wzlw-color-surface);
	border-radius: var(--wzlw-radius-lg);
	box-shadow: var(--wzlw-shadow-card-soft);
	padding: 2.5rem 2rem;
	text-align: center;
	animation: wzlw-redirect-fade-in 0.3s ease-out;
}

@keyframes wzlw-redirect-fade-in {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {

	.wzlw-redirect-content,
	.wzlw-redirect-countdown {
		animation: none;
	}

	.wzlw-redirect-button {
		transition: none;
	}
}

.wzlw-redirect-icon {
	margin: 0 auto 1.25rem;
	width: 56px;
	height: 56px;
	color: var(--wzlw-color-link);
	opacity: 0.9;
}

.wzlw-redirect-title {
	margin: 0 0 0.75rem;
	font-size: 1.75rem;
	font-weight: 600;
	color: var(--wzlw-color-text);
	line-height: 1.3;
}

.wzlw-redirect-message {
	margin: 0 0 1.75rem;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wzlw-color-text-muted);
}

.wzlw-redirect-url-container {
	margin: 0 0 2.5rem;
	padding: 1.5rem;
	background-color: var(--wzlw-color-surface-muted);
	border-radius: var(--wzlw-radius-md);
	border-left: 3px solid var(--wzlw-color-border-accent);
	text-align: left;
}

.wzlw-redirect-url-label {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wzlw-color-text-subtle);
}

.wzlw-redirect-url {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	font-weight: 600;
	word-break: break-word;
	color: var(--wzlw-color-text);
}

.wzlw-redirect-url-full {
	margin: 0;
	font-size: 0.8125rem;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	word-break: break-all;
	color: var(--wzlw-color-text-subtle);
	opacity: 0.8;
}

.wzlw-redirect-actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	margin-bottom: 1.5rem;
}

.wzlw-redirect-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border: none;
	border-radius: var(--wzlw-radius-md);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	transition: var(--wzlw-transition);
	cursor: pointer;
	line-height: 1.5;
}

/*
 * Buttons are anchors, so themes often override link/visited/hover colors.
 * We pin styles (with scoped selectors + minimal !important) to keep contrast accessible.
 */
.wzlw-redirect-content .wzlw-redirect-actions a.wzlw-redirect-button,
.wzlw-redirect-content .wzlw-redirect-actions a.wzlw-redirect-button:link,
.wzlw-redirect-content .wzlw-redirect-actions a.wzlw-redirect-button:visited,
.wzlw-redirect-content .wzlw-redirect-actions a.wzlw-redirect-button:hover,
.wzlw-redirect-content .wzlw-redirect-actions a.wzlw-redirect-button:focus,
.wzlw-redirect-content .wzlw-redirect-actions a.wzlw-redirect-button:focus-visible,
.wzlw-redirect-content .wzlw-redirect-actions a.wzlw-redirect-button:active {
	text-decoration: none !important;
}

.wzlw-redirect-button:focus {
	outline: 3px solid var(--wzlw-color-link);
	outline-offset: 2px;
}

.wzlw-redirect-continue {
	background-color: var(--wzlw-color-link);
	color: var(--wzlw-color-on-primary);
}

.wzlw-redirect-continue:hover {
	background-color: var(--wzlw-color-link-hover);
	color: var(--wzlw-color-on-primary);
	transform: translateY(-2px);
	box-shadow: var(--wzlw-shadow-primary-hover);
}

.wzlw-redirect-content .wzlw-redirect-actions a.wzlw-redirect-continue:link,
.wzlw-redirect-content .wzlw-redirect-actions a.wzlw-redirect-continue:visited,
.wzlw-redirect-content .wzlw-redirect-actions a.wzlw-redirect-continue:hover,
.wzlw-redirect-content .wzlw-redirect-actions a.wzlw-redirect-continue:focus,
.wzlw-redirect-content .wzlw-redirect-actions a.wzlw-redirect-continue:focus-visible,
.wzlw-redirect-content .wzlw-redirect-actions a.wzlw-redirect-continue:active {
	color: var(--wzlw-color-on-primary) !important;
	background-color: var(--wzlw-color-link) !important;
}

.wzlw-redirect-content .wzlw-redirect-actions a.wzlw-redirect-continue:hover {
	background-color: var(--wzlw-color-link-hover) !important;
}

.wzlw-redirect-content .wzlw-redirect-actions a.wzlw-redirect-continue:active {
	background-color: var(--wzlw-color-link-hover) !important;
}

.wzlw-redirect-back {
	background-color: transparent;
	color: var(--wzlw-color-text-muted);
	border: 1px solid var(--wzlw-color-border);
}

.wzlw-redirect-back:hover {
	background-color: var(--wzlw-color-back-hover);
	color: var(--wzlw-color-text);
	border-color: var(--wzlw-color-text-muted);
}

.wzlw-redirect-content .wzlw-redirect-actions a.wzlw-redirect-back:link,
.wzlw-redirect-content .wzlw-redirect-actions a.wzlw-redirect-back:visited {
	color: var(--wzlw-color-text-muted) !important;
	background-color: transparent !important;
	border-color: var(--wzlw-color-border) !important;
}

.wzlw-redirect-content .wzlw-redirect-actions a.wzlw-redirect-back:hover,
.wzlw-redirect-content .wzlw-redirect-actions a.wzlw-redirect-back:focus,
.wzlw-redirect-content .wzlw-redirect-actions a.wzlw-redirect-back:focus-visible {
	color: var(--wzlw-color-text) !important;
	background-color: var(--wzlw-color-back-hover) !important;
	border-color: var(--wzlw-color-text-muted) !important;
}

.wzlw-redirect-content .wzlw-redirect-actions a.wzlw-redirect-back:active {
	background-color: var(--wzlw-color-back-hover) !important;
}

.wzlw-redirect-countdown {
	margin: 0;
	font-size: 0.875rem;
	color: var(--wzlw-color-text-subtle);
	animation: wzlw-countdown-pulse 1s ease-in-out infinite;
}

@keyframes wzlw-countdown-pulse {
	0%, 100% {
		opacity: 1;
	}

	50% {
		opacity: 0.6;
	}
}

.wzlw-countdown-number {
	font-weight: 700;
	color: var(--wzlw-color-link);
}

/* Responsive adjustments. */
@media (max-width: 768px) {
	.wzlw-redirect-container {
		padding: 2rem 1rem;
		min-height: 50vh;
	}

	.wzlw-redirect-content {
		padding: 2rem 1.5rem;
	}

	.wzlw-redirect-title {
		font-size: 1.5rem;
	}

	.wzlw-redirect-message {
		font-size: 0.9375rem;
	}

	.wzlw-redirect-url-container {
		padding: 1.25rem;
	}

	.wzlw-redirect-actions {
		flex-direction: column;
		gap: 0.75rem;
	}

	.wzlw-redirect-button {
		width: 100%;
		justify-content: center;
	}
}