/* ==========================================================================
   CC Site FX - the language switch in the header.

   The chip is drawn on the LABEL span, not on the link around it. In the
   wide bar the two are nearly the same box, but inside the burger sheet the
   link is a full width row, and a chip stretched across a phone screen is a
   button, not a switch. Drawing on the label keeps the chip the size of its
   contents at every width while the whole row stays tappable.

   Colours are the ones the site already uses: the silver of body text for
   the resting state, white for the language one is reading, brand orange
   for the one a click away, and the hair line of a ghost pill for the rim.
   ========================================================================== */

.cclang-switch.cclang-switch .e-n-menu-title-text {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.19);
  border-radius: 999px;
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.018) 100%);
  line-height: 1;
  white-space: nowrap;
  transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
}

/* The globe. Slightly quieter than the letters: it says what the control is,
   the letters say what it does, and the letters are the thing to read. */
.cclang-switch.cclang-switch .cclang-ico {
  display: flex;
  align-items: center;
  color: rgba(215, 220, 232, 0.66);
  transition: color 0.2s ease-out;
}

.cclang-switch.cclang-switch .cclang-ico svg {
  display: block;
  width: 14px;
  height: 14px;
}

/* The globe is line art and has to stay line art.
 *
 * The nested menu widget paints every svg inside a hovered entry with its
 * hover colour - `.elementor-widget-n-menu .e-n-menu-title:hover:not(.e-current) svg`,
 * four classes and an element - and that rule filled the globe in solid
 * orange the moment the pointer arrived, which read as a warning light
 * rather than an icon. Five classes and an element settle it, and the
 * stroke is left free to take the hover colour, which is the part that
 * should answer the pointer. */
.cclang-switch.cclang-switch.cclang-switch .cclang-ico.cclang-ico svg,
.cclang-switch.cclang-switch.cclang-switch .cclang-ico.cclang-ico svg circle,
.cclang-switch.cclang-switch.cclang-switch .cclang-ico.cclang-ico svg path {
  fill: none;
}

/* The two codes. Same size, so neither reads as a heading over the other;
   the difference between them is brightness alone. */
.cclang-switch.cclang-switch .cclang-seg {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.045em;
  line-height: 1;
  transition: color 0.2s ease-out;
}

/* Where the visitor is. */
.cclang-switch.cclang-switch .cclang-seg--on {
  color: rgb(255, 255, 255);
}

/* Where the link leads. Dimmed at rest so the pair reads as a state and not
   as two equal buttons. */
.cclang-switch.cclang-switch .cclang-seg--off {
  color: rgba(215, 220, 232, 0.44);
}

.cclang-switch.cclang-switch .cclang-sep {
  width: 1px;
  height: 11px;
  background: rgba(255, 255, 255, 0.2);
  flex: 0 0 1px;
}

/* ------------------------------------------------------------------ hover
   The target warms to the brand orange, which is what this site does with
   everything a pointer is about to follow. The rim comes up with it so the
   whole chip answers, not just three letters inside it. Focus is given the
   same treatment: a keyboard has to see the same thing a pointer sees. */
.cclang-switch.cclang-switch .cclang-link:hover .e-n-menu-title-text,
.cclang-switch.cclang-switch .cclang-link:focus-visible .e-n-menu-title-text {
  border-color: rgba(255, 168, 92, 0.55);
  background-color: rgba(255, 142, 43, 0.07);
}

.cclang-switch.cclang-switch .cclang-link:hover .cclang-seg--off,
.cclang-switch.cclang-switch .cclang-link:focus-visible .cclang-seg--off {
  color: rgb(255, 142, 43);
}

.cclang-switch.cclang-switch .cclang-link:hover .cclang-ico,
.cclang-switch.cclang-switch .cclang-link:focus-visible .cclang-ico {
  color: rgba(255, 190, 135, 0.9);
}

/* The header paints its entries orange on hover. That rule reaches the two
   codes as well and would wash out the difference between them, so the
   resting colours are restated here at a specificity the bar cannot beat.
   The hover block above is written with the same weight and comes later,
   so it still wins where it should. */
.cclang-switch.cclang-switch .e-n-menu-title-container:hover .cclang-seg--on,
.cclang-switch.cclang-switch .e-n-menu-title-container .cclang-seg--on {
  color: rgb(255, 255, 255);
}

/* --------------------------------------------------------------- narrow
   Inside the burger sheet the chip is bigger, because it is read at arm's
   length and because the row around it is 56 pixels tall: a chip built for
   a 30 pixel bar looks lost in it. The row keeps its own left padding, so
   the chip lines up with the labels above it. */
@media (max-width: 1024px) {
  .cclang-switch.cclang-switch .e-n-menu-title-text {
    padding: 8px 14px;
    gap: 9px;
    border-color: rgba(255, 255, 255, 0.22);
  }

  .cclang-switch.cclang-switch .cclang-ico svg {
    width: 16px;
    height: 16px;
  }

  .cclang-switch.cclang-switch .cclang-seg {
    font-size: 14px;
  }

  .cclang-switch.cclang-switch .cclang-sep {
    height: 13px;
  }
}

/* Reduced motion: the colour changes are the whole animation here and they
   are what tells a visitor where the link goes, so they stay. Only the
   easing is dropped, which is what the setting actually asks for. */
@media (prefers-reduced-motion: reduce) {
  .cclang-switch.cclang-switch .e-n-menu-title-text,
  .cclang-switch.cclang-switch .cclang-seg,
  .cclang-switch.cclang-switch .cclang-ico {
    transition: none;
  }
}