/* CNMStarterBlocks — Icon system (local SVG masks)
 * All .cnm-icon rules live here. Do not put icon CSS in base.css.
 * To add a new icon: drop the SVG in ../img/icons/ and add a rule below.
 */

.cnm-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  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;
  vertical-align: -0.125em;
  pointer-events: none;
}

/* --- Navigation / UI --- */
.icon-angle-down        { -webkit-mask-image: url("../img/icons/icon-angle-down.svg");        mask-image: url("../img/icons/icon-angle-down.svg"); }
.icon-caret-down        { -webkit-mask-image: url("../img/icons/icon-caret-down.svg");        mask-image: url("../img/icons/icon-caret-down.svg"); }
.icon-caret-right       { -webkit-mask-image: url("../img/icons/icon-caret-right.svg");       mask-image: url("../img/icons/icon-caret-right.svg"); }
.icon-chevron-left      { -webkit-mask-image: url("../img/icons/icon-chevron-left.svg");      mask-image: url("../img/icons/icon-chevron-left.svg"); }
.icon-chevron-right     { -webkit-mask-image: url("../img/icons/icon-chevron-right.svg");     mask-image: url("../img/icons/icon-chevron-right.svg"); }
.icon-long-arrow-left   { -webkit-mask-image: url("../img/icons/icon-long-arrow-left.svg");   mask-image: url("../img/icons/icon-long-arrow-left.svg"); }
.icon-long-arrow-right  { -webkit-mask-image: url("../img/icons/icon-long-arrow-right.svg");  mask-image: url("../img/icons/icon-long-arrow-right.svg"); }
.icon-plus              { -webkit-mask-image: url("../img/icons/icon-plus.svg");              mask-image: url("../img/icons/icon-plus.svg"); }
.icon-search            { -webkit-mask-image: url("../img/icons/icon-search.svg");            mask-image: url("../img/icons/icon-search.svg"); }
.icon-sign-in           { -webkit-mask-image: url("../img/icons/icon-sign-in.svg");           mask-image: url("../img/icons/icon-sign-in.svg"); }

/* --- Media / Play --- */
.icon-play              { -webkit-mask-image: url("../img/icons/icon-play.svg");              mask-image: url("../img/icons/icon-play.svg"); }
.icon-play-circle       { -webkit-mask-image: url("../img/icons/icon-play-circle.svg");       mask-image: url("../img/icons/icon-play-circle.svg"); }
.icon-live              { -webkit-mask-image: url("../img/icons/icon-play-circle.svg");       mask-image: url("../img/icons/icon-play-circle.svg"); }
.icon-camera-retro      { -webkit-mask-image: url("../img/icons/icon-camera-retro.svg");      mask-image: url("../img/icons/icon-camera-retro.svg"); }
.icon-music             { -webkit-mask-image: url("../img/icons/icon-music.svg");             mask-image: url("../img/icons/icon-music.svg"); }
.icon-speaker           { -webkit-mask-image: url("../img/icons/icon-speaker.svg");           mask-image: url("../img/icons/icon-speaker.svg"); }

/* --- Calendar / Time --- */
.icon-calendar          { -webkit-mask-image: url("../img/icons/icon-calendar.svg");          mask-image: url("../img/icons/icon-calendar.svg"); }
.icon-clock,
.icon-time              { -webkit-mask-image: url("../img/icons/icon-clock.svg");             mask-image: url("../img/icons/icon-clock.svg"); }

/* --- Contact --- */
.icon-phone             { -webkit-mask-image: url("../img/icons/icon-phone.svg");             mask-image: url("../img/icons/icon-phone.svg"); }
.icon-mail,
.icon-envelope          { -webkit-mask-image: url("../img/icons/icon-envelope.svg");          mask-image: url("../img/icons/icon-envelope.svg"); }
.icon-megaphone         { -webkit-mask-image: url("../img/icons/icon-megaphone.svg");         mask-image: url("../img/icons/icon-megaphone.svg"); }

/* --- Social --- */
.icon-facebook          { -webkit-mask-image: url("../img/icons/icon-facebook.svg");          mask-image: url("../img/icons/icon-facebook.svg"); }
.icon-instagram         { -webkit-mask-image: url("../img/icons/icon-instagram.svg");         mask-image: url("../img/icons/icon-instagram.svg"); }
.icon-linkedin          { -webkit-mask-image: url("../img/icons/icon-linkedin.svg");          mask-image: url("../img/icons/icon-linkedin.svg"); }
.icon-youtube           { -webkit-mask-image: url("../img/icons/icon-youtube.svg");           mask-image: url("../img/icons/icon-youtube.svg"); }
.icon-x-twitter         { -webkit-mask-image: url("../img/icons/icon-x-twitter.svg");        mask-image: url("../img/icons/icon-x-twitter.svg"); }

/* --- Finance / Giving --- */
.icon-bank              { -webkit-mask-image: url("../img/icons/icon-bank.svg");              mask-image: url("../img/icons/icon-bank.svg"); }
.icon-chart-line-up     { -webkit-mask-image: url("../img/icons/icon-chart-line-up.svg");     mask-image: url("../img/icons/icon-chart-line-up.svg"); }
.icon-credit-card       { -webkit-mask-image: url("../img/icons/icon-credit-card.svg");       mask-image: url("../img/icons/icon-credit-card.svg"); }
.icon-heart             { -webkit-mask-image: url("../img/icons/icon-donate.svg");            mask-image: url("../img/icons/icon-donate.svg"); }
.icon-like              { -webkit-mask-image: url("../img/icons/icon-heart.svg");             mask-image: url("../img/icons/icon-heart.svg"); }
.icon-money-bill        { -webkit-mask-image: url("../img/icons/icon-money-bill.svg");        mask-image: url("../img/icons/icon-money-bill.svg"); }
.icon-piggy-bank        { -webkit-mask-image: url("../img/icons/icon-piggy-bank.svg");        mask-image: url("../img/icons/icon-piggy-bank.svg"); }

/* --- Misc --- */
.icon-android           { -webkit-mask-image: url("../img/icons/icon-android.svg");           mask-image: url("../img/icons/icon-android.svg"); }
.icon-apple             { -webkit-mask-image: url("../img/icons/icon-apple.svg");             mask-image: url("../img/icons/icon-apple.svg"); }
.icon-child             { -webkit-mask-image: url("../img/icons/icon-child.svg");             mask-image: url("../img/icons/icon-child.svg"); }
.icon-church            { -webkit-mask-image: url("../img/icons/icon-church.svg");            mask-image: url("../img/icons/icon-church.svg"); }
.icon-d                 { -webkit-mask-image: url("../img/icons/icon-d.svg");                 mask-image: url("../img/icons/icon-d.svg"); }
.icon-eye-slash         { -webkit-mask-image: url("../img/icons/icon-eye-slash.svg");         mask-image: url("../img/icons/icon-eye-slash.svg"); }
.icon-paintbrush        { -webkit-mask-image: url("../img/icons/icon-paintbrush.svg");        mask-image: url("../img/icons/icon-paintbrush.svg"); }
.icon-sparkles          { -webkit-mask-image: url("../img/icons/icon-sparkles.svg");          mask-image: url("../img/icons/icon-sparkles.svg"); }
.icon-ticket            { -webkit-mask-image: url("../img/icons/icon-ticket.svg");            mask-image: url("../img/icons/icon-ticket.svg"); }