/* Add any app-specific styles here */

/* Use the GM Kit banner as a subtle site-wide background. */
.App {
	/* layered: dark gradient overlay will be applied inline in App.js to avoid webpack resolving /gmkit at build time */
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	background-attachment: fixed;
	background-blend-mode: overlay;
}

/* Ensure overlaying content remains readable on top of the image */
.App .mx-auto, .App .max-w-6xl {
	position: relative;
	z-index: 2;
}

.mobile-nav {
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.mobile-nav-item {
	flex: 0 0 auto;
	padding: 0.5rem 0.85rem;
	font-size: 0.875rem;
	white-space: nowrap;
}

.App input,
.App select,
.App textarea,
.App button {
	max-width: 100%;
}

/* Low-level fallback for very small screens: reduce background intensity */
@media (max-width: 640px) {
	.App {
		background-attachment: scroll;
		background-position: center center;
		background-size: auto 120%;
	}

	.mobile-nav {
		margin-left: -0.75rem;
		margin-right: -0.75rem;
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}

	.mobile-nav-item {
		padding: 0.45rem 0.7rem;
		font-size: 0.8125rem;
	}
}