/*
 * T&L Global Supply — responsive refinements (mobile-first).
 * Tailwind utility classes handle the bulk of responsive layout; these rules
 * cover navigation/drawer behavior and small-screen safeguards.
 */

/* Prevent horizontal overflow on small screens. */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

/* Mobile-first: the desktop menu is hidden until the lg breakpoint (Tailwind
 * handles this via the `lg:flex` class); the drawer collapses cleanly. */
@media (max-width: 1023px) {
	#mobileMenu.is-open {
		display: block;
	}
}

/* From large screens up, ensure the drawer is never shown. */
@media (min-width: 1024px) {
	#mobileMenu {
		display: none !important;
	}
}

/* Keep hero media crisp and contained across breakpoints. */
@media (max-width: 640px) {
	.entry-content h2 {
		font-size: 1.5rem;
	}
}