/* Nagłówek: logo, pasek menu, wyszukiwarka, przycisk menu mobilnego. */

.site-header {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--color-surface);
	border-bottom: var(--border-width) solid var(--color-border);
}

.header-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-16) var(--space-40);
	padding-block: var(--space-18);
}

.header-logo {
	display: flex;
}

.header-logo img {
	display: block;
	height: var(--size-logo-header);
	width: auto;
}

.nav-main {
	flex: 1 1 auto;
}

.nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-base-sm);
	font-weight: var(--weight-bold);
}

.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	min-height: var(--size-touch);
	padding: 0 var(--space-10);
	border: 0;
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--color-ink);
	font-weight: var(--weight-bold);
	text-decoration: none;
}

.nav-toggle:hover,
.nav-toggle.is-current,
.nav-toggle[aria-expanded="true"] {
	background: var(--color-tint);
	color: var(--color-brand);
}

.nav-toggle[aria-expanded="true"] .icon-sm {
	transform: rotate(180deg);
}

.header-actions {
	display: flex;
	gap: var(--space-8);
}

.header-icon-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--size-touch);
	height: var(--size-touch);
	border-radius: var(--radius-lg);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-bg);
	color: var(--color-brand);
}

.header-menu-toggle {
	display: none;
	border-color: var(--color-brand);
	background: var(--color-brand);
	color: var(--color-on-dark);
}

.header-menu-icon-open {
	display: flex;
}

.header-menu-icon-close {
	display: none;
}

.header-menu-toggle[aria-expanded="true"] {
	background: var(--color-tint);
	border-color: var(--color-tint);
	color: var(--color-brand);
}

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

.header-menu-toggle[aria-expanded="true"] .header-menu-icon-close {
	display: flex;
}


/* Pasek wyszukiwania pod nagłówkiem */
.header-search {
	border-top: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}

.header-search-inner {
	padding-block: var(--space-16);
}

.search-form {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	min-height: var(--size-button-xl);
	padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-16);
	border-radius: var(--radius-xl);
	border: var(--border-width) solid var(--color-border-input);
	background: var(--color-bg);
}

.search-form-field {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: var(--space-10);
	min-width: 0;
}

.search-form-icon {
	color: var(--color-brand);
}

.search-form-input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--size-touch);
	border: 0;
	background: transparent;
	font-size: var(--text-base);
	color: var(--color-text);
}

.search-form-input:focus {
	outline: none;
}

.search-form:focus-within {
	border-color: var(--color-brand);
}

.search-form-submit {
	min-height: var(--size-touch);
	padding: 0 var(--space-18);
	font-size: var(--text-md);
}

/* Przyciemnienie strony, gdy otwarte jest mega menu (bez nakładki pozycjonowanej) */
body.is-dimmed {
	background: var(--color-dim);
}

body.is-dimmed .site-main,
body.is-dimmed .site-footer {
	opacity: 0.12;
	pointer-events: none;
}

/* Tablet i mobile: menu w przycisku */
@media (max-width: 1023px) {
	.header-bar {
		flex-wrap: nowrap;
		gap: var(--space-8);
		padding-block: var(--space-10);
	}

	.header-logo {
		flex: 1 1 auto;
		min-width: 0;
	}

	.header-logo img {
		height: var(--size-logo-mobile);
	}

	.nav-main {
		display: none;
	}

	.header-menu-toggle {
		display: flex;
	}

	.mega {
		display: none;
	}
}

/* Tablet: większe logo i przycisk „Menu” z podpisem */
@media (min-width: 601px) and (max-width: 1023px) {
	.header-bar {
		padding-block: var(--space-14);
	}

	.header-logo img {
		height: var(--size-logo-header);
	}

	.header-menu-toggle {
		width: auto;
		gap: var(--space-8);
		padding: 0 var(--space-18);
		font-weight: var(--weight-extrabold);
		font-size: var(--text-base-sm);
	}
}

@media (max-width: 600px) {
	.header-menu-label {
		display: none;
	}

	.search-form-submit {
		display: none;
	}
}