/* ============================================
   SIPO dynamic component styles
   Themed to match the Olive Branch Divi site:
   crimson #A13041, olive #5D6B60, Merienda headings.
   ============================================ */
:root {
    --sipo-accent: #a13041;
    --sipo-accent-dark: #7d2432;
    --sipo-open: #2f6b46;
    --sipo-closed: #8f2b3c;
    --sipo-ink: #222222;
}

/* ---------- Status strip ---------- */
.status-strip {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;                   /* not width:100% — padding would overflow the viewport */
    box-sizing: border-box;
    z-index: 100000;            /* Divi's fixed header is 99999 */
    background: var(--sipo-ink);
    color: #fff;
    padding: 8px 16px;
    font-family: "Roboto Flex", Helvetica, Arial, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    letter-spacing: 0.01em;
}

.status-strip.open { background: var(--sipo-open); }
.status-strip.closed { background: var(--sipo-closed); }
.status-strip.error { background: #4a4a4a; }

.status-strip-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

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

.status-strip.open .status-strip-dot { background: #5ee08d; box-shadow: 0 0 0 0 rgba(94, 224, 141, 0.7); animation: sipo-pulse 2s infinite; }
.status-strip.closed .status-strip-dot { background: #ff8c9c; }

@keyframes sipo-pulse {
    70%  { box-shadow: 0 0 0 7px rgba(94, 224, 141, 0); }
    100% { box-shadow: 0 0 0 0 rgba(94, 224, 141, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .status-strip.open .status-strip-dot { animation: none; }
}

/* Push the site down so the strip never covers the fixed navbar.
   The selector carries an extra class over Divi's own `.et_fixed_nav
   #main-header` (and over custom-sticky-nav.css) so it wins the cascade. */
body.has-status-strip.et_fixed_nav #main-header,
body.has-status-strip.et_fixed_nav.et_transparent_nav #main-header {
    top: var(--strip-height, 34px) !important;
}

body.has-status-strip #page-container {
    margin-top: var(--strip-height, 34px);
}

/* ---------- Order buttons ---------- */
.sipo-order-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    background: var(--sipo-accent);
    color: #fff !important;
    border: 2px solid var(--sipo-accent);
    border-radius: 3px;
    padding: 0.45em 1.1em;
    font-family: "Roboto Flex", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, transform .15s ease;
}

.sipo-order-btn svg { width: 19px; height: 19px; flex: 0 0 auto; }

.sipo-order-btn:hover,
.sipo-order-btn:focus-visible {
    background: var(--sipo-accent-dark);
    border-color: var(--sipo-accent-dark);
    color: #fff !important;
}

/* Navbar variant — sits inside Divi's #top-menu list.
   The anchor is deliberately left to behave like any other Divi nav link, so
   the theme's own rules govern it — including the shrink applied when the
   header collapses on scroll (font 18→14px, padding halved). The pill is drawn
   on an inner span instead, so it always sits on exactly the same text line as
   the neighbouring links and scales with them. Styling the anchor itself meant
   it kept its full-size box in the collapsed bar, filling two-thirds of the
   height and sitting low against the shrunken links. */
#top-menu li.sipo-nav-order-item { padding-right: 0; }

#top-menu li.sipo-nav-order-item > a.nav-order-btn {
    background: none !important;
    opacity: 1 !important;
}

#top-menu li.sipo-nav-order-item > a.nav-order-btn .sipo-pill,
.et_mobile_menu li.sipo-nav-order-item > a.nav-order-btn .sipo-pill {
    display: inline-block;
    background: var(--sipo-accent);
    color: #fff;
    border-radius: 3px;
    padding: 0.42em 0.95em;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    transition: background .25s ease;
}

#top-menu li.sipo-nav-order-item > a.nav-order-btn:hover .sipo-pill,
.et_mobile_menu li.sipo-nav-order-item > a.nav-order-btn:hover .sipo-pill {
    background: var(--sipo-accent-dark);
    color: #fff;
}

/* In the mobile dropdown the item is full width */
.et_mobile_menu li.sipo-nav-order-item { text-align: center; }
.et_mobile_menu li.sipo-nav-order-item > a.nav-order-btn { margin: 6px 0; }

/* Hero variant */
.sipo-hero-order { margin: 1.4em 0 0.4em; }
.sipo-hero-order .sipo-order-btn { font-size: 1.12rem; padding: 0.6em 1.6em; }

/* ---------- Floating order button ---------- */
.floating-order {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 99998;             /* below the strip, above page content */
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    background: var(--sipo-accent);
    color: #fff !important;
    border-radius: 999px;
    padding: 13px 22px;
    font-family: "Roboto Flex", Helvetica, Arial, sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
    transition: background .25s ease, transform .2s ease, box-shadow .2s ease;
}

.floating-order:hover,
.floating-order:focus-visible {
    background: var(--sipo-accent-dark);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
}

.floating-order svg { width: 19px; height: 19px; flex: 0 0 auto; }

/* Keep clear of Divi's scroll-to-top control */
.et_pb_scroll_top.et-visible { bottom: 88px; }

@media (max-width: 600px) {
    .floating-order {
        right: 14px;
        bottom: 14px;
        padding: 12px 18px;
        font-size: 0.92rem;
    }
    .et_pb_scroll_top.et-visible { bottom: 76px; }
}

/* ---------- Hours table ---------- */
.sipo-hours-table { margin: 0 auto; max-width: 420px; text-align: left; }

.sipo-hours-table .hours-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.7em;
    padding: 7px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.sipo-hours-table .hours-row:last-child { border-bottom: 0; }
.sipo-hours-table .hours-row .day { font-weight: 600; }

/* Keep each "11:00 AM – 2:00 PM" range on one line; the day label shrinks first. */
.sipo-hours-table .hours-row .time {
    text-align: right;
    white-space: nowrap;
    flex: 0 0 auto;
}
.sipo-hours-table .hours-row .closed-day { opacity: 0.6; }

.sipo-hours-table .hours-row.today {
    color: var(--sipo-accent);
    font-weight: 700;
}

.sipo-hours-heading {
    font-family: Merienda, cursive;
    margin-bottom: 0.5em;
}

/* Footer hours list */
#footer-hours { list-style: none; margin: 0; padding: 0; }

#footer-hours li {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    padding: 3px 0;
}

#footer-hours li .day { font-weight: 600; }
#footer-hours li .closed-day { opacity: 0.6; }
#footer-hours li.today { color: var(--sipo-accent); font-weight: 700; }

/* ---------- Ordering disabled state ---------- */
body.ordering-disabled .nav-order-btn,
body.ordering-disabled .floating-order,
body.ordering-disabled .sipo-order-btn {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(0.5);
}

/* Print: none of this belongs on paper */
@media print {
    .status-strip, .floating-order { display: none !important; }
    body.has-status-strip #page-container { margin-top: 0; }
}