/**
 * Responsive system.
 * Mobile-first base styles live in the component files; this file
 * layers breakpoint-specific overrides for header, navigation,
 * footer, and container behavior.
 */

/* Base (mobile, ~320px+) */
.sh-header {
	top: 12px;
	width: calc(100% - 32px);
}

.sh-header__inner {
	height: var(--sh-header-height-mobile);
	padding-inline: var(--sh-space-4);
}

.sh-header__logo img {
	max-height: calc(var(--sh-header-height-mobile) - 20px);
}

.sh-header__cta {
	display: none;
}

.sh-footer__grid {
	grid-template-columns: 1fr;
	gap: var(--sh-space-7);
}

.sh-footer__bottom {
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	text-align: center;
	font-size: 0.75rem;
	gap: var(--sh-space-2);
}

.sh-footer__credits,
.sh-footer__copyright {
	white-space: normal;
}

/* Small phones adjustment */
@media (max-width: 374px) {
	.sh-logo-fallback__tagline {
		display: none;
	}

	.sh-footer__bottom {
		font-size: 0.6875rem;
	}
}

/* Tablet portrait and up (768px) */
@media (min-width: 768px) {
	.sh-header {
		width: calc(100% - 40px);
	}

	.sh-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.sh-footer__brand {
		grid-column: 1 / -1;
	}

	.sh-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.sh-footer__credits,
	.sh-footer__copyright {
		white-space: nowrap;
	}
}

/* Tablet landscape (1024px) — desktop nav appears, mobile trigger hides */
@media (min-width: 1024px) {
	.sh-header {
		top: 20px;
		width: calc(100% - 48px);
	}

	.sh-header__inner {
		height: var(--sh-header-height);
		padding-inline: var(--sh-space-6);
	}

	.sh-header__logo img {
		max-height: calc(var(--sh-header-height) - 24px);
	}

	.sh-nav--desktop {
		display: block;
	}

	.sh-nav-toggle,
	.sh-mobile-menu {
		display: none;
	}

	.sh-header__cta {
		display: inline-flex;
	}

	.sh-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr;
	}

	.sh-footer__brand {
		grid-column: auto;
	}
}

/* Large desktop (1280px+) */
@media (min-width: 1280px) {
	.sh-header__inner {
		gap: var(--sh-space-6);
	}
}

/* Ultra-wide (1920px+) keeps container centered, no stretching */
@media (min-width: 1920px) {
	.sh-container {
		width: min(calc(100% - 96px), var(--sh-container-width));
	}
}