/* ==========================================================================
   header.css — site header, branding, primary navigation
   ========================================================================== */

@layer components {
	.site-header {
		background: var(--color-bg);
		border-bottom: 1px solid var(--color-border);
		box-shadow: var(--shadow-sm);
	}

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

	.site-title {
		font-size: 1.5rem;
		margin: 0;
		font-weight: 800;
	}

	.site-title a {
		color: var(--color-text);
		text-decoration: none;
	}

	.site-description {
		margin: 0;
		color: var(--color-muted);
		font-size: 0.875rem;
	}

	.main-navigation {
		position: relative;
	}

	.main-navigation ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		gap: var(--space-md);
	}

	.main-navigation a {
		color: var(--color-text);
		font-weight: 500;
		padding: var(--space-xs) 0;
	}

	.main-navigation a:hover {
		color: var(--color-primary);
		text-decoration: none;
	}

	.menu-toggle {
		display: none;
		background: transparent;
		border: 1px solid var(--color-border);
		border-radius: var(--radius);
		padding: 0.5rem 0.75rem;
	}

	.menu-toggle__bar,
	.menu-toggle__bar::before,
	.menu-toggle__bar::after {
		display: block;
		width: 22px;
		height: 2px;
		background: var(--color-text);
		position: relative;
	}

	.menu-toggle__bar::before,
	.menu-toggle__bar::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.menu-toggle__bar::before { top: -7px; }
	.menu-toggle__bar::after { top: 7px; }

	@media (max-width: 768px) {
		.menu-toggle { display: inline-flex; }

		.main-navigation ul {
			display: none;
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			flex-direction: column;
			background: var(--color-bg);
			border-bottom: 1px solid var(--color-border);
			padding: var(--space-sm) var(--space-md);
			gap: var(--space-xs);
		}

		.main-navigation.is-open ul { display: flex; }
	}
}