/* ==========================================================================
   Doplňky k designovému systému.

   V původní verzi webu byly tyto tři animace psané přímo u komponent, takže
   nejsou součástí zkompilovaného CSS. Jsou zde přepsané jedna ku jedné.
   ========================================================================== */

/* Písmo Gotham — proměnná, kterou používá celý design systém. */
:root {
	--ff-gotham: "gotham", "gotham Fallback", "Helvetica Neue", Arial, sans-serif;
}

/* Rozbalení hlavní navigace. */
.menu-overlay {
	animation: kogo-menu-fade 0.4s var(--ease-out-soft);
}
@keyframes kogo-menu-fade {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: none; }
}

/* Uvítací okno. */
.popup-in {
	animation: kogo-pop 0.5s var(--ease-out-soft);
}
@keyframes kogo-pop {
	from { opacity: 0; transform: translateY(14px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

/* Střídání zpráv v oznamovacím pruhu. */
.banner-in {
	animation: kogo-banner 0.7s var(--ease-out-soft);
}
@keyframes kogo-banner {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

/* Rozklikávací dotazy — plynulé rozbalení bez měření výšky. */
.acc-body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.5s var(--ease-out-soft);
}
.acc-body > div { overflow: hidden; }

/* Viditelné zaměření klávesnicí — kvůli přístupnosti. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 2px;
}

/* Uživatelé, kteří si vypnuli animace, uvidí obsah rovnou. */
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1 !important; transform: none !important; }
	.hero-breathe { animation: none !important; }
	.menu-overlay, .popup-in, .banner-in { animation: none !important; }
}

/* Administrátorská lišta nesmí překrýt lepivou hlavičku. */
body.admin-bar .js-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .js-header { top: 46px; }
}

.nav-item { font-size: clamp(1.35rem, 2vw, 1.55rem); line-height: 1.15; letter-spacing: -0.01em; }

/* Při otevřeném menu schováme plovoucí widget rezervačního systému,
   aby se nerozbaloval přes navigaci. */
body.menu-open #gstpln-widget-host { display: none !important; }
/* Dokud je vidět cookie lišta, widget rezervací by zakrýval tlačítka souhlasu. */
body.consent-open #gstpln-widget-host { display: none !important; }

/* Myší kliknuté tlačítko nemá ukazovat hrubý rámeček prohlížeče. */
button:focus:not(:focus-visible) { outline: none; }

.sub-in { animation: kogo-menu-fade 0.35s var(--ease-out-soft); }

/* Rezervace na výšku okna pod hlavičkou (výška hlavičky podle oznamovacího pruhu) */
@media (min-width: 1024px) {
	.k-fit-screen { height: calc(100svh - var(--k-offset, 124px)); }
}

/* Navigace v menu: pravý sloupec končí na pravé čáře, text v něm zleva (šířku dopočítá kogo.js) */
@media (min-width: 1024px) {
	.nav-grid > [data-navcol="2"] { justify-self: end; width: var(--navcol3, auto); }
}

/* Text článku z editoru WordPressu */
.kogo-prose p{margin:0 0 1.2em}.kogo-prose h2,.kogo-prose h3{color:var(--color-ink);margin:1.6em 0 .6em;font-size:1.35rem}
.kogo-prose ul{list-style:disc;padding-left:1.3em;margin:0 0 1.2em}.kogo-prose a{color:var(--color-gold);text-decoration:underline}
.kogo-prose img{max-width:100%;height:auto;margin:1.5em 0}

/* Boční seznam kategorií menu: na nižších obrazovkách (notebook 768 px) se 16 kategorií nevešlo
   a Přílohy, Pizza a Dezerty zůstaly pod okrajem okna — seznam se zhustí a jde v něm rolovat */
.menu-side { max-height: calc(100vh - 8rem); overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.menu-side a { padding-top: .3rem; padding-bottom: .3rem; }
@media (max-height: 760px) { .menu-side a { padding-top: .15rem; padding-bottom: .15rem; font-size: .8rem; } }

/* Ukázka menu na úvodní stránce: horní linka nad každým sloupcem zvlášť */
.menu-teaser li:first-child { border-top: 1px solid var(--color-line); }
@media (min-width: 1024px) { .menu-teaser li:nth-child(2) { border-top: 1px solid var(--color-line); } }
@media (min-width: 1024px) { .menu-teaser .title-md { font-size: 1.3rem; line-height: 1.3; } }