/**
 * Word Count Tool - 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 grid: 4 to 3 columns */
	.stats-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Gauges grid stays 2 columns */
	.gauges-grid {
		gap: 1.5rem;
	}
}

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

@media (max-width: 680px) {
	/* Interface Section */
	.word-count-interface-section {
		margin-top: -16px;
		padding-bottom: 32px;
	}

	.word-count-interface-card {
		padding: 1.5rem;
		border-radius: 16px;
	}

	/* Mode toggle: Stack vertically on very small screens */
	.mode-toggle {
		flex-direction: column;
	}

	.mode-toggle__btn {
		justify-content: center;
	}

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

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

	/* URL input wrapper */
	.url-input-wrapper {
		flex-direction: column;
	}

	.url-input {
		width: 100%;
	}

	.analyze-url-btn {
		width: 100%;
	}

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

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

	/* Results sections */
	.word-count-results {
		gap: 1.5rem;
	}

	.stats-section,
	.gauges-section,
	.goal-section,
	.keywords-section {
		padding: 1.25rem;
		border-radius: 14px;
	}

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

	.stats-grid .tool-stat__value {
		font-size: 1.5rem;
	}

	/* Gauges grid: 2 columns (smaller) */
	.gauges-grid {
		gap: 1rem;
	}

	.gauge-wrapper .tool-gauge--lg {
		--gauge-size-lg: 120px;
	}

	/* Goal input wrapper */
	.goal-input-wrapper {
		flex-direction: column;
		align-items: flex-start;
	}

	.goal-input {
		width: 100%;
	}

	.goal-set-btn,
	.goal-clear-btn {
		width: auto;
	}

	.goal-input-wrapper {
		gap: 0.5rem;
	}

	/* Goal buttons side by side */
	.goal-input-wrapper .goal-set-btn,
	.goal-input-wrapper .goal-clear-btn {
		flex: 1;
	}

	/* Keywords */
	.keywords-list {
		gap: 0.5rem;
	}

	.keyword-pill {
		padding: 0.375rem 0.75rem;
		font-size: 0.8125rem;
	}
}

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

@media (max-width: 375px) {
	.word-count-interface-card {
		padding: 1rem;
	}

	.content-textarea {
		padding: 0.875rem;
	}

	/* Stats grid: 1 column */
	.stats-grid {
		grid-template-columns: 1fr;
	}

	/* Gauges: 1 column */
	.gauges-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.gauge-wrapper .tool-gauge--lg {
		--gauge-size-lg: 140px;
	}

	/* Goal card */
	.goal-card {
		padding: 1rem;
	}

	.goal-progress-header {
		flex-wrap: wrap;
	}

	/* Keywords */
	.keyword-pill {
		flex: 1 1 calc(50% - 0.5rem);
		justify-content: center;
		min-width: 0;
	}
}

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

@media print {
	.mode-toggle,
	.input-actions,
	.goal-input-wrapper,
	.goal-set-btn,
	.goal-clear-btn,
	.toast,
	.url-input-area,
	.analyze-url-btn {
		display: none !important;
	}

	.word-count-interface-section {
		padding: 0;
		margin: 0;
	}

	.word-count-interface-card {
		box-shadow: none;
		border: 1px solid #ccc;
		padding: 1rem;
	}

	.word-count-results {
		gap: 1rem;
	}

	.stats-section,
	.gauges-section,
	.goal-section,
	.keywords-section {
		break-inside: avoid;
		box-shadow: none;
		border: 1px solid #ccc;
	}

	.stats-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.tool-gauge__progress {
		stroke: #333 !important;
	}

	.goal-progress-fill {
		background: #333 !important;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.content-textarea,
	.url-input,
	.goal-input,
	.analyze-url-btn,
	.goal-set-btn,
	.mode-toggle__btn,
	.tool-gauge__progress,
	.goal-progress-fill,
	.keyword-pill,
	.stats-grid .tool-stat__value {
		transition: none;
		animation: none;
	}

	.goal-progress[data-celebrating] {
		animation: none;
	}

	.keyword-pill--skeleton {
		animation: none;
		background: var(--tool-border);
	}
}

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

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

	.mode-toggle__btn--active {
		outline: 2px solid var(--word-count-accent);
		outline-offset: 2px;
	}

	.goal-progress-bar {
		border: 2px solid currentColor;
	}

	.keyword-pill {
		border-width: 2px;
	}

	.tool-gauge__track {
		stroke-width: 10;
	}

	.tool-gauge__progress {
		stroke-width: 10;
	}
}

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

.content-textarea:focus-visible,
.url-input:focus-visible,
.goal-input:focus-visible,
.analyze-url-btn:focus-visible,
.goal-set-btn:focus-visible,
.goal-clear-btn:focus-visible,
.mode-toggle__btn:focus-visible,
.btn-secondary:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible {
	outline: 2px solid var(--word-count-accent);
	outline-offset: 2px;
}

/* ============================================
   Touch Target Minimum Size (44x44px)
   ============================================ */

@media (pointer: coarse) {
	.btn-secondary,
	.btn-primary,
	.btn-ghost,
	.mode-toggle__btn,
	.analyze-url-btn,
	.goal-set-btn,
	.goal-clear-btn {
		min-height: 44px;
		min-width: 44px;
	}

	/* Ensure buttons have adequate padding for comfortable touch */
	.btn-secondary,
	.btn-primary {
		padding: 0.75rem 1rem;
	}

	.content-textarea,
	.url-input,
	.goal-input {
		padding: 1rem;
		min-height: 44px;
	}

	.keyword-pill {
		min-height: 44px;
		padding: 0.625rem 1rem;
	}

	/* Breadcrumb touch targets */
	.word-count-hero .breadcrumb a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0.5rem 0.25rem;
	}
}