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

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

@media (max-width: 900px) {
	/* Stats row: 2 columns instead of 4 */
	.results-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Panels: single column */
	.results-panels {
		grid-template-columns: 1fr;
	}

	/* Gauge size adjustment */
	.density-gauge-svg {
		width: 140px;
		height: 140px;
	}
}

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

@media (max-width: 680px) {
	/* Breadcrumb font size - WCAG minimum 16px */
	.keyword-density-hero .breadcrumb {
		font-size: 1rem;
	}

	/* Word/character count - WCAG minimum 16px */
	.word-count,
	.char-count {
		font-size: 1rem;
	}

	/* Input hints and labels - WCAG minimum 16px */
	.input-hint {
		font-size: 1rem;
	}

	.selector-label {
		font-size: 1rem;
	}

	/* Input section adjustments */
	.keyword-density-input-section {
		margin-top: -16px;
		padding-bottom: 32px;
	}

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

	.content-textarea {
		font-size: 0.9375rem;
		min-height: 140px;
	}

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

	/* Content type selector stacks */
	.content-type-selector {
		flex-direction: column;
		align-items: flex-start;
	}

	.content-type-buttons {
		width: 100%;
	}

	.kd-content-type-btn {
		flex: 1;
		justify-content: center;
	}

	/* Analyze button full width */
	.input-actions {
		flex-direction: column;
	}

	.analyze-btn,
	.clear-btn {
		width: 100%;
	}

	/* All grid layouts to single column */
	.results-primary,
	.results-stats,
	.results-placement,
	.results-panels {
		grid-template-columns: 1fr;
	}

	/* Panel padding */
	.results-panel {
		padding: 1.25rem;
	}

	/* Content score display */
	.content-score-circle {
		width: 120px;
		height: 120px;
	}

	/* Placement map */
	.placement-bar {
		height: 40px;
	}

	/* Export buttons stack */
	.results-export {
		flex-direction: column;
	}

	.results-export .tool-export-btn {
		width: 100%;
		min-height: 44px; /* WCAG 2.2 AAA touch target */
		justify-content: center;
	}
}

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

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

	.content-textarea {
		font-size: 0.875rem;
		padding: 0.875rem;
	}

	.keyword-input {
		font-size: 0.9375rem;
	}

	.kd-content-type-btn {
		padding: 0.5rem 0.75rem;
		font-size: 0.8125rem;
	}

	.results-panel {
		padding: 1rem;
	}
}

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

@media print {
	.keyword-density-input-section,
	.results-export,
	.analyze-btn,
	.clear-btn,
	.toast,
	.occurrence-navigator {
		display: none !important;
	}

	.keyword-density-results-section {
		padding: 0;
	}

	.keyword-density-results-section[hidden] {
		display: block !important;
	}

	.results-dashboard {
		display: block;
	}

	.results-primary,
	.results-stats,
	.results-placement,
	.results-panels {
		display: block;
	}

	.results-panel {
		break-inside: avoid;
		margin-bottom: 1rem;
		box-shadow: none;
		border: 1px solid #ccc;
	}

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

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

@media (prefers-reduced-motion: reduce) {
	.content-textarea,
	.keyword-input,
	.content-type-btn,
	.analyze-btn,
	.clear-btn,
	.density-gauge-progress,
	.placement-dot,
	.match-fill {
		transition: none;
		animation: none;
	}

	.results-dashboard.loading .results-panel::after {
		animation: none;
	}
}

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

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

	.kd-content-type-btn--active {
		outline: 2px solid var(--kd-accent);
		outline-offset: 2px;
	}

	.keyword-highlight {
		border: 1px solid currentColor;
	}

	.results-panel {
		border-width: 2px;
	}
}