/* ==========================================================================
   Brand overrides — loaded last, after the CDN stylesheets.
   Header identity: the real Sarkinen Calibrating wordmark, sized to read.
   ========================================================================== */

:root {
	--nav-height: 104px;
	--nav-height-scrolled: 88px;
	--nav-padding: 18px 60px;

	/* Brand-color fix: root.css (CDN, not editable from this repo) still ships
	   the generic starter theme's gold/silver placeholders (--color-primary:
	   #FFD700 etc.) - that's what was rendering as yellow "Learn More" buttons,
	   header CTA, and the gold CTA band. Override with the validated Sarkinen
	   tokens (navy #123954 / red #D30812 from 02-brand.spec.json) here, since
	   brand.css loads last and wins the cascade for the same custom properties. */
	--color-primary: #123954;
	--color-primary-hover: #0c2b40;
	--color-primary-light: rgba(18, 57, 84, 0.06);
	--color-primary-medium: rgba(18, 57, 84, 0.12);
	--color-primary-dark: #0c2b40;
	--color-secondary: #eaf1f6;
	--color-secondary-hover: #d7e3ec;
	--color-secondary-light: rgba(18, 57, 84, 0.04);
	--color-secondary-medium: rgba(18, 57, 84, 0.08);
	--color-secondary-dark: #c3d3e0;
	--color-text-brand: #d30812;
	--hero-gradient-start: rgba(18, 57, 84, 0.5);
}

.header-logo-container {
	min-width: 0;
}

.header-logo {
	height: 62px;
	max-width: 320px;
	width: auto;
	object-fit: contain;
	object-position: left center;
}

.header-wrapper.scrolled .header-logo {
	height: 52px;
	max-width: 280px;
	transition: height var(--transition-base) ease;
}

/* The homepage nav floats over the dark hero video before it condenses,
   so the navy wordmark needs to invert to white until then. */
.header-wrapper.is-over-hero:not(.scrolled) .header-logo {
	filter: brightness(0) invert(1);
}

.header-wrapper.is-over-hero .header-logo {
	transition: height var(--transition-base) ease, filter var(--transition-base) ease;
}

.footer-company-logo {
	height: 52px;
	width: auto;
	max-width: 260px;
	object-fit: contain;
}

@media (max-width: 1200px) {
	:root {
		--nav-height: 96px;
		--nav-height-scrolled: 84px;
	}

	.header-logo {
		height: 56px;
		max-width: 280px;
	}

	.header-wrapper.scrolled .header-logo {
		height: 48px;
	}
}

@media (max-width: 1080px) {
	:root {
		--nav-height: 90px;
		--nav-height-scrolled: 80px;
	}

	.header-logo {
		height: 52px;
		max-width: 250px;
	}

	.header-wrapper.scrolled .header-logo {
		height: 46px;
	}
}

@media (max-width: 640px) {
	:root {
		--nav-height: 78px;
		--nav-height-scrolled: 70px;
	}

	.header-logo {
		height: 44px;
		max-width: 205px;
	}

	.header-wrapper.scrolled .header-logo {
		height: 40px;
		max-width: 190px;
	}

	.footer-company-logo {
		height: 42px;
		max-width: 210px;
	}
}