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

:root {
	--wzlw-color-text: #1a1a1a;
	--wzlw-color-text-muted: #4a4a4a;
	--wzlw-color-indicator: #595959;
	--wzlw-color-surface: #fff;
	--wzlw-color-on-primary: #fff;
	--wzlw-color-surface-muted: #f5f5f5;
	--wzlw-color-border: #c3c4c7;
	--wzlw-color-border-strong: #8c8f94;
	--wzlw-color-button-muted: #f0f0f0;
	--wzlw-color-button-muted-hover: #d5d5d5;
	--wzlw-color-link: #2271b1;
	--wzlw-color-link-hover: #135e96;
	--wzlw-color-focus: #2271b1;
	--wzlw-modal-overlay-bg: rgba(0, 0, 0, 0.7);
	--wzlw-shadow-modal: 0 4px 20px rgba(0, 0, 0, 0.3);
	--wzlw-radius-sm: 4px;
	--wzlw-radius-md: 8px;
	--wzlw-transition: all 0.2s ease;
}

/* Screen reader only text. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

/* Visual indicators. */
.wzlw-icon {
	display: inline-block;
	margin-left: 0.25em;
	font-size: 0.875em;
	color: var(--wzlw-icon-color, var(--wzlw-color-indicator));
	background-color: var(--wzlw-icon-background, transparent);
	line-height: 1;
	vertical-align: middle;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	padding: 0.125em 0.25em;
	border-radius: 2px;
}

/* Icon content via CSS variable. */
.wzlw-icon::before {
	content: var(--wzlw-icon-content, "↗");
}

.wzlw-text {
	display: inline-block;
	margin-left: 0.25em;
	font-size: 0.875em;
	color: var(--wzlw-color-indicator);
}

/* Hide icons for links with wzlw-no-icon class. */
.wzlw-no-icon .wzlw-icon,
a.wzlw-no-icon .wzlw-icon {
	display: none !important;
}

/* Modal styles. */
.wzlw-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wzlw-modal[hidden] {
	display: none;
}

.wzlw-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--wzlw-modal-overlay-bg);
	cursor: pointer;
}

.wzlw-modal-container {
	position: relative;
	max-width: 90%;
	width: 500px;
	max-height: 90vh;
	overflow-y: auto;
	background-color: var(--wzlw-color-surface);
	border-radius: var(--wzlw-radius-md);
	box-shadow: var(--wzlw-shadow-modal);
	animation: wzlw-modal-slide-up 0.3s ease-out;
}

@keyframes wzlw-modal-slide-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

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

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

	.wzlw-modal-close-btn,
	.wzlw-modal-button {
		transition: none;
	}
}

.wzlw-modal-close-btn {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: none;
	background: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wzlw-color-indicator);
	cursor: pointer;
	border-radius: var(--wzlw-radius-sm);
	transition: var(--wzlw-transition);
}

.wzlw-modal-close-btn:hover {
	background-color: var(--wzlw-color-button-muted);
	color: var(--wzlw-color-text);
}

.wzlw-modal-close-btn:focus {
	outline: 2px solid var(--wzlw-color-focus);
	outline-offset: 2px;
}

.wzlw-modal-content {
	padding: 2rem;
}

.wzlw-modal-title {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--wzlw-color-text);
}

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

.wzlw-modal-url {
	margin: 0 0 1.5rem;
	padding: 0.75rem;
	background-color: var(--wzlw-color-surface-muted);
	border-radius: var(--wzlw-radius-sm);
	font-family: monospace;
	font-size: 0.875rem;
	word-break: break-all;
	color: var(--wzlw-color-link);
}

.wzlw-modal-actions {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
}

.wzlw-modal-button {
	padding: 0.625rem 1.25rem;
	border: none;
	border-radius: var(--wzlw-radius-sm);
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: var(--wzlw-transition);
}

/*
 * Buttons are theme-controlled in many setups. Pin our modal button colors for all states.
 * (Scoped selectors + minimal !important to keep accessible contrast.)
 */
.wzlw-modal button.wzlw-modal-button,
.wzlw-modal button.wzlw-modal-button:hover,
.wzlw-modal button.wzlw-modal-button:focus,
.wzlw-modal button.wzlw-modal-button:focus-visible,
.wzlw-modal button.wzlw-modal-button:active {
	text-decoration: none !important;
}

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

.wzlw-modal-cancel {
	background-color: var(--wzlw-color-button-muted);
	color: var(--wzlw-color-text);
	border: 1px solid var(--wzlw-color-border);
}

.wzlw-modal-cancel:hover {
	background-color: var(--wzlw-color-button-muted-hover);
	border-color: var(--wzlw-color-border-strong);
}

.wzlw-modal button.wzlw-modal-cancel,
.wzlw-modal button.wzlw-modal-cancel:focus,
.wzlw-modal button.wzlw-modal-cancel:focus-visible,
.wzlw-modal button.wzlw-modal-cancel:active {
	background-color: var(--wzlw-color-button-muted) !important;
	color: var(--wzlw-color-text) !important;
	border-color: var(--wzlw-color-border) !important;
}

.wzlw-modal button.wzlw-modal-cancel:hover {
	background-color: var(--wzlw-color-button-muted-hover) !important;
	color: var(--wzlw-color-text) !important;
	border-color: var(--wzlw-color-border-strong) !important;
}

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

.wzlw-modal-continue:hover {
	background-color: var(--wzlw-color-link-hover);
}

.wzlw-modal button.wzlw-modal-continue,
.wzlw-modal button.wzlw-modal-continue:focus,
.wzlw-modal button.wzlw-modal-continue:focus-visible,
.wzlw-modal button.wzlw-modal-continue:active {
	background-color: var(--wzlw-color-link) !important;
	color: var(--wzlw-color-on-primary) !important;
}

.wzlw-modal button.wzlw-modal-continue:hover {
	background-color: var(--wzlw-color-link-hover) !important;
	color: var(--wzlw-color-on-primary) !important;
}

/* Focus trap for accessibility. */
.wzlw-modal-active {
	overflow: hidden;
}

/* Responsive adjustments. */
@media (max-width: 600px) {
	.wzlw-modal-container {
		width: 95%;
		max-width: none;
	}

	.wzlw-modal-content {
		padding: 1.5rem;
	}

	.wzlw-modal-title {
		font-size: 1.25rem;
	}

	.wzlw-modal-actions {
		flex-direction: column-reverse;
	}

	.wzlw-modal-button {
		width: 100%;
	}
}