/* ==========================================================================
   Responsive Styles for VSP 2025
   These media queries ensure mobile-first design and cross-device consistency.
   ========================================================================== */

/* 🔹 Base styles are assumed to be mobile-first. 
   These media queries progressively enhance for larger viewports. */

/* --------------------------------------------------------------
   Small Devices (Portrait phones, less than 576px)
   -------------------------------------------------------------- */
/* No media query needed for this range – styles are mobile-first */

/* --------------------------------------------------------------
   Medium Devices (Landscape phones, 576px and up)
   -------------------------------------------------------------- */
@media (min-width: 576px) {
	/* Example: Make form fields stack differently or adjust padding */
	.form-inline input {
		width: 48%;
		margin-right: 4%;
	}
}

/* --------------------------------------------------------------
   Tablets (768px and up)
   -------------------------------------------------------------- */
@media (min-width: 768px) {
	/* Example: Two-column layout or adjust navigation/menu */
	.site-header {
		flex-direction: row;
		justify-content: space-between;
	}

	.nav-primary {
		display: block;
	}
}

/* --------------------------------------------------------------
   Large Tablets / Small Laptops (992px and up)
   -------------------------------------------------------------- */
@media (min-width: 992px) {
	/* Example: Adjust max-width or layout for wide view */
	.site-container {
		max-width: 960px;
		margin: 0 auto;
	}
}

/* --------------------------------------------------------------
   Desktops (1200px and up)
   -------------------------------------------------------------- */
@media (min-width: 1200px) {
	/* Example: Increase font size or spacing for large screens */
	body {
		font-size: 1.1rem;
		line-height: 1.7;
	}
}

/* --------------------------------------------------------------
   XL / Wide Screens (1400px and up)
   -------------------------------------------------------------- */
@media (min-width: 1400px) {
	/* Example: Optional hero image expansion or wide grid tweaks */
	.hero-banner {
		padding: 6rem 4rem;
	}
}