/* Load after cyber.css.
   マークとロゴタイプは支給されたラスター資産を、テーマごとに差し替えて出す。

   currentColor に載せる（mask）方式は採らない。ロゴタイプが 2 色（シアン＋白／
   ティール＋紺）でできており、単色化すると意匠が壊れるため。マークだけ mask に
   すると両者で色が食い違うので、どちらも支給色のまま扱う。

   支給色: シアン #32D7E8 / ティール #009BAD / 紺 #151827 / 白 #F5F7FF
   cyber.css のトークン（#3DE1F0 / #0C7080）とは僅かに違うが、ブランド側を正とする。 */

.cyber-theme .brand-lockup {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  gap: .55rem;
  min-height: 2.75rem;
  vertical-align: middle;
  text-decoration: none;
}

.cyber-theme .brand-lockup .brand-mark,
.cyber-theme .brand-lockup .brand-name {
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 512x512 の正方形 */
.cyber-theme .brand-lockup .brand-mark {
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  background-image: url("../img/brand/mark-dark.png");
}

/* 1212x348 -> 3.483:1。高さから幅を出す */
.cyber-theme .brand-lockup .brand-name {
  width: 5.92rem;
  height: 1.7rem;
  background-image: url("../img/brand/wordmark-dark.png");
  /* 画像に置き換えるが、読み上げと検索のために文字は DOM に残す */
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
}

/* 明示的にライトを選んだとき */
.cyber-theme[data-theme="light"] .brand-lockup .brand-mark {
  background-image: url("../img/brand/mark-light.png");
}
.cyber-theme[data-theme="light"] .brand-lockup .brand-name {
  background-image: url("../img/brand/wordmark-light.png");
}

/* 明示指定が無いときは OS の設定に従う（cyber.css と同じ条件） */
@media (prefers-color-scheme: light) {
  .cyber-theme:not([data-theme="dark"]) .brand-lockup .brand-mark {
    background-image: url("../img/brand/mark-light.png");
  }
  .cyber-theme:not([data-theme="dark"]) .brand-lockup .brand-name {
    background-image: url("../img/brand/wordmark-light.png");
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cyber-theme[data-cyber-motion="on"] .site-header .brand-lockup .brand-mark {
    transition: transform 220ms var(--cy-ease);
  }
  .cyber-theme[data-cyber-motion="on"] .site-header .brand-lockup:focus-visible .brand-mark {
    transform: translateY(-2px) rotate(-4deg);
  }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .cyber-theme[data-cyber-motion="on"] .site-header .brand-lockup:hover .brand-mark {
    transform: translateY(-2px) rotate(-4deg);
  }
}

.cyber-theme .brand-lockup:focus-visible {
  outline: 3px solid var(--cy-mint);
  outline-offset: 5px;
  border-radius: 2px;
}

/* ThreeTrader の公式ロゴ（img/brokers/threetrader.png、402x84・白い文字）。
   _ticker.html の固定パスの分岐だけが付けるクラス。札（.cyber-broker-logo-plate）は cyber.css の
   VT Markets と共通の濃紺で、両テーマとも白い文字が読める。ここでは高さだけを決める。 */
.cyber-theme .cyber-broker-logo--threetrader { --logo-wordmark-height: 26px; }
@media (max-width: 639px) {
  .cyber-theme .cyber-broker-logo--threetrader { --logo-wordmark-height: 22px; }
}
.cyber-theme .cyber-broker-title--detail .cyber-broker-logo--threetrader { --logo-wordmark-height: 34px; }

/* 画像が読めない環境では文字に戻す。text-indent を打ち消して幅も解放する */
@media (forced-colors: active) {
  .cyber-theme .brand-lockup .brand-mark { display: none; }
  .cyber-theme .brand-lockup .brand-name {
    width: auto;
    height: auto;
    text-indent: 0;
    overflow: visible;
    background-image: none;
    color: LinkText;
    font: 800 1.25rem/1.2 var(--cy-font);
    letter-spacing: .04em;
  }
}