/**
 * 地球アイコン＋言語ドロップダウンのスタイル
 *
 * テーマのデザインに関わらず視認できるよう、あえてテーマの配色に依存しない
 * シンプルな配色（白背景・薄い影）にしている。テーマに合わせて調整したい場合は
 * 子テーマの style.css 等でこれらのクラスを上書きすればよい。
 */

.joc-ml-header-switcher {
	position: relative;
	display: inline-block;
	line-height: 1;
}

/* 画面右上に固定表示するモード */
.joc-ml-header-switcher--floating {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 9999;
}

.joc-ml-header-switcher__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	font-size: 18px;
	cursor: pointer;
}

/* ナビゲーションメニューに項目として挿入するモードは、テーマのメニュー項目に馴染むよう控えめにする */
.joc-ml-header-switcher--menu .joc-ml-header-switcher__toggle {
	width: auto;
	height: auto;
	padding: 8px 12px;
	border: none;
	border-radius: 4px;
	background: transparent;
	box-shadow: none;
}

.joc-ml-header-switcher__toggle:hover,
.joc-ml-header-switcher__toggle:focus {
	background: #f5f5f5;
}

.joc-ml-header-switcher__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 190px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 6px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.joc-ml-header-switcher__menu[hidden] {
	display: none;
}

.joc-ml-header-switcher__menu li a {
	display: block;
	padding: 8px 16px;
	white-space: nowrap;
	color: #1e1e1e;
	text-decoration: none;
}

.joc-ml-header-switcher__menu li a:hover,
.joc-ml-header-switcher__menu li a:focus {
	background: #f0f0f0;
}

.joc-ml-header-switcher__item--current > a {
	font-weight: bold;
}

/* スクリーンリーダー専用テキスト（WordPress標準の .screen-reader-text が無いテーマでも確実に隠すため） */
.joc-ml-header-switcher .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}