/* Foglight — header.css
   Site header, primary navigation (desktop + mobile off-canvas), and the
   .social-links component shared between the header and footer. */

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-4);
}

.site-branding__logo img {
	max-height: 40px;
	width: auto;
}

.site-branding__title {
	font-size: var(--step-1);
	font-weight: 700;
}

.site-branding__tagline {
	font-size: var(--step--1);
	color: var(--color-secondary);
}

.site-header__controls {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	z-index: 60;
}

.menu-toggle__icon--close {
	display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon--open {
	display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon--close {
	display: block;
}

.primary-navigation__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.primary-navigation__list a {
	font-weight: 600;
	font-size: var(--step-1);
}

.social-links {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.social-links__link {
	display: inline-flex;
	color: var(--color-primary);
	transition: opacity var(--duration-fast) var(--ease-out);
}

.social-links__link:hover,
.social-links__link:focus-visible {
	opacity: 0.6;
}

/* Mobile: off-canvas panel, closed by default */
@media (max-width: 899px) {
	.primary-navigation {
		position: fixed;
		inset: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--space-8);
		padding: var(--space-8) var(--container-gutter);
		background: var(--color-bg);
		transform: translateX(100%);
		transition: transform var(--duration-base) var(--ease-out);
		z-index: 50;
	}

	.primary-navigation.is-open {
		transform: translateX(0);
	}

	.primary-navigation .social-links {
		margin-top: var(--space-6);
	}
}

/* Desktop: inline horizontal nav, no toggle */
@media (min-width: 900px) {
	.menu-toggle {
		display: none;
	}

	.site-header__controls {
		flex-direction: row-reverse;
	}

	.primary-navigation__list {
		flex-direction: row;
		align-items: center;
		gap: var(--space-6);
	}

	.primary-navigation__list a {
		font-size: var(--step--1);
	}

	.primary-navigation {
		display: flex;
		align-items: center;
		gap: var(--space-7);
	}
}