/* ============================================================
   PHOENIX PIXEL STUDIO — CUSTOM ICONS
   ------------------------------------------------------------
   The icomoon set in flaticon.css has no water-storage glyph, so
   services that need one get a hand-drawn SVG here instead. These
   are used exactly like the icomoon classes — drop the class name
   into the 'icon' key in includes/services-data.php and it renders
   anywhere an <i class="icon-..."> is echoed.

   They are masks painted with background-color:currentColor, so
   they inherit colour from the tile the same way a font icon does
   and still flip to white on the card hover state. Sized in `em`,
   so they follow the container's font-size (22px on the home
   cards, 18-24px on the service pages).
   ============================================================ */

[class^="icon-ppx-"],
[class*=" icon-ppx-"] {
  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;
}

/* Water tank with a level line and inlet pipe — used by
   service-water-controller.php (Smart Water Level Controller). */
.icon-ppx-water-level {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.2' y='6.5' width='15.6' height='13.9' rx='2.4'/%3E%3Cpath d='M5 13.5c1.68-2.4 5.02-2.4 6.7 0 1.68 2.4 5.02 2.4 6.7 0V18a2.4 2.4 0 0 1-2.4 2.4H7.4A2.4 2.4 0 0 1 5 18z' fill='%23000' stroke='none'/%3E%3Cpath d='M12 3.1v3.4M9.7 3.1h4.6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.2' y='6.5' width='15.6' height='13.9' rx='2.4'/%3E%3Cpath d='M5 13.5c1.68-2.4 5.02-2.4 6.7 0 1.68 2.4 5.02 2.4 6.7 0V18a2.4 2.4 0 0 1-2.4 2.4H7.4A2.4 2.4 0 0 1 5 18z' fill='%23000' stroke='none'/%3E%3Cpath d='M12 3.1v3.4M9.7 3.1h4.6'/%3E%3C/svg%3E");
}