/*
 * Language toggle bar — one shared override.
 *
 * The ~1,275 language mirror pages (hi/ ta/ mr/ ml/ kn/ gu/ bn/ te/ …) each carry a
 * "Read in English | …" bar written as:
 *
 *     <div class="bg-<colour>-<n> text-white py-2 px-4 text-center text-sm">
 *         <a href="…" class="hover:underline">Read in English</a>
 *     </div>
 *
 * Only the leading `bg-<colour>-<n>` varies (bg-violet-900 on ~1,196 of them, plus an
 * off-brand tail: bg-pink-800/600/900, bg-red-900, bg-orange-800, bg-blue-900,
 * bg-amber-900, bg-purple-900, bg-gray-800, bg-violet-600). The rest of the class
 * signature — `text-white py-2 px-4 text-center text-sm` — is constant and (verified
 * across every tracked .html) appears on NOTHING but these bars. So we key on that
 * signature and normalise all of them to the Cleo tokens without touching the 1,275
 * files.
 *
 * Tokens are the ones css/programmatic-editorial-theme.css defines on :root and is
 * always injected before this sheet:
 *     ground = var(--gg-blush)  #ede7f6  (lavender tint)
 *     ink    = var(--gg-ink)    #2d174c  (deep purple)
 *     link   = var(--gg-accent) #6d36b5  (brand purple), no underline, Cleo pill
 *
 * The selector is div + five attribute matchers, so its specificity (0,5,1) already
 * beats a single-class Tailwind utility (0,1,0); `!important` on the overridden
 * declarations makes the result independent of stylesheet source order too, so it wins
 * over bg-* / text-white / hover:underline whatever the load order.
 */

div[class~="py-2"][class~="px-4"][class~="text-center"][class~="text-sm"][class~="text-white"] {
  background: var(--gg-blush, #ede7f6) !important;
  color: var(--gg-ink, #2d174c) !important;
  border-bottom: 1px solid var(--gg-line, rgba(45, 23, 76, 0.16)) !important;
}

div[class~="py-2"][class~="px-4"][class~="text-center"][class~="text-sm"][class~="text-white"] a {
  color: var(--gg-accent, #6d36b5) !important;
  text-decoration: none !important;
  font-weight: 600;
  display: inline-block;
  padding: 0.15rem 0.7rem;
  border-radius: 999px; /* Cleo pill geometry */
  transition: background-color 0.15s var(--gg-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

div[class~="py-2"][class~="px-4"][class~="text-center"][class~="text-sm"][class~="text-white"] a:hover,
div[class~="py-2"][class~="px-4"][class~="text-center"][class~="text-sm"][class~="text-white"] a:focus {
  background: rgba(109, 54, 181, 0.1) !important;
  text-decoration: none !important;
}