/* VATRA site — shared component CSS. Built on tokens.css. */

/* Site-scoped tokens — additive only, never edit tokens.css for these.
   --color-accent-on-dark: warm terracotta tint tuned for small/caption-sized
   accent text on the --vatra-graphite (#111111) background. --vatra-terracotta
   (#C4583A) only clears ~4.3:1 there, which fails WCAG AA for text this size;
   --color-accent-text (#9A3D28) is even darker (~2.8:1) and is meant for
   accent text on LIGHT surfaces. #D2694A measures ≈5.27:1 against #111111. */
:root{
  --color-accent-on-dark:#D2694A;
  /* Approved light-map surface tones (concepts/concept-b) — the warm
     parchment radial gradient behind the "dark"-theme (home-page) map. */
  --color-map-parchment-1:#efe7d6;
  --color-map-parchment-2:#e4d8bf;
  --color-map-parchment-3:#d8c8a6;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--color-bg);color:var(--color-ink);font-family:var(--font-body);
  font-size:var(--text-body);line-height:var(--lh-normal);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:900;line-height:var(--lh-tight);margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--radius-sm)}
::selection{background:var(--terracotta-600);color:var(--vatra-ivory)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,44px)}
.eyebrow{font-size:var(--text-caption);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:600;color:var(--color-accent-text)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}html{scroll-behavior:auto}}

/* ==========================================================================
   Shared chrome — topbar (nav), lang switch, call CTA, footer.
   Values copied verbatim from the repo-root design-system index.html
   (.topbar / .lang / .btn / footer rules) — AA-fixed, do not restyle.
   Canonical markup lives in site/_chrome.html and task-4-report.md.
   ========================================================================== */

.topbar{position:sticky;top:0;z-index:50;background:rgba(246,243,237,.85);backdrop-filter:saturate(1.1) blur(10px);border-bottom:var(--border)}
.topbar .wrap{display:flex;align-items:center;gap:var(--space-4);height:60px}
.topbar .brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:900;font-size:1.125rem;letter-spacing:.02em;color:var(--vatra-graphite);text-decoration:none}
/* Brand mark — the VATRA flame, recolored to the brand ink via currentColor
   (same masked-mark technique as the design system's .vmark). */
.brand-mark{display:inline-block;width:22px;aspect-ratio:347/359;background:currentColor;flex:0 0 auto;
  -webkit-mask:url(../logo/mark.svg) center/contain no-repeat;mask:url(../logo/mark.svg) center/contain no-repeat}
.topbar nav{margin-left:auto;display:flex;gap:1px;flex-wrap:nowrap}
.topbar nav a{white-space:nowrap;font-size:var(--text-small);font-weight:500;color:var(--color-ink-soft);text-decoration:none;padding:8px 10px;border-radius:var(--radius);transition:color var(--dur),background var(--dur)}
.topbar nav a:hover{color:var(--vatra-graphite);background:var(--ivory-200)}
.topbar nav a.active{color:var(--vatra-graphite);background:var(--ivory-200)}

.lang{display:flex;gap:4px;margin-left:var(--space-3);border-left:var(--border);padding-left:var(--space-3)}
.lang button{cursor:pointer;font-family:var(--font-body);font-size:var(--text-caption);font-weight:700;letter-spacing:.06em;
  padding:9px 12px;min-height:44px;display:inline-flex;align-items:center;border-radius:var(--radius);border:1px solid transparent;background:transparent;color:var(--color-ink-faint);transition:all var(--dur)}
.lang button:hover{background:var(--ivory-200);color:var(--vatra-graphite)}
.lang button[aria-pressed="true"]{background:var(--vatra-graphite);color:var(--vatra-ivory)}

.cta-call{cursor:pointer;font-family:var(--font-body);font-weight:600;font-size:var(--text-small);letter-spacing:.03em;white-space:nowrap;
  min-height:44px;padding:11px 22px;border-radius:var(--radius);border:1.5px solid var(--terracotta-600);background:var(--terracotta-600);color:var(--vatra-ivory);
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;transition:transform var(--dur) var(--ease),background var(--dur),border-color var(--dur),box-shadow var(--dur)}
.cta-call:hover{background:var(--terracotta-700);border-color:var(--terracotta-700);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.cta-call:active{transform:translateY(0)}
.topbar .cta-call{margin-left:var(--space-3)}

@media(max-width:980px){
  .topbar .wrap{flex-wrap:wrap;height:auto;padding-block:10px;row-gap:8px}
  .topbar nav{order:3;width:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;gap:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar nav a{white-space:nowrap;flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;scroll-snap-align:start}
  .lang{margin-left:auto}
}

footer{background:var(--vatra-graphite);color:var(--vatra-ivory);padding:var(--space-10) 0 var(--space-6)}
footer .footer-top{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:flex-start;justify-content:space-between}
footer .fl{display:flex;flex-direction:column;gap:10px}
footer .footer-logo{width:150px;height:auto}
footer .ftag{margin:0;color:var(--color-accent-on-dark);font-family:var(--font-display);font-weight:700;font-size:var(--text-small)}
footer .fcols{display:flex;flex-wrap:wrap;gap:var(--space-6) var(--space-8)}
footer .fcol{font-size:var(--text-small);color:var(--color-ink-on-dark-muted);line-height:var(--lh-normal)}
footer .fcol-t{font-size:var(--text-caption);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:600;color:var(--vatra-sand);margin-bottom:6px}
footer a{color:var(--color-ink-on-dark-muted);text-decoration:none}
footer a:hover{color:var(--vatra-ivory)}
footer .frights{margin-top:var(--space-8);padding-top:var(--space-5);border-top:1px solid rgba(246,243,237,.14);font-size:var(--text-caption);color:var(--color-ink-on-dark-muted)}
@media(max-width:640px){
  footer .footer-top{flex-direction:column}
}

/* ============================================================
   Мапа смаків України — interactive dish map (map.js)
   Ported from concepts/concept-a (dark) + concept-b (light).
   ============================================================ */
.vm{position:relative;width:100%;aspect-ratio:1000/700;border-radius:var(--radius);overflow:hidden;
  background:var(--vm-bg);border:1px solid var(--vm-border)}
.vm-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* theme tokens ------------------------------------------------ */
.vm[data-theme="dark"]{
  --vm-bg:radial-gradient(120% 120% at 50% 0%,var(--color-map-parchment-1),var(--color-map-parchment-2) 60%,var(--color-map-parchment-3));
  --vm-border:#cbb894;
  --vm-land:#F3ECDD; --vm-shadow:#c7b088; --vm-stroke:#2c2620;
  --vm-loading:#8a7a5f;
  --vm-label-shadow:0 1px 2px rgba(255,250,238,.9); --vm-label-opacity:.9;
  --vm-pin-size:15px; --vm-pin-drop:drop-shadow(0 5px 5px rgba(60,38,20,.4));
  --vm-dot-core:#fbf5e9;
  --vm-card-border:var(--color-border); --vm-card-shadow:0 34px 70px -22px rgba(0,0,0,.55);
}
.vm[data-theme="light"]{
  --vm-bg:linear-gradient(160deg,#faf6ee,#f1ead9);
  --vm-border:var(--color-border);
  --vm-land:#FBF7EF; --vm-shadow:#d9c8a8; --vm-stroke:#3a332c;
  --vm-loading:var(--color-ink-faint);
  --vm-label-shadow:0 1px 2px rgba(255,255,255,.9); --vm-label-opacity:.85;
  --vm-pin-size:14px; --vm-pin-drop:drop-shadow(0 4px 4px rgba(60,38,20,.32));
  --vm-dot-core:#fff;
  --vm-card-border:var(--color-border-strong); --vm-card-shadow:0 30px 60px -20px rgba(60,44,20,.35);
}

/* loading / fail slot ---------------------------------------- */
.vm-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:0 var(--space-5);color:var(--vm-loading);font-weight:600;font-size:var(--text-small)}
.vm-loading--error{color:var(--color-error)}

/* region labels ---------------------------------------------- */
.vm-label{position:absolute;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap;z-index:3;
  font-family:var(--font-display);font-weight:700;font-size:clamp(9px,1.05vw,13px);color:var(--vatra-graphite);
  text-shadow:var(--vm-label-shadow);opacity:var(--vm-label-opacity);transition:color var(--dur),opacity var(--dur)}
.vm-label.on{color:var(--color-accent-text);opacity:1}

/* Map pins — the brand marker recolored to the ember
   via currentColor mask, so the map reads as unmistakably Ukrainian. The mark is
   slightly taller than wide, so the box is sized to its aspect and anchored at
   the bottom tip. */
.vm-pin{position:absolute;transform:translate(-50%,calc(-100% + 3px));
  width:var(--vm-pin-size);height:calc(var(--vm-pin-size) * 2.25);padding:0;border:none;background:none;cursor:pointer;z-index:5;
  filter:var(--vm-pin-drop) drop-shadow(0 0 1px var(--vm-dot-core));transition:transform var(--dur) var(--ease)}
.vm-pin:hover,.vm-pin:focus-visible,.vm-pin.sel{transform:translate(-50%,calc(-100% + 3px)) scale(1.16);z-index:8}
.vm-dot{display:block;width:100%;height:100%;background:var(--terracotta-600);
  -webkit-mask:url(../motifs/pin.svg) center/contain no-repeat;
  mask:url(../motifs/pin.svg) center/contain no-repeat}
.vm-pin:hover .vm-dot,.vm-pin:focus-visible .vm-dot{background:var(--terracotta-700)}
.vm-pin.sel .vm-dot{background:var(--vatra-graphite)}
/* Staggered pin reveal — the map's one authored moment. Opacity only, so the
   pins' positioning + hover transforms are never touched. JS adds [data-reveal]
   only when the map scrolls into view, and skips it under prefers-reduced-motion
   (the global reset at top also neutralizes it). */
.vm[data-reveal] .vm-pin{opacity:0}
.vm[data-reveal="in"] .vm-pin{animation:vm-pin-in .45s ease-out forwards;
  animation-delay:clamp(0ms, calc(var(--pin-i, 0) * 35ms), 900ms)}
@keyframes vm-pin-in{to{opacity:1}}
/* Map draws itself in — the Ukraine outline strokes on as the map enters view
   (JS sets --vm-len = path length). Pins then settle via the stagger above. */
.vm[data-reveal] .vm-outline{stroke-dasharray:var(--vm-len);stroke-dashoffset:var(--vm-len)}
.vm[data-reveal="in"] .vm-outline{animation:vm-draw 1.2s var(--ease) forwards}
@keyframes vm-draw{to{stroke-dashoffset:0}}

/* hover tooltip ---------------------------------------------- */
.vm-tip{position:absolute;z-index:9;transform:translate(-50%,calc(-100% - 30px));pointer-events:none;white-space:nowrap;
  background:var(--vatra-graphite);color:var(--vatra-ivory);font-size:var(--text-caption);font-weight:600;
  padding:6px 10px;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.vm-tip[hidden]{display:none}
/* Photo tooltip/card variants — active only when a dish carries an image
   (dish.image). Dormant until real food photography exists. */
.vm-tip.has-img{padding:0;overflow:hidden;width:190px;white-space:normal}
.vm-tip-img{display:block;width:100%;height:118px;object-fit:cover}
.vm-tip.has-img .vm-tip-text{display:block;padding:7px 10px}
.vm-photo{display:block;width:100%;height:150px;object-fit:cover;border-radius:var(--radius);margin:0 0 12px}

/* dish card -------------------------------------------------- */
.vm-card{position:absolute;z-index:21;width:300px;max-width:86vw;padding:18px 20px;
  background:var(--color-surface);border:1px solid var(--vm-card-border);border-radius:var(--radius-lg);
  box-shadow:var(--vm-card-shadow);animation:vm-pop .2s var(--ease)}
.vm-card[hidden]{display:none}
@keyframes vm-pop{from{opacity:0;transform:translateY(8px)}}
.vm-card .vm-reg{display:block;font-family:var(--font-body);font-size:var(--text-caption);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-text)}
.vm-card .vm-title{font-family:var(--font-display);font-weight:800;font-size:1.25rem;margin:6px 40px 4px 0;color:var(--vatra-graphite)}
.vm-card .vm-org{font-size:var(--text-small);font-weight:600;color:var(--color-ink-soft);margin-bottom:8px}
.vm-card .vm-desc{margin:0;font-size:var(--text-small);line-height:1.55;color:var(--color-ink-soft)}
.vm-close{position:absolute;top:8px;right:10px;width:32px;height:32px;padding:0;border:none;background:transparent;
  color:var(--color-ink-faint);font-size:22px;line-height:1;cursor:pointer;border-radius:var(--radius);
  display:inline-flex;align-items:center;justify-content:center;transition:color var(--dur),background var(--dur)}
.vm-close:hover{color:var(--vatra-graphite);background:var(--ivory-200)}

/* scrim (mobile bottom-sheet backdrop) ----------------------- */
.vm-scrim{display:none;position:fixed;inset:0;z-index:1000;background:rgba(17,17,17,.45)}

/* mobile: dish card becomes a slide-up bottom-sheet ---------- */
@media(max-width:640px){
  .vm-card{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;max-width:100%;z-index:1001;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:22px 22px calc(22px + env(safe-area-inset-bottom,0px));
    animation:vm-sheet-up .28s var(--ease)}
  .vm-card .vm-title{font-size:1.4rem}
  .vm.vm-active .vm-scrim{display:block}
}
@keyframes vm-sheet-up{from{transform:translateY(100%)}}

/* ==========================================================================
   Page-level primitives — section rhythm, splits/grids, buttons, cards,
   menu rows, section headers, placeholders. Built for Task 6 (home) but
   named generically so Tasks 7-9 (mapa/menu/about/contact) can reuse them
   rather than reinventing per page. Values follow the repo-root design
   system's own component vocabulary (.btn/.card/.menu-item/.sh) verbatim
   where that vocabulary exists; new bits (icon cards, placeholders, ember
   rule) are additive, not restyles.
   ========================================================================== */

.section{padding:var(--space-12) 0}
.section-tight{padding:var(--space-10) 0}
.section-dark{background:var(--vatra-graphite);color:var(--vatra-ivory);position:relative;overflow:hidden}
/* #3 Trypillian watermark — a large faint mark carved into the dark beats
   (hearth / map). Texture, not accent: ivory at ~4.5% keeps the ember rule. */
.section-dark::before{content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(48%,440px);aspect-ratio:1000/1048;right:-7%;top:-12%;
  background:var(--vatra-ivory);opacity:.045;
  -webkit-mask:url(../motifs/spiral.svg) center/contain no-repeat;
  mask:url(../motifs/spiral.svg) center/contain no-repeat}
.section-dark > .wrap{position:relative;z-index:1}
/* #2 Glyph-kicker — a small Trypillian sign before a section eyebrow; inherits
   the eyebrow's colour via currentColor. Marks set per instance with --kg. */
.eyebrow .kg{display:inline-block;width:14px;height:17px;vertical-align:-3px;margin-right:8px;
  background:currentColor;-webkit-mask:var(--kg) center/contain no-repeat;mask:var(--kg) center/contain no-repeat}
/* #4 Motif frieze — a sparse repeating mark band used as a section divider. */
.motif-frieze{height:20px;opacity:.45;background:var(--vatra-sand);margin:var(--space-8) auto 0;max-width:280px;
  -webkit-mask:url(../motifs/wave.svg) center/auto 100% repeat-x;
  mask:url(../motifs/wave.svg) center/auto 100% repeat-x}
.section-dark .eyebrow{color:var(--color-accent-on-dark)}
.section-dark p{color:var(--color-ink-on-dark)}

.sh{max-width:64ch}
.sh.center{margin-inline:auto;text-align:center}
.sh .eyebrow{display:block;margin-bottom:var(--space-2)}
.sh h2{font-size:var(--text-h2);margin-top:2px}
.sh p{margin-top:var(--space-3);color:var(--color-ink-soft);line-height:var(--lh-normal)}
.section-dark .sh p{color:var(--color-ink-on-dark)}

.split{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-10);align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:var(--space-6)}}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
@media(max-width:860px){.grid-3{grid-template-columns:1fr}}

/* buttons ------------------------------------------------------------ */
.btn{--bg:var(--terracotta-600);--fg:var(--vatra-ivory);--bd:var(--terracotta-600);cursor:pointer;
  font-family:var(--font-body);font-weight:600;font-size:var(--text-small);letter-spacing:.03em;
  min-height:44px;padding:11px 22px;border-radius:var(--radius);border:1.5px solid var(--bd);
  background:var(--bg);color:var(--fg);display:inline-flex;align-items:center;gap:9px;
  text-decoration:none;transition:transform var(--dur) var(--ease),background var(--dur),border-color var(--dur),box-shadow var(--dur),color var(--dur)}
.btn:hover{background:var(--terracotta-700);border-color:var(--terracotta-700);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(0)}
.btn.outline{--bg:transparent;--fg:var(--vatra-graphite);--bd:var(--color-border-strong)}
.btn.outline:hover{background:var(--ivory-200);border-color:var(--vatra-graphite);color:var(--vatra-graphite)}

/* cards (icon variant — photo variant stays a photo placeholder, never
   an icon substitute for real photography) ---------------------------- */
.card{background:var(--color-surface);border:var(--border);border-radius:var(--radius-lg);
  padding:var(--space-6);box-shadow:var(--shadow-sm);transition:box-shadow var(--dur),transform var(--dur)}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card .c-icon{width:48px;height:48px;border-radius:50%;background:var(--sand-300);color:var(--color-accent-text);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-4)}
.card .c-icon svg{width:24px;height:24px}
.card h3{font-size:var(--text-h4);margin-bottom:8px}
.card p{color:var(--color-ink-soft);font-size:var(--text-small);line-height:var(--lh-normal)}

/* labelled placeholders (photo / location-map) — never a fake photo --- */
.ph-block{background:var(--vatra-taupe);border-radius:var(--radius-lg);min-height:280px;
  display:flex;align-items:center;justify-content:center;padding:var(--space-5);text-align:center}
.ph-block span{color:rgba(255,255,255,.85);font-size:var(--text-caption);letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.ph-4-3{aspect-ratio:4/3;min-height:0}

/* ember rule — thin accent divider, not a wash ------------------------ */
.ember-rule{height:2px;width:64px;background:var(--terracotta-600);border:0;border-radius:var(--radius-pill);margin:var(--space-8) auto 0}

/* menu rows (bilingual: Czech name leads, Ukrainian name + detail second,
   per the design system's own menu.note convention) -------------------- */
.menu{max-width:720px}
.menu-item{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:var(--space-4) 0;border-bottom:var(--border)}
.menu-item:last-child{border-bottom:0}
.menu-item .mi-name{font-weight:600;font-size:1.0625rem;color:var(--color-ink)}
.menu-item .mi-sub{grid-column:1;font-size:var(--text-small);color:var(--color-ink-soft)}
.menu-item .mi-price{grid-column:2;grid-row:1;font-family:var(--font-display);font-weight:800;
  font-size:1.0625rem;white-space:nowrap;color:var(--color-ink-faint);font-variant-numeric:tabular-nums}
.menu-item .mi-tags{grid-column:2;grid-row:2;justify-self:end;display:flex;gap:6px;align-items:center}
.mi-alg{font-size:var(--text-caption);color:var(--color-ink-faint);font-weight:600;letter-spacing:.04em}
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-weight:600;
  font-size:var(--text-caption);letter-spacing:.04em;padding:5px 11px;border-radius:var(--radius-pill);
  background:var(--vatra-sand);color:var(--graphite-800)}