/* Language chrome, loaded on both locales.

   The toggle shows BOTH languages at once, each labelled in its own language, with the
   current page's side marked — one click flips any page to its twin. 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. */

.lang-slot {
  display: inline-flex;
  align-items: center;
}
.lang-toggle {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--harbor);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.lang-toggle a {
  display: inline-flex;
  align-items: center;
  padding: .24rem .7rem;
  min-height: 24px;
  font-family: var(--display);
  font-weight: 700;
  font-size: .78rem;
  text-decoration: none;
  color: var(--harbor);
}
.lang-toggle a[aria-current="true"] {
  background: var(--harbor);
  color: #fff;
}
.lang-toggle a:not([aria-current="true"]):hover {
  background: var(--sky);
}
/* Joined control: the ring must live inside its own segment, never spill onto the
   neighbouring one (focus-ring-collision rule). */
.lang-toggle a:focus-visible {
  outline: 3px solid var(--spark);
  outline-offset: -3px;
}
@media (max-width: 760px) {
  /* The masthead row cannot hold brand + toggle + Menu at phone widths without
     crushing the wordmark, so the toggle takes its own slim line, top right —
     the corner where a language picker is expected. */
  .lang-slot { order: -1; width: 100%; justify-content: flex-end; margin: -.15rem 0 .4rem; }
  .lang-toggle a { padding: .2rem .55rem; font-size: .72rem; }
}

/* 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;
}

/* Preserve the button's text contrast for its language disclosure. */
.btn .en-only { opacity: 1; }

/* 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;
}

/* 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;
}