/* ============================================
   SIPO API components — Kanha Kitchen
   ============================================
   Status strip + API-rendered hours and menu.
   Popups are disabled for this site, so no
   modal styles are included.
   ============================================ */

/* ---------- Status strip ---------- */
.status-strip {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 80;
    padding: 8px 0;
    background: #2b2521;
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-align: center;
    transition: background .3s ease;
}

.status-strip.open { background: #1f4d2f; }
.status-strip.closed { background: #6d1620; }
.status-strip.error { background: #4a4139; }

.status-strip-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: var(--wrap, 1180px);
    margin-inline: auto;
    padding-inline: var(--gut, 1.5rem);
}

.status-strip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d9d3cc;
    flex: none;
}

/* Push the page (and the sticky header) below the fixed strip */
body.has-status-strip { padding-top: var(--strip-height, 38px); }
body.has-status-strip .masthead { top: var(--strip-height, 38px); }
body.has-status-strip .menu-nav { top: calc(var(--strip-height, 38px) + 80px); }

@media (max-width: 860px) {
    body.has-status-strip .menu-nav { top: calc(var(--strip-height, 38px) + 68px); }
    .status-strip { font-size: .76rem; }
}

/* ---------- Hours rendered from the API ---------- */
#footer-hours { display: grid; gap: .5rem; }
#footer-hours li {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    font-size: .9rem;
}
#footer-hours .day { color: #d8d0c7; }
#footer-hours .today .day,
#footer-hours li.today { color: var(--gold-soft, #f0c04a); }
#footer-hours .closed-day { color: #9a8f85; }

.hours-list .hours-row.today .day { color: var(--maroon, #7c1420); }
.hours-list .hours-row.today .time { font-weight: 600; }
.hours-list .closed-day { color: var(--maroon, #7c1420); }

/* ---------- Menu rendered from the API ---------- */
.menu-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 4rem 0;
    color: var(--muted, #6f645c);
    font-size: .95rem;
}

.menu-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--line, #e5ded2);
    border-top-color: var(--gold, #d99512);
    border-radius: 50%;
    animation: menu-spin .8s linear infinite;
}

@keyframes menu-spin { to { transform: rotate(360deg); } }

.menu-empty {
    text-align: center;
    color: var(--muted, #6f645c);
    padding: 4rem 0;
}

@media (prefers-reduced-motion: reduce) {
    .menu-spinner { animation-duration: 3s; }
    .status-strip { transition: none; }
}