/* ===================================================================
   MENU.TZ — child.css: this site's own overrides (from v2.2.2)

   This file belongs to ONE site. Releases never include it, so an update
   can't overwrite it. index.php loads it last — after menu.css, cart.css
   and the colour roles generated from config — so any rule here wins a
   tie without !important. If the file is missing, nothing is loaded.

   How to use
   - Uncomment a block (remove the opening slash-star and closing star-
     slash around it) and change the colours.
   - Always set the text colour with the background. Two of every pair
     are given for that reason: a dark text on a dark fill disappears.
     Aim for at least 4.5:1 contrast (any online contrast checker will do).
   - Colours that start "var(--…)" are the site's own palette; replace
     them with a hex such as #f40009, or leave them as they are.
   - Edits show up on the next page load: the link carries the file's
     modified time, so the browser cache doesn't hide changes.

   Safe and less safe
   - The palette variables (--primary, --badge…) are the safest hooks:
     they survive updates. The class rules below (.chip, .price__value…)
     are tied to the current markup; release notes will say if a class
     is ever renamed.
   - Keep everything for this site in this file. Never add lines to the
     end of menu.css again: menu.css is now uploaded whole.
   ================================================================= */


/* -------------------------------------------------------------------
   0. Whole site: the main colour
   Everything FILLED with the brand colour at once: the active category
   pill, the menu switcher, the price labels, the Connect button, the
   Add/Send buttons and ticked radio buttons and checkboxes. Use this, OR
   the single-element controls below — not usually both.
   It does not change the soft tints made from the brand colour (the
   price figure's fill, the card behind a chosen option): those are
   separate tones generated from brand.seed in config. To change the
   whole palette, change the seed there instead.
   ------------------------------------------------------------------- */


:root{
  --primary:    #ba3b36;
  --on-primary: #ffffff;
}


/* -------------------------------------------------------------------
   1. Category pills (the scrolling row: Starters, Mains…)
   ------------------------------------------------------------------- */
/* The selected pill */
/*
.chip.is-active{
  background:   #ff5b00;
  border-color: #ff5b00;
  color:        #ffffff;
}
*/

/* The other pills (optional) */
/*
.chip{
  background:   #ffffff;
  border-color: #c9c9c9;
  color:        #333333;
}
*/


/* -------------------------------------------------------------------
   2. Price pill on the list — the figure ("25,000")
   Also used for a text price in the dish sheet ("Market price").
   ------------------------------------------------------------------- */
/*
.price__value{
  background: #fde3e3;
  color:      #5c0004;
}
*/


/* -------------------------------------------------------------------
   3. Price pill on the list — the variation label ("Single", "Large")
   The coloured half in front of the figure, on dishes with several
   prices or a labelled price.
   ------------------------------------------------------------------- */
/*
.price__label{
  background: #f40009;
  color:      #ffffff;
}
*/


/* -------------------------------------------------------------------
   4. Badges ("Popular", "Chef's Pick")
   The fill is normally set in config (brand.badge, or sponsor.badge
   while a sponsorship runs); this wins over both.
   ------------------------------------------------------------------- */
/*
:root{ --badge: #ed983a; }
.badge{ color: #ffffff; }
*/


/* -------------------------------------------------------------------
   5. Connect button (the floating button, bottom right)
   ------------------------------------------------------------------- */
/*
.fab__btn{
  background: #ff5b00;
  color:      #ffffff;
}
*/


/* -------------------------------------------------------------------
   6. Menu switcher (the "Food ▾" pill that switches between tabs)
   ------------------------------------------------------------------- */
/* On the header photo, and in the scrolled bar */
/*
.drop__btn{
  background: #ff5b00;
  color:      #ffffff;
}
*/

/* In the scrolled bar on a site with the brand-colour bar (no sponsor).
   There the switcher is deliberately inverted so it shows up against the
   bar; it needs this longer selector to be changed. */
/*
body.has-brand-bar .drop--compact .drop__btn{
  background: #ff5b00;
  color:      #ffffff;
}
*/

/* The chosen menu inside the open list (optional) */
/*
.drop__item.is-active{
  background: #fde3e3;
  color:      #5c0004;
}
*/


/* -------------------------------------------------------------------
   Anything else for this site goes below this line.
   ------------------------------------------------------------------- */