@charset "UTF-8";

/*!
 * MUNI KYOTO - WPML Styles
 * 役割：言語スイッチャー・ドロップダウン・フラグ等 WPML 固有スタイル
 * 依存：base.css
 *
 * @package MuniKyoto
 */

/* 依存ファイルは functions.php の wp_enqueue_style() で管理する。
   @import は使用しない。 */

/* ==================================================
   言語スイッチャー
================================================== */

.lang-switcher,
.wpml-ls-legacy-dropdown {
  position: relative;
  z-index: var(--z-lang-switcher);
  font-family: var(--font-menu);
  letter-spacing: 0.05em;
}

.js-wpml-ls-item-toggle {
  position: relative;
  z-index: var(--z-lang-toggle);
  background-color: transparent;
  padding: 0.8rem 2.8rem 0.8rem var(--spacing-unit-medium);
  border-radius: 0;
  cursor: pointer;
  font-size: var(--font-size-small);
  font-family: var(--font-menu);
  font-weight: 200;
  color: var(--color-text-main);
  transition:
    background-color var(--transition-speed-medium) var(--transition-timing-ease),
    color var(--transition-speed-medium) var(--transition-timing-ease),
    border-color var(--transition-speed-medium) var(--transition-timing-ease);
  min-width: 100px;
  text-align: left;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.js-wpml-ls-item-toggle .current-lang {
  display: inline-block;
  margin-right: var(--spacing-unit-small);
}

/* ==================================================
   ドロップダウン矢印
================================================== */

.dropdown-arrow {
  position: absolute;
  right: var(--spacing-unit-medium);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-xsmall);
  color: var(--color-text-main);
  transition: transform var(--transition-speed-medium) var(--transition-timing-ease);
  width: 16px;
  height: 16px;
  display: block;
  line-height: 0;
}

.wpml-ls-legacy-dropdown.js-wpml-ls-legacy-dropdown.is-open .dropdown-arrow,
.wpml-ls-legacy-dropdown.wpml-ls-opened .dropdown-arrow {
  transform: translateY(-50%) rotate(180deg);
}

/* ==================================================
   サブメニュー
================================================== */

.wpml-ls-sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  width: max-content;
  min-width: 100%;
  background-color: var(--color-background);
  border-radius: 0;
  list-style: none;
  padding: var(--spacing-unit-small) 0;
  margin: 0;
  z-index: var(--z-lang-dropdown);
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition:
    opacity var(--transition-speed-medium) var(--transition-timing-ease),
    transform var(--transition-speed-medium) var(--transition-timing-ease),
    visibility var(--transition-speed-medium) var(--transition-timing-ease);
}

.wpml-ls-legacy-dropdown.js-wpml-ls-legacy-dropdown.is-open .wpml-ls-sub-menu,
.wpml-ls-legacy-dropdown.wpml-ls-opened .wpml-ls-sub-menu {
  opacity: 1;
  visibility: visible;
  display: block;
  transform: translateY(0);
}

.wpml-ls-sub-menu li {
  margin: 0;
  padding: 0;
}

.wpml-ls-sub-menu li a {
  display: block;
  padding: var(--spacing-unit-small) var(--spacing-unit-medium);
  color: var(--color-text-main);
  font-size: var(--font-size-small);
  font-weight: 300;
  text-decoration: none;
  transition:
    background-color var(--transition-speed-fast) var(--transition-timing-ease),
    color var(--transition-speed-fast) var(--transition-timing-ease);
}

.wpml-ls-sub-menu li a:hover,
.wpml-ls-sub-menu li.current-lang a,
.wpml-ls-sub-menu li.wpml-ls-current-language a {
  background-color: var(--color-accent);
  color: var(--color-text-sub);
}

/* ==================================================
   フラグ・テキスト
================================================== */

.wpml-ls-flag {
  display: inline-block;
  margin-right: var(--spacing-unit-small);
  width: 18px;
  height: 13px;
  vertical-align: middle;
}

.wpml-ls-item-toggle {
  text-transform: uppercase;
}

.wpml-ls-toggle-text,
.wpml-ls-display {
  font-weight: 300;
}

@media (max-width: 768px) {
  .wpml-ls-sub-menu {
    background-color: var(--color-white);
  }
}

/* ==================================================
   ホバー効果
================================================== */

@media (hover: hover) {
  .js-wpml-ls-item-toggle:hover {
    background-color: var(--color-background);
    color: var(--color-accent);
    border-color: transparent;
  }
}