/* Fixes layered on top of the design export (linked into index.html by
   tools/unbundle.py). Each rule works around something that should really be
   fixed in the design tool; delete a rule once the export no longer needs it.
   !important is needed because the export uses inline styles and injects its
   own stylesheet after this one. */

/* Header on phones narrower than 400px: logo + theme toggle + "Talk to us" +
   menu button don't fit, which pushes the menu button off the right edge
   (half-hidden on 360px Android phones). Tighten them so everything fits. */
@media (max-width: 400px) {
  header img[data-logo] { height: 32px !important; }
  header div:has(> button[aria-label="Menu"]) { gap: 6px !important; }
  header a[href="#/contact"] { padding: 0 12px !important; font-size: 14px !important; }
}
/* Very narrow screens (older 320px phones, folded phones): drop the header
   call-to-action; Contact is still in the menu. */
@media (max-width: 350px) {
  header a[href="#/contact"] { display: none !important; }
}

/* About page partner grid: switches to two columns below 1080px, but the
   columns can't shrink below the logo width, so on phones the right-hand
   column is cropped. Let the columns and logos shrink. */
@media (max-width: 1080px) {
  .partners { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .partners .lg svg { max-width: 100% !important; }
}
@media (max-width: 560px) {
  .partners > div { padding: 20px 16px !important; }
}
@media (max-width: 350px) {
  .partners { grid-template-columns: minmax(0, 1fr) !important; }
}