/**
 * 共有ヘッダー: バー型 —— 「形」だけ
 *
 * 濃い色の帯に、ロゴとメニューを1行で並べる。
 *
 * このディレクトリには style.css しか入っていない。
 * 子テーマは header.php を上書きしない。親テーマの header.php が
 * ロゴ（custom_logo があれば画像、無ければ .l-header__brand-link に
 * サイト名）・ヘッダーメニュー・検索・スマホ用トグルをすべて持っており、
 * バー型で変えるのは色と寸法だけだからである。
 * マークアップを写さないぶん、親テーマの更新にそのまま追随する。
 *
 * 読まれるのは、外観設定のヘッダーが「バー型ヘッダー」のときである
 * （inc/appearance.php の OPTIB_CHILD_HEADER_PARTS が bar => headers/bar）。
 * 読み込み順は palettes/ → layouts/ → skins/ → headers/ → footers/。
 *
 * ── 色はここには無い ────────────────────────
 *
 * 帯の色・文字の白・ドロップダウン・検索オーバーレイ・ダーク配色の黒は、
 * 子テーマの style.css の節「ヘッダーの色（親のまま／バー型 共通）」にある。
 *
 * 分けた理由は、色をヘッダー「親テーマのまま」（body.optib-header-theme）にも
 * 効かせる必要が出たからである。この共有部品は「バー型」を選んだときしか
 * 読み込まれないので、ここに色を置いたままでは親のままの側に届かない。
 * 色の規則は両方に効く場所（子テーマの style.css）へ移し、
 * ここには「バー型でだけ変わる形」——高さ・ロゴの寸法・1行化・
 * 項目の区切り線・スマホの右ドロワー——だけを残してある。
 *
 * 逆に言えば、ここに色の宣言を足してはいけない。足すと
 * 「親テーマのまま」の側にだけ現れない色ができ、2つの見た目が静かにずれる。
 *
 * すべてのセレクタは .optib-headers-bar（body クラス）の配下に置く。
 */

/* 帯の高さ。
 * 親は min-height 60px に padding: 1rem 0 を重ねていて、実際には
 * 90px 近くなる。バー型は1行に収める形なので、padding を落として
 * min-height だけで決める。参照デザインの実測は 44px だが、
 * 44px はロゴ画像 36px に対して上下 4px しか残らない。
 * タップ領域の最小（44px）を確保しているトグルと検索ボタンも
 * ちょうど同じ高さになり、はみ出す。48px にして 6px ずつ残す。
 *
 * position: sticky / top / z-index は触らない。追従は別の軸
 * （optib_header_sticky）が受け持ち、その打ち消しは
 * 子テーマの style.css にある。ここで position を書くと、
 * 2つの軸が同じ宣言を奪い合うことになる。 */
.optib-headers-bar .l-header__inner {
  min-height: 48px;
  padding: 0;
}

/* ロゴ画像。
 * 親は .l-header__brand に max-width: 22.5rem を置くだけで、
 * 画像そのものの寸法を持たない（元画像の大きさがそのまま出る）。
 * 帯の高さを決めた以上、こちらで高さを固定する。
 * display: block は、img の行末の余白（インライン要素のベースライン）で
 * 帯が数 px 高くなるのを止めるためである。 */
.optib-headers-bar .l-header__brand img {
  display: block;
  height: 36px;
  width: auto;
}

/* ロゴ無しのサイト名は 1 行に収める。
   親は .l-header__brand を max-width: 22.5rem に絞るので、長いサイト名が
   2 行に折れて帯の高さを押し広げていた（実機で確認）。幅の上限を外し、
   文字を小さめにして折り返さない。それでも入らない幅では末尾を省略する。
   色（白）は子テーマの style.css 側にある。 */
.optib-headers-bar .l-header__brand {
  flex: 0 1 auto;
  max-width: none;
  min-width: 0;
}

.optib-headers-bar .l-header__brand-link {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.optib-headers-bar .l-header__brand-link span {
  display: inline;
}

/* キャッチフレーズは出さない。
 * 1行の帯に2段（キャッチ＋サイト名）は入らない。
 * display: none で消すのは、読み上げにも出さないためである。
 * 帯に入りきらないものを視覚だけ隠して読み上げに残すと、
 * 「見えないのに読まれる」情報がヘッダーの先頭に来る。
 *
 * 「親テーマのまま」の側では消さない。あちらは親の高さのままなので
 * 2段入る。だからこの規則は色と一緒に移さず、ここに残してある。 */
.optib-headers-bar .l-header__phrase {
  display: none;
}

/* メニューの項目の詰め。
 * 親の .c-nav__link は padding 1rem 1.25rem。帯に収めるため詰める。
 * 色（白・hover の不透明度）は子テーマの style.css 側にある。 */
.optib-headers-bar .l-header__nav .c-nav__link {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
}

/* 項目間の細い縦線。
 * 参照デザインの区切り。border-left ではなく ::before にしてあるのは、
 * 線を項目の高さいっぱいではなく中ほどだけに引きたいからで、
 * border では高さを部分的にできない。
 * + セレクタなので先頭の項目には付かない。
 *
 * 色を含むが、ここに残してある。この線はバー型の詰まった1行の中で
 * 項目を区切るためのもので、親の余裕のある間隔には要らない。
 * 「形」の側の判断である。 */
.optib-headers-bar .l-header__nav .c-nav__item + .c-nav__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.4);
}

/* スマホ幅。親は 991px を境にメニューを畳み、トグルを出す
 * （親 _l-header.css の @media (min-width: 992px)）。
 * こちらもその境で切る。境を揃えないと、どちらでもない幅ができる。 */
@media (max-width: 991px) {
  /* 縦積みのモバイルメニューでは、PC 用の縦線は要らない。
   * 区切りは親の border-bottom がすでに持っている。 */
  .optib-headers-bar .c-nav--mobile .c-nav__item + .c-nav__item::before {
    content: none;
  }

  /* 右から出るドロワー（参照: with-planning.co.jp のスマホメニュー）。
     親は .l-header__mobile-nav をヘッダー直下に display: none / block で
     出し入れする。ここでは常に描画しておき、画面右外（translateX(100%)）へ
     退避させて、親の JS が付ける .is-open で滑り込ませる。
     display の切り替えは transition が効かないので、visibility で隠す。
     背景の暗幕は、要素の外へ広げた box-shadow（100vmax）で作る。
     暗幕の部分は要素の外側なので、親の「外側クリックで閉じる」がそのまま効く。

     地の色（メインカラーを黒へ 15% 寄せた色）と border-bottom: 0 は
     ここに書かない。子テーマの style.css 側の色の規則が両方を持っており、
     二重に書くと片方だけ直したときにずれる。 */
  .optib-headers-bar .l-header__mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 1001;
    display: block;
    width: min(300px, 82vw);
    max-height: none;
    padding: 72px 0 24px;
    overflow-y: auto;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.28s ease, box-shadow 0.28s ease, visibility 0s linear 0.28s;
  }

  .optib-headers-bar .l-header__mobile-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
    transition: transform 0.28s ease, box-shadow 0.28s ease, visibility 0s;
  }

  /* 管理バーがあるときは、その分だけ下から始める。 */
  body.admin-bar .optib-headers-bar .l-header__mobile-nav {
    top: var(--wp-admin--admin-bar--height, 46px);
  }

  /* 開いているあいだ、トグル（× になっている）はドロワーより手前に置く。 */
  .optib-headers-bar .l-header__toggle {
    position: relative;
    z-index: 1002;
  }

  .optib-headers-bar .c-nav--mobile {
    padding: 0;
  }

  /* ドロワーが開いているあいだ、サイト本体をドロワーの幅ぶん左へずらす
     （参照サイトと同じ「押しのける」動き）。body のクラスは
     assets/js/src/appearance-header-bar.ts が .l-header__mobile-nav の is-open を
     写している。ずらすのはヘッダーより下の要素だけで、ヘッダー自体は
     動かさない（トグルの × をその場に残す）。
     transform を body に掛けない理由: fixed のドロワーが body 基準に
     なって一緒にずれてしまう。 */
  .optib-headers-bar .optib-breadcrumb-bar,
  .optib-headers-bar .l-site-content,
  .optib-headers-bar .l-footer {
    transition: transform 0.28s ease;
  }

  body.optib-drawer-open.optib-headers-bar {
    overflow-x: hidden;
  }

  body.optib-drawer-open.optib-headers-bar .optib-breadcrumb-bar,
  body.optib-drawer-open.optib-headers-bar .l-site-content,
  body.optib-drawer-open.optib-headers-bar .l-footer {
    transform: translateX(calc(-1 * min(300px, 82vw)));
  }

  /* ドロワーの中の項目。1行ずつの押しやすい行にする。
     区切り線は太さと線種だけをここで決め、色は色の節に任せる。
     一括指定（border-bottom: 1px solid <色>）にすると、
     色の節の border-bottom-color と同じ場所を2つの規則が奪い合う。
     移す前は同じ詳細度で後勝ちだったが、色の節は詳細度が1段高いので、
     一括指定のままにすると勝ち負けが入れ替わる。宣言を分けて避ける。 */
  .optib-headers-bar .c-nav--mobile .c-nav__link {
    display: block;
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 600;
    border-bottom-width: 1px;
    border-bottom-style: solid;
  }
}