/* The Mix-a-Mash logo lockup: the icon tile, then the wordmark. Every public page
   links this file and defines no logo rules of its own, so the pages cannot drift.
   Markup, the same on every page:
   <a class="logo" href="/"><span class="dot" aria-hidden="true"></span><span class="wordmark">Mix-a-Mash</span></a>
   A footer lockup adds the logo-footer class.
   Pinned by tests/docs/test_web_brand_lockup.py (markup, rules) and
   tests/web/brand_lockup_browser.test.mjs (the icon sits on the letters' centre).
   When this file changes, change ?v= on its link in every page. */

/* Sizes are in em so the footer size scales the whole lockup: at 20px the icon is
   22px and the gap is 9px. min-height keeps the lockup 1.5em tall where
   text-box is unsupported. */
.logo{display:inline-flex;align-items:center;gap:.45em;vertical-align:top;min-height:1.5em;font-size:20px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;color:#f4f4f8;text-decoration:none}

/* The icon is a background image, not content. The resets keep a page's own .dot
   rule (the help guides use .dot for status dots) from reaching the logo. */
.logo .dot{display:block;flex:none;width:1.1em;height:1.1em;margin:0;border-radius:0;background:url("/assets/favicon.svg?v=3") center/contain no-repeat}

/* A flex row centres the icon on the text's line box, and a line box is not
   centred on the capital letters (it depends on the font's ascent and descent).
   Trimming the wordmark's box to the cap height and the baseline makes the box
   the letters' own height, so the icon centres on the letters in any font.
   Browsers without text-box (before Safari 18.2 and Chrome 133) keep the line box. */
.logo .wordmark{margin:0;line-height:1;text-box:trim-both cap alphabetic}

.logo.logo-footer{font-size:16px;margin-bottom:8px}