/**
 * @file
 * External links css file.
 */

/* demo: hide external-link icons ONLY in the sitewide alert banner and on the
   footer "Go to Submit SFPD Feedback" button. Keep every other icon (header nav +
   footer link-list columns) so it matches the official site. */
/* Banner (sitewide alert): hide ALL external-link icons, including the sf.gov DAIS link. */
.sitewide-alert .extlink,
.sitewide-alert span.ext,
.sitewide-alert svg.ext,
/* Links that point back to sanfranciscopolice.org are really INTERNAL — they only look
   "external" because the demo runs on a different domain. Hide their icon so it matches the
   official site. Genuinely external links (sfgov.org, joinsfpd.com, bart.gov, chp.ca.gov,
   leginfo, govQA, university PDs, etc.) KEEP their jump icon. */
a[href*="sanfranciscopolice.org"] .extlink,
a[href*="sanfranciscopolice.org"] span.ext,
a[href*="sanfranciscopolice.org"] svg.ext {
  display: none !important;
}

/* per-instance override: links explicitly tagged .demo-show-ext keep their jump icon
   even if they point at sanfranciscopolice.org (used to distinguish otherwise-identical links). */
a.demo-show-ext .extlink,
a.demo-show-ext .material-symbols-outlined,
a.demo-show-ext span.ext,
a.demo-show-ext svg.ext {
  display: inline-block !important;
}

span.mailto {
  width: 10px;
  height: 10px;
  padding-right: 12px;
  text-decoration: none;
  background: url('../images/extlink_s.png') -20px center no-repeat;
}

span.tel {
  width: 10px;
  height: 10px;
  padding-right: 12px;
  text-decoration: none;
  background: url('../images/extlink_s.png') -42px center no-repeat;
}

svg.ext {
  display: none;
}


svg.mailto,
svg.tel {
  width: 14px;
  height: 14px;
  fill: #727272;
}

[data-extlink-placement='prepend'],
[data-extlink-placement='before'] {
  padding-right: 0.2rem;
}

[data-extlink-placement='append'],
[data-extlink-placement='after'] {
  padding-left: 0.2rem;
}

svg.ext path,
svg.mailto path,
svg.tel path {
  stroke: #727272;
  stroke-width: 3;
}

/* Hide the extra icons when printing. */
@media print {
  svg.ext,
  svg.mailto,
  svg.tel,
  span.ext,
  span.mailto,
  span.tel {
    display: none;
    padding: 0;
  }
}

/* Put some whitespace between the link and its Font Awesome suffix. */
.extlink i {
  padding-left: 0.2em;
}

.extlink-nobreak {
  white-space: nowrap;
}