/**
 * Responsive CSS for DailyBloom Theme
 * Mobile-first approach
 * 
 * @package DailyBloom_Theme
 * @since 1.0.0
 */

/* Mobile Styles (320px - 767px) */
@media (max-width: 767px) {
	html {
		font-size: 14px;
	}

	/* Navigation */
	.primary-navigation {
		display: none;
	}

	.mobile-menu-toggle {
		display: flex;
	}

	.mobile-navigation {
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--transition-base);
	}

	.mobile-navigation.active {
		max-height: 400px;
	}

	.mobile-menu-inner {
		padding: var(--space-lg);
	}

	/* Header */
	.header-actions {
		gap: var(--space-sm);
	}

	/* Container */
	.container {
		padding: 0 var(--space-md);
	}

	/* Typography */
	h1 {
		font-size: 1.75rem;
	}

	h2 {
		font-size: 1.5rem;
	}

	h3 {
		font-size: 1.25rem;
	}

	/* Grid - Single Column */
	.grid,
	.grid-cols-1,
	.grid-cols-2,
	.grid-cols-3,
	.grid-cols-4 {
		grid-template-columns: 1fr;
	}

	/* Footer */
	.footer-content {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.footer-bottom {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.footer-links ul {
		flex-direction: column;
		gap: 1rem;
	}

	/* Forms */
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="search"],
	textarea,
	select {
		font-size: 16px; /* Prevents zoom on iOS */
		padding: 0.875rem;
	}

	/* Buttons */
	button,
	.btn,
	input[type="submit"],
	input[type="button"] {
		font-size: 1rem;
		padding: 0.875rem 1.5rem;
		min-height: 48px;
		width: 100%;
	}

	.btn-outline {
		border-width: 1px;
	}

	/* Story Controls */
	#story-controls {
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.text-size-controls button,
	#share-story {
		flex: 1;
		min-width: 60px;
		padding: 0.5rem;
		font-size: 0.875rem;
	}

	/* Age Group Cards */
	.age-group-card {
		padding: 1.5rem;
	}

	.age-group-card .circle-badge {
		width: 60px;
		height: 60px;
		font-size: 1.25rem;
	}

	/* Story Grid */
	#stories-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.story-item {
		display: flex;
		gap: 1rem;
	}

	.story-item > div:first-child {
		flex: 0 0 100px;
		height: 100px;
	}

	.story-item > div:last-child {
		flex: 1;
		padding: 1rem;
	}

	/* Dashboard */
	.dashboard-grid {
		grid-template-columns: 1fr;
	}

	.sidebar {
		position: fixed;
		left: 0;
		top: 0;
		width: 250px;
		height: 100vh;
		background-color: white;
		z-index: 999;
		transform: translateX(-100%);
		transition: transform var(--transition-base);
		box-shadow: var(--shadow-lg);
	}

	.sidebar.active {
		transform: translateX(0);
	}

	/* Reader View */
	.story-reader {
		padding: 1.5rem;
	}

	.story-reader article {
		font-size: 1rem;
	}

	/* Pricing Cards */
	.pricing-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.pricing-card {
		padding: 1.5rem;
	}

	.pricing-card h3 {
		font-size: 1.25rem;
	}

	.pricing-card .price {
		font-size: 2rem;
	}

	/* Filter Section */
	.library-controls {
		grid-template-columns: 1fr;
	}

	#story-search,
	#age-filter,
	#theme-filter {
		font-size: 16px; /* Prevents zoom on iOS */
	}
}

/* Tablet Styles (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
	html {
		font-size: 15px;
	}

	/* Container */
	.container {
		max-width: 750px;
		padding: 0 var(--space-lg);
	}

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

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

	/* Navigation */
	.primary-navigation .nav-menu {
		gap: var(--space-md);
	}

	.primary-navigation .nav-menu a {
		font-size: 0.95rem;
		padding: 0.5rem 0;
	}

	/* Footer */
	.footer-content {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}

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

	/* Story Grid */
	#stories-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Pricing Cards */
	.pricing-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Dashboard */
	.dashboard-grid {
		grid-template-columns: 1fr 2fr;
		gap: 1.5rem;
	}
}

/* Desktop Styles (1024px and up) */
@media (min-width: 1024px) {
	html {
		font-size: 16px;
	}

	/* Container */
	.container {
		max-width: 980px;
		padding: 0 var(--space-2xl);
	}

	/* Navigation */
	.primary-navigation {
		display: block;
	}

	.mobile-menu-toggle {
		display: none;
	}

	.mobile-navigation {
		display: none !important;
	}

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

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

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

	/* Story Grid */
	#stories-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Pricing Cards */
	.pricing-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Dashboard */
	.dashboard-grid {
		grid-template-columns: 250px 1fr;
		gap: 2rem;
	}

	.sidebar {
		position: sticky;
		top: 80px;
	}
}

/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
	html {
		font-size: 18px;
	}

	/* Container */
	.container {
		max-width: 1320px;
		padding: 0 var(--space-3xl);
	}

	/* Typography Scale Up */
	h1 {
		font-size: clamp(2rem, 6vw, 4rem);
	}

	h2 {
		font-size: clamp(1.5rem, 4vw, 3rem);
	}

	/* Spacing */
	.container > section {
		padding: 100px 0;
	}

	/* Story Grid */
	#stories-grid {
		grid-template-columns: repeat(5, 1fr);
		gap: 2rem;
	}

	/* Pricing Cards */
	.pricing-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 2rem;
	}
}

/* Extra Large Screens (2000px+) */
@media (min-width: 2000px) {
	.container {
		max-width: 1600px;
	}

	#stories-grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

/* Landscape Mobile (320px width, any height) */
@media (max-height: 500px) and (orientation: landscape) {
	.hero-section {
		padding: 30px 0;
	}

	h1 {
		font-size: 1.5rem;
		margin-bottom: 0.5rem;
	}

	.age-groups-section {
		padding: 30px 0;
	}
}

/* High Resolution Displays */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
	.logo {
		background-size: contain;
	}
}

/* Touch Device Optimization */
@media (hover: none) {
	button,
	a,
	.btn {
		min-height: 48px; /* Apple's recommended 44px minimum touch target */
		min-width: 48px;
	}

	/* Remove hover effects on touch devices */
	.story-card:hover,
	.age-group-card:hover,
	button:hover {
		transform: none;
	}

	/* Add active states for touch */
	.story-card:active,
	.age-group-card:active {
		opacity: 0.8;
	}
}

/* Print Styles */
@media print {
	.site-header,
	.site-footer,
	.mobile-menu-toggle,
	#share-story,
	.story-like,
	.story-bookmark {
		display: none;
	}

	body {
		background-color: white;
		color: #000;
	}

	.container {
		max-width: 100%;
	}

	.entry-content {
		color: #000;
	}

	a {
		color: #000;
		text-decoration: underline;
	}

	h1, h2, h3, h4, h5, h6 {
		page-break-after: avoid;
		page-break-inside: avoid;
	}

	p {
		orphans: 3;
		widows: 3;
	}

	img {
		max-width: 100%;
		page-break-inside: avoid;
	}
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Prefer Dark Mode */
@media (prefers-color-scheme: dark) {
	/* Dark mode styles can be added here if needed */
	/* For now, maintaining light theme as per design system */
}