/* ==========================================================================
   ESTEEM CHILD — Responsive Overrides
   ========================================================================== */

/* --- Tablet (768px and below) --- */
@media (max-width: 768px) {
	/* Layout */
	#content.site-content {
		padding: var(--spacing-sm);
	}

	#primary,
	body:not(.no-sidebar-full-width):not(.no-sidebar) #primary,
	#secondary,
	body:not(.no-sidebar-full-width):not(.no-sidebar) #secondary {
		width: 100%;
		float: none;
	}

	/* Sections */
	.section {
		padding: var(--spacing-lg) 0;
	}
	.hero-section {
		padding: var(--spacing-xl) 0;
		min-height: 50vh;
	}
	.hero-content {
		max-width: 100%;
	}
	.hero-title {
		font-size: 2.25rem;
	}
	.hero-subtitle {
		font-size: var(--font-size-lg);
	}
	.hero-cta {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Header */
	.site-header {
		height: 60px;
	}
	.header-scrolled {
		height: 56px;
	}
	body {
		padding-top: 60px;
	}

	.header-logo-image img {
		max-height: 36px;
	}
	#site-title {
		font-size: var(--font-size-lg);
	}

	/* Footer sidebar grid */
	.footer-widgets .widget-wrapper {
		grid-template-columns: 1fr;
	}
	#colophon .widget {
		margin-bottom: var(--spacing-md);
	}

	/* Widgets */
	.services-block {
		grid-template-columns: 1fr;
	}
	.recent-work {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	}

	/* Buttons */
	.btn-lg {
		padding: 0.8rem 2rem;
		font-size: var(--font-size-sm);
	}

	/* CTA */
	.cta-section {
		padding: var(--spacing-lg) var(--spacing-sm);
	}

	/* Page title */
	.page-title-bar {
		padding: var(--spacing-sm) 0 !important;
	}
	.page-title-wrap h1,
	.page-title-wrap h2 {
		font-size: var(--font-size-2xl);
	}

	/* Scroll-up */
	#scroll-up {
		bottom: 20px;
		right: 20px;
		width: 40px;
		height: 40px;
	}

	/* Promo box */
	#promo-box {
		padding: var(--spacing-md) var(--spacing-sm) !important;
	}
	.promo-title {
		font-size: var(--font-size-2xl) !important;
	}
}

/* --- Small mobile (480px and below) --- */
@media (max-width: 480px) {
	.hero-title {
		font-size: 1.75rem;
	}
	.hero-subtitle {
		font-size: var(--font-size-base);
	}

	.main-navigation .nav-menu {
		width: 100%;
	}

	.recent-work {
		grid-template-columns: 1fr;
	}
}

/* --- Print --- */
@media print {
	.site-header {
		position: relative;
	}
	body {
		padding-top: 0;
	}
	#scroll-up,
	#page-loader {
		display: none !important;
	}
}