/**
 * Responsive Stylesheet - Wolfline Theme
 */

/* ============================================
   Mobile First Approach
   ============================================ */

/* Base styles are mobile-first */

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

@media (min-width: 768px) {
	.hero-title {
		font-size: var(--font-size-3xl);
	}

	.hero-description {
		font-size: var(--font-size-xl);
	}

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

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

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

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

	.booking-layout {
		grid-template-columns: 1fr;
	}
}

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

@media (min-width: 1024px) {
	.features-grid {
		grid-template-columns: repeat(3, 1fr);
	}

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

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

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

	.booking-layout {
		grid-template-columns: 1fr 1fr;
	}

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

/* ============================================
   Mobile Menu
   ============================================ */

@media (max-width: 767px) {
	.menu-toggle {
		display: block;
	}

	.main-navigation {
		position: fixed;
		top: 0;
		right: -100%;
		width: 80%;
		max-width: 300px;
		height: 100vh;
		background-color: var(--bg-card);
		z-index: var(--z-modal);
		transition: right var(--transition-base);
		padding: var(--space-8);
		box-shadow: var(--shadow-lg);
	}

	.main-navigation.active {
		right: 0;
	}

	.nav-menu {
		flex-direction: column;
		gap: var(--space-4);
		align-items: flex-start;
	}

	.nav-menu a {
		width: 100%;
		padding: var(--space-3) 0;
	}

	.hero-actions {
		flex-direction: column;
		width: 100%;
	}

	.hero-actions .btn {
		width: 100%;
	}

	.features-grid {
		grid-template-columns: 1fr;
	}

	.services-grid {
		grid-template-columns: 1fr;
	}

	.before-after-grid {
		grid-template-columns: 1fr;
	}

	.portfolio-grid {
		grid-template-columns: 1fr;
	}

	.cta-actions {
		flex-direction: column;
		width: 100%;
	}

	.cta-actions .btn {
		width: 100%;
	}

	.floating-actions {
		bottom: var(--space-4);
		right: var(--space-4);
	}

	.fab {
		width: 50px;
		height: 50px;
		font-size: var(--font-size-lg);
	}

	/* Old testimonials controls removed - using .wl-testimonials-* classes now */

	.warranty-features {
		align-items: flex-start;
	}
}

/* ============================================
   Large Desktop (1280px and up)
   ============================================ */

@media (min-width: 1280px) {
	.features-grid {
		grid-template-columns: repeat(5, 1fr);
	}

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

/* ============================================
   Print Styles
   ============================================ */

@media print {
	.site-header,
	.floating-actions,
	.footer,
	.hero-actions,
	.service-actions,
	.portfolio-actions {
		display: none;
	}

	body {
		background: white;
		color: black;
	}

	a {
		color: black;
		text-decoration: underline;
	}
}

/* ============================================
   RTL Support
   ============================================ */

[dir="rtl"] {
	direction: rtl;
}

[dir="rtl"] .hero-actions,
[dir="rtl"] .cta-actions {
	flex-direction: row-reverse;
}

[dir="rtl"] .floating-actions {
	right: auto;
	left: var(--space-6);
}

[dir="rtl"] .main-navigation {
	right: auto;
	left: -100%;
}

[dir="rtl"] .main-navigation.active {
	left: 0;
	right: auto;
}

[dir="rtl"] .before-after-slider {
	left: auto;
	right: 50%;
	transform: translateX(50%);
}

[dir="rtl"] .wl-partners-track {
	animation-direction: reverse;
}

/* ============================================
   Global Responsive Fixes
   ============================================ */

/* Prevent horizontal scroll on all devices */
* {
	max-width: 100%;
}

/* Ensure all images are responsive */
img,
video,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
}

/* Fix for tables on mobile */
table {
	width: 100%;
	table-layout: auto;
	overflow-x: auto;
	display: block;
}

/* Ensure all containers are responsive */
.container,
.container-fluid,
.wrapper,
.content-wrapper {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Fix for elements that might overflow */
pre,
code {
	overflow-x: auto;
	word-wrap: break-word;
	white-space: pre-wrap;
}

/* Ensure flex containers don't cause overflow */
.flex,
.d-flex,
[class*="flex-"] {
	min-width: 0;
}

/* Grid containers responsive fix */
.grid,
[class*="grid"] {
	min-width: 0;
}

/* Very small screens (320px and below) */
@media (max-width: 320px) {
	.container {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
	
	body {
		font-size: 0.9rem;
	}
}

/* Extra small screens (360px and below) */
@media (max-width: 360px) {
	.container {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* Large screens - ensure no overflow */
@media (min-width: 1920px) {
	.container {
		max-width: var(--container-max);
	}
	
	body {
		overflow-x: hidden;
	}
}