/* Google Translate: the public site's trigger.

   Shares the controller and the core suppression rules with the rest of
   the site (assets/global/), but not the look. The dashboard control is
   built from --dash-* theme tokens and the auth control from --base;
   /ap has neither, and loads neither. Its own language is the brand
   palette straight: #061525 secondary, #4D5965 primary, Onest, hairline
   white borders on dark surfaces -- the same vocabulary as the fixed
   header this control sits in.

   Banner suppression, the body offset reset and the attribution
   protection all come from assets/global/css/kt-translate-core.css. */

.ap-translate {
  font-family: "Onest", sans-serif;
}

.ap-translate .kt-translate__trigger {
  gap: 7px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.ap-translate .kt-translate__trigger:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
}

.ap-translate .kt-translate__trigger:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

.ap-translate .kt-translate__trigger > svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: rgba(255, 255, 255, 0.72);
}

.ap-translate .kt-translate__chevron {
  width: 13px !important;
  height: 13px !important;
  transition: transform 0.25s ease;
}

.ap-translate .kt-translate__label {
  max-width: 9ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---- Menu ----
   Dark rather than white: the control lives in a fixed dark header, and
   a white sheet dropping out of it would read as a different product's
   component. */
.ap-translate .kt-translate__menu {
  min-width: 212px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: #0a1b2e;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 12px 28px -14px rgba(0, 0, 0, 0.7),
    0 34px 64px -40px rgba(0, 0, 0, 0.85);
  max-height: min(64vh, 420px);
  /* The header is z-999999, so the menu has to clear it. */
  z-index: 1000000;
}

.ap-translate .kt-translate__option {
  gap: 10px;
  padding: 9px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.25;
  transition: background-color 0.2s ease;
}

.ap-translate .kt-translate__option:hover,
.ap-translate .kt-translate__option:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.ap-translate .kt-translate__check {
  width: 15px;
  height: 15px;
  color: #fff;
}

.ap-translate .kt-translate__option[aria-selected="true"] {
  font-weight: 600;
  color: #fff;
}

.ap-translate .kt-translate__note {
  position: sticky;
  bottom: -6px;
  z-index: 1;
  margin: 6px -6px -6px;
  padding: 8px 10px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0 0 13px 13px;
  background: #0a1b2e;
  color: rgba(255, 255, 255, 0.62);
  font-size: 11.5px;
  line-height: 1.45;
}

/* ---- Placement ----
   In the header cluster beside Sign In on desktop; inside the mobile
   menu panel the cluster already collapses into. */
.ap-translate {
  position: relative;
}

@media screen and (max-width: 1199px) {
  .ap-translate .kt-translate__label {
    display: none;
  }

  .ap-translate .kt-translate__trigger {
    padding: 0 10px;
  }
}

@media screen and (max-width: 575px) {
  .ap-translate .kt-translate__menu {
    position: fixed;
    top: 66px;
    right: 12px;
    left: 12px;
    min-width: 0;
  }
}

/* ---- Attribution ----

   Sits under the footer copyright line. The footer is dark, and Google
   hardcodes #666 for "Powered by" and #444 for the "Translate" link --
   both chosen for a white page, both failing badly here.

   Raising the TEXT is the opposite of the alteration the attribution
   terms prohibit: the requirement is that the mark be "full and clearly
   visible", which at #444 on #061525 it is not. The logo itself is
   never touched -- no opacity, no filter, no transform, no resize. */
.ap-translate-attribution {
  justify-content: flex-start;
  margin-top: 8px;
}

.ap-translate-attribution .goog-te-gadget,
.ap-translate-attribution .goog-te-gadget a,
.ap-translate-attribution .goog-te-gadget span {
  color: #ccc;
}

@media screen and (max-width: 639px) {
  .ap-translate-attribution {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ap-translate .kt-translate__trigger,
  .ap-translate .kt-translate__chevron,
  .ap-translate .kt-translate__option {
    transition: none;
  }
}