/* ============================================================
   Google Translate JP/EN 切り替えリンク
   ------------------------------------------------------------
   シンプルな黒文字リンク。現在の言語に下線が付く。
   現在はテストページ（page-lang-test.php）のコンテンツ内にのみ設置。
   本実装時にヘッダー等へ移す場合は、README の絶対配置CSSを参照して
   .header .wrap / #sideMenu 用の配置ルールを追加すること。
   ============================================================ */
.lang-toggle {
  font-size: 14px; /* このテーマは rem 62.5% 基準ではないため px 指定 */
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: #000;
  letter-spacing: 0.1em;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

.lang-toggle span {
  color: #000;
}

/* 現在の言語を下線で示す */
.lang-toggle.is-jp-active .lang-jp,
.lang-toggle.is-en-active .lang-en {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- テストページ: コンテンツ内ブロック配置 --- */
.lang-test-block {
  margin: 40px auto;
  text-align: center;
}

.lang-test-block .lang-toggle {
  display: inline-block;
  border: none;
  padding: 14px 0px;
  position: fixed;
  top: 8px;
  right: 20px;
  z-index: 4;
}

/* 管理画面にログイン中は上部に管理バー（PC実測 32px）が出て
   ボタンが隠れるため、その分だけ下げる。
   body.admin-bar は WordPress が自動で付与するクラス。 */
body.admin-bar .lang-test-block .lang-toggle {
  top: 40px;
}

/* 管理バーは画面幅782px以下で高さが 32px → 46px に変わる（WP本体の仕様）。
   SP指定（767px以下）は基準 top:9px なので 9 + 46 = 55px。
   768〜782px の帯は基準 top:8px のままなので 8 + 46 = 54px。 */
@media screen and (min-width: 768px) and (max-width: 782px) {
  body.admin-bar .lang-test-block .lang-toggle {
    top: 54px;
  }
}

/* SP: ヘッダーが小さくなる分、位置と文字サイズを詰める */
@media only screen and (max-width: 767px) {
  .lang-test-block .lang-toggle {
    top: 9px;
    right: 11px;
    font-size: 12px;
  }

  body.admin-bar .lang-test-block .lang-toggle {
    top: 55px;
  }
}

/* ------------------------------------------------------------
   英語表示中（translate.goog プロキシ上）
   Googleの翻訳バーが上部に出る分だけボタンを下げる。
   body.is-en は lang-switch.js がプロキシ上で付与する。
   PC / SP とも 65px。
   ------------------------------------------------------------ */
body.is-en .lang-test-block .lang-toggle {
  top: 65px;
}

/* 翻訳バー + 管理バーの併用時（65px + 管理バー高さ）
   ※プロキシは別ドメインのためWPのログインCookieが送られず、
     実際には管理バーは出ない想定。保険としてのルール。 */
body.is-en.admin-bar .lang-test-block .lang-toggle {
  top: 97px; /* 65 + 32 */
}

@media screen and (min-width: 768px) and (max-width: 782px) {
  body.is-en.admin-bar .lang-test-block .lang-toggle {
    top: 111px; /* 65 + 46 */
  }
}

/* PC狭幅（〜1200px）では翻訳バーが2段になり、その分ボタンを下げる */
@media only screen and (min-width: 768px) and (max-width: 1200px) {
  body.is-en .lang-test-block .lang-toggle {
    top: 105px;
  }
}

@media only screen and (max-width: 767px) {
  body.is-en .lang-test-block .lang-toggle {
    top: 65px;
  }

  body.is-en.admin-bar .lang-test-block .lang-toggle {
    top: 111px; /* 65 + 46 */
  }
}

.lang-test-block .note {
  margin-top: 12px;
  font-size: 12px;
  color: #888;
}

/* ============================================================
   langボタン設置ページのヘッダー調整
   ------------------------------------------------------------
   ボタンを右上に固定する分の余白を作るため、検索フォームを縮める。
   .has-lang-toggle は functions.php の hatajirushi_has_lang_toggle()
   により body / header に付与される。
   ============================================================ */
@media only screen and (max-width: 767px) {
  body.has-lang-toggle #sideMenu .search-wrap .search-form input {
    width: 120px;
  }

  /* 検索エリア全体を縮めて右に60pxの余白を作り、そこにlangボタンを置く */
  body.has-lang-toggle #sideMenu .search-wrap {
    width: 120px;
    margin-left: 0;
    padding-left: 10px;
    margin-right: 60px !important;
  }

  body.has-lang-toggle #sideMenu .search-wrap .search-form {
    width: 120px;
    margin-left: 0;
  }
}

/* ============================================================
   翻訳バー（プロキシ上部に出るGoogleのバー）分の位置調整用フック
   ------------------------------------------------------------
   英語表示中は body に .is-en が付与される。
   バーの高さ分（PC実測 約56px / SPは要実測）のヘッダー位置調整は
   .is-en を起点に行う（実施は依頼主側）。
   例:
   body.is-en .header { top: 56px; }
   ============================================================ */
body.is-en {
  letter-spacing: 0; /* 翻訳後の英文で字間が広がりすぎる場合の保険。不要なら削除 */
}

/* --- 翻訳バー分のメガメニュー位置調整（PC） --- */
body.is-en .header .wrap .wrap-con .nav-ul .mega-menu {
  margin-top: 52px;
}

body.is-en .header .wrap .wrap-con .nav-ul .nav-li::before {
  bottom: -54px;
}

body.is-en .header .wrap .wrap-con .nav-ul .nav-li::after {
  bottom: -55.5px;
}

/* SP: ヘッダーが小さい分、翻訳バー時のズレ量も小さくなる */
@media only screen and (max-width: 767px) {
  body.is-en .header .wrap .wrap-con .nav-ul .mega-menu {
    margin-top: 30px;
  }

  body.is-en .header .wrap .wrap-con .nav-ul .nav-li::before {
    bottom: -26px;
  }

  body.is-en .header .wrap .wrap-con .nav-ul .nav-li::after {
    bottom: -27.5px;
  }

  body.is-en .header .wrap .wrap-con .nav-ul .mega-menu ul {
    padding: 40px 0 60px;
  }
}

/* --- 翻訳後の英語ラベル幅に合わせた検索ボックス調整（PCのみ） --- */
@media only screen and (min-width: 768px) {
  body.is-en #sideMenu .search-wrap {
    width: 190px;
  }

  body.is-en #sideMenu .search-wrap .search-form input {
    width: 120px;
  }
}

/* 検索フォームのプレースホルダーを非表示（虫眼鏡アイコンのみ見せる） */
#sideMenu .search-wrap .search-form input::placeholder {
  color: transparent;
}

#sideMenu .search-wrap .search-form input::-webkit-input-placeholder {
  color: transparent;
}

#sideMenu .search-wrap .search-form input::-moz-placeholder {
  color: transparent;
  opacity: 1;
}

#sideMenu .search-wrap .search-form input:-ms-input-placeholder {
  color: transparent;
}