/* =========================================================================
   Icons, replacing the icofont webfont.

   The template shipped icofont: 525 KB of woff2 plus 90 KB of CSS on every
   page, and 5.5 MB of font files in the deploy, to draw ELEVEN icons. This
   file draws the same eleven as CSS mask images at roughly 3 KB, with no
   markup change anywhere, so every page and both generators keep using
   <i class="icofont-..."> exactly as before.

   Masks rather than background-image so the glyph inherits `color` and keeps
   working on the dark footer panels.
   Mask support: https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image
   ========================================================================= */

[class^="icofont-"],
[class*=" icofont-"] {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex: none;
}

.icofont-arrow-right {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M4 12h15M13 6l6 6-6 6"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M4 12h15M13 6l6 6-6 6"/></svg>');
}

.icofont-check-circled {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9.4" fill="black"/><path fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M7.6 12.3l3 3 5.8-6"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9.4" fill="black"/><path fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M7.6 12.3l3 3 5.8-6"/></svg>');
}

.icofont-ui-check {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" d="M5 12.8l4.4 4.4L19 7.6"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" d="M5 12.8l4.4 4.4L19 7.6"/></svg>');
}

.icofont-plus {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" d="M12 5v14M5 12h14"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" d="M12 5v14M5 12h14"/></svg>');
}

.icofont-minus {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" d="M5 12h14"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" d="M5 12h14"/></svg>');
}

.icofont-close-circled {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9.4" fill="black"/><path fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" d="M8.6 8.6l6.8 6.8M15.4 8.6l-6.8 6.8"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9.4" fill="black"/><path fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" d="M8.6 8.6l6.8 6.8M15.4 8.6l-6.8 6.8"/></svg>');
}

.icofont-ui-messaging {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M4 4h16a1.6 1.6 0 011.6 1.6v9.6A1.6 1.6 0 0120 16.8H9.2L4.4 20.6A.8.8 0 013.2 20v-3.2H4a1.6 1.6 0 01-1.6-1.6V5.6A1.6 1.6 0 014 4z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M4 4h16a1.6 1.6 0 011.6 1.6v9.6A1.6 1.6 0 0120 16.8H9.2L4.4 20.6A.8.8 0 013.2 20v-3.2H4a1.6 1.6 0 01-1.6-1.6V5.6A1.6 1.6 0 014 4z"/></svg>');
}

.icofont-css-link {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" d="M10 14a4 4 0 005.7 0l3-3A4 4 0 0013 5.3l-1.2 1.2M14 10a4 4 0 00-5.7 0l-3 3A4 4 0 0011 18.7l1.2-1.2"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" d="M10 14a4 4 0 005.7 0l3-3A4 4 0 0013 5.3l-1.2 1.2M14 10a4 4 0 00-5.7 0l-3 3A4 4 0 0011 18.7l1.2-1.2"/></svg>');
}

.icofont-cards {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="3" y="6" width="12" height="15" rx="2" fill="black"/><path fill="black" d="M8.6 3h9A2.4 2.4 0 0120 5.4v11.2a1 1 0 01-2 0V6.4A1.4 1.4 0 0016.6 5H8.6a1 1 0 010-2z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="3" y="6" width="12" height="15" rx="2" fill="black"/><path fill="black" d="M8.6 3h9A2.4 2.4 0 0120 5.4v11.2a1 1 0 01-2 0V6.4A1.4 1.4 0 0016.6 5H8.6a1 1 0 010-2z"/></svg>');
}

/* The two store glyphs are deliberately neutral shapes rather than the Apple
   mark and the Android robot. Both are trademarks with their own usage rules,
   and the official store badges already appear on the same page, so there is
   nothing to gain from redrawing them here. */
.icofont-brand-apple,
.icofont-brand-android-robot {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="6" y="2.4" width="12" height="19.2" rx="2.4" fill="black"/><rect x="10.4" y="18.4" width="3.2" height="1.4" rx="0.7" fill="white"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="6" y="2.4" width="12" height="19.2" rx="2.4" fill="black"/><rect x="10.4" y="18.4" width="3.2" height="1.4" rx="0.7" fill="white"/></svg>');
}