/* ---------------------------------------------------------------------------
   pages/menu.css: the menu board.

   Every item, size and price on this page is real HTML text. None of it is a
   picture of a menu. That is the whole point of the page: it has to be
   readable the instant it paints, selectable, searchable, and it has to
   enlarge with the browser's own font size.

   Nothing on this page animates on load or on scroll. Prices are information.
   --------------------------------------------------------------------------- */

/* ---- The layout ----------------------------------------------------------
   A rail of section links on the left and the board on the right. The rail
   sticks as you scroll, which is why base.css uses overflow-x:clip rather
   than hidden: `hidden` on html turns it into a scroll container and
   position:sticky then has nothing to stick to.
   -------------------------------------------------------------------------- */
.menu-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:44px;align-items:start}

.menu-rail{position:sticky;top:24px;border:2px solid var(--ink);background:var(--paper);box-shadow:5px 5px 0 var(--mint);padding:16px 0}
.rail-title{margin:0 18px 10px;padding-bottom:10px;border-bottom:2px solid var(--ink);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#5b6166}
.menu-rail a{position:relative;z-index:0;display:block;padding:10px 18px;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;transition:color .2s var(--ease-settle)}
.menu-rail a:before{content:"";position:absolute;inset:2px 8px;background:var(--mint);z-index:-1;transform:scaleY(0);transform-origin:50% 100%;transition:transform .2s var(--ease-settle)}
.menu-rail a:hover:before,.menu-rail a:focus-visible:before{transform:scaleY(1)}

/* ---- The board ----------------------------------------------------------
   Two columns, with `.wide` spanning both. The flavor board, pizza and drinks
   are wide; everything else is a half.
   -------------------------------------------------------------------------- */
.menu-board{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-content:start}
.menu-card{background:var(--paper);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--mint)}
.menu-card.wide{grid-column:1/-1}

/* The card is a <details> so a phone can collapse it. On a desktop it is
   always open and the summary is just the heading: no marker, no pointer, and
   nothing to suggest it can be clicked, because here it cannot usefully be. */
.menu-card>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:30px 30px 0;list-style:none}
.menu-card>summary::-webkit-details-marker{display:none}
.menu-card>summary::marker{content:""}
.card-head{display:block;min-width:0}
.menu-card h2{font-size:42px;margin:0}
.menu-card .eyebrow{display:block;margin-bottom:10px}
.card-chevron{display:none}
.card-body{padding:8px 30px 30px}
.menu-card .desc{color:#555;max-width:680px;margin:0}

/* A row is name-and-note on the left, price hard right. The price never wraps
   and the hairline between rows is 1px; the rule above the first row is the
   2px ink one, which is what separates the list from the heading. */
.menu-list{list-style:none;padding:0;margin:24px 0 0}
.menu-row{display:grid;grid-template-columns:1fr auto;gap:18px;padding:13px 0;border-top:1px solid #c8c4bb}
.menu-row:first-child{border-top:2px solid var(--ink)}
.price{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Pizza is a real table because it is real tabular data: a name and a price
   per size. A screen reader reads "Pepperoni, 12 inch, $12" from this and
   would read three loose numbers from a stack of divs. */
.pizza-table{width:100%;border-collapse:collapse;margin-top:20px}
.pizza-table th,.pizza-table td{padding:13px 10px;border-top:1px solid #c8c4bb;text-align:left}
.pizza-table th:nth-child(n+2),.pizza-table td:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums}
.pizza-table thead th{border-top:2px solid var(--ink);font-size:12px;text-transform:uppercase;letter-spacing:.08em}

/* The flavor chips. This is the list that changes most often, so it is a
   collection of its own: see src/flavors/ and the README. */
.flavors{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.flavor{border:2px solid var(--ink);padding:9px 12px;background:var(--mint);font-weight:700;box-shadow:3px 3px 0 var(--ink);transition:transform .12s var(--ease-settle),box-shadow .12s var(--ease-settle)}
.flavor:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}

.menu-note{margin:26px 0 0;font-size:14px}

/* The rail sticks 24px down, so a jump has to clear it. */
.menu-card{scroll-margin-top:24px}

/* ---------------------------------------------------------------------------
   Narrower than a desktop: the rail goes and the cards become an accordion.

   The summary is now the control, so it gets a pointer, a chevron and a
   56px target. The cards ship open, which is what a visitor with no
   JavaScript sees at every width; js/menu.js is what closes them here.
   --------------------------------------------------------------------------- */
@media(max-width:900px){
  .menu-layout{grid-template-columns:1fr;gap:0}
  .menu-rail{display:none}

  .menu-board{grid-template-columns:1fr;gap:12px}
  .menu-card{box-shadow:4px 4px 0 var(--mint);scroll-margin-top:12px}
  .menu-card.wide{grid-column:auto}

  .menu-card>summary{padding:15px 16px;min-height:56px;cursor:pointer}
  .menu-card[open]>summary{background:var(--mint);border-bottom:2px solid var(--ink)}
  .menu-card h2{font-size:25px;line-height:1}
  .menu-card .eyebrow{margin-bottom:5px;font-size:11px}
  .card-body{padding:16px}
  .menu-list{margin-top:4px}

  .card-chevron{display:block;flex:none;width:14px;height:14px;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s var(--ease-settle)}
  .menu-card[open] .card-chevron{transform:rotate(-135deg) translate(-4px,-4px)}

  .pizza-table{font-size:14px}
  .pizza-table th,.pizza-table td{padding:10px 4px}
}