/* AGR header — host logo and Canadian-owned badge at the narrow desktop widths (pkg_agrmenu). Both belong to the host
   page: include this file, put data-agrm-logo on the logo <img> (250 × 55, no fixed height) and data-agrm-badge on the
   badge <img> (73 × 64, 20 px gap). Host header row: max-width 1240 px, 16 px side padding, 16 px between the brand
   and the menu (README). Numbers: bar 802 px (19 px bold labels, Barlow Condensed), 24 px spare (R8), plus 17 px for a
   classic scrollbar, which 100vw and media queries count:
     logo  = 100vw - (32 + 16 + 802 + 24 + 17) = 100vw - 891px → 209 px at 1100, full 250 px from 1141 px;
     badge = shown from 250 + 93 + 16 + 802 + 24 + 32 + 17 = 1234 px (rule scoped to >= 1100 px). */
@media (min-width: 1100px) and (max-width: 1140.98px) {
  [data-agrm-logo] { max-width: calc(100vw - 891px); height: auto; }
}
@media (min-width: 1100px) and (max-width: 1233.98px) {
  [data-agrm-badge] { display: none !important; }
}
/* Below 1100 px the header row is the phone/tablet bar (<= 56 px): side padding 2 x 8, burger 44, bar buttons 44 + 44 +
   store pill 72, gaps 4 + 4 + 2 + 2 (icons only below 720 px) leave the logo 100vw - 232 px, kept between 120 and 164 px
   (h 26-36); 200 px from 720 px,
   where the buttons carry labels. The badge is the host's call below 1100 (R14: the menu shows it in the sheet's
   header via the renderer's `badge` option), so nothing here touches it. */
@media (max-width: 1099.98px) {
  [data-agrm-logo] { width: clamp(120px, calc(100vw - 232px), 164px); max-width: none; height: auto; }
  a:has(> [data-agrm-logo]) { display: flex; align-items: center; min-height: 44px; }   /* the logo link is a 44 px tap target */
}
@media (min-width: 720px) and (max-width: 1099.98px) {
  [data-agrm-logo] { width: 200px; }
}