:root{color-scheme:light dark;--font-scale:1;--bg:#f4f1e9;--card:#fffdf8;--text:#25251f;--muted:#696960;--border:#ded8c9;--accent:#5e7e36;--soup:#edf4df;--shadow:0 9px 25px rgba(45,38,25,.11)}
/* Bez toho telefon pres kazde klepnuti prehodi modry obdelnik - pres cely
   box jidla a jako ctverec kolem kulatych tlacitek v hlavicce. Stranka
   neobsahuje jediny odkaz a kazde ovladani si odpoved kresli samo: panel
   se otevre, krizek se otoci, prepinac zmeni stav. */
html{font-size:calc(16px * var(--font-scale));-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.45}
main{width:min(1050px,calc(100% - 28px));margin:22px auto 42px}
.hero{height:320px;width:100%;position:relative;overflow:hidden;margin:0 0 14px;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);background:#20251b}
.restaurant-hero{display:block;width:100%;height:320px;object-fit:cover;object-position:center}
/* Hlavicka v pohybu lezi pres svou vlastni fotku, ktera je tim zaroven
   jeji nahradou: dokud se klip nestahne nebo kdyz ho uzivatel vypne,
   zustane videt snimek a nic nechybi. */
.hero-video{position:absolute;inset:0;width:100%;height:320px;object-fit:cover;object-position:center;opacity:0;pointer-events:none;transition:opacity .45s ease}
[data-media="video"] .hero-video.is-ready{opacity:1;pointer-events:auto}
/* No scrim over the photograph: it was there to carry the motto, and the
   motto now sits below on the page. What is left on the picture is the
   name and the date, which their own shadow can hold up on its own. */
/* A tight shadow plus a soft halo does what the scrim used to, but only
   around the letters, so the photograph itself stays untouched. */
.hero-overlay{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:28px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.95),0 2px 14px rgba(0,0,0,.75)}
.header-controls{position:absolute;z-index:3;top:14px;right:14px;display:flex;gap:8px}
.header-control{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(18,22,16,.68);color:#fff;font:800 18px/1 system-ui,-apple-system,"Segoe UI",sans-serif;box-shadow:0 3px 12px rgba(0,0,0,.24);backdrop-filter:blur(6px);cursor:pointer;transition:transform .18s ease,background-color .18s ease,opacity .18s ease}
@media(hover:hover){.header-control:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--accent) 82%,#111)}}
.header-control:focus-visible{outline:3px solid #fff;outline-offset:2px}
.header-control:disabled{opacity:.42;cursor:default;transform:none}
.header-control.energy-control{font-size:11px;letter-spacing:-.025em}
.header-control.font-control{font-size:14px;letter-spacing:-.04em}
.header-control.media-control{font-size:15px}
/* Clips lie over their own still, so the photograph serves as the poster
   and no frame has to be carried twice in the page. */
.food-video,.soup-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .28s ease}
.food-video{border-radius:11px}
.food-ghost{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:11px;opacity:0;pointer-events:none;transition:opacity 0ms linear}
.food-ghost.is-covering{opacity:1}
.food-hide{position:absolute;right:8px;top:8px;display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(20,24,17,.78);color:#fff;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.24);backdrop-filter:blur(5px);transition:rotate .34s ease,background-color .25s ease}
/* A fingertip is wider than 28 px. The circle keeps its size, because it
   mirrors the (i) in the opposite corner; only what counts as a hit grows,
   by ten pixels all round, which makes a 48 px target out of a 28 px one. */
.food-hide::after{content:"";position:absolute;inset:-10px;border-radius:50%}
.food-hide svg{display:block;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.food-hide[hidden]{display:none}
@media(hover:hover){.food-hide:hover{background:color-mix(in srgb,var(--accent) 82%,#111)}}
.food-hide:focus-visible{background:color-mix(in srgb,var(--accent) 82%,#111)}
.food-hide[aria-pressed="true"]{rotate:45deg}
.soup-video{border-radius:10px}
/* Prst drzeny na jidle ma najit to, co je videt. Klip lezi pres fotku a
   dosud pres sebe doteky poustel dal, takze dlouhy stisk vzdycky nabidl
   obrazek, i kdyz se na tom miste prave tocilo video - nabidka pak umi
   otevrit na nove karte fotku a klip nijak. Ukazatele proto zapiname
   presne tam, kde uz zapiname i viditelnost: dokud se klip nestahne nebo
   je prepnuto na fotky, propada stisk pod nej jako doted. Klikani to
   nemeni, to je delegovane na document a z videa probublava stejne. */
[data-media="video"] .food-video.is-ready,[data-media="video"] .soup-video.is-ready{opacity:1;pointer-events:auto}
/* Para nad polevkou. Jeden soubor na celou stranku, protoze kour vypada
   nad kazdou misou stejne - svetly kour na cerne. mix-blend-mode: screen
   dela z cerne nulu, takze fotka pod nim zustava, jak byla, a pricte se
   jen to svetle: pruhlednost, kterou kazdy prohlizec nosi v jinem kodeku,
   tu neni potreba vubec. isolation na ramecku drzi to michani uvnitr
   ramecku, jinak by se para pocitala proti pozadi cele karty.
   Kouri se jen nad skutecnou fotkou - pod poklopem by se kourilo z
   prazdneho stolu - a kdyz polevka dostane vlastni klip, ustoupi mu.
   Doteky propousti, aby dlouhy stisk porad nasel fotku pod ni. */
.soup-steam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:10px;opacity:0;pointer-events:none;mix-blend-mode:screen;transition:opacity .8s ease}
[data-media="video"] .soup-image.is-there ~ .soup-steam.is-ready{opacity:1}
[data-media="video"] .soup-video.is-ready ~ .soup-steam.is-ready{opacity:0}
h1{margin:0 0 5px;font-size:clamp(1.8rem,5vw,3rem);line-height:1.1;letter-spacing:-.025em}
.hero-updated{font-size:.9rem;margin-bottom:0}
.motto{margin:0 0 20px;padding:0 2px;font-size:1rem;line-height:1.5}
.motto strong{display:block;margin-bottom:2px;color:var(--accent);font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.day{min-width:0;margin-bottom:9px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
h2{margin:0 0 13px;font-size:1.18rem;color:var(--accent)}
.day-relative-label{display:inline-block;margin-left:13px;padding:3px 9px;border-radius:999px;background:var(--accent);color:var(--card);font-size:.8rem;font-weight:900;letter-spacing:.055em;vertical-align:1px;box-shadow:0 2px 7px color-mix(in srgb,var(--accent) 28%,transparent)}
.soup{display:grid;grid-template-columns:minmax(0,1fr) 160px;align-items:center;column-gap:12px;row-gap:0;min-height:94px;margin-bottom:15px;padding:9px 9px 9px 13px;border-radius:13px;background:var(--soup);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.soup-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
.soup-label{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.soup-name{font-weight:700}
.soup-image{display:block;width:160px;height:100px;object-fit:cover;border-radius:10px}
.meal{padding:12px 0;border-top:1px solid var(--border)}
.meal-line{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin:0}
.meal-title{min-width:0;font-weight:650}
.meal-price{flex:0 0 auto;white-space:nowrap;text-align:right;color:var(--muted);font-size:.83rem;font-weight:750;padding-top:2px}
.food-image{display:block;width:100%;height:200px;object-fit:cover;border-radius:11px;margin:0;border:1px solid var(--border)}
.health-card-toggle{cursor:pointer}
.health-card-toggle:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 72%,white);outline-offset:3px}
@media(hover:hover){.health-card-toggle:hover img{filter:brightness(1.035)}}
/* Poklop lezi pod fotkou. Fotka se stahuje z media hostingu a jeste tam
   byt nemusi - jidelnicek se publikuje driv, nez se obrazky udelaji -
   takze do te doby je videt zakryty talir misto rozbiteho ramecku. */
.food-image-frame{position:relative;width:100%;margin-top:10px;border-radius:11px;background:var(--card) url('https://belveder-media.pages.dev/poklop-1.webp') center/cover no-repeat}
/* Ctyri varianty podle cisla jidla: ctyri stejne kopule pod sebou vypadaji
   jako jeden obrazek ctyrikrat. Stridaji se tvarem drzadla. Cislo mimo
   rozsah zustane u prvni. */
.food-image-frame[data-dish="2"]{background-image:url('https://belveder-media.pages.dev/poklop-2.webp')}
.food-image-frame[data-dish="3"]{background-image:url('https://belveder-media.pages.dev/poklop-3.webp')}
.food-image-frame[data-dish="4"]{background-image:url('https://belveder-media.pages.dev/poklop-4.webp')}
.food-image.is-missing,.soup-image.is-missing{opacity:0}
/* Vlastni prikryta polevka, ne ten talirovy poklop: v ramecku 160x100 by
   kopule nad plochym talirem vypadala jako totez jeste jednou. Vyska je
   tu natvrdo, protoze bez obrazku nema ramecek co by ho roztahlo. */
.soup-image-frame{position:relative;isolation:isolate;width:160px;height:100px;align-self:center;border-radius:10px;background:var(--card) url('https://belveder-media.pages.dev/polevka-poklop.webp') center/cover no-repeat}
/* Hodnoceni zdravosti drzi pozadi teto ikonky - driv to byl barevny
   puntik pred nazvem jidla, ktery na uzke obrazovce lamal nazev na dva
   radky. Tmavy podklad zustava tem, kde hodnoceni chybi. */
.food-image-hint[data-health="good"]{background:#3f6b2a}
.food-image-hint[data-health="fair"]{background:#a8761a}
.food-image-hint[data-health="poor"]{background:#9c3626}
.food-image-hint{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(20,24,17,.78);color:#fff;font-family:Georgia,"Times New Roman",serif;font-size:1rem;font-weight:800;font-style:italic;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.24);backdrop-filter:blur(5px);transition:rotate .34s ease,background-color .25s ease}
.nutrition-badge,.price-badge{position:absolute;left:8px;bottom:8px;padding:5px 8px;border:1px solid rgba(255,255,255,.38);border-radius:999px;background:rgba(20,24,17,.78);color:#fff;font-size:.74rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:.015em;box-shadow:0 2px 8px rgba(0,0,0,.24);backdrop-filter:blur(5px);cursor:default;user-select:none}
.food-image-frame .nutrition-badge,.price-badge{font-size:.88rem;padding:6px 10px}
.price-badge{top:8px;bottom:auto}
.nutrition-badge[data-energy-toggle="true"]{cursor:pointer;transition:background-color .2s ease,transform .2s ease}
@media(hover:hover){.nutrition-badge[data-energy-toggle="true"]:hover{background:color-mix(in srgb,var(--accent) 82%,#111);transform:translateY(-1px)}}
.nutrition-badge[data-energy-toggle="true"]:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Rozbaleni ikonku otoci, ale nepodbarvi: barva uz nese hodnoceni zdravosti
   a prebarvit ji na akcent by tu informaci na dobu otevreni smazalo. */
.health-card-toggle[aria-expanded="true"] .food-image-hint{rotate:180deg}
.soup .health-panel{grid-column:1/-1;width:100%}
.health-panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .34s ease,opacity .24s ease}
.health-panel.is-open{grid-template-rows:1fr;opacity:1}
.health-panel-inner{min-height:0;overflow:hidden;margin-top:0;padding:0 13px;border:0 solid var(--border);border-radius:11px;background:color-mix(in srgb,var(--card) 88%,var(--bg));transition:margin-top .34s ease,padding .34s ease,border-width .34s ease}
.health-panel.is-open .health-panel-inner{margin-top:9px;padding:13px;border-width:1px}
.health-row{margin:0;padding:8px 10px;border-left:3px solid currentColor;border-radius:0 8px 8px 0;font-size:.86rem;line-height:1.42}
.health-row+.health-row{margin-top:7px}
.health-positive{color:#2f824b;background:rgba(47,130,75,.075)}
.health-caution{color:#a87500;background:rgba(184,134,11,.085)}
.health-negative{color:#b23b3b;background:rgba(178,59,59,.075)}
.page-footer{padding:23px 10px 7px;text-align:center;color:var(--muted);font-family:Georgia,"Times New Roman",serif;font-size:1.05rem;font-style:italic;letter-spacing:.04em}
@media(prefers-reduced-motion:reduce){.health-panel,.health-panel-inner{transition:none}.health-card-toggle:hover img{filter:none}.soup-steam{display:none}}
@media(max-width:760px){main{width:min(100% - 18px,620px);margin-top:9px}.menu-grid{grid-template-columns:1fr;gap:13px}.hero,.restaurant-hero,.hero-video{height:265px}.hero-overlay{padding:20px}.day{padding:15px}.soup{grid-template-columns:minmax(0,1fr) 128px;min-height:80px}.soup-image,.soup-image-frame{width:128px;height:84px}.meal-line{gap:9px}}
@media(prefers-color-scheme:dark){:root{--bg:#171914;--card:#22251e;--text:#f2f0e8;--muted:#b8b7ae;--border:#41453a;--accent:#b1d67a;--soup:#2c3624;--shadow:0 9px 25px rgba(0,0,0,.32)}.health-positive{color:#83d59d}.health-caution{color:#e6c45c}.health-negative{color:#f08a8a}}
html[data-theme="light"]{color-scheme:light;--bg:#f4f1e9;--card:#fffdf8;--text:#25251f;--muted:#696960;--border:#ded8c9;--accent:#5e7e36;--soup:#edf4df;--shadow:0 9px 25px rgba(45,38,25,.11)}
html[data-theme="dark"]{color-scheme:dark;--bg:#171914;--card:#22251e;--text:#f2f0e8;--muted:#b8b7ae;--border:#41453a;--accent:#b1d67a;--soup:#2c3624;--shadow:0 9px 25px rgba(0,0,0,.32)}
html[data-theme="light"] .health-positive{color:#2f824b}html[data-theme="light"] .health-caution{color:#a87500}html[data-theme="light"] .health-negative{color:#b23b3b}
html[data-theme="dark"] .health-positive{color:#83d59d}html[data-theme="dark"] .health-caution{color:#e6c45c}html[data-theme="dark"] .health-negative{color:#f08a8a}