/* =========================================================
   TIVOLI — header.css
   Sticky header, desktop nav, mobile hamburger + drawer.
   ========================================================= */

/* Baner informacyjny w pasku na górze strony (2026-08) — patrz
   header.php. Zwykły element w normalnym przepływie dokumentu (bez
   position:fixed/sticky), więc nigdy nie może zasłonić .site-header
   (który jest position:sticky i "przyklei się" do góry viewportu
   dopiero po przewinięciu strony poniżej banera) ani innych elementów. */
.tivoli-info-banner {
	background: var(--color-green-900);
	color: var(--color-cream);
	text-align: center;
	padding: 0.75rem 1rem;
	border-bottom: 3px solid var(--color-gold);
	box-sizing: border-box;
}

/* "Darmowa dostawa do końca sierpnia" (użytkownik 2026-08) — pierwsza,
   najbardziej widoczna linia paska: ten sam krój/waga co __headline
   niżej, ale --color-red zamiast --color-gold-soft, żeby czerwień na
   ciemnozielonym tle sama w sobie przyciągała wzrok jako pierwsza,
   niezależnie od rozmiaru. Ten sam czerwony token co cena po promocji
   "druga pizza -50%" w panelu pracownika (inc/woo-bridge.php,
   tivoli_format_shipping_cost_pl() sąsiad) — nie nowo wymyślony kolor. */
.tivoli-info-banner__free-shipping {
	margin: 0 0 0.2rem;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--color-red);
	letter-spacing: 0.01em;
}

.tivoli-info-banner__headline {
	margin: 0 0 0.2rem;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--color-gold-soft);
	letter-spacing: 0.01em;
}

/* "DRUGA PIZZA -50%" — najbardziej widoczny fragment nagłówka:
   nieco większy i jaśniejszy (--color-cream zamiast --color-gold-soft
   reszty linii) niż otaczający tekst, bez zmiany reszty stylu paska. */
.tivoli-info-banner__highlight {
	font-size: 1.15em;
	color: var(--color-cream);
}

/* Dwa osobne akapity (nie jeden tekst z zawijaniem) — <p> jest domyślnie
   blokowy, więc druga linia nigdy nie może "wskoczyć" obok pierwszej,
   niezależnie od szerokości ekranu. Odstęp między nimi ustawiony tylko
   przez sąsiedni selektor niżej, żeby pasek zostawał kompaktowy. */
.tivoli-info-banner__body {
	margin: 0 auto;
	max-width: 720px;
	font-size: 0.85rem;
	line-height: 1.4;
}

.tivoli-info-banner__body + .tivoli-info-banner__body {
	margin-top: 0.15rem;
}

@media (max-width: 480px) {
	.tivoli-info-banner { padding: 0.65rem 0.85rem; }
	.tivoli-info-banner__free-shipping { font-size: 0.92rem; }
	.tivoli-info-banner__headline { font-size: 0.88rem; }
	.tivoli-info-banner__body { font-size: 0.8rem; }
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
	border-bottom: 1px solid transparent;
	transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

/* Bugfix: background/blur moved off .site-header itself onto a ::before
   pseudo-element. backdrop-filter (like transform/filter/perspective)
   creates a new containing block for position:fixed descendants — with
   it directly on .site-header, the mobile nav drawer (.site-nav is
   position:fixed on mobile, see the ≤900px block below) was being sized
   relative to the ~header-bar-height box instead of the actual viewport,
   so the "full-screen" dark green overlay was really only as tall as the
   header bar itself, with its last item(s) spilling past that short box
   onto the page content below. Same visual result (identical background/
   blur), one DOM level removed so it can no longer hijack a fixed-position
   descendant's containing block. */
.site-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(247, 242, 228, 0.88);
	backdrop-filter: blur(14px) saturate(1.4);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
}

.site-header.is-scrolled {
	box-shadow: var(--shadow-header);
	border-bottom-color: var(--color-cream-line);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	padding-block: var(--space-sm);
	transition: padding var(--dur-base) var(--ease-out);
}

.site-header.is-scrolled .site-header__inner {
	padding-block: var(--space-2xs);
}

/* ---------- Logo ---------- */
.site-logo {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	flex-shrink: 0;
}

/* Logo image only — no background, no circle, no extra container:
   it's already a complete circular badge in the source file. */
.site-logo__mark {
	display: block;
	height: 56px;
	width: auto;
	flex-shrink: 0;
	transition: height var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.site-header.is-scrolled .site-logo__mark {
	height: 44px;
}

.site-logo:hover .site-logo__mark {
	transform: rotate(-6deg);
}

.site-logo__wordmark {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.site-logo__wordmark strong {
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--color-green-800);
}

.site-logo__wordmark span {
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-gold-deep);
}

/* ---------- Desktop nav ---------- */
.site-nav {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.site-nav__list a {
	position: relative;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--color-ink);
	padding-block: 0.3em;
}

.site-nav__list a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1.5px;
	background: var(--color-green-700);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--dur-base) var(--ease-out);
}

.site-nav__list a:hover::after,
.site-nav__list .current-menu-item a::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* Same two-layer ring as .btn:focus-visible (components.css) — this
   link is used both on the light desktop header AND inside the dark
   green-900 mobile drawer, so it needs to stay visible on both. */
.site-nav__list a:focus-visible {
	outline: none;
	border-radius: var(--radius-sm);
	box-shadow: 0 0 0 3px var(--color-cream), 0 0 0 5px var(--color-gold-deep);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

/* ---------- Account link (icon: "Zaloguj się" / "Moje konto") ---------- */
.account-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: var(--color-green-800);
	flex-shrink: 0;
	transition: background var(--dur-fast) var(--ease-out);
}

.account-link:hover,
.account-link:focus-visible {
	background: var(--color-green-100);
}

.account-link:focus-visible,
.cart-link:focus-visible,
.nav-toggle:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--color-green-700);
}

.account-link__icon {
	width: 22px;
	height: 22px;
}

/* ---------- Cart link (icon + count badge) ---------- */
.cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: var(--color-green-800);
	flex-shrink: 0;
	transition: background var(--dur-fast) var(--ease-out);
}

.cart-link:hover,
.cart-link:focus-visible {
	background: var(--color-green-100);
}

.cart-link__icon {
	width: 22px;
	height: 22px;
}

.cart-link__badge {
	position: absolute;
	top: 1px;
	right: 1px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-full);
	background: var(--color-gold);
	color: var(--color-green-900);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
}

/* ETAP 26 — one-shot "just added to cart" pulse. .cart-link--pulse is
   only ever printed server-side on the exact page load right after a
   successful add-to-cart redirect (inc/woo-bridge.php); the animation
   itself (assets/css/animations.css @keyframes tivoli-cart-pulse) runs
   once (no `infinite`) and never recurs until the next real add. */
.cart-link--pulse .cart-link__badge {
	animation: tivoli-cart-pulse 0.7s var(--ease-out);
}

/* ---------- Hamburger ---------- */
.nav-toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	flex-shrink: 0;
	z-index: 210;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
	background: var(--color-green-100);
}

.nav-toggle__bars {
	position: relative;
	width: 20px;
	height: 14px;
}

.nav-toggle__bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--color-ink);
	border-radius: 2px;
	transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out), top var(--dur-base) var(--ease-out);
}

.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }

.nav-open .nav-toggle__bars span:nth-child(1) {
	top: 6px;
	transform: rotate(45deg);
}

.nav-open .nav-toggle__bars span:nth-child(2) {
	opacity: 0;
}

.nav-open .nav-toggle__bars span:nth-child(3) {
	top: 6px;
	transform: rotate(-45deg);
}

/* ---------- Mobile drawer ---------- */
@media (max-width: 900px) {
	.nav-toggle {
		display: inline-flex;
	}

	/* ETAP 17C (audyt 17A) — considered collapsing this and the paired
	   rule below (.site-header__mobile-cta, ~40 lines down) into a
	   single "Zamów online" button that CSS repositions instead of two
	   separate <a> elements in header.php. Rejected: the mobile-cta
	   lives inside .site-nav (position:fixed drawer, a DIFFERENT parent
	   than .site-header__actions) — the only way to make one element
	   serve both spots would be `position:fixed` coordinate-matching
	   trickery independent of the drawer's own flex layout, which is
	   MORE fragile than the current pair, not less. Left as two
	   elements; tidied instead by cross-referencing both ends of the
	   pairing so an edit to one is more likely to catch the other.
	   THIS rule hides the desktop button ≤900px — its counterpart,
	   `.site-header__mobile-cta { display:none }` + the `min-width:901px`
	   override that un-hides it, must stay in sync at the same
	   breakpoint (900/901px) for exactly one "Zamów online" button to
	   ever be visible at a time. */
	.site-header__actions .btn--primary {
		display: none;
	}

	/* Only the "Zamów online" button hides above — .site-header__actions
	   itself stays in flow so the cart link inside it remains visible.
	   With justify-content: space-between and only 3 items left in flow
	   (logo, nav-toggle, actions), pin the logo left so nav-toggle and
	   the cart link group together at the right instead of spreading
	   evenly across the header. */
	.site-logo {
		margin-right: auto;
	}

	.site-nav {
		position: fixed;
		inset: 0;
		z-index: 200;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: var(--space-xl);
		padding: var(--space-2xl) var(--space-lg);
		background: var(--color-green-900);
		color: var(--color-cream);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-12px);
		transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
		/* Bugfix: on short viewports (small phones, or mobile browser
		   chrome eating into the visible height) the centered content
		   (5 links + CTA + gaps) can be taller than the fixed inset:0
		   box. Without overflow handling that excess simply spilled past
		   the box's own edges, so the last item ("Kontakt") rendered
		   below the dark-green background on the page's light background
		   behind it — with light/cream text, effectively invisible.
		   overflow-y:auto keeps any overflow as an internal scroll inside
		   the still-fully-green fixed panel instead of letting it escape
		   the box. -webkit-overflow-scrolling for smooth momentum
		   scrolling on older iOS Safari. */
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.nav-open .site-nav {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
		transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear 0s;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-md);
	}

	.site-nav__list a {
		font-family: var(--font-display);
		font-size: var(--fs-h3);
		color: var(--color-cream);
		font-weight: 500;
	}

	.site-nav__list a::after {
		background: var(--color-gold);
	}

	.site-header__mobile-cta {
		display: block;
	}
}

/* Bugfix: on narrow phones (~360-390px) the header row — logo + hamburger
   + account/cart icons, all flex-shrink:0 — needs slightly more width
   than the container has once you add up two var(--space-lg) (40px) row
   gaps, causing document-level horizontal overflow (confirmed empirically:
   at 360px viewport the row needed ~375px; at 412px+ there's already
   ~20px to spare, unaffected by this rule). Only the gap tightens here —
   nothing moves, resizes, hides, or changes in appearance beyond that. */
@media (max-width: 400px) {
	.site-header__inner {
		gap: var(--space-sm);
	}
}

/* Counterpart to `.site-header__actions .btn--primary { display:none }`
   at ≤900px, above — see that rule's comment. This is the OTHER
   "Zamów online" instance (inside the mobile drawer, header.php
   .site-header__mobile-cta), hidden by default and only shown by the
   ≤900px block above. */
.site-header__mobile-cta {
	display: none;
}

@media (min-width: 901px) {
	.site-header__mobile-cta {
		display: none !important;
	}
}

body.nav-open {
	overflow: hidden;
}