/* Shared language controls on the homepage and project pages. */
:root {
  --language-sheen:linear-gradient(120deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.09) 22%,rgba(255,255,255,0) 42%,rgba(255,255,255,.12) 62%,rgba(255,255,255,.02) 82%,rgba(255,255,255,.14) 100%);
  --language-gradient:linear-gradient(135deg,#031B60 0%,#0D65CB 100%);
}
:is(#nav .lang-switch,.case-languages) {
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(8,14,27,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
:is(#nav .lang-btn,.case-language) {
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:40px;
  height:36px;
  min-width:40px;
  min-height:36px;
  padding:0;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(242,237,230,.56);
  font-family:'Syne',sans-serif;
  font-size:10px;
  font-weight:700;
  line-height:1;
  letter-spacing:.12em;
  cursor:pointer;
  transition:background .28s ease,color .28s ease,box-shadow .28s ease;
}
:is(#nav .lang-btn,.case-language):hover {
  color:#f2ede6;
  background:rgba(255,255,255,.05);
}
:is(#nav .lang-btn.active,.case-language[aria-pressed=true]) {
  color:#fff;
  background-image:var(--language-sheen),var(--language-gradient);
  background-blend-mode:screen,normal;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 24px rgba(13,101,203,.18);
}
.back-link > [aria-hidden=true] {
  display:grid;
  place-items:center;
  flex:0 0 36px;
  width:36px;
  height:36px;
  border:1px solid #3c4e6a;
  border-radius:50%;
  background:linear-gradient(135deg,#21385b,#101b2e);
  font-size:20px;
  line-height:1;
  transition:background .2s;
}
.back-link:hover > [aria-hidden=true] { background:#2455a3; }
.back-link > [aria-hidden=true] svg { display:block; width:20px; height:20px; }
@media(max-width:900px) {
  #nav .mobile-language .lang-btn { width:48px; height:44px; }
}
@media(max-width:600px) {
  .case-header-actions { flex-shrink:0; gap:8px; }
  .case-languages .case-language { width:36px; height:36px; min-width:36px; }
}
@media(prefers-reduced-motion:reduce) {
  :is(#nav .lang-btn,.case-language),.back-link > [aria-hidden=true] { transition:none; }
}