/* ==========================================================================
   Mobile First Theme - Responsive Design
   ========================================================================== */

/* Tablet (768px and up) */
@media (min-width: 768px) {
	:root {
		--font-size-base: 18px;
	}

	h1 {
		font-size: 3rem;
	}

	h2 {
		font-size: 2.25rem;
	}

	h3 {
		font-size: 1.875rem;
	}

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

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

	.site-main {
		padding: var(--spacing-2xl) 0;
	}

	.main-navigation {
		display: block !important;
		position: static;
		background: transparent;
		border: none;
		padding: 0;
	}

	.main-navigation ul {
		flex-direction: row;
		gap: var(--spacing-lg);
	}

	.main-navigation li {
		border-bottom: none;
	}

	.main-navigation a {
		padding: var(--spacing-sm) var(--spacing-md);
	}

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

	.site-header {
		position: static;
	}

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

	.site-footer {
		padding: var(--spacing-2xl) 0;
	}

	/* Articles */
	article.post-archive {
		grid-template-columns: 250px 1fr;
		gap: var(--spacing-xl);
	}

	.post-thumbnail {
		min-height: 180px;
	}

	/* Forms */
	input,
	textarea,
	select {
		font-size: 1rem;
	}

	/* Sidebar */
	.main-sidebar {
		margin-top: var(--spacing-2xl);
	}

	/* Grid layouts */
	.grid-2 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-xl);
	}

	.grid-3 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--spacing-xl);
	}
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
	h1 {
		font-size: 3.5rem;
	}

	h2 {
		font-size: 2.5rem;
	}

	h3 {
		font-size: 2rem;
	}

	.header-image {
		max-height: 400px;
		overflow: hidden;
	}

	.header-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Grid layouts */
	.grid-4 {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--spacing-xl);
	}

	/* Two-column layout with sidebar */
	.grid-main-sidebar {
		display: grid;
		grid-template-columns: 1fr 300px;
		gap: var(--spacing-2xl);
	}

	.grid-main-sidebar.sidebar-left {
		grid-template-columns: 300px 1fr;
	}
}

/* Large Desktop (1280px and up) */
@media (min-width: 1280px) {
	.container {
		max-width: 1200px;
	}
}

/* Extra Large Desktop (1920px and up) */
@media (min-width: 1920px) {
	.container {
		max-width: 1400px;
	}

	h1 {
		font-size: 4rem;
	}

	h2 {
		font-size: 3rem;
	}
}

/* Landscape mode adjustments */
@media (max-height: 500px) and (orientation: landscape) {
	.site-header {
		position: relative;
	}

	.header-wrapper {
		padding: var(--spacing-sm);
	}

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

/* High resolution displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.site-header {
		border-bottom-width: 0.5px;
	}

	.bottom-navigation {
		border-top-width: 0.5px;
	}

	.widget {
		border-width: 0.5px;
	}
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
	button,
	a.button,
	.btn {
		min-height: 48px;
		min-width: 48px;
	}

	input,
	textarea,
	select {
		font-size: 16px;
		min-height: 48px;
	}

	.pagination .page-numbers,
	.pager a {
		min-width: 48px;
		min-height: 48px;
	}
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Dark mode specific responsive behavior */
@media (prefers-color-scheme: dark) {
	body {
		background-color: #111827;
	}

	.site-header {
		background: #1f2937;
		border-bottom-color: #374151;
	}

	.widget {
		background: #374151;
	}

	.comment-list .comment {
		background: #1f2937;
		border-left-color: var(--primary-color);
	}
}