---
import Search from '@astrojs/starlight/components/Search.astro';
import SocialIcons from '@astrojs/starlight/components/SocialIcons.astro';
import SiteTitle from './SiteTitle.astro';
---

<div class="header">
	<div class="title-wrapper sl-flex">
		<SiteTitle />
	</div>
	<div class="sl-flex print:hidden search-wrapper">
		<Search />
	</div>
	<div class="sl-hidden md:sl-flex print:hidden right-group">
		<nav class="text-links" aria-label="Site">
			<a href="/docs/">docs</a>
			<a href="/blog/">blog</a>
		</nav>
		<div class="sl-flex social-icons">
			<SocialIcons />
		</div>
	</div>
</div>

<style>
	.header {
		display: flex;
		gap: var(--sl-nav-gap);
		justify-content: space-between;
		align-items: center;
		height: 100%;
	}

	/* bomb.sh parity: dim the logo while hovering the nav links */
	.header:has(.right-group a:hover) :global(.site-title) {
		color: var(--color-gray-60);
	}

	.title-wrapper {
		/* Prevent long titles overflowing and covering the search and menu buttons on narrow viewports. */
		overflow: clip;
		/* Avoid clipping focus ring around link inside title wrapper. */
		padding: 0.25rem;
		margin: -0.25rem;
		min-width: 0;
	}

	.search-wrapper {
		flex-grow: 1;
		/* Stretch through the nav's block padding so the search runs the full
		   nav height — its side borders become vertical grid bars. */
		align-self: stretch;
		margin-block: calc(-1 * var(--sl-nav-pad-y));
	}

	@media (min-width: 50rem) {
		/* Size the title column so the search's left bar lands exactly on the
		   sidebar/content boundary. The trailing +0.5rem compensates for this
		   element's own negative margins (focus-ring clipping trick above),
		   which otherwise pull the row 8px tighter. */
		.title-wrapper {
			width: calc(
				var(--sl-sidebar-width) - var(--sl-nav-pad-x) - var(--sl-nav-gap) +
					0.5rem
			);
			flex-shrink: 0;
		}
	}

	.right-group,
	.social-icons {
		gap: 1rem;
		align-items: center;
	}

	.text-links {
		display: flex;
		gap: var(--space-150);
		align-items: center;
		font-family: var(--sl-font);
		font-size: var(--sl-text-sm);
	}
	.text-links a {
		color: var(--sl-color-text);
		text-decoration: none;
		padding-inline: var(--space-150);
		border-radius: 4px;
		transition: color 300ms cubic-bezier(0.23, 1, 0.32, 1);
	}
	.text-links a:hover {
		color: var(--color-pink-100);
	}
	.text-links a:focus-visible {
		outline: 2px solid var(--color-pink-100);
		outline-offset: 2px;
	}

	.social-icons :global(a) {
		padding: 0.4em;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
	}
	.social-icons :global(a:hover) {
		background: var(--surface-fill);
		color: var(--heading-highlight);
		transform: scale(1.05);
	}
	.social-icons :global(a:focus-visible) {
		outline: 2px solid var(--color-pink-100);
		outline-offset: 2px;
	}
</style>