/**
 * Responsive Design Enhancements
 * Ensures optimal display on mobile and tablet devices
 */

/* ============================================
   MOBILE OPTIMIZATIONS (up to 600px)
   ============================================ */

@media (max-width: 600px) {
	/* Hero Section - Mobile */
	.wp-block-cover h1 {
		font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
		line-height: 1.2 !important;
		padding: 0 1rem;
	}
	
	.wp-block-cover h2 {
		font-size: clamp(1rem, 4vw, 1.25rem) !important;
		line-height: 1.4 !important;
		padding: 0 1rem;
	}
	
	.wp-block-cover {
		min-height: 500px !important;
	}
	
	/* Buttons - Mobile */
	.wp-block-buttons {
		flex-direction: column !important;
		gap: 1rem !important;
	}
	
	.wp-block-button {
		width: 100% !important;
	}
	
	.wp-block-button__link {
		padding: 1rem 2rem !important;
		font-size: 1rem !important;
		text-align: center;
		display: block;
	}
	
	/* About Us - Mobile */
	.wp-block-group h2 {
		font-size: 2rem !important;
	}
	
	.wp-block-group p {
		font-size: 16px !important;
		line-height: 1.7 !important;
		padding: 0 1rem;
	}
	
	/* Certifications - Stack vertically on mobile */
	.certification-image img {
		max-width: 100% !important;
		height: auto !important;
	}
	
	/* Client Logo Slider - Ensure visibility */
	.clients-logo-slider {
		padding: 2rem 0 !important;
	}
	
	.logo-item img {
		max-height: 60px !important;
	}
	
	/* Navigation - Already handled in navigation-menu.css */
	
	/* Spacing adjustments */
	.wp-block-group {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}
	
	/* Ensure images don't overflow */
	img {
		max-width: 100%;
		height: auto;
	}
}

/* ============================================
   TABLET OPTIMIZATIONS (601px to 782px)
   ============================================ */

@media (min-width: 601px) and (max-width: 782px) {
	/* Hero Section - Tablet */
	.wp-block-cover h1 {
		font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
		line-height: 1.2 !important;
	}
	
	.wp-block-cover h2 {
		font-size: clamp(1.25rem, 3vw, 1.75rem) !important;
		line-height: 1.4 !important;
	}
	
	.wp-block-cover {
		min-height: 600px !important;
	}
	
	/* Buttons - Tablet */
	.wp-block-button__link {
		padding: 0.875rem 2.5rem !important;
	}
	
	/* About Us - Tablet */
	.wp-block-group h2 {
		font-size: 2.5rem !important;
	}
	
	.wp-block-group p {
		font-size: 16px !important;
		line-height: 1.8 !important;
	}
	
	/* Certifications - 2 columns on tablet */
	.certification-image {
		margin-bottom: 2rem;
	}
	
	/* Client Logos */
	.logo-item img {
		max-height: 70px !important;
	}
}

/* ============================================
   LANDSCAPE MOBILE (up to 900px landscape)
   ============================================ */

@media (max-width: 900px) and (orientation: landscape) {
	.wp-block-cover {
		min-height: 400px !important;
	}
	
	.wp-block-cover h1 {
		font-size: 2rem !important;
	}
	
	.wp-block-cover h2 {
		font-size: 1.25rem !important;
	}
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */

@media (hover: none) and (pointer: coarse) {
	/* Increase touch targets */
	.wp-block-button__link,
	.wp-block-navigation-item a,
	a {
		min-height: 44px;
		min-width: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	
	/* Remove hover effects on touch devices */
	.logo-item img:hover {
		filter: grayscale(100%);
	}
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Ensure focus states are visible */
*:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #ff6b35);
	outline-offset: 2px;
}

/* Improve readability */
@media (max-width: 782px) {
	body {
		-webkit-text-size-adjust: 100%;
		-moz-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}
}

/* Prevent horizontal scroll */
body {
	overflow-x: hidden;
}

.wp-block-group,
.wp-block-cover {
	max-width: 100vw;
	overflow-x: hidden;
}