/**
 * Materialize `.container` — the 90/85/80/70% centred page container used
 * site-wide.
 *
 * The full Materialize grid (container/row/col) lives UNLAYERED in
 * embeddedform.css, but that library only loads on form pages. On every other
 * page `.container` fell back to chrome.css's copy (@layer legacy), which
 * Tailwind preflight (`@layer base { *{margin:0;padding:0} }`) zeroes — leaving
 * page content flush-left (target-group heroes, etc.). This GLOBAL unlayered
 * copy restores `.container` centring everywhere: unlayered beats every layer
 * (incl. preflight), and matches the prod (legacy unlayered theme) rendering.
 *
 * Loaded via the `global` library (every page), early — so page-specific
 * unlayered CSS (key-target.css etc.) can still override it where needed.
 * Legacy breakpoints (601/993/1201) preserved verbatim.
 */
.container {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
}

@media (min-width: 601px)  { .container { width: 85%; } }
@media (min-width: 993px)  { .container { width: 80%; } }
@media (min-width: 1201px) { .container { width: 70%; } }

/**
 * Menutech allergen icon font — a letter→glyph icon font: the allergen symbols
 * (on /features/<allergen> term pages, e.g. the "14 allergens" list) carry a
 * letter as the span text and the "menutech" font maps it to the icon glyph.
 * The @font-face ("menutech") lives in chrome.css. No CSS applied it to
 * `.menutech-icon(s)` globally — only a stale service-page scope — so on
 * term/feature pages the span fell back to chrome.css's explicit
 * `body * { font-family: Dubai }` and rendered the bare letter.
 *
 * GLOBAL + UNLAYERED so it applies wherever the class renders and beats that
 * `body *` rule (@layer legacy) by layer — no !important needed.
 */
.menutech-icon,
.menutech-icons {
  font-family: "menutech";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}