/* ============================================
   Live data — status strip
   ============================================
   Loaded after style.css. Only covers the parts
   of the page that the SIPO API drives.
   ============================================ */

:root{ --strip-height:0px; }

/* ---- the strip itself ---- */
.status-strip{
  position:fixed; top:0; left:0; right:0; z-index:80;
  background:#1b1613;
  border-bottom:1px solid rgba(240,232,221,.1);
  font-family:var(--sans);
}
.status-strip__inner{
  max-width:var(--max); margin:0 auto;
  padding:.5rem var(--pad);
  display:flex; align-items:center; gap:.6rem;
  font-size:.78rem; letter-spacing:.02em;
}
.status-strip__dot{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--fg-muted); position:relative;
}
.status-strip__text{ color:#e2d9cf; }
.status-strip__cta{
  margin-left:auto; flex:none;
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--ember);
  border-bottom:1px solid currentColor; padding-bottom:1px;
  transition:opacity .2s;
}
.status-strip__cta:hover{ opacity:.7; }

/* ---- states ---- */
.status-strip.is-open   .status-strip__dot{ background:#7fb173; box-shadow:0 0 0 3px rgba(127,177,115,.18); }
.status-strip.is-closed .status-strip__dot{ background:#c2564b; box-shadow:0 0 0 3px rgba(194,86,75,.16); }
.status-strip.is-paused .status-strip__dot{ background:var(--ember); box-shadow:0 0 0 3px rgba(224,145,63,.18); }
.status-strip.is-loading .status-strip__text{ color:var(--fg-muted); }

.status-strip.is-open .status-strip__dot::after{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  border:1px solid rgba(127,177,115,.5);
  animation:mk-pulse 2.4s ease-out infinite;
}
@keyframes mk-pulse{
  0%   { transform:scale(.7); opacity:.9; }
  100% { transform:scale(2.1); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .status-strip.is-open .status-strip__dot::after{ animation:none; }
}

/* ---- push the rest of the page down by the strip ---- */
body.has-status-strip .masthead{ top:var(--strip-height); }
body.has-status-strip .drawer{ padding-top:calc(5rem + var(--strip-height)); }
body.has-status-strip [id]{ scroll-margin-top:calc(5.5rem + var(--strip-height)); }

/* ---- ordering switched off at the POS ---- */
[data-order-url].is-disabled{
  opacity:.45; pointer-events:none; filter:grayscale(1);
}

/* ---- hours table: today's row, and closed days ---- */
.hours tr.is-today th,
.hours tr.is-today td{ color:var(--fg); font-weight:600; }
.hours__today{
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ember); margin-left:.45rem; font-weight:700;
}
.hours td.is-closed{ color:var(--fg-muted); font-style:italic; }

/* ---- menu states ---- */
.menu__empty{
  grid-column:1/-1; padding:3rem 0; text-align:center;
  color:var(--fg-muted); font-size:1rem;
}
.menu__empty a{ color:var(--ember-2); }

/* the Order button on a card is disabled with everything else when the POS pauses */
.mcard__order.is-disabled{ opacity:.45; pointer-events:none; }

@media (max-width:640px){
  .status-strip__inner{ font-size:.72rem; gap:.5rem; padding-inline:var(--pad); }
  .status-strip__cta{ font-size:.62rem; letter-spacing:.1em; }
}

/* ---- hero and page heads clear the strip too ---- */
body.has-status-strip .hero{ padding-top:calc(7.25rem + var(--strip-height)); }
body.has-status-strip .page-head{ padding-top:calc(9rem + var(--strip-height)); }
body.has-status-strip .page-hero{ padding-top:calc(11rem + var(--strip-height)); }
@media (max-width:900px){
  body.has-status-strip .hero{ padding-top:calc(7rem + var(--strip-height)); }
  body.has-status-strip .page-head{ padding-top:calc(7.5rem + var(--strip-height)); }
  body.has-status-strip .page-hero{ padding-top:calc(9rem + var(--strip-height)); }
}
@media (max-width:640px){
  body.has-status-strip .hero{ padding-top:calc(6.25rem + var(--strip-height)); }
}