/**
 * New Realm Transportation Responsive Stylesheet
 *
 * @package NewRealm
 * @since   1.0.0
 */

/* ==========================================================================
   Media Query: 1024px (Large Tablets / Laptops)
   ========================================================================== */
@media screen and (max-width: 1024px) {
	:root {
		--header-height: 70px;
	}

	.nav-menu {
		gap: 1.25rem;
	}

	.footer-main__grid {
		grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
		gap: 2rem;
	}
}

/* ==========================================================================
   Media Query: 991px (Tablets / Mobile Transition)
   ========================================================================== */
@media screen and (max-width: 991px) {
	/* Hide desktop navigation elements */
	.site-header__nav,
	.site-header__cta {
		display: none;
	}

	/* Show mobile hamburger toggle */
	.site-header__toggle {
		display: block;
	}

	.footer-main__grid {
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
	}

	.footer-col--about {
		grid-column: span 2;
		max-width: 600px;
	}
}

/* ==========================================================================
   Media Query: 768px (Portrait Tablets)
   ========================================================================== */
@media screen and (max-width: 768px) {
	:root {
		--header-height: 65px;
	}

	/* Adjust Top Bar */
	.top-bar {
		display: none; /* Hide top bar on mobile to optimize screen real estate */
	}

	/* Set body offset for sticky header */
	.site-header {
		position: sticky;
		top: 0;
	}

	.placeholder-content__title {
		font-size: 2.25rem;
	}

	.placeholder-section {
		padding: 6rem 0;
	}

	.page-header {
		padding: 3rem 0;
	}

	.page-header__title {
		font-size: 2rem;
	}

	.footer-main {
		padding: 4rem 0 3rem;
	}

	.footer-bottom__inner {
		flex-direction: column;
		text-align: center;
		gap: 1rem;
	}
}

/* ==========================================================================
   Media Query: 576px (Mobile Landscape / Large Phones)
   ========================================================================== */
@media screen and (max-width: 576px) {
	.footer-main__grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.footer-col--about {
		grid-column: span 1;
	}

	.error-404__code {
		font-size: 4.5rem;
	}

	.error-404__title {
		font-size: 1.75rem;
	}

	.error-404__actions {
		flex-direction: column;
		gap: 0.75rem;
		padding: 0 1rem;
	}

	.mobile-nav {
		width: 100%;
		right: -100%;
	}
}