/* Koffee Kup — shared base: reset, a11y, facade cards. Design-agnostic. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
button { cursor: pointer; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; }

:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 0.6rem 1rem; background: #000; color: #fff; text-decoration: none;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Facade cards (social + map): shared skeleton, designs skin them ---- */
.social-card { position: relative; overflow: hidden; }
.social-card-frame { border: 0; width: 100%; max-width: 100%; }
.map-facade-play, .social-card-play { display: inline-block; }
.map-frame { border: 0; width: 100%; height: min(60vh, 420px); }

/* ---- Menu skeleton ---- */
.menu-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.menu-item-head { display: flex; align-items: baseline; gap: 0.5rem; }
.menu-item-name { flex-shrink: 1; }
.menu-item-dots { flex: 1 1 auto; min-width: 1.5rem; }
.menu-item-price { white-space: nowrap; font-variant-numeric: tabular-nums; }