/**
 * @file
 * Component headers with optional 30px icons.
 *
 * Used by card_element and by CKEditor-embedded .component-header markup
 * (Regional Award Winners, judges heading, and similar interior copy).
 */

.component-header {
  --component-icon-color: var(--sml-orange);
  --component-border-color: var(--sml-orange);
  --sml-component-header-margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 var(--sml-component-header-margin-bottom);
  padding: 0.75rem 0;
  border-bottom: 4px solid var(--component-border-color);
  color: var(--sml-black);
  font-family: var(--sml-font-code-pro-bold);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
}

@media (min-width: 992px) {
  .component-header {
    --sml-component-header-margin-bottom: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

.component-header-text {
  flex: 1 1 auto;
  min-width: 0;
  text-wrap: balance;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .sml-col--33 .component-header {
    font-size: 1.25rem;
  }
}

.component-header-icon {
  display: none;
}

@media (min-width: 576px) {
  .component-header-icon {
    display: block;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    background-color: var(--component-icon-color);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  .component-header-icon svg,
  .component-header-icon img {
    display: none;
  }
}

/* Paint header SVGs in the brand orange (source files are MoDOT blue). */
.component-header-icon.bike-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/bike.svg");
  mask-image: url("/modules/custom/modot/icons/header/bike.svg");
}

.component-header-icon.bridge-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/bridge.svg");
  mask-image: url("/modules/custom/modot/icons/header/bridge.svg");
}

.component-header-icon.bridge2-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/bridge2.svg");
  mask-image: url("/modules/custom/modot/icons/header/bridge2.svg");
}

.component-header-icon.bus-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/bus.svg");
  mask-image: url("/modules/custom/modot/icons/header/bus.svg");
}

.component-header-icon.busy-turnpike-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/busy-turnpike.svg");
  mask-image: url("/modules/custom/modot/icons/header/busy-turnpike.svg");
}

.component-header-icon.caution-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/caution.svg");
  mask-image: url("/modules/custom/modot/icons/header/caution.svg");
}

.component-header-icon.cement-truck-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/cement-truck.svg");
  mask-image: url("/modules/custom/modot/icons/header/cement-truck.svg");
}

.component-header-icon.clipboard-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/clipboard.svg");
  mask-image: url("/modules/custom/modot/icons/header/clipboard.svg");
}

.component-header-icon.construction-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/construction.svg");
  mask-image: url("/modules/custom/modot/icons/header/construction.svg");
}

.component-header-icon.crane-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/crane.svg");
  mask-image: url("/modules/custom/modot/icons/header/crane.svg");
}

.component-header-icon.data-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/data.svg");
  mask-image: url("/modules/custom/modot/icons/header/data.svg");
}

.component-header-icon.destination-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/destination.svg");
  mask-image: url("/modules/custom/modot/icons/header/destination.svg");
}

.component-header-icon.directions-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/directions.svg");
  mask-image: url("/modules/custom/modot/icons/header/directions.svg");
}

.component-header-icon.energy-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/energy.svg");
  mask-image: url("/modules/custom/modot/icons/header/energy.svg");
}

.component-header-icon.fork-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/fork.svg");
  mask-image: url("/modules/custom/modot/icons/header/fork.svg");
}

.component-header-icon.jackhammer-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/jackhammer.svg");
  mask-image: url("/modules/custom/modot/icons/header/jackhammer.svg");
}

.component-header-icon.loop-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/loop.svg");
  mask-image: url("/modules/custom/modot/icons/header/loop.svg");
}

.component-header-icon.map-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/map.svg");
  mask-image: url("/modules/custom/modot/icons/header/map.svg");
}

.component-header-icon.media-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/media.svg");
  mask-image: url("/modules/custom/modot/icons/header/media.svg");
}

.component-header-icon.motorcycle-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/motorcycle.svg");
  mask-image: url("/modules/custom/modot/icons/header/motorcycle.svg");
}

.component-header-icon.news-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/news.svg");
  mask-image: url("/modules/custom/modot/icons/header/news.svg");
}

.component-header-icon.on-ramp-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/on-ramp.svg");
  mask-image: url("/modules/custom/modot/icons/header/on-ramp.svg");
}

.component-header-icon.overpass-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/overpass.svg");
  mask-image: url("/modules/custom/modot/icons/header/overpass.svg");
}

.component-header-icon.pedestrian-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/pedestrian.svg");
  mask-image: url("/modules/custom/modot/icons/header/pedestrian.svg");
}

.component-header-icon.plans-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/plans.svg");
  mask-image: url("/modules/custom/modot/icons/header/plans.svg");
}

.component-header-icon.project-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/project.svg");
  mask-image: url("/modules/custom/modot/icons/header/project.svg");
}

.component-header-icon.rail-train-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/rail-train.svg");
  mask-image: url("/modules/custom/modot/icons/header/rail-train.svg");
}

.component-header-icon.road-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/road.svg");
  mask-image: url("/modules/custom/modot/icons/header/road.svg");
}

.component-header-icon.road-alert-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/road-alert.svg");
  mask-image: url("/modules/custom/modot/icons/header/road-alert.svg");
}

.component-header-icon.route-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/route.svg");
  mask-image: url("/modules/custom/modot/icons/header/route.svg");
}

.component-header-icon.ruler-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/ruler.svg");
  mask-image: url("/modules/custom/modot/icons/header/ruler.svg");
}

.component-header-icon.ship-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/ship.svg");
  mask-image: url("/modules/custom/modot/icons/header/ship.svg");
}

.component-header-icon.speed-train-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/speed-train.svg");
  mask-image: url("/modules/custom/modot/icons/header/speed-train.svg");
}

.component-header-icon.stoplight-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/stoplight.svg");
  mask-image: url("/modules/custom/modot/icons/header/stoplight.svg");
}

.component-header-icon.streets-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/streets.svg");
  mask-image: url("/modules/custom/modot/icons/header/streets.svg");
}

.component-header-icon.travel-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/travel.svg");
  mask-image: url("/modules/custom/modot/icons/header/travel.svg");
}

.component-header-icon.truck-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/truck.svg");
  mask-image: url("/modules/custom/modot/icons/header/truck.svg");
}

.component-header-icon.vest-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/vest.svg");
  mask-image: url("/modules/custom/modot/icons/header/vest.svg");
}

.component-header-icon.worker-icon {
  -webkit-mask-image: url("/modules/custom/modot/icons/header/worker.svg");
  mask-image: url("/modules/custom/modot/icons/header/worker.svg");
}