/*
 * Site header (inc/site-header.php). Mockup: top bar of docs/sections/home/home_hero.png.
 * Wide screens: logo left, menu right. Below 60em: logo and a „Menu” button;
 * the menu opens as a panel under the bar. Without JavaScript the menu stays
 * visible under the logo.
 */

/* Sticky bar; below the WordPress admin bar when it is shown. */
.site-header
{
	/* Bar height at the top of the page and once it scrolls (compact). */
	--hf-header-bar: clamp(4.5rem, 3.75rem + 2vw, 6.5rem);
	--hf-header-bar-stuck: clamp(3.75rem, 3.25rem + 1vw, 4.5rem);
	position: sticky;
	z-index: 10;
	top: var(--wp-admin--admin-bar--height, 0px);
	/* Same left and right edge as .hf-container. */
	padding-inline: max(var(--hf-gutter), (100% - var(--hf-container-max)) / 2);
	border-bottom: 2px solid transparent;
	background: var(--hf-color-bg);
	transition: background-color var(--hf-transition), box-shadow var(--hf-transition), border-color var(--hf-transition), margin-bottom var(--hf-transition);
}

/*
 * Once the page scrolls: compact, raised and underlined in the brand colour.
 *
 * The compact bar keeps its place in the page: the height it gives up turns
 * into margin (with the same transition), so the content below stays put.
 * Without it the page got 22 px shorter at 1440, Chrome's scroll anchoring
 * scrolled back by as much, the page was at the top again and the bar grew:
 * the bar flickered endlessly at 9–31 px of scroll (2026-11-02). The second
 * guard is the gap between the two thresholds in site-header.js.
 */
.site-header.is-stuck
{
	margin-bottom: calc(var(--hf-header-bar) - var(--hf-header-bar-stuck));
	border-bottom-color: var(--hf-color-primary);
	background: color-mix(in srgb, var(--hf-color-surface) 92%, transparent);
	box-shadow: 0 8px 28px color-mix(in srgb, var(--hf-color-heading) 14%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* Genesis wraps the header content in .wrap. */
.site-header > .wrap
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--hf-space-s) var(--hf-space-l);
	min-height: var(--hf-header-bar);
	transition: min-height var(--hf-transition);
}

.site-header.is-stuck > .wrap
{
	min-height: var(--hf-header-bar-stuck);
}

/* Anchor jumps (e.g. #wydarzenia) stop below the sticky bar. */
html
{
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 5rem);
}

/* On phones the admin bar scrolls away, so the header sticks to the top. */
@media (max-width: 600px)
{
	.admin-bar .site-header
	{
		top: 0;
	}
}

.title-area
{
	flex: none;
}

.site-title
{
	margin: 0;
	line-height: 1;
}

/* Original logo (inline SVG drawn in currentColor). */
.hf-logo
{
	display: inline-flex;
	align-items: center;
	color: var(--hf-color-heading);
	text-decoration: none;
}

.hf-logo__image
{
	display: block;
	width: auto;
	height: clamp(2rem, 1.6rem + 1vw, 2.75rem);
	transition: height var(--hf-transition);
}

.site-header.is-stuck .hf-logo__image
{
	height: clamp(1.75rem, 1.5rem + 0.6vw, 2.25rem);
}

/* Fallback when the logo file is missing. */
.hf-logo__text
{
	font-family: var(--hf-font-display);
	font-size: 1.5rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* Menu */
.nav-primary .menu
{
	display: flex;
	flex-wrap: wrap;
	gap: 0 clamp(1.25rem, 0.25rem + 1.8vw, 2.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-primary .menu a
{
	display: block;
	padding-block: 0.6rem;
	color: var(--hf-color-heading);
	font-family: var(--hf-font-text);
	font-size: clamp(0.9375rem, 0.85rem + 0.25vw, 1.0625rem);
	text-decoration: none;
	text-decoration-color: var(--hf-color-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.45em;
}

.nav-primary .menu a:hover,
.nav-primary .current-menu-item > a,
.nav-primary .current-menu-ancestor > a
{
	text-decoration-line: underline;
}

/* Menu button: only on narrow screens and only when the script runs. */
.hf-nav-toggle
{
	display: none;
	align-items: center;
	gap: var(--hf-space-xs);
	min-height: 2.75rem;
	padding: var(--hf-space-xs) var(--hf-space-2xs);
	border: 0;
	background: none;
	color: var(--hf-color-heading);
	cursor: pointer;
	font: inherit;
}

.hf-nav-toggle__icon
{
	width: 1.5rem;
	height: 1.5rem;
}

.hf-nav-toggle[aria-expanded="true"] .hf-nav-toggle__icon--open,
.hf-nav-toggle[aria-expanded="false"] .hf-nav-toggle__icon--close
{
	display: none;
}

@media (max-width: 59.99em)
{
	.site-header.is-enhanced .hf-nav-toggle
	{
		display: inline-flex;
	}

	/* Only the logo and the button share the row, kept apart by
	   space-between: a smaller minimum gap keeps them on one row at 320 px
	   (163 + 40 + 86 px did not fit in 285 px, so the bar had two rows and
	   changed height when it turned compact, 2026-11-02). */
	.site-header.is-enhanced > .wrap
	{
		column-gap: var(--hf-space-s);
	}

	/* No script: the menu wraps to its own row under the logo. */
	.site-header:not(.is-enhanced) .nav-primary
	{
		flex-basis: 100%;
	}

	/* With the script: a panel under the bar, hidden until opened. */
	.site-header.is-enhanced .nav-primary
	{
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		display: none;
		padding: var(--hf-space-xs) var(--hf-gutter) var(--hf-space-l);
		border-top: 1px solid var(--hf-color-card-border);
		background: var(--hf-color-bg);
		box-shadow: 0 16px 24px color-mix(in srgb, var(--hf-color-heading) 10%, transparent);
	}

	.site-header.is-enhanced.is-open .nav-primary
	{
		display: block;
	}

	.site-header.is-enhanced .nav-primary .menu
	{
		flex-direction: column;
	}

	.site-header.is-enhanced .nav-primary .menu a
	{
		padding-block: 0.95rem;
		border-bottom: 1px solid var(--hf-color-card-border);
		font-size: 1.125rem;
	}
}