/* ============================================================================
   menu.css — Magpies Softserve shop menu.

   Embed on any page with:
     <link rel="stylesheet" href="https://flavors.magpiessoftserve.com/menu.css">
     <script>window.__MAGPIES_API__ = "https://flavors.magpiessoftserve.com";</script>
     <div id="magpies-menu" data-store="silver-lake"></div>
     <script src="https://flavors.magpiessoftserve.com/menu.js" defer></script>

   Pulls in widget.css for the shared shell, cards, pills and type, so the menu
   and the flavor calendar can never drift apart.

   Everything is scoped to .mag-menu / .mag-menu-* so nothing here can reach a
   host page's own styles, and the flavor calendar embed is unaffected.
   ============================================================================ */
@import url("widget.css");


/* widget.css only resets box-sizing inside .mag-fc, and the back button
   sits outside it. Under content-box its min-height:48px had padding and
   border added on top, rendering a 15px-text button 74px tall. */
.mag-menu-wrap, .mag-menu-wrap *, .mag-menu-wrap *::before, .mag-menu-wrap *::after,
.mag-menu, .mag-menu *, .mag-menu *::before, .mag-menu *::after { box-sizing: border-box; }

.mag-menu-wrap {
  font-family: "Oswald", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #111;
}
.mag-menu-wrap { max-width: 1140px; margin: 0 auto; padding: 24px 16px 48px; }

/* Return-to-website sits above the menu, sized as a real button — it is how
   most visitors arrive here and how they get back. */
.menu-topbar { display: flex; margin-bottom: 14px; }
.menu-back {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 12px 22px;
  background: #111; color: #fec300; border: 2px solid #111; border-radius: 999px;
  font: inherit; font-size: 17px; font-weight: 700; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s;
}
.menu-back:hover { background: #fec300; color: #111; }
.menu-back:focus-visible { outline: 3px solid #111; outline-offset: 3px; }
.menu-back .arr { font-size: 19px; line-height: 1; }

/* ===================================================================
   Type scale.
   The sizes here previously came from successive "make it bigger"
   percentage bumps, which left the ramp non-monotonic: the section header
   (30px) was SMALLER than the item names it grouped (38px), and the store
   filter pill (13px) was smaller than body copy (15.5px).

   The deeper problem was weight, not size. Every large element was set at
   800 — and Oswald ships nothing above 700, so 700 and 800 render
   identically (measured: both 577.3px wide). The page had literally no
   weight variation among its headline elements, which is what made it read
   as one asset pasted at different zoom levels.

   So weight now does the work size was being asked to do alone:
     700  store name   — the heaviest thing on the page, uncontested
     600  item name
     500  section header, set in tracked caps so it reads as a LABEL
          introducing the items rather than competing with them
   Sizes stay large; the hierarchy comes from weight and treatment.

   Hero elements scale fluidly so they are proportionate at every width;
   controls and reading text step at the breakpoint so they land on tested
   values. Phone-first: every max is capped at what keeps "Highland Park",
   the longest store name, on one line.
   =================================================================== */
.mag-fc .mag-section-title.menu-section {
  /* Min is 30px so the section header still clearly leads the item names
     (24px on a phone) — at 26px the two sat a single pixel apart and the
     grouping read as ambiguous even with the weight difference. */
  font-size: clamp(30px, 6.8vw, 46px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.06em;
  color: #111;
  text-align: center;
  margin: 26px 0 16px;
}
.mag-fc .mag-section-title.menu-section:first-child { margin-top: 6px; }

/* Item name: one step below the section header in weight, so a flavor
   never looks like a section of its own. */
.mag-menu .mag-hero-title {
  font-size: clamp(24px, 6vw, 38px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.016em;
}

/* "On the menu now" was 15px/400 — the same size and weight as the
   description below it, so it read as prose rather than as a status
   marker. Smaller but bolder and tracked reads as a badge. */
.mag-menu .mag-now-pill {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
}

/* A primary control must not be smaller than the passive text beside it;
   this pill was 13px against 15.5px body copy. */
.mag-menu .mag-store-pill { font-size: 16px; font-weight: 600; }

/* Shop picker rows — the calendar has no equivalent state, so these are the
   only page-local components. They borrow the card's shape and the hero
   card's lift so they read as part of the same family. */
.mag-fc .menu-shop-list { list-style: none; margin: 0; padding: 0; }
.mag-fc .menu-shop {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: #fff; border: 1px solid var(--g2); border-radius: 12px;
  padding: 20px 22px; margin-bottom: 12px; color: var(--k);
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.mag-fc .menu-shop:hover, .mag-fc .menu-shop:focus-visible {
  transform: translateY(-2px); border-color: var(--y);
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}
.mag-fc .menu-shop-name { font-size: 24px; font-weight: 800; letter-spacing: -0.2px; }
/* Arrow scales with the shop name rather than carrying its own size. */
.mag-fc .menu-shop-go { font-size: 0.85em; color: var(--k); }

/* Calendar hand-off, styled as the page's one primary action. */
.mag-fc .menu-cta {
  background: var(--k); border-radius: 12px; padding: 22px 24px; margin-top: 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.mag-fc .menu-cta-copy { color: #fff; font-size: 15px; line-height: 1.5; max-width: 46ch; }
.mag-fc .menu-cta-copy strong { color: var(--y); display: block; font-size: 18px; margin-bottom: 2px; }
.mag-fc .menu-cta-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  padding: 12px 22px; border-radius: 999px; border: 2px solid var(--y);
  background: transparent; color: var(--y); font: inherit; font-weight: 700;
  font-size: 15px; text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s;
}
.mag-fc .menu-cta-btn:hover { background: var(--y); color: var(--k); }

.mag-fc .menu-empty {
  border: 1px dashed var(--g3); border-radius: 12px; padding: 20px 22px;
  color: var(--g4); font-size: 15px; line-height: 1.55; background: var(--g1);
}

/* Logo and store name. Both stay large on desktop; both scale with the
   viewport so a phone gets a proportionate header instead of a desktop
   header crammed into 375px. The store name's cap is 66px because
   "Highland Park" — the longest name — stops fitting on one line above
   59px at 375px, and wrapping it cost a third of the first screen.
   Tracking tightens as the size grows: Oswald opens up at display sizes. */
/* Logo, +50% on every stop of the clamp so it scales up uniformly rather
   than only at one width.
   logo.png is an 800x322 plate that carries ~49px of its own yellow
   padding on every side — 15.2% of its height below the artwork. That
   padding is invisible against the yellow header but still occupies space,
   so the gap under the wordmark was ~35px of image plus 8px of margin.
   Cancelling the image's share is what actually tightens the pairing; the
   calc keeps it correct as the logo scales, and the +6px is the real,
   intended gap. */
.mag-fc .mag-logo {
  --logo-h: clamp(138px, 28.5vw, 228px);
  --logo-plate-pad: calc(var(--logo-h) * 0.152);
  height: var(--logo-h);
  margin-bottom: calc(6px - var(--logo-plate-pad));
}
/* Its own margin would otherwise collapse against the logo's and reopen
   part of the gap. */
.mag-fc .mag-header .mag-title { margin-top: 0; }
.mag-fc .mag-title {
  font-size: clamp(38px, 13vw, 66px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.022em;
}


.menu-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===================================================================
   Phone layout.
   Measured before this block, at 320x700: the header and control bar
   together ate 264px, so 48% of the screen was chrome before the first
   flavor; the shop pills wrapped onto two rows; and descriptions ran at
   30 characters per line, under the 35-60 that reads comfortably.
   Everything here is scoped to .mag-menu so the calendar embed on
   magpiessoftserve.com keeps the proportions it was designed with.
   =================================================================== */
@media (max-width: 600px) {
  .mag-menu-wrap { padding: 10px 8px 32px; }

  /* Reclaim the top of the screen. The customer already knows whose shop
     this is — the store name matters more than a large wordmark here. */
  /* Logo, store name, section header and item name are all fluid, so they
     need no phone override — the clamps above already resolve correctly
     here. Only the stepped UI values below change. */
  .mag-menu .mag-header { padding: 14px 16px 16px; }
  /* margin-bottom is handled by the plate-padding calc above, which already
     scales with the logo — no phone-specific value needed. */
  .menu-topbar { margin-bottom: 8px; }
  .menu-back { min-height: 48px; padding: 11px 18px; font-size: 15px; font-weight: 600; }
  .mag-fc .mag-section-title.menu-section { margin: 14px 0 10px; }
  .mag-menu .mag-store-pill { font-size: 15px; }

  /* The colour key is a one-line explainer on a phone, not a banner. Left
     at its desktop size it cost 91px — more than a whole flavor card's
     worth of the first screen. */
  .mag-menu .mag-legend { padding: 7px 10px; gap: 8px; font-size: 11px; }
  .mag-menu .mag-legend-label { display: none; }
  .mag-menu .mag-legend-note.mag-swirl-note {
    margin: 0; padding: 5px 10px; font-size: 12px; flex-basis: auto; text-align: left;
  }

  /* Shop switcher: one scrollable row instead of wrapping to two, and it
     stays put while the menu scrolls so changing shop never needs a trip
     back to the top. */
  .mag-menu .mag-controls { padding: 8px 10px; }
  .mag-menu .mag-store-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mag-menu .mag-store-pills::-webkit-scrollbar { display: none; }
  .mag-menu .mag-store-pill { flex: 0 0 auto; }

  /* Give the words the width instead of the gutters. */
  .mag-menu .mag-body { padding: 12px 10px 14px; }
  .mag-menu .mag-hero-card { padding: 16px 16px 14px; border-radius: 12px; }
  .mag-menu .mag-hero-title { font-size: 25px; }
  .mag-menu .mag-section-title { margin: 4px 0 8px; }

  .mag-fc .menu-shop { padding: 16px 18px; }
  .mag-fc .menu-shop-name { font-size: 21px; }

  /* Stack the CTA so the button gets a full-width tap target. */
  .mag-fc .menu-cta { padding: 18px; flex-direction: column; align-items: stretch; gap: 14px; }
  .mag-fc .menu-cta-btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }


/* ===================================================================
   Wide screens.
   Measured at 1440x900 before this block: a card ran 1066px wide to hold
   497px of text, so half of every card was empty, and only 2 of 16 items
   reached the first screen. Two columns spend that width on content
   instead of margin and halve the scroll.
   =================================================================== */
.mag-menu .mag-controls {
  /* The switcher follows the reader at every width — on a 16-item menu it
     otherwise scrolls away and changing shop means going back to the top. */
  position: sticky; top: 0; z-index: 5;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

/* Cards live in a grid of their own, one per section. Headings, the empty
   state, the shop picker and the calendar hand-off are siblings of that grid
   rather than items inside it, so they run full width on their own and no
   longer need a grid-column span to escape the card columns. */
.mag-menu .menu-grid { display: grid; gap: 16px; }

@media (min-width: 900px) {
  .mag-menu .menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Every card the same height, across rows and not just within one. The
       default (auto) sizes each row to its own tallest card, which left the
       ragged edges this replaced. Only from 900px up: in the single column
       below that, equal rows would stretch every short card to match the
       longest description and cost a lot of scrolling for nothing.
       Each section sizes itself: pie descriptions run much longer, so one
       height across both left every flavor card padded out to match a pie. */
    grid-auto-rows: 1fr;
  }
  /* The grid owns the spacing now. */
  .mag-menu .mag-hero-card {
    margin-bottom: 0;
    /* Tighter than the calendar's 24px 24px 18px. The menu shows every card
       at once, so the gutters were costing height on all sixteen; the
       narrower sides also give the descriptions more width, which is what
       actually pulls the cards down a line. Scoped here rather than in the
       shared base so the calendar keeps its roomier card, and set inside the
       desktop query so the mobile padding above still wins on small screens. */
    padding: 16px 18px 14px;
  }
}

/* Three columns once there is genuinely room, so a 16-item menu is barely a
   scroll on a desktop monitor. */
@media (min-width: 1250px) {
  .mag-menu .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A stretched card is taller than its text, so the tap-through line is pinned
   to the bottom edge instead of leaving a gap beneath it. */
.mag-menu .mag-hero-card { display: flex; flex-direction: column; }
.mag-menu .mag-hero-card .mag-more { margin-top: auto; padding-top: 12px; }