/* W29: a fixed accent and a visible label for each service area.
   The palette is defined once in includes/service-areas.php. */
.site-head .subnav-link[data-service-area] {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  border-inline-start:4px solid var(--ig-service-area-accent);
  background-color:#fff;
  color:#17232f;
}
.service-area-badge {
  display:inline-block;
  width:fit-content;
  max-width:100%;
  padding:.3em .65em;
  border:1px solid var(--ig-service-area-accent);
  border-radius:3px;
  background-color:var(--ig-service-area-accent);
  color:#fff;
  font-size:.75rem;
  font-weight:700;
  line-height:1.55;
  letter-spacing:normal;
  text-transform:none;
  white-space:normal;
  overflow-wrap:anywhere;
  vertical-align:middle;
}
.site-head .subnav-link .service-area-badge { font-size:.68rem; }
.section-card[data-service-area],
.editorial-entry[data-service-area] {
  border-inline-start:4px solid var(--ig-service-area-accent);
  padding-inline-start:20px;
}
.section-card[data-service-area]>.service-area-badge,
.editorial-entry[data-service-area] .editorial-entry-body>.service-area-badge { margin-bottom:12px; }
.page-hero[data-service-area] .page-hero-copy>.service-area-badge,
.edm-hero[data-service-area] .edm-hero-copy>.service-area-badge,
.adoption-hero[data-service-area] .service-area-badge { margin-bottom:16px; }
/* A user's chosen contrast has priority over the category colours. The text
   labels continue to identify each area when colours are overridden. */
html[data-ig-a11y-contrast] [data-service-area] { --ig-service-area-accent:var(--ig-a11y-fg); }
@media(forced-colors:active) {
  [data-service-area] { --ig-service-area-accent:CanvasText; }
  .service-area-badge { border-color:CanvasText; background:Canvas; color:CanvasText; }
}