/**
 * Common styles shared across all Pendari Content Widgets
 * 
 * Designed for AAA accessibility compliance with:
 * - High contrast support
 * - Reduced motion support
 * - Keyboard navigation
 * - Screen reader optimization
 */

/* CSS Variables for theming - can be overridden by themes */
:root {
	--pendari-widget-primary-color: currentColor;
	--pendari-widget-focus-color: #0073aa;
	--pendari-widget-text-color: #1a1a1a;
	--pendari-widget-link-color: #005177;
}

.pendari-widget {
	margin-bottom: 24px;
	max-width: 100%;
}

.pendari-widget * {
	box-sizing: border-box;
}

.pendari-widget img {
	max-width: 100%;
	height: auto;
}

/* Common typography resets */
.pendari-widget p,
.pendari-widget h1,
.pendari-widget h2,
.pendari-widget h3,
.pendari-widget h4,
.pendari-widget h5,
.pendari-widget h6 {
	margin-top: 0;
}

/* Focus styles for keyboard navigation - AAA compliant */
.pendari-widget a:focus,
.pendari-widget button:focus,
.pendari-widget [tabindex]:focus {
	outline: 3px solid var(--pendari-widget-focus-color);
	outline-offset: 2px;
}

/* Prevent external link styling from affecting widget titles and subtitles */
.pendari-widget .pendari-widget-link .pendari-widget-title,
.pendari-widget .pendari-widget-link .pendari-widget-subtitle,
.pendari-widget a.pendari-widget-link .pendari-widget-title,
.pendari-widget a.pendari-widget-link .pendari-widget-subtitle {
	text-decoration: none !important;
}

/* Ensure sufficient color contrast for all text - AAA level */
.pendari-widget {
	color: var(--pendari-widget-text-color);
}

.pendari-widget a {
	color: var(--pendari-widget-link-color);
	text-decoration: underline;
	text-decoration-skip-ink: auto;
}

.pendari-widget a:hover,
.pendari-widget a:focus {
	text-decoration-thickness: 2px;
}

/* Skip link for screen readers */
.pendari-widget-skip-link {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pendari-widget-skip-link:focus {
	position: static;
	width: auto;
	height: auto;
}

/* Utility classes */
.pendari-widget.full-width {
	max-width: 100%;
	width: 100%;
}

.pendari-widget.centered {
	margin-left: auto;
	margin-right: auto;
}

/* Responsive container widths */
@media (min-width: 1400px) {
	.pendari-widget:not(.full-width) {
		max-width: 1400px;
	}
}

/* Screen reader only content */
.pendari-widget .sr-only,
.pendari-widget .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.pendari-widget .sr-only:focus,
.pendari-widget .screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	padding: inherit;
	margin: inherit;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.pendari-widget {
		border: 2px solid currentColor;
	}
	
	.pendari-widget a {
		text-decoration: underline;
		text-decoration-thickness: 2px;
	}
}

/* Forced colors mode (Windows High Contrast) */
@media (forced-colors: active) {
	.pendari-widget {
		border: 1px solid CanvasText;
	}
	
	.pendari-widget a {
		color: LinkText;
	}
	
	.pendari-widget a:hover,
	.pendari-widget a:focus {
		color: LinkText;
		text-decoration: underline;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.pendari-widget,
	.pendari-widget *,
	.pendari-widget *::before,
	.pendari-widget *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
	.pendari-widget {
		color: #f0f0f0;
	}
	
	.pendari-widget a {
		color: #5eb0ef;
	}
	
	.pendari-widget a:hover,
	.pendari-widget a:focus {
		color: #8fc5f2;
	}
}

/* Ensure minimum tap target size on touch devices (44x44px minimum) */
@media (hover: none) and (pointer: coarse) {
	.pendari-widget a,
	.pendari-widget button,
	.pendari-widget [role="button"] {
		min-height: 44px;
		min-width: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* Print styles */
@media print {
	.pendari-widget {
		page-break-inside: avoid;
		break-inside: avoid;
	}
	
	.pendari-widget a {
		text-decoration: underline;
	}
	
	.pendari-widget a[href^="http"]:after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
	}
}