/*-----------------------------------------------------------------------------------

	Klient:			Michal Doležal, truhlář
	Tier:			T1 Prezentační web
	Postavil:		Riverlab (riverlab.cz)
	Verze:			0.2 (koncept)
	Dodáno:			Listopad 2026

-----------------------------------------------------------------------------------
	OBSAH

	01. Hlavička

-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------
	ZAČÁTEK: 01. Hlavička
-----------------------------------------------------------------------------------*/

.lista {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--color-hero-bg);
	transition: background-color var(--dur-base) var(--ease-out);
}

/* Na úvodní stránce hero začíná pod lištou (místo si doplňuje vlastním odsazením), takže po
   zprůhlednění lišty je za jejími kraji hero a obsah stránky, ne prázdné krémové pozadí. */
.lista:has(+ main > .hero) {
	margin-bottom: calc(-1 * var(--header-h));
}

.lista__obsah {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	gap: var(--space-5);
	min-height: var(--header-h);
}

.lista__obsah > * {
	pointer-events: auto;
}

/* Nahoře na hero je lišta plochá přes celou šířku. Po posunu (třídu .je-posunuta nastaví
   main.js) se změní na tvar zavěšený na horním okraji okna: o kousek užší než stránka, dole
   s oblými rohy. Je o něco širší než obsah, takže logo a telefon sedí uvnitř. Stín ji drží
   čitelnou na krémovém i tmavém pozadí. */
.lista__obsah::before {
	content: "";
	position: absolute;
	inset: 0 max(var(--space-2), calc(var(--gutter) - var(--space-4)));
	z-index: -1;
	border-radius: 0 0 var(--radius-card) var(--radius-card);
	background: var(--color-hero-bg);
	box-shadow: 0 0.5rem 1.5rem var(--color-shadow);
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease-out);
}

.lista.je-posunuta {
	background-color: transparent;
	pointer-events: none;  /* prázdné kraje kolem lišty nezakrývají klikání do stránky */
}

.lista.je-posunuta .lista__obsah::before {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.lista,
	.lista__obsah::before {
		transition: none;
	}
}

.znacka {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--tap-min);
	color: var(--color-text-inverse);
	font-weight: 900;
	text-decoration: none;
}

.znacka__ctverec {
	display: block;
	width: 3.5rem;
	height: 2.4rem;
}

/* Stejné MD jako ve faviconu (favicon.svg). */
.znacka__ctverec rect {
	fill: var(--color-action);
}

/* MD je z písma Unbounded 800 (písmo nadpisů), obě písmena stejné výšky a stejného řezu. V liště je štítek oříznutý na 64 × 44, ať kolem písmen není prázdné místo (favicon a loader zůstávají čtvercové). */
.znacka__ctverec g {
	fill: var(--color-text-inverse);
}

.znacka:hover {
	color: var(--color-text-inverse);
}

.lista__nav {
	display: none;
}

.lista__nav ul {
	display: flex;
	gap: var(--space-1);
}

.lista__nav a {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);
	padding-inline: var(--space-4);
	border-radius: var(--radius-pill);
	color: var(--color-text-inverse);
	font-weight: 600;
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out);
}

/* Najetí: světlá pilulka se rychle prolne, text se přebarví na tmavý. Bez přejíždění zleva
   doprava, takže při přejetí mezi odkazy nic neskáče. */
.lista__nav a::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	border-radius: inherit;
	background: var(--color-surface);
	opacity: 0;
	transition: opacity var(--dur-fast) var(--ease-out);
}

.lista__nav a:focus-visible {
	color: var(--color-text);
}

.lista__nav a:focus-visible::before {
	opacity: 1;
}

@media (hover: hover) {
	.lista__nav a:hover {
		color: var(--color-text);
	}

	.lista__nav a:hover::before {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lista__nav a,
	.lista__nav a::before {
		transition: none;
	}
}

.lista__telefon {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 3.25rem;
	margin-left: auto;
	padding: 0 var(--space-5);
	font-size: var(--step-1);
	border-radius: var(--radius-pill);
	background: var(--color-action);
	color: var(--color-text-inverse);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: transform var(--dur-fast) var(--ease-out);
}

.lista__telefon:hover {
	color: var(--color-text-inverse);
}

/* Sluchátko při najetí krátce „zazvoní“. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.lista__telefon:hover svg {
		animation: zvoneni 600ms var(--ease-out);
	}
}

@keyframes zvoneni {
	0%, 100% { transform: rotate(0); }
	20% { transform: rotate(-16deg); }
	40% { transform: rotate(13deg); }
	60% { transform: rotate(-9deg); }
	80% { transform: rotate(5deg); }
}

@media (max-width: 26rem) {
	.znacka__jmeno {
		display: none;
	}
}

/* Navigace přesně uprostřed lišty: značka a telefon mají stejně široké krajní sloupce. */
@media (min-width: 56rem) {
	.lista__obsah {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
	}

	.lista__nav {
		display: block;
	}

	.lista__telefon {
		justify-self: end;
	}
}

/*-----------------------------------------------------------------------------------
	KONEC: 01. Hlavička
-----------------------------------------------------------------------------------*/