/**
 * EZY Theme - Responsive & Performance Fixes (v1.6.1)
 * Enhanced mobile experience and performance optimizations
 */

/* ============================================
   PERFORMANCE: Reduce layout shifts & improve CLS
   ============================================ */

/* Prevent layout shift from images */
img {
	max-width: 100%;
	height: auto;
}

/* Font display optimization */
@font-face {
	font-display: swap !important;
}

/* ============================================
   RESPONSIVE: Mobile First Improvements
   ============================================ */

/* Improve touch targets for mobile (min 44px per WCAG) */
@media (max-width: 767px) {
	
	/* Navigation */
	.header-nav-main nav > ul > li > a,
	.header-nav-main nav > ul > li > span {
		padding: 12px 15px;
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	/* Buttons */
	.btn {
		min-height: 44px;
		padding: 10px 20px;
	}

	/* Form elements */
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="url"],
	textarea,
	select {
		min-height: 44px;
		font-size: 16px; /* Prevents iOS zoom on focus */
	}

	/* Better spacing on mobile */
	.container {
		padding-left: 15px;
		padding-right: 15px;
	}

	/* Fix overflow issues on mobile */
	body {
		overflow-x: hidden;
	}
	
	.body {
		overflow-x: hidden;
	}

	/* Better table responsiveness */
	table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Page header responsive */
	.page-header h1 {
		font-size: 1.8rem;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	/* Blog post grid responsive */
	.blog-posts .row > [class*="col-"] {
		margin-bottom: 20px;
	}

	/* Portfolio responsive */
	.portfolio-list .row > [class*="col-"] {
		margin-bottom: 15px;
	}

	/* Footer responsive */
	.footer .row > [class*="col-"] {
		margin-bottom: 25px;
	}

	/* Mini cart responsive */
	.mini-cart-product .row {
		flex-wrap: nowrap;
	}

	/* Side menu mobile improvements */
	.header-nav-main {
		max-height: 80vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Improve readability */
	body {
		font-size: 15px;
		line-height: 1.7;
	}

	h1 { font-size: 1.8rem; }
	h2 { font-size: 1.5rem; }
	h3 { font-size: 1.3rem; }
	h4 { font-size: 1.1rem; }
}

/* Tablet specific improvements */
@media (min-width: 768px) and (max-width: 991px) {

	/* Better grid columns for tablets */
	.portfolio-list .col-md-4 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	/* Blog grid tablet */
	.blog-posts .col-md-4 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	/* Team grid tablet */
	.team-list .col-md-3 {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

/* ============================================
   RESPONSIVE: WooCommerce Improvements
   ============================================ */

@media (max-width: 767px) {
	/* Product grid mobile */
	.products .product {
		margin-bottom: 20px;
	}

	/* Cart page mobile */
	.woocommerce-cart .shop_table th,
	.woocommerce-cart .shop_table td {
		padding: 10px 8px;
	}

	/* Checkout mobile */
	.woocommerce-checkout .col2-set .col-1,
	.woocommerce-checkout .col2-set .col-2 {
		width: 100%;
		float: none;
	}

	/* Mini cart dropdown mobile */
	.header-nav-features .header-nav-features-dropdown {
		min-width: 280px;
		right: -10px;
	}
}

/* ============================================
   PERFORMANCE: Reduce paint complexity
   ============================================ */

/* Use will-change sparingly for animated elements */
.owl-carousel .owl-stage {
	will-change: transform;
}

/* GPU acceleration for smooth animations */
.header-nav-main nav > ul > li .dropdown-menu,
.sticky-wrapper.is-sticky .header-body {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* Optimize scroll performance */
.main {
	contain: layout style;
}

/* Lazy load placeholder */
img[data-src],
img.lazy {
	opacity: 0;
	transition: opacity 0.3s ease-in;
}

img[data-src].loaded,
img.lazy.loaded,
img.lazyloaded {
	opacity: 1;
}

/* ============================================
   ACCESSIBILITY: Improvements
   ============================================ */

/* Focus visible for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid #4A90D9;
	outline-offset: 2px;
}

/* Skip to content link */
.skip-to-content {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: 99999;
}

.skip-to-content:focus {
	position: fixed;
	top: 10px;
	left: 10px;
	width: auto;
	height: auto;
	padding: 15px 25px;
	background: #000;
	color: #fff;
	font-size: 16px;
	text-decoration: none;
	z-index: 99999;
}

/* Reduce motion for users who prefer it */
@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;
	}
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
	header, footer, .sidebar, .header-nav-main,
	.page-header, .comments-area {
		display: none !important;
	}

	body, .main {
		font-size: 12pt;
		line-height: 1.5;
		color: #000;
		background: #fff;
	}

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
	}
}