/**
 * Headline 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 {
		grid-template-columns: 1fr;
	}

	.results-score-card,
	.results-preview-card,
	.results-breakdown-card,
	.results-tips-card,
	.results-comparison-card,
	.results-share-card {
		grid-column: span 1;
	}

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

	.breakdown-bar {
		grid-template-columns: 70px 1fr 40px;
	}
}

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

@media (max-width: 680px) {
	.headline-input-section {
		margin-top: -16px;
		padding-bottom: 32px;
	}

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

	.headline-textarea {
		font-size: 1.125rem;
		min-height: 80px;
	}

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

	.platform-selector {
		flex-direction: column;
		align-items: flex-start;
	}

	.platform-buttons {
		width: 100%;
	}

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

	.analyze-btn {
		width: 100%;
	}

	/* Fix horizontal overflow - Results grid and cards */
	.results-grid {
		max-width: 100%;
		overflow: hidden;
		scroll-margin-top: calc(var(--header-height, 80px) + 1rem);
	}

	.results-score-card,
	.results-preview-card,
	.results-breakdown-card,
	.results-tips-card,
	.results-comparison-card,
	.results-share-card {
		padding: 1.25rem;
		min-width: 0;
		max-width: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}

	/* Fix horizontal overflow - Preview and breakdown content */
	.headline-highlight,
	.highlighted-text {
		max-width: 100%;
		overflow-wrap: break-word;
		word-break: break-word;
	}

	/* Preview tabs - constrain to card width */
	.preview-tabs {
		gap: 0.25rem;
	}

	/* Email preview - constrain to card bounds */
	.email-preview {
		width: 100%;
		overflow: hidden;
	}

	/* Email preview text overflow handling */
	.email-subject,
	.email-snippet {
		word-break: break-word;
	}

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

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

	.highlighted-text {
		font-size: 1.125rem;
	}

	.highlight-legend {
		gap: 0.75rem;
	}

	.breakdown-bar {
		grid-template-columns: 60px 1fr 35px;
		gap: 0.5rem;
	}

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

	.share-actions {
		flex-direction: column;
	}

	.share-actions .btn {
		width: 100%;
		justify-content: center;
	}
}

/* ============================================
   Mobile Bottom-Sheet Popover (680px)
   ============================================ */

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

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

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

	/* Backdrop overlay for mobile popover */
	.word-popover-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: calc(var(--tool-z-dropdown) - 1);
	}
}

/* Safe area inset support for notched devices */
@supports (padding: env(safe-area-inset-bottom)) {
	@media (max-width: 680px) {
		.word-popover {
			padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
		}
	}
}

/* ============================================
   Touch Devices & Mobile Touch Targets
   ============================================ */

@media (pointer: coarse), (max-width: 680px) {
	/* Platform buttons - 44px minimum touch target */
	.platform-btn {
		min-height: 44px;
		min-width: 44px;
	}

	/* Preview tabs - 44px minimum touch target */
	.preview-tab {
		min-height: 44px;
	}

	/* Type info button - 44px touch target */
	.type-info-btn {
		width: 44px;
		height: 44px;
		margin: -10px; /* Expand clickable area without affecting layout */
		padding: 10px;
	}

	/* Accuracy toggle - 44px touch target */
	.accuracy-toggle {
		min-height: 44px;
		padding: 0.5rem 0.75rem;
	}

	/* Footer subscribe submit - 44px touch target */
	.footer-subscribe-submit {
		min-height: 44px;
	}

	/* Mobile menu toggle - 44px touch target */
	.mobile-menu-toggle {
		min-width: 44px;
		min-height: 44px;
	}

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

	/* Footer nav links - 44px touch target */
	.footer-inner nav a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0.5rem 0.25rem;
	}
}

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

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

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

	/* Fix horizontal overflow - Platform buttons */
	.platform-buttons {
		flex-wrap: wrap;
	}

	.platform-btn {
		padding: 0.5rem 0.75rem;
		font-size: 0.8125rem;
		min-width: 0; /* Allow shrinking below content width */
	}

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

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

	.highlighted-text {
		font-size: 1rem;
	}

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

	.bar-label {
		text-align: left;
	}

	/* Fix horizontal overflow - Cards */
	.results-preview-card,
	.results-breakdown-card {
		max-width: 100%;
		overflow-x: hidden;
	}

	/* Fix horizontal overflow - SERP Preview */
	.serp-preview {
		max-width: 100%;
		box-sizing: border-box;
	}

	.serp-title,
	.serp-description {
		overflow-wrap: break-word;
	}

	/* Preview tabs - smaller for narrow screens */
	.preview-tab {
		padding: 0.5rem;
		font-size: 0.75rem;
	}

	/* SERP preview - reduced padding */
	.serp-preview {
		padding: 0.75rem;
	}

	/* Breakdown card - horizontal scroll for long headlines */
	.highlighted-text {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Word type list - constrain to card width */
	.word-type-list,
	.word-type-item {
		max-width: 100%;
	}

	/* Breakdown stats - reduced font size */
	.breakdown-stat-value {
		font-size: 1.25rem;
	}
}

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

@media print {
	.headline-input-section,
	.results-share-card,
	.accuracy-disclaimer,
	.analyze-btn,
	.word-popover,
	.toast {
		display: none !important;
	}

	.headline-results-section {
		padding: 0;
	}

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

	.results-grid {
		display: block;
	}

	.results-score-card,
	.results-preview-card,
	.results-breakdown-card,
	.results-tips-card,
	.results-comparison-card {
		break-inside: avoid;
		margin-bottom: 1rem;
		box-shadow: none;
		border: 1px solid #ccc;
	}

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

	.highlighted-text .word {
		background: none !important;
		border: 1px solid #ccc;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.headline-textarea,
	.platform-btn,
	.analyze-btn,
	.score-ring-progress,
	.bar-fill,
	.word-popover,
	.tip-item,
	.highlighted-text .word {
		transition: none;
		animation: none;
	}

	.tip-item {
		opacity: 1;
	}

	.confetti-piece {
		display: none;
	}

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

/* ============================================
   Keyboard-Only Focus States
   ============================================ */

/* Show focus rings only for keyboard navigation */
.platform-btn:focus-visible,
.preview-tab:focus-visible,
.type-info-btn:focus-visible,
.accuracy-toggle:focus-visible,
.analyze-btn:focus-visible,
.share-actions .btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Remove default focus outline for mouse/touch interactions */
.platform-btn:focus:not(:focus-visible),
.preview-tab:focus:not(:focus-visible),
.type-info-btn:focus:not(:focus-visible),
.accuracy-toggle:focus:not(:focus-visible),
.analyze-btn:focus:not(:focus-visible),
.share-actions .btn:focus:not(:focus-visible) {
	outline: none;
}

/* Safe area insets for results grid on notched devices */
@supports (padding: env(safe-area-inset-bottom)) {
	.results-grid {
		padding-bottom: env(safe-area-inset-bottom);
	}
}

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

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

	.platform-btn.active {
		outline: 2px solid var(--headline-accent);
		outline-offset: 2px;
	}

	.highlighted-text .word {
		border: 1px solid currentColor;
	}
}