/* ===========================================================================
   Currency switcher — CAD $ / USD $
   ---------------------------------------------------------------------------
   Rendered by application/views/inc/inc_currencyswitch.php, which is included
   by every header variant: the collection and regular headers in
   inc_newheader.php and inc_newheader_dmn_connect.php, plus the custom-domain
   utility bar in the latter.

   Replaces the pair of country flags that used to sit here. A faded flag reads
   as disabled rather than as "not selected", and a flag says nothing about
   money — the two codes do both jobs at once. The active side is filled solid
   in the opposite polarity of the header it sits on, which is what makes the
   selection unmistakable without spending the brand pink on it.

   Three polarities, because the header is drawn on three kinds of background:
     .curswitch--dark   header over a hero photo    ($background == "white")
     .curswitch--light  header on a white page      ($background == "black")
     .curswitch--theme  artist custom-domain bar, coloured by gallery tokens

   Every declaration that the legacy header CSS also sets with !important is
   repeated with !important here, otherwise rules such as `.menu1 a` win.
   =========================================================================== */

.curswitch {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 999px;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
}

.curswitch__opt {
  display: inline-block;
  padding: 3px 9px !important;
  border-radius: 999px;
  /* 11px, the same size as the LOGIN / FRANCAIS links beside it in the header */
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  line-height: 1.25 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.curswitch__opt:hover,
.curswitch__opt:focus {
  text-decoration: none !important;
}

/* Keyboard focus has to stay visible on both polarities, so the ring is drawn
   in the segment's own text colour rather than the browser default blue. */
.curswitch__opt:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

/* In the header top row everything is top-aligned rather than centred, so the
   toggle's centre depends on its own height. At 11px the pill is 25.8px tall
   against the order button's 27.7px, which leaves it a whisker high; 1px of
   margin puts the two centres within 0.1px of each other. Not applied to the
   compact mobile row or the custom-domain bar — both are flex rows that centre
   their items already. */
.kl-top-header .curswitch {
  margin-top: 1px;
}

/* --------------------------------------------------------- dark header */
.curswitch--dark {
  border-color: rgba(255, 255, 255, 0.4);
}

.curswitch--dark .curswitch__opt {
  color: rgba(255, 255, 255, 0.55) !important;
}

.curswitch--dark .curswitch__opt:hover {
  color: #ffffff !important;
}

.curswitch--dark .curswitch__opt.is-active {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
}

/* -------------------------------------------------------- light header */
.curswitch--light {
  border-color: rgba(0, 0, 0, 0.3);
}

.curswitch--light .curswitch__opt {
  color: rgba(0, 0, 0, 0.5) !important;
}

.curswitch--light .curswitch__opt:hover {
  color: #000000 !important;
}

.curswitch--light .curswitch__opt.is-active {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}

/* ------------------------------------------- artist custom-domain bar */
/* The bar takes its colours from the artist's saved gallery theme, so the
   polarity is not known here. A mid-grey hairline reads on both dark and
   light canvases (the same trick .dmn-bar uses for its own border), and the
   filled segment swaps the two theme tokens. */
.curswitch--theme {
  border-color: rgba(128, 128, 128, 0.45);
}

.curswitch--theme .curswitch__opt {
  color: var(--page-text, #333333) !important;
  opacity: 0.6 !important;
}

.curswitch--theme .curswitch__opt:hover {
  opacity: 1 !important;
}

.curswitch--theme .curswitch__opt.is-active {
  background-color: var(--page-text, #333333) !important;
  color: var(--page-bg, #ffffff) !important;
  opacity: 1 !important;
}

/* ---------------------------------------------------------- small screens */
/* Below 480px the currency code carries the meaning on its own, so the dollar
   sign goes and the type drops a step. That is 40px back, which is what keeps
   the compact mobile header row on one line. */
@media (max-width: 480px) {
  .curswitch__sign {
    display: none;
  }

  .curswitch__opt {
    padding: 2px 7px !important;
  }
}