/**
 * Header — top contact bar and the sticky site header (logo, nav, CTA).
 *
 * @package Geras_Custom
 */

/* ------------------------------------------------------------------
 * Top bar
 * ------------------------------------------------------------------ */

.topbar {
	background: var( --c-cocoa-900 );
	color: var( --color-on-dark );
	font-size: var( --fs-13-5 );
}

.topbar__inner {
	max-width: var( --container );
	margin: 0 auto;
	padding: 0 var( --container-px );
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-16 );
	min-height: var( --space-40 );
}

.topbar__contacts {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-26 );
}

.topbar__link {
	display: inline-flex;
	align-items: center;
	gap: var( --space-7 );
	opacity: .92;
	transition: opacity var( --transition-fast ), color var( --transition-fast );
}

.topbar__link:hover {
	opacity: 1;
	color: var( --color-accent-soft );
}

.topbar__icon {
	flex: none;
}

.topbar__cta {
	font-weight: var( --fw-bold );
	color: var( --color-accent-soft );
}

@media ( max-width: 767px ) {

	.topbar__inner {
		justify-content: center;
		text-align: center;
	}

	.topbar__contacts {
		justify-content: center;
	}
}

/* ------------------------------------------------------------------
 * Site header
 * ------------------------------------------------------------------ */

.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var( --surface-header );
	backdrop-filter: var( --blur-header );
	-webkit-backdrop-filter: var( --blur-header );
	border-bottom: 1px solid var( --color-border );
	transition: box-shadow var( --transition-base );
}

.site-header.is-scrolled {
	box-shadow: var( --shadow-lift );
}

.site-header__inner {
	max-width: var( --container );
	margin: 0 auto;
	padding: 0 var( --container-px );
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-24 );
	min-height: var( --space-84 );
}

.site-header__logo,
.site-header__logo-img {
	display: flex;
	align-items: center;
	flex: none;
}

.site-header__logo-img {
	height: var( --space-56 );
	width: auto;
	filter: drop-shadow( 0 var( --space-3 ) var( --space-6 ) var( --c-cocoa9-a18 ) );
}

/* ------------------------------------------------------------------
 * Primary nav
 * ------------------------------------------------------------------ */

.site-header__nav-list {
	display: flex;
	align-items: center;
	gap: var( --space-6 );
}

.site-header__nav-item {
	position: relative;
}

.site-header__nav-link,
.site-header__submenu-link {
	display: inline-flex;
	align-items: center;
	gap: var( --space-6 );
}

.site-header__nav-link {
	padding: var( --space-10 ) var( --space-15 );
	border-radius: var( --radius-pill );
	font-weight: var( --fw-bold );
	font-size: var( --fs-15-5 );
	color: var( --color-heading );
	transition: background var( --transition-fast ), box-shadow var( --transition-fast );
}

.site-header__nav-link:hover,
.site-header__nav-link:focus {
	background: var( --surface-cream );
	color: var( --color-heading );
}

.site-header__nav-item.current-menu-item > .site-header__nav-link {
	background: var( --surface-cream );
	box-shadow: var( --ring-honey );
}

.site-header__chevron {
	flex: none;
	transition: transform var( --transition-fast );
}

.site-header__nav-item--has-children:hover > .site-header__nav-link .site-header__chevron,
.site-header__nav-item--has-children:focus-within > .site-header__nav-link .site-header__chevron {
	transform: rotate( 180deg );
}

/* "Produkty" dropdown — not shown open in the mockup; styled from the shared
 * card/elevation tokens so it reads as part of the same system. */
.site-header__submenu {
	position: absolute;
	top: 100%;
	left: 0;
	margin: var( --space-8 ) 0 0;
	padding: var( --space-8 );
	border-radius: var( --radius-16 );
	background: var( --surface-page );
	box-shadow: var( --shadow-float );
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transform: translateY( calc( -1 * var( --space-6 ) ) );
	transition: opacity var( --transition-fast ), transform var( --transition-fast ), visibility var( --transition-fast );
	z-index: 10;
}

.site-header__nav-item--has-children:hover > .site-header__submenu,
.site-header__nav-item--has-children:focus-within > .site-header__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}

.site-header__submenu-link {
	padding: var( --space-10 ) var( --space-15 );
	border-radius: var( --radius-12 );
	font-weight: var( --fw-medium );
	font-size: var( --fs-14-5 );
	color: var( --color-heading );
	transition: background var( --transition-fast );
}

.site-header__submenu-link:hover,
.site-header__submenu-link:focus {
	background: var( --surface-cream );
	color: var( --color-heading );
}

/* ------------------------------------------------------------------
 * CTA button and burger
 * ------------------------------------------------------------------ */

.site-header__cta {
	flex: none;
}

.site-header__burger {
	flex: none;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var( --space-5 );
	min-width: var( --space-44 );
	min-height: var( --space-44 );
	padding: var( --space-10 );
	border: none;
	background: none;
	cursor: pointer;
}

.site-header__burger-bar {
	display: block;
	width: var( --space-24 );
	height: var( --space-2-5 );
	border-radius: var( --radius-2 );
	background: var( --color-heading );
}

/* ------------------------------------------------------------------
 * Mobile — derived (responsive.md mode 3): header collapses to logo +
 * burger, the drawer renders the same registered menu as an absolute
 * panel below the header, matching the mockup's own drawer styling.
 * ------------------------------------------------------------------ */

@media ( max-width: 767px ) {

	.site-header__cta {
		display: none;
	}

	.site-header__burger {
		display: flex;
	}

	.site-header__nav {
		display: none;
	}

	.site-header__nav.is-open {
		display: block;
	}

	.site-header__nav.is-open .site-header__nav-list {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: var( --space-2 );
		background: var( --surface-page );
		box-shadow: var( --shadow-float );
		padding: var( --space-16 ) var( --space-20 ) var( --space-22 );
		border-bottom: 1px solid var( --color-border );
	}

	.site-header__nav.is-open .site-header__nav-link,
	.site-header__nav.is-open .site-header__submenu-link {
		min-height: var( --space-44 );
	}

	.site-header__nav.is-open .site-header__submenu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		margin: 0;
		padding: 0 0 0 var( --space-16 );
		box-shadow: none;
		background: none;
		white-space: normal;
	}
}