/*!
 * @be-partner-labs/ds v1.8.0 — components/header
 * © 2026 Be Partner Labs. MIT License.
 *
 * CDN:  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@be-partner-labs/ds@1.8.0/dist/components/header.min.css">
 * npm:  @import "@be-partner-labs/ds/components/header";
 * Docs: https://ds.bepartnerlabs.com/components/header/
 */
@layer bp-tokens, bp-reset, bp-grid, bp-components, bp-utilities;

@layer bp-components {
	/**
	 * .bp-header
	 * Sticky site header with optional glassmorphism.
	 * Public API:
	 *   --header-background         Background color / fallback
	 *   --header-height     Header height
	 *   --header-z          z-index
	 *   --header-shadow     Box shadow when scrolled
	 */
	.bp-header {
		--_background: var(--header-background, var(--bp-color-bg-elevated));
		--_height: var(--header-height, 4rem);
		--_z: var(--header-z, 100);

		position: sticky;
		top: 0;
		z-index: var(--_z);
		height: var(--_height);
		background-color: var(--_background);
		border-bottom: 1px solid var(--bp-color-border);
		view-transition-name: bp-header;
		contain: layout;
		transition:
			box-shadow var(--bp-duration-normal) var(--bp-ease),
			border-color var(--bp-duration-normal) var(--bp-ease),
			background-color var(--bp-duration-normal) var(--bp-ease);
	}

	/* Glassmorphism — only when supported */
	@supports (backdrop-filter: blur(1px)) {
		.bp-header {
			background-color: color-mix(in srgb, var(--_background) 80%, transparent);
			backdrop-filter: blur(12px) saturate(180%);
			-webkit-backdrop-filter: blur(12px) saturate(180%);
		}
	}

	.bp-header.is-scrolled {
		box-shadow: var(--bp-shadow-md);
		border-bottom-color: transparent;
	}

	.bp-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
		max-width: 90rem;
		margin-inline: auto;
		padding-inline: var(--bp-space-6);
		gap: var(--bp-space-8);
	}

	.bp-header__logo {
		display: flex;
		align-items: center;
		gap: var(--bp-space-3);
		text-decoration: none;
		color: var(--bp-color-text);
		font-size: var(--bp-text-lg);
		font-weight: var(--bp-font-weight-bold);
		flex-shrink: 0;
	}

	.bp-header__logo:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
		border-radius: var(--bp-radius-sm);
	}

	.bp-header__actions {
		display: flex;
		align-items: center;
		gap: var(--bp-space-3);
		flex-shrink: 0;
		container-type: inline-size;
	}
}