ありがとうございます。ご提案いただいた、不等号を使わないCSSと追加のCSSを実装しました。

まさか、→→にこのような問題が隠れているとは、思いもしませんでした。
また、勉強になりました。

希望のレイアウトですが、CSSの内容を理解した上で、試してみてください。

それを、strip_tagsすると、切れてしまいました。

正解ですね。

strip_tags() は < と > をタグの開始・終了と見なして削除するため、(width<=843px) の中の < をタグと誤解し、そこから先のCSSを切り捨てるか、壊す動作をしてしまう。

以下で、切れてしまうのかもしれません。

https://github.com/WordPress/WordPress/blob/23c1de7d05bf4d2ff5e826bac24811a478f87f9c/wp-includes/theme.php#L1956-L1969

試しにfunctions.phpで、wp_get_custom_css()で追加CSSを取得して。
それを、strip_tagsすると、切れてしまいました。
HTMLタグと認識されてしまうのでしょうか。

投稿下のカスタムCSSは、記述通り展開されます。
普段、子テーマCSSにしか記述しないので、先の追加CSSは全く気づかず。しかも謎動作。

入力ミスではなさそうです。

マジっすね苦笑
追加CSSだと途切れますね。今知りました。
mediaクエリの比較演算子はブラウザで許可されているのに草

以下の修正してください。

@media (max-width: 834px) {
  .logo-image {
    padding-top:40px;
  }
}

@media (width<=843px) {
  .logo-image {
    padding-top:40px;
  }
}

私の環境でも、「追加CSS」に入力すると、以下のように不等号以降が切れます。
入力ミスではなさそうです。
（2回目のCSSも追加CSSに入力すると、同様に不等号以降が切れます）

ヘッダーロゴの大きさは画面幅に応じて変化します。
現在、→→ヘッダーロゴサイズ幅600pxになっているのでは？
当然、画面幅が600px以下でないと画像は縮小しません。

●希望のレイアウトについて

そもそも「Translate」はCocoonの要素ではなく、プラグインが配置しています。
Cocoonのヘッダーロゴなどのとは独立しており、フッターに存在する要素を右上に移動し、重ねています。

それを期待のレイアウトに変更するには、工夫が必要です。

また、キャッチフレーズの長さ（幅）が狭い為、ヘッダーロゴ、「Translate」をキャッチフレーズの左端、右端に綺麗に配置することは困難です。

●対応

• ヘッダーコンテナの幅を仮に835pxとする。
• ヘッダーコンテナ幅に合わせ、キャッチフレーズを両端揃えする。
• ヘッダーロゴを中央揃えから左端揃えに変更する。（ヘッダーロゴ画像を300px）
• Translateの位置をヘッダーコンテナの右端揃えとする（画面横中央から、ヘッダーコンテナの右端に配置）。
• 画面幅が834px以下のとき、画面右端揃えに変更。

/* ヘッダーコンテナ幅 */
#header-in {
  max-width: 835px;
}

/* ヘッダーロゴ画像幅 */
.logo-header img {
  width: 300px;
}


/* ヘッダーロゴを左端に配置 */
.logo {
  text-align: left;
}

/* キャッチフレーズを両端均等配置 */
.tagline {
  text-align-last: justify;
}

/* Translateをヘッダーコンテンナの右端に配置 */
#glt-translate-trigger {
  right: calc(50% - 415px);
}

@media (width <= 834px) {
  #glt-translate-trigger {
    right: 0;
  } 
}

追加CSSの書き込みを更新（添付ファイルの状態）しましたが、翻訳ボタンとロゴの被りが解消されません。

なんでだろう、すみません（TT）

スマホでの表示： 引き続き、翻訳ボタンとロゴ画像が重なって表示されています。

それは追加CSSに入力ミスし、コードが正しく入力されていないからです。