/* Sips by Sisters — one stylesheet for the marketing page, the ordering flow
   and the staff screen. No build step: this file is served as written.

   The palette is lifted from the trailer itself, so the site and the thing
   parked at the curb read as the same business: cream siding, a pink skirt,
   the sage green of the menu board, and warm wood on the counter. */

:root {
  --cream:      #FDF7F3;
  --white:      #FFFFFF;
  --ink:        #4A3B40;
  --muted:      #8C7B80;
  --pink:       #F2C3D1;
  --pink-soft:  #FCEBF0;
  --pink-deep:  #D4708F;
  --pink-press: #BF5C7B;
  --sage:       #8C9B7C;
  --sage-deep:  #6C7B5D;
  --wood:       #C99A6B;
  --line:       #F0DDE3;
  --shadow:     0 2px 8px rgba(74, 59, 64, .06);
  --shadow-lg:  0 10px 34px rgba(74, 59, 64, .12);
  --radius:     16px;
  --radius-sm:  10px;
  /* Single source of truth for control height. Native selects render shorter
     than text inputs unless told otherwise, which leaves a form looking
     subtly broken. Every single-line control uses this; textareas do not. */
  --control-h:  46px;
  --wrap:       1120px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Elements styled display:flex or display:grid ignore the hidden attribute
   unless this rule outranks them. Without it, hidden panels leak on screen. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  /* A phone keyboard or a wide table must never make the whole page slide
     sideways. Overflow is contained per component instead. */
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--pink-deep); }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1em; }

.script {
  font-family: 'Sacramento', 'Brush Script MT', cursive;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1;
}

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.section { padding: 72px 0; }
.section-tight { padding: 44px 0; }
.center { text-align: center; }
.muted { color: var(--muted); }
.eyebrow {
  text-transform: uppercase; letter-spacing: .16em; font-size: .75rem;
  font-weight: 600; color: var(--pink-deep); margin-bottom: .6em;
}
.lede { font-size: 1.1rem; color: var(--muted); max-width: 56ch; }
/* .lede is width capped, so centring its TEXT is not enough — the block itself
   still sits hard left inside a wider container until the margins are auto. */
.center .lede, .lede.center { margin-inline: auto; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-h); padding: 0 26px;
  border: 2px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--pink-deep); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover:not(:disabled) { background: var(--pink-press); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--pink); background: var(--pink-soft); }
.btn-sage { background: var(--sage); color: #fff; }
.btn-sage:hover:not(:disabled) { background: var(--sage-deep); }
.btn-sm { min-height: 38px; padding: 0 18px; font-size: .9rem; }
.btn-sm .icon { width: 18px; height: 18px; }
.btn-block { display: flex; width: 100%; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; }

input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=time], input[type=number], input[type=password],
input[type=datetime-local], select, textarea {
  width: 100%;
  /* 16px minimum. Anything smaller makes iOS Safari zoom on focus, and a
     zoomed viewport is exactly what "the page scrolls sideways" means. */
  font: inherit; font-size: 16px;
  color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0 14px;
  height: var(--control-h);
  appearance: none; -webkit-appearance: none;
}
textarea { height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
select {
  /* Matching the input height means re-drawing the chevron the appearance
     reset removed. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%238C7B80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--pink-deep);
  box-shadow: 0 0 0 3px rgba(212, 112, 143, .16);
}
.field-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Cards + panels ───────────────────────────────────────────────────────── */
.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
}
.panel-pink { background: var(--pink-soft); }
.panel-sage { background: var(--sage); color: #fff; }
.panel-sage .eyebrow, .panel-sage a { color: #fff; }
.panel-cream { background: var(--white); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  font-size: .75rem; font-weight: 600; letter-spacing: .02em;
  background: var(--pink-soft); color: var(--pink-deep);
}
.pill-sage { background: rgba(140, 155, 124, .16); color: var(--sage-deep); }
.pill-grey { background: #F1ECEE; color: var(--muted); }

.icon { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none;
        stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-lg { width: 30px; height: 30px; }

.heart { color: var(--pink-deep); }

/* ── Header ───────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 247, 243, .92);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.site-header .bar {
  display: flex; align-items: center; gap: 20px;
  min-height: 68px;
}
.brand { display: flex; align-items: baseline; gap: 6px; text-decoration: none; color: var(--ink); }
.brand .script { font-size: 2rem; color: var(--pink-deep); }
.brand small { font-size: .7rem; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
/* :not(.btn) matters. A bare `.site-nav a` rule out-specifies `.btn-primary`,
   so the Order Ahead button in the header renders with the dark link colour on
   pink instead of white. */
.site-nav a:not(.btn) { color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem; }
.site-nav a:not(.btn):hover { color: var(--pink-deep); }
.site-nav a.btn { text-decoration: none; }
.nav-toggle { display: none; }
@media (max-width: 860px) {
  .site-nav a:not(.btn) { display: none; }
  .site-nav { gap: 12px; }
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, #FFFFFF 0%, var(--pink-soft) 55%, var(--cream) 100%);
  padding: 76px 0 0;
  text-align: center;
}
.hero .script { font-size: clamp(3.6rem, 13vw, 7rem); color: var(--pink-deep); }
.hero .by {
  font-size: .8rem; letter-spacing: .34em; text-transform: uppercase;
  /* Enough clearance for the descender of the script "p" above it. */
  color: var(--muted); margin: 10px 0 12px;
}
.hero-tag {
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  font-size: clamp(.8rem, 2.2vw, 1rem); color: var(--ink); margin-bottom: 26px;
}
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* The trailer's scalloped awning: pink and white stripes whose bottom edge is
   a row of half circles. The mask circle is centred ON the top edge, so the
   visible half hangs downward. Centring it below the edge inverts the shape
   into notches, which reads as a saw blade rather than an awning. */
.hero-scallop {
  margin-top: 54px; height: 30px;
  background: repeating-linear-gradient(90deg, var(--pink) 0 34px, var(--white) 34px 68px);
  -webkit-mask: radial-gradient(circle at 17px 0, #000 16px, transparent 17px) repeat-x 0 0 / 34px 30px;
          mask: radial-gradient(circle at 17px 0, #000 16px, transparent 17px) repeat-x 0 0 / 34px 30px;
}

/* ── Where we will be ─────────────────────────────────────────────────────── */
.stop-list { display: grid; gap: 16px; }
.stop {
  display: grid; gap: 4px 18px; align-items: center;
  grid-template-columns: 104px 1fr auto;
}

/* The map thumbnail. The date badge rides in its corner rather than taking a
   column of its own: on a phone the card only has room for one square. */
.stop-map {
  position: relative; display: block;
  width: 104px; height: 104px; flex: none;
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--line);
  align-self: start;
  transition: transform .15s ease, box-shadow .15s ease;
}
a.stop-map:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.stop-map-svg { display: block; width: 100%; height: 100%; }
.stop-date {
  position: absolute; left: 6px; bottom: 6px;
  background: rgba(255, 255, 255, .93);
  border-radius: 8px; padding: 3px 8px 4px; text-align: center; line-height: 1.05;
  box-shadow: 0 1px 4px rgba(74, 59, 64, .14);
}
.stop-date b { display: block; font-size: 1.05rem; color: var(--pink-deep); }
.stop-date span { font-size: .58rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }

/* The lead card. Bigger map, a flag across the top, and the only place on the
   page with a full size button, because it is the only stop you can actually
   order from right now. */
.stop-featured {
  grid-template-columns: 140px 1fr auto;
  padding: 20px 22px 22px;
  border-color: var(--pink);
}
.stop-featured.is-live { border-color: var(--pink-deep); box-shadow: var(--shadow-lg); }
.stop-featured .stop-map { width: 140px; height: 140px; }
.stop-featured h3 { font-size: 1.35rem; }
.featured-flag {
  grid-column: 1 / -1; margin: 0 0 14px;
  display: flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.stop-featured.is-live .featured-flag { color: var(--pink-deep); }
.live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--pink-deep);
  box-shadow: 0 0 0 0 rgba(212, 112, 143, .55);
  animation: live-pulse 2s ease-out infinite;
}
@keyframes live-pulse {
  70%  { box-shadow: 0 0 0 9px rgba(212, 112, 143, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 112, 143, 0); }
}

.schedule-heading {
  margin: 30px 0 -2px; font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

.stop-body { min-width: 0; }
.stop-body h3 { margin-bottom: 2px; }
.stop-body .where { color: var(--muted); font-size: .95rem; }
.stop-body .when { color: var(--ink); font-size: .95rem; font-weight: 500; }
.stop-cta { align-self: center; }

@media (max-width: 640px) {
  .stop { grid-template-columns: 80px 1fr; }
  .stop-map { width: 80px; height: 80px; }
  .stop-date { left: 4px; bottom: 4px; padding: 2px 6px 3px; }
  .stop-date b { font-size: .9rem; }
  .stop-cta { grid-column: 2; justify-self: start; margin-top: 8px; }

  .stop-featured { grid-template-columns: 96px 1fr; }
  .stop-featured .stop-map { width: 96px; height: 96px; }
  .stop-featured h3 { font-size: 1.2rem; }
  /* The one button on the page worth spanning the full width. */
  .stop-featured .stop-cta { grid-column: 1 / -1; justify-self: stretch; }
  .stop-featured .stop-cta .btn { display: flex; width: 100%; }
}

/* ── Menu ─────────────────────────────────────────────────────────────────── */
.menu-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.menu-col h3 {
  text-transform: uppercase; letter-spacing: .12em; font-size: .85rem;
  color: var(--pink-deep); border-bottom: 2px solid var(--pink-soft);
  padding-bottom: 8px; margin-bottom: 14px;
}
.menu-row { display: flex; gap: 12px; align-items: baseline; margin-bottom: 14px; }
.menu-row .nm { font-weight: 600; }
.menu-row .ds { color: var(--muted); font-size: .88rem; display: block; font-weight: 400; }
.menu-row .pr { margin-left: auto; font-weight: 600; color: var(--pink-deep); white-space: nowrap; }
.menu-row.sold .nm, .menu-row.sold .pr { color: var(--muted); text-decoration: line-through; }

/* ── Value props ──────────────────────────────────────────────────────────── */
.props { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.prop { display: flex; gap: 14px; align-items: flex-start; }
.prop-ico {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .18); color: #fff;
}
.panel-sage .prop b { display: block; }
.panel-sage .prop span { color: rgba(255, 255, 255, .82); font-size: .9rem; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer { background: var(--pink-soft); padding: 44px 0 calc(30px + env(safe-area-inset-bottom)); }
.footer-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.social { display: flex; gap: 14px; align-items: center; }
.social a { color: var(--pink-deep); display: grid; place-items: center;
            width: 40px; height: 40px; border-radius: 50%; background: var(--white); }
.footer-note { font-size: .85rem; color: var(--muted); }

/* ── Toast ────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px;
  box-shadow: var(--shadow-lg); z-index: 200; font-size: .92rem;
  max-width: min(92vw, 460px); text-align: center;
}
.toast-bad { background: #B4485F; }

.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--pink-deep);
  animation: spin .7s linear infinite; margin: 30px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}