/* ============================================================
   DELIVERY PROMO BAR — free Klang Valley delivery
   ============================================================

   A single line above the header, printed on wp_body_open by
   inc/delivery-promo.php. It sits outside #site-header on purpose: the
   header is 280px tall with the product row seated on the menu bar
   (see global-header.css), and anything added inside it has to be
   accounted for in that row's positioning. Above it, nothing moves.

   Quiet by design. This started as a saturated dark-green band and read
   as an advertisement — the loudest thing on a page whose actual job is
   selling the safe below it. It is now a tinted strip: the page's own
   background green, brand green text, one hairline rule to seat it
   against the header. It still reads first because it is at the top,
   not because it shouts. Gold was never an option; that is the CTA
   colour and a gold band competes with the buttons it should be
   feeding.
   ============================================================ */

.sb2u-delivery-bar {
    background: #f1f6f3;
    border-bottom: 1px solid #e2eae5;
    color: #2d5a3f;
    font-family: 'Inter', sans-serif;
}

/* Ordinary centred inline text, not a flex row.
   The lead and the note read as one sentence, so at any width between the
   mobile breakpoint and the point where it fits on one line, the sentence
   has to wrap the way a sentence does. Flex wrapping breaks it at the span
   boundary instead, which stranded the em dash at the start of line two on
   every tablet-width viewport. Inline text keeps the dash bound to the word
   before it and wraps wherever it happens to run out of room. */
.sb2u-delivery-bar__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 5px 20px;
    text-align: center;
    line-height: 1.35;
}

.sb2u-delivery-bar__lead {
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.01em;
}

/* The condition is the part people skip, so it is dimmed but never hidden —
   a customer on a lift-less third floor needs to read it here, not discover
   it as a line item at checkout. #5a6b61 on this tint is 5.2:1, so dimmed
   still clears WCAG AA at this size. */
.sb2u-delivery-bar__note {
    font-size: 12.5px;
    font-weight: 400;
    color: #5a6b61;
}

.sb2u-delivery-bar__note::before {
    content: '— ';
    color: #9aaaa1;
}

/* On a phone the sentence would wrap to three or four ragged lines, so the
   two parts are split into their own centred lines instead and the dash,
   which only ever joined them, goes away. Two tight lines, not three. */
@media (max-width: 768px) {
    .sb2u-delivery-bar__inner {
        padding: 5px 14px;
        line-height: 1.3;
    }

    .sb2u-delivery-bar__lead,
    .sb2u-delivery-bar__note {
        display: block;
    }

    .sb2u-delivery-bar__lead {
        font-size: 12px;
    }

    .sb2u-delivery-bar__note {
        font-size: 11px;
    }

    .sb2u-delivery-bar__note::before {
        content: none;
    }
}