/* Language toggle (rendered via {% langtoggle %}) */
.langtoggle {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  margin: 14px 0 22px;
  padding: 0;
}

.langtoggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  min-width: 42px;
  padding: 0 10px;
  border-radius: 0;
  text-decoration: none !important;
  font-size: 16px; /* keeps emoji flags crisp */
  line-height: 1;
  user-select: none;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  opacity: .65;
  transition: transform .12s ease, opacity .12s ease, background .12s ease, border-color .12s ease;
}

body.darkmode .langtoggle__btn {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}

.langtoggle__btn:hover {
  opacity: .95;
  transform: translateY(-1px);
}

.langtoggle__btn.is-active,
.langtoggle__btn--active {
  opacity: 1;
  border-color: rgba(0,0,0,.22);
  background: rgba(0,0,0,.08);
  filter: saturate(1.25) contrast(1.05);
}

:root .langtoggle__btn.is-active,
:root .langtoggle__btn--active {
  box-shadow: inset 0 -2px 0 var(--tcolor, rgba(0,0,0,.35));
}

body.darkmode .langtoggle__btn.is-active,
.langtoggle__btn--active {
  border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.10);
}

@media (prefers-reduced-motion: reduce) {
  .langtoggle__btn { transition: none; }
  .langtoggle__btn:hover { transform: none; }
}

/* Header placement overrides (keep post styling untouched) */
.langtoggle--header {
  margin: 0;
  display: inline-flex;
  vertical-align: middle;
}

/* If someone still has {% langtoggle %} inside post content, hide it to avoid duplicates.
   Header toggle is outside .trans, so it stays visible. */
.trans .langtoggle:not(.langtoggle--header) {
  display: none;
}


@media (max-width: 560px) {
  .langtoggle { gap: 8px; }
  .langtoggle__btn {
    height: 30px;
    min-width: 36px;
    padding: 0 8px;
    font-size: 15px;
  }
}


/* Mobile header: keep nav + language switch on one line */
@media (max-width: 560px){
  .header-nav-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    flex-wrap: nowrap;
  }

  /* Neutralize Skeleton's column floats/100% widths inside this row */
  .header-nav-row > .columns{
    float:none !important;
    width:auto !important;
    margin-left:0 !important;
  }

  .header-nav-links{
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .header-nav-toggle{
    flex: 0 0 auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    margin: 0;
    padding: 0;
    white-space: nowrap;
  }

  /* Slightly tighter switch button in header */
  .langtoggle--header .langtoggle__btn--switch{
    height: 30px;
    min-width: 44px;
    padding: 0 10px;
  }
}

/* Mobile header: collapse language toggle into a single switch button */
.langtoggle__btn--switch{ display:none; }
@media (max-width: 560px){
  .langtoggle--header .langtoggle__btn--pair{ display:none !important; }
  .langtoggle--header .langtoggle__btn--switch{ display:inline-flex !important; }
}