/**
 * Readability Analyzer - Responsive Styles
 *
 * Media queries for tablet, mobile, and small devices.
 * Also includes print and accessibility overrides.
 *
 * @package AgenticWP
 */

/* ============================================
   Tablet (900px)
   ============================================ */

@media (max-width: 900px) {
	/* Results Grid: Stack to 2 columns */
	.results-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
	}

	.results-score-card {
		grid-column: 1;
		grid-row: 1;
	}

	.results-traffic-card {
		grid-column: 2;
		grid-row: 1;
	}

	.results-metrics-card {
		grid-column: 1 / 3;
		grid-row: 2;
	}

	.results-quality-card {
		grid-column: 1 / 3;
		grid-row: 3;
	}

	.results-rhythm-card {
		grid-column: 1 / 3;
		grid-row: 4;
	}

	/* Metrics grid: 4 columns */
	.metrics-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Quality grid: 2 columns */
	.quality-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Benchmark bars */
	.benchmark-bar {
		grid-template-columns: 120px 1fr 35px;
	}
}

/* ============================================
   Mobile (680px)
   ============================================ */

@media (max-width: 680px) {
	/* Input Section */
	.readability-input-section {
		margin-top: -16px;
		padding-bottom: 32px;
	}

	.readability-input-card {
		padding: 1.5rem;
		border-radius: 16px;
	}

	.content-textarea {
		min-height: 150px;
	}

	.input-meta {
		flex-direction: column;
		align-items: flex-start;
	}

	.audience-selector {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}

	.audience-select-wrapper {
		width: 100%;
		max-width: 100%;
	}

	.audience-select {
		width: 100%;
		max-width: 100%;
	}

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

	.action-group-left,
	.action-group-center,
	.action-group-right {
		width: 100%;
		justify-content: center;
	}

	.analyze-btn {
		width: 100%;
	}

	/* Results Grid: Single column */
	.results-grid {
		grid-template-columns: 1fr;
	}

	.results-score-card,
	.results-traffic-card,
	.results-metrics-card,
	.results-quality-card,
	.results-rhythm-card {
		grid-column: 1;
		grid-row: auto;
	}

	/* Cards */
	.results-score-card,
	.results-traffic-card,
	.results-metrics-card,
	.results-quality-card,
	.results-rhythm-card,
	.annotated-card,
	.benchmarks-card {
		padding: 1.25rem;
	}

	/* Score Circle */
	.score-circle {
		width: 140px;
		height: 140px;
	}

	.score-number {
		font-size: 2rem;
	}

	/* Metrics grid: 2 columns */
	.metrics-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Quality grid: 1 column */
	.quality-grid {
		grid-template-columns: 1fr;
	}

	/* Filter toggles */
	.annotated-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.filter-toggles {
		width: 100%;
	}

	.filter-toggle {
		flex: 1;
		justify-content: center;
	}

	/* Issue legend */
	.issue-legend {
		gap: 0.75rem;
	}

	/* Benchmark bars */
	.benchmark-bar {
		grid-template-columns: 100px 1fr 30px;
		gap: 0.5rem;
	}

	.bar-icon {
		display: none;
	}

	.bar-name {
		font-size: 0.8125rem;
	}

	/* Popover: Full width on mobile (bottom sheet style) */
	.suggestion-popover {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: auto;
		width: 100%;
		max-width: 100%;
		border-radius: 16px 16px 0 0;
		max-height: 70vh;
		overflow-y: auto;
		will-change: transform;
	}

	/* Swipe indicator handle for mobile popover */
	.suggestion-popover::before {
		content: '';
		display: block;
		width: 36px;
		height: 4px;
		background: var(--line);
		border-radius: 2px;
		margin: 8px auto 0;
	}

	/* Ensure popover header accommodates handle */
	.suggestion-popover .popover-header {
		padding-top: 0.5rem;
	}
}

/* ============================================
   Small Mobile (375px)
   ============================================ */

@media (max-width: 375px) {
	.readability-input-card {
		padding: 1rem;
	}

	.content-textarea {
		padding: 0.875rem;
	}

	.score-circle {
		width: 120px;
		height: 120px;
	}

	.score-number {
		font-size: 1.75rem;
	}

	.metrics-grid {
		grid-template-columns: 1fr;
	}

	.benchmark-bar {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}

	.bar-track {
		order: 2;
	}

	.bar-score {
		order: 1;
		text-align: left;
	}

	.filter-toggle {
		padding: 0.375rem 0.5rem;
		font-size: 0.6875rem;
	}

	.filter-toggle .filter-dot {
		width: 6px;
		height: 6px;
	}
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
	.readability-input-section,
	.suggestion-popover,
	.analyze-btn,
	.filter-toggles,
	.rhythm-info,
	.benchmark-info {
		display: none !important;
	}

	.readability-results-section,
	.readability-annotated-section,
	.readability-benchmarks-section {
		padding: 0;
	}

	.readability-results-section[hidden],
	.readability-annotated-section[hidden],
	.readability-benchmarks-section[hidden] {
		display: block !important;
	}

	.results-grid {
		display: block;
	}

	.results-score-card,
	.results-traffic-card,
	.results-metrics-card,
	.results-quality-card,
	.results-rhythm-card,
	.annotated-card,
	.benchmarks-card {
		break-inside: avoid;
		margin-bottom: 1rem;
		box-shadow: none;
		border: 1px solid #ccc;
	}

	.score-ring-progress {
		stroke: #000 !important;
	}

	.highlight {
		background: none !important;
		border-bottom: 1px solid #000;
	}

	.rhythm-chart {
		border: 1px solid #ccc;
		padding: 0.5rem;
	}

	.rhythm-bar {
		background: #666 !important;
	}
}

/* ============================================
   Accessibility: Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
	.content-textarea,
	.audience-select,
	.analyze-btn,
	.filter-toggle,
	.score-ring-progress,
	.metric-bar-fill,
	.quality-bar-fill,
	.bar-fill,
	.user-score-marker,
	.rhythm-bar,
	.highlight,
	.suggestion-popover,
	.results-score-card,
	.results-traffic-card,
	.results-metrics-card,
	.results-quality-card,
	.results-rhythm-card {
		transition: none;
		animation: none;
	}

	.results-score-card,
	.results-traffic-card,
	.results-metrics-card,
	.results-quality-card,
	.results-rhythm-card {
		opacity: 1;
	}

	#readability-blob-1,
	#readability-blob-2,
	#readability-blob-3,
	#readability-blob-4,
	#readability-blob-5 {
		animation: none;
	}
}

/* ============================================
   High Contrast Mode Support
   ============================================ */

@media (prefers-contrast: high) {
	.content-textarea {
		border-width: 3px;
	}

	.filter-toggle.active {
		outline: 2px solid var(--readability-accent);
		outline-offset: 2px;
	}

	.highlight {
		border-bottom-width: 3px;
	}

	.traffic-indicator {
		border: 2px solid currentColor;
	}

	.score-ring-bg {
		stroke-width: 10;
	}

	.score-ring-progress {
		stroke-width: 10;
	}
}

/* ============================================
   Focus Visible States
   ============================================ */

.content-textarea:focus-visible,
.audience-select:focus-visible,
.analyze-btn:focus-visible,
.filter-toggle:focus-visible,
.highlight:focus-visible,
.metric-info-btn:focus-visible,
.info-toggle:focus-visible,
.btn-secondary:focus-visible,
.btn-primary:focus-visible,
.issue-highlight:focus-visible,
.popover-close:focus-visible,
.toggle-all-filters:focus-visible,
.card-info-btn:focus-visible,
.rhythm-bar:focus-visible {
	outline: 2px solid var(--readability-accent);
	outline-offset: 2px;
}

/* Skip link for tool content */
.skip-to-tool {
	position: absolute;
	top: -40px;
	left: 0;
	background: var(--readability-accent);
	color: #fff;
	padding: 8px 16px;
	z-index: 1000;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 8px 0;
	transition: top 0.2s ease;
}

.skip-to-tool:focus {
	top: 0;
}

/* Touch target minimum size (44x44px) */
@media (pointer: coarse) {
	.btn-secondary,
	.btn-primary,
	.filter-toggle,
	.metric-info-btn,
	.info-toggle,
	.popover-close,
	.card-info-btn,
	.toggle-all-filters,
	.analyze-btn,
	.issue-highlight {
		min-height: 44px;
		min-width: 44px;
	}

	/* Override explicit dimensions for info buttons */
	.metric-info-btn,
	.card-info-btn {
		width: 44px;
		height: 44px;
	}

	/* Ensure analyze button has adequate touch area */
	.analyze-btn {
		padding: 1rem 2rem;
	}

	/* Increase filter toggle padding for easier tapping */
	.filter-toggle {
		padding: 0.625rem 1rem;
	}

	/* Larger touch area for issue highlights */
	.issue-highlight {
		padding: 4px 6px;
		margin: 0 -3px;
	}

	/* Audience select needs adequate height */
	.audience-select {
		min-height: 44px;
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}

	/* Textarea should have good touch padding */
	.content-textarea {
		padding: 1rem;
	}

	/* Breadcrumb links need adequate touch area */
	.readability-hero .breadcrumb a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0.5rem;
		margin: -0.5rem;
	}
}