/* es.css — loaded only by the seven Spanish pages.

   One rule, one job: a language switch a contractor can see on a phone.

   The shared header hides .nav and .hdr__cta below 900px, so the English link
   that lives inside .nav is invisible on exactly the device most Iron Bay
   traffic is holding. This adds a visible EN control next to the hamburger at
   phone widths and stands down at 900px, where the nav link takes over and a
   second control would just be clutter.

   It lives here rather than in styles.css because seven pages need it and
   fifty pages load that file. Every token below comes from the design system.
   Nothing here overrides a shared rule. */

.langsw {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 13px;
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.13em;
  color: var(--label-secondary);
  border: 1px solid var(--separator-strong);
  border-radius: var(--radius-control);
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}

.langsw:hover,
.langsw:focus-visible {
  color: var(--label-primary);
  border-color: var(--label-primary);
}

/* .burger carries margin-left:auto to push itself right. With the switch in
   front of it, the switch takes that job and the burger just sits beside it. */
.langsw + .burger { margin-left: 12px; }

@media (min-width: 900px) {
  .langsw { display: none; }
}

/* Five of the six trade pages only exist in English. Linking to them keeps the
   internal linking intact, and the label is there so nobody taps through
   expecting Spanish and bounces. Quieter than the link it follows. */
.enlink {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--label-secondary);
  letter-spacing: 0;
  white-space: nowrap;
}