/* Language-switch chrome, loaded on both locales.

   One deliberate decision: the switch is a plain link labelled in its own destination
   language ("Español" on English pages, "English" on Spanish pages), never a flag. A flag
   names a country, not a language, and the two are not the same thing for the Spanish
   speakers this hub serves. USWDS's two-language pattern is the reference. */

.util-links .lang-switch {
  font-weight: 700;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: .2rem .7rem;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.util-links .lang-switch:hover,
.util-links .lang-switch:focus-visible { background: rgba(255, 255, 255, .14); }

/* Marks a destination that has no translation yet. Small, but never hidden from a screen
   reader — a Spanish reader deserves to know before the click, not after. */
.en-only {
  font-size: .82em;
  font-weight: 600;
  font-style: normal;
  opacity: .85;
  white-space: nowrap;
}

/* The Spanish landing route's coverage statement. It carries the exact sentence recorded in
   translation-acceptance.json, so it reads as a real promise rather than fine print. */
.coverage-note {
  border-left: 4px solid var(--copper);
  background: #fff;
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.2rem;
  max-width: 70ch;
}
.review-note {
  margin: .8rem 0 0;
  font-size: .9rem;
  color: var(--muted);
  max-width: 70ch;
}

/* Career clusters carry their official English name beside the Spanish gloss everywhere
   they are named, because that English name is what district and state CTE paperwork uses.
   Set smaller and muted so the Spanish reads first and the English reads as the reference. */
.en-name {
  display: block;
  font-size: .78em;
  color: var(--muted);
  font-style: italic;
}