/* ==========================================================================
   WE Coffee — Header / Nawigacja
   Style sticky headera i nawigacji. Współpracuje z Astra Header Builder.
   ========================================================================== */

/* Sticky header */
.ast-primary-header-bar,
.site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background-color: var(--wecoffee-color-surface, #fff);
	transition:
		background-color var(--wecoffee-duration-slow, 400ms) var(--wecoffee-ease, ease),
		border-color var(--wecoffee-duration-slow, 400ms) var(--wecoffee-ease, ease),
		box-shadow var(--wecoffee-duration-slow, 400ms) var(--wecoffee-ease, ease);
}

/* Subtelny cień po scrollu — dodawany przez JS lub CSS scroll-driven */
.site-header.wecoffee-header-scrolled {
	box-shadow: var(--wecoffee-shadow-sm, 0 1px 3px rgba(0,0,0,0.04));
}

/*
 * The homepage header overlays its full-screen carousel instead of taking
 * space above it. This scope does not rely on Astra's optional transparent
 * header body class.
 */
body.home .site-header {
	background-color: transparent;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
}

body.home .ast-primary-header-bar {
	background-color: transparent;
	border-bottom-color: transparent;
	position: relative;
	transition:
		background-color var(--wecoffee-duration-slow, 400ms) var(--wecoffee-ease, ease),
		border-bottom-color var(--wecoffee-duration-slow, 400ms) var(--wecoffee-ease, ease);
}

body.home .site-header.wecoffee-header-scrolled,
body.home .site-header.wecoffee-header-scrolled .ast-primary-header-bar {
	background-color: var(--wecoffee-color-surface, #fff);
}

body.home .site-header.wecoffee-header-scrolled .ast-primary-header-bar {
	border-bottom-color: var(--wecoffee-color-border, #E5E0D8);
}

body.admin-bar.home .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar.home .site-header {
		top: 46px;
	}
}

body.home .site-header:not(.wecoffee-header-scrolled) .site-title a,
body.home .site-header:not(.wecoffee-header-scrolled) .ast-header-account-wrap {
	color: var(--wecoffee-color-white, #fff);
}

body.home:not(.ast-header-break-point) .site-header:not(.wecoffee-header-scrolled) .main-header-menu > .menu-item > .menu-link {
	color: var(--wecoffee-color-white, #fff);
}

/* Typografia menu */
.main-header-menu > .menu-item > .menu-link {
	font-family: var(--wecoffee-font-body, 'Inter', sans-serif);
	font-size: var(--wecoffee-text-small, 0.875rem);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--wecoffee-color-text, #2C2C2C);
	transition: color var(--wecoffee-duration-slow, 400ms) var(--wecoffee-ease, ease);
}

.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .menu-item.current-menu-item > .menu-link {
	color: var(--wecoffee-color-primary, #3B2820);
}

/* Header border-bottom */
.ast-primary-header-bar {
	border-bottom: 1px solid var(--wecoffee-color-border, #E5E0D8);
}

/*
 * Logo sizing
 *
 * Astra generates a separate responsive width for desktop, tablet and mobile.
 * Do not set a width or max-height on the wrapper because that can collapse or
 * clip the logo at individual breakpoints.
 */
.site-header .site-logo-img {
	line-height: 0;
	max-width: 100%;
}

.site-header .custom-logo-link {
	display: inline-block;
	line-height: 0;
	max-width: 100%;
	position: relative;
	vertical-align: middle;
}

.site-header .custom-logo {
	aspect-ratio: 123.5 / 38.39;
	display: block;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
	transition: none;
}

/*
 * The Customizer logo is the "on light" variant. On the transparent homepage
 * header, keep that image in the layout to preserve its responsive dimensions
 * and accessibility. Render both colour variants as identically sized layers
 * so the transition cannot move between img and background rendering models.
 */
body.home .site-header .custom-logo {
	opacity: 0;
}

body.home .site-header .custom-logo-link::before,
body.home .site-header .custom-logo-link::after {
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity var(--wecoffee-duration-slow, 400ms) var(--wecoffee-ease, ease);
}

body.home .site-header .custom-logo-link::before {
	background-image: url("/wp-content/uploads/2026/07/logo-we-poziom-on-light.svg");
	opacity: 1;
}

body.home .site-header .custom-logo-link::after {
	background-image: url("/wp-content/uploads/2026/07/logo-we-poziom-on-dark.svg");
	opacity: 0;
	/*
	 * The on-dark export is shifted 1.09 units to the right inside its
	 * 123.5-unit viewBox. Compensate for that source-artwork offset.
	 */
	transform: translateX(-0.8826%);
}

body.home .site-header:not(.wecoffee-header-scrolled) .custom-logo-link::before {
	opacity: 0;
}

body.home .site-header:not(.wecoffee-header-scrolled) .custom-logo-link::after {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	body.home .site-header .custom-logo-link::before,
	body.home .site-header .custom-logo-link::after {
		transition: none;
	}
}

/* Social icons follow the same colour state as navigation and cart. */
.site-header .ast-header-social-wrap {
	--wecoffee-header-social-color: var(--wecoffee-color-primary, #3B2820);
}

body.home .site-header:not(.wecoffee-header-scrolled) .ast-header-social-wrap {
	--wecoffee-header-social-color: var(--wecoffee-color-white, #fff);
}

.site-header .ast-header-social-wrap .ast-builder-social-element {
	color: var(--wecoffee-header-social-color);
	transition:
		color var(--wecoffee-duration-slow, 400ms) var(--wecoffee-ease, ease),
		opacity var(--wecoffee-duration-slow, 400ms) var(--wecoffee-ease, ease);
}

.site-header .ast-header-social-wrap .ast-builder-social-element svg {
	fill: currentColor;
	transition: fill var(--wecoffee-duration-slow, 400ms) var(--wecoffee-ease, ease);
}

.site-header .ast-header-social-wrap .ast-builder-social-element:hover,
.site-header .ast-header-social-wrap .ast-builder-social-element:focus-visible {
	color: var(--wecoffee-header-social-color);
	opacity: 0.72;
}

@media (prefers-reduced-motion: reduce) {
	.site-header .ast-header-social-wrap .ast-builder-social-element,
	.site-header .ast-header-social-wrap .ast-builder-social-element svg {
		transition: none;
	}
}

/* Koszyk w headerze */
.site-header .ast-site-header-cart {
	--wecoffee-header-cart-color: var(--wecoffee-color-primary, #3B2820);
}

body.home .site-header:not(.wecoffee-header-scrolled) .ast-site-header-cart {
	--wecoffee-header-cart-color: var(--wecoffee-color-white, #fff);
}

.site-header .ast-site-header-cart .ast-cart-menu-wrap,
.site-header .ast-site-header-cart .ast-addon-cart-wrap,
.site-header .ast-site-header-cart .ast-woo-header-cart-info-wrap {
	color: var(--wecoffee-header-cart-color);
	transition: color var(--wecoffee-duration-slow, 400ms) var(--wecoffee-ease, ease);
}

.site-header .ast-site-header-cart .ast-cart-menu-wrap .count,
.site-header .ast-site-header-cart .ast-cart-menu-wrap .count::after,
.site-header .ast-site-header-cart .ast-addon-cart-wrap .count,
.site-header .ast-site-header-cart .ast-addon-cart-wrap .ast-icon-shopping-cart::after {
	border-color: var(--wecoffee-header-cart-color);
	color: var(--wecoffee-header-cart-color);
	transition:
		border-color var(--wecoffee-duration-slow, 400ms) var(--wecoffee-ease, ease),
		color var(--wecoffee-duration-slow, 400ms) var(--wecoffee-ease, ease);
}

/* Pozostałe ikony w headerze */
.ast-header-account-wrap {
	color: var(--wecoffee-color-text, #2C2C2C);
	transition: color var(--wecoffee-duration-slow, 400ms) var(--wecoffee-ease, ease);
}

.ast-header-account-wrap:hover {
	color: var(--wecoffee-color-primary, #3B2820);
}

/* Mobile header and menu */
.ast-header-break-point .site-header {
	--wecoffee-mobile-header-color: var(--wecoffee-color-primary, #3B2820);
	--wecoffee-mobile-trigger-background: var(--wecoffee-color-primary, #3B2820);
	--wecoffee-mobile-trigger-foreground: var(--wecoffee-color-white, #fff);
}

body.home.ast-header-break-point .site-header:not(.wecoffee-header-scrolled) {
	--wecoffee-mobile-header-color: var(--wecoffee-color-white, #fff);
	--wecoffee-mobile-trigger-background: var(--wecoffee-color-white, #fff);
	--wecoffee-mobile-trigger-foreground: var(--wecoffee-color-primary, #3B2820);
}

.ast-header-break-point .site-header .site-title a {
	color: var(--wecoffee-mobile-header-color);
	transition: color var(--wecoffee-duration-slow, 400ms) var(--wecoffee-ease, ease);
}

.ast-header-break-point .site-header .ast-button-wrap .main-header-menu-toggle {
	border-color: var(--wecoffee-mobile-header-color);
	color: var(--wecoffee-mobile-header-color);
	transition:
		background-color var(--wecoffee-duration-slow, 400ms) var(--wecoffee-ease, ease),
		border-color var(--wecoffee-duration-slow, 400ms) var(--wecoffee-ease, ease),
		color var(--wecoffee-duration-slow, 400ms) var(--wecoffee-ease, ease);
}

.ast-header-break-point .site-header .ast-button-wrap .ast-mobile-menu-trigger-minimal {
	background: transparent;
	border-color: transparent;
	color: var(--wecoffee-mobile-header-color);
}

.ast-header-break-point .site-header .ast-button-wrap .ast-mobile-menu-trigger-outline {
	background: transparent;
	border-color: var(--wecoffee-mobile-header-color);
	color: var(--wecoffee-mobile-header-color);
}

.ast-header-break-point .site-header .ast-button-wrap .ast-mobile-menu-trigger-fill {
	background: var(--wecoffee-mobile-trigger-background);
	border-color: var(--wecoffee-mobile-trigger-background);
	color: var(--wecoffee-mobile-trigger-foreground);
}

.ast-header-break-point .site-header .mobile-menu-toggle-icon,
.ast-header-break-point .site-header .mobile-menu-toggle-icon .ast-mobile-svg {
	color: inherit;
	fill: currentColor;
}

.ast-header-break-point .site-header .ast-mobile-header-content,
.ast-header-break-point .site-header .main-header-bar-navigation,
.ast-header-break-point .site-header .main-header-menu,
.ast-header-break-point .site-header .main-header-menu .sub-menu {
	background-color: var(--wecoffee-color-surface, #fff);
}

.ast-header-break-point .site-header .main-header-menu > .menu-item > .menu-link,
.ast-header-break-point .site-header .main-header-menu > .menu-item > .ast-menu-toggle,
.ast-header-break-point .site-header .main-header-menu .sub-menu .menu-link {
	background-color: transparent;
	color: var(--wecoffee-color-text, #2C2C2C);
	transition:
		background-color var(--wecoffee-transition, 200ms ease),
		color var(--wecoffee-transition, 200ms ease);
}

.ast-header-break-point .site-header .main-header-menu > .menu-item:hover > .menu-link,
.ast-header-break-point .site-header .main-header-menu > .menu-item:hover > .ast-menu-toggle,
.ast-header-break-point .site-header .main-header-menu > .menu-item.current-menu-item > .menu-link,
.ast-header-break-point .site-header .main-header-menu > .menu-item.current-menu-item > .ast-menu-toggle,
.ast-header-break-point .site-header .main-header-menu > .menu-item.current-menu-ancestor > .menu-link,
.ast-header-break-point .site-header .main-header-menu > .menu-item.current-menu-ancestor > .ast-menu-toggle {
	background-color: transparent;
	color: var(--wecoffee-color-primary, #3B2820);
}

/* Dropdown menu */
.ast-header-break-point .main-header-menu {
	background-color: var(--wecoffee-color-surface, #fff);
	border-top: 1px solid var(--wecoffee-color-border, #E5E0D8);
}

.main-header-menu .sub-menu {
	background-color: var(--wecoffee-color-surface, #fff);
	border: 1px solid var(--wecoffee-color-border, #E5E0D8);
	border-radius: var(--wecoffee-radius-lg, 8px);
	box-shadow: var(--wecoffee-shadow-md, 0 4px 16px rgba(0,0,0,0.06));
	padding: var(--wecoffee-space-xs, 0.5rem) 0;
}

.main-header-menu .sub-menu .menu-link {
	font-size: var(--wecoffee-text-small, 0.875rem);
	padding: var(--wecoffee-space-xs, 0.5rem) var(--wecoffee-space-lg, 1.5rem);
}

.main-header-menu .sub-menu .menu-link:hover {
	background-color: var(--wecoffee-color-surface-alt, #F0EBE3);
}

@media (prefers-reduced-motion: reduce) {
	.site-header,
	.ast-primary-header-bar,
	.main-header-menu > .menu-item > .menu-link,
	.site-header .ast-header-social-wrap .ast-builder-social-element,
	.site-header .ast-header-social-wrap .ast-builder-social-element svg,
	.site-header .ast-site-header-cart .ast-cart-menu-wrap,
	.site-header .ast-site-header-cart .ast-addon-cart-wrap,
	.site-header .ast-site-header-cart .ast-woo-header-cart-info-wrap,
	.ast-header-account-wrap,
	.ast-header-break-point .site-header .site-title a,
	.ast-header-break-point .site-header .ast-button-wrap .main-header-menu-toggle {
		transition: none;
	}
}