/* =========================================================
   SIPO dynamic components — Baklava Cafe
   Status strip + opening-hours blocks.
   Palette follows assets/css/style.css.
   ========================================================= */

:root{
  --sipo-open:   #3f6b3a;   /* muted olive green  */
  --sipo-closed: #7a2f1c;   /* deep terracotta    */
  --sipo-idle:   #270f03;   /* darkbrown          */
}

/* ---------- status strip ----------
   Pinned to the top of the viewport so the open/closed state stays
   visible while scrolling. `--strip-height` is measured at runtime by
   statusManager.js (the text wraps to two lines on small screens), and
   the body padding reserves that space so nothing hides underneath.
   The default below matches what the strip actually measures at each
   width, so the reserved space is right on the first paint and JS only
   refines it — otherwise the correction would register as layout shift. */
:root{--strip-height:44px;}
@media(max-width:560px){:root{--strip-height:56px;}}

body.has-status-strip{padding-top:var(--strip-height);}
html{scroll-padding-top:var(--strip-height);}

.status-strip{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:200;
  width:100%;
  background:var(--sipo-idle);
  color:var(--cream, #efe7df);
  font-family:var(--body, Georgia, serif);
  font-size:16px;
  letter-spacing:.06em;
  text-align:center;
  padding:11px 20px;
  transition:background .35s ease;
}
.status-strip.open{background:var(--sipo-open);}
.status-strip.closed{background:var(--sipo-closed);}
.status-strip.error{background:var(--sipo-idle);}

.status-strip-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  max-width:var(--maxw, 1180px);
  margin:0 auto;
  line-height:1.35;
}
.status-strip-text{opacity:.97;}

.status-strip-dot{
  position:relative;
  width:9px;height:9px;border-radius:50%;
  flex:0 0 auto;
  background:currentColor;
  opacity:.9;
}
.status-strip.open .status-strip-dot{background:#8fd18a;}
.status-strip.closed .status-strip-dot{background:#f0a99a;}

/* The halo animates transform + opacity on a pseudo-element rather than
   box-shadow, so it stays on the compositor and off the main thread. */
.status-strip.open .status-strip-dot::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#8fd18a;
  animation:sipo-pulse 2.2s infinite;
  will-change:transform, opacity;
}

@keyframes sipo-pulse{
  0%   {transform:scale(1);   opacity:.7;}
  70%  {transform:scale(2.9); opacity:0;}
  100% {transform:scale(2.9); opacity:0;}
}

.countdown-timer{
  font-variant-numeric:tabular-nums;
  font-weight:600;
  letter-spacing:.04em;
}

@media(max-width:560px){
  .status-strip{font-size:14px;padding:9px 14px;letter-spacing:.04em;}
  .status-strip-inner{gap:8px;}
}

@media(prefers-reduced-motion:reduce){
  .status-strip{transition:none;}
  .status-strip .status-strip-dot::after{animation:none;opacity:0;}
}

/* ---------- opening hours ---------- */
.hours-list{
  list-style:none;
  margin:0;
  padding:0;
  max-width:340px;
}
.contact__inner .hours-list{margin-inline:auto;}
@media(min-width:840px){
  .contact__inner .hours-list{margin-inline:0;}
}

.hours-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  padding:7px 0;
  border-bottom:1px solid rgba(104,51,25,.14);
  font-size:18px;
  letter-spacing:.03em;
  color:var(--brown, #54300b);
}
.hours-row:last-child{border-bottom:0;}
.hours-row .day{
  font-family:var(--deco, Georgia, serif);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:15px;
  white-space:nowrap;
}
.hours-row .time{text-align:right;white-space:nowrap;}
.hours-row .time.closed-day{opacity:.55;font-style:italic;}

.hours-row.today{
  font-weight:600;
  color:var(--brown-text, #683319);
}
.hours-row.today .day{color:var(--tan, #bb8257);}
.hours-row.today .day::after{
  content:" • today";
  font-size:11px;
  letter-spacing:.14em;
  opacity:.75;
}

/* ---------- ordering disabled (feature-flag only) ---------- */
body.ordering-disabled [data-order-url],
body.ordering-disabled a.order-link{
  opacity:.5;
  pointer-events:none;
  filter:grayscale(.6);
}