/**
 * Arcade Affiliate Theme - Responsive Styles
 * 
 * Mobile-first responsive design
 * 
 * @package Arcade_Affiliate
 */

/* ============================================
   MOBILE FIRST (Base is already mobile in main CSS)
   ============================================ */

/* ============================================
   TABLET (768px and up)
   ============================================ */

@media (min-width: 768px) {
	:root {
		--font-size-3xl: 36px;
		--font-size-2xl: 28px;
	}

	.container {
		padding: 0 var(--spacing-lg);
	}

	.row--2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.row--3 {
		grid-template-columns: repeat(3, 1fr);
	}

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

	.header-stats {
		flex-direction: row;
	}

	.nav {
		display: flex !important;
	}

	.reveal-button {
		width: 180px;
		height: 180px;
		font-size: var(--font-size-lg);
	}

	/* Product card improvements on tablet */
	.product-card {
		transform: translateY(0);
	}

	.product-card:hover {
		transform: translateY(-8px) scale(1.02);
	}

	/* Achievement grid on tablet */
	.achievement-grid {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	}
}

/* ============================================
   DESKTOP (1024px and up)
   ============================================ */

@media (min-width: 1024px) {
	:root {
		--font-size-3xl: 48px;
		--font-size-2xl: 32px;
		--font-size-xl: 24px;
		--spacing-3xl: 64px;
	}

	.container {
		padding: 0 var(--spacing-lg);
	}

	.row--2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.row--3 {
		grid-template-columns: repeat(3, 1fr);
	}

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

	.header-content {
		padding: var(--spacing-lg) 0;
	}

	.reveal-button {
		width: 200px;
		height: 200px;
		font-size: var(--font-size-lg);
	}

	/* Leaderboard improvements */
	.leaderboard-entry {
		grid-template-columns: 50px 1fr 1fr 1fr;
		padding: var(--spacing-md) var(--spacing-lg);
	}

	.leaderboard-entry:hover {
		padding-left: calc(var(--spacing-lg) - 3px);
	}

	/* Achievement badge sizing */
	.achievement-grid {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}

	/* Section spacing */
	.section {
		padding: var(--spacing-3xl) 0;
	}

	.section--hero {
		min-height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* ============================================
   LARGE DESKTOP (1440px and up)
   ============================================ */

@media (min-width: 1440px) {
	:root {
		--font-size-3xl: 54px;
		--font-size-2xl: 36px;
	}

	.container {
		padding: 0 4rem;
	}

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

	.achievement-grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	}
}

/* ============================================
   ULTRAWIDE (1920px and up)
   ============================================ */

@media (min-width: 1920px) {
	.container {
		padding: 0 6rem;
	}

	.row--2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.row--3 {
		grid-template-columns: repeat(3, 1fr);
	}

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

	.achievement-grid {
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	}
}

/* ============================================
   LANDSCAPE MODE ON MOBILE
   ============================================ */

@media (max-height: 500px) and (orientation: landscape) {
	.header {
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.section--hero {
		min-height: auto;
		padding: var(--spacing-lg) 0;
	}

	.reveal-button {
		width: 120px;
		height: 120px;
		font-size: var(--font-size-sm);
	}

	.reveal-title {
		font-size: var(--font-size-xl);
		margin-bottom: var(--spacing-md);
	}

	.reveal-subtitle {
		font-size: var(--font-size-sm);
		margin-bottom: var(--spacing-md);
	}
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
	* {
		background: transparent !important;
		color: black !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}

	body,
	.container {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	header,
	footer,
	nav,
	.navigation,
	.modal,
	.notification,
	.reveal-button,
	.btn {
		display: none !important;
	}

	.product-card,
	.card,
	article {
		page-break-inside: avoid;
		break-inside: avoid;
		border: 1px solid #ccc;
		margin-bottom: 1cm;
	}

	h1,
	h2,
	h3 {
		page-break-after: avoid;
	}

	a {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

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

/* ============================================
   TOUCH DEVICES
   ============================================ */

@media (hover: none) and (pointer: coarse) {
	.btn:hover,
	.card:hover,
	a:hover {
		box-shadow: none;
		transform: none;
	}

	.btn:active {
		transform: scale(0.95);
	}

	/* Increase tap targets */
	.btn,
	.nav-link,
	.product-action-button {
		min-height: 44px;
		min-width: 44px;
	}

	/* Disable hover effects on touch */
	.product-card:hover .product-image {
		transform: none;
	}
}

/* ============================================
   DARK MODE (Prefers dark)
   ============================================ */

@media (prefers-color-scheme: dark) {
	/* Theme already defaults to dark mode */
	/* This is just for consistency */
}

/* ============================================
   LIGHT MODE (Prefers light)
   ============================================ */

@media (prefers-color-scheme: light) {
	/* If user prefers light mode, invert colors */
	/* Optional: implement light theme here */
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */

@media (prefers-contrast: more) {
	:root {
		--color-border-bright: rgba(255, 255, 255, 0.3);
	}

	.btn,
	.card,
	.product-card {
		border-width: 2px;
	}

	.product-rarity {
		border-width: 2px;
	}
}

/* ============================================
   REDUCED MOTION
   ============================================ */

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

	html {
		scroll-behavior: auto;
	}
}

/* ============================================
   FORCED COLORS MODE (Windows High Contrast)
   ============================================ */

@media (forced-colors: active) {
	.btn,
	.card,
	.product-card {
		border: 1px solid CanvasText;
	}

	.btn:focus,
	.card:focus,
	a:focus {
		outline: 2px solid CanvasText;
		outline-offset: 2px;
	}

	.reveal-button:focus {
		outline: 3px solid CanvasText;
	}
}

/* ============================================
   SMALL SCREENS FIX
   ============================================ */

@media (max-width: 320px) {
	:root {
		--font-size-2xl: 18px;
		--font-size-xl: 16px;
		--font-size-lg: 14px;
		--spacing-lg: 16px;
		--spacing-md: 12px;
		--spacing-sm: 6px;
	}

	.container {
		padding: 0 var(--spacing-md);
	}

	.reveal-button {
		width: 100px;
		height: 100px;
		font-size: var(--font-size-sm);
	}

	.product-card {
		margin-bottom: var(--spacing-md);
	}
}

/* ============================================
   ORIENTATION SPECIFIC
   ============================================ */

@media (orientation: portrait) {
	.section--hero {
		min-height: 80vh;
	}
}

@media (orientation: landscape) {
	.section--hero {
		min-height: 100vh;
	}
}

/* End of responsive.css */