/* ==========================================================================
   mobile-actionbar.css — スマホ固定CTA（将来 Plugin 2「OG Article Actions」）
   --------------------------------------------------------------------------
   指示書 §13: 「♡ 保存 / 📍 MAP」程度の小さい固定バー。
     ・高さを取りすぎない       → 実高 54px + safe-area
     ・画面下部を覆いすぎない   → 812px端末で約6.6%
     ・iPhone/Android双方       → env(safe-area-inset-bottom) でホームバーを避ける
     ・タップしやすいサイズ     → 各ボタン 44px以上

   ★ローカル実測で判明した衝突（重要）
     og-times-ja-theme の記事には .kotei-floating（目次 / 質問BOX）が
       position:fixed; right:20px; bottom:60px; z-index:1100; 高さ約121px
     で常駐している。この固定バーをそのまま出すと必ず重なる。
     対策として mobile-actionbar.js が :root へ --og-actionbar-h を書き込み、
     テーマ側FABをその分だけ持ち上げる。z-index も 1050 とし、FABの下に潜らせる。
     （WordPress化の際は .kotei-floating へ 1行だけ bottom 加算を入れる想定）
   ========================================================================== */

/* 表示開始の目印。IntersectionObserver は面積0の要素だと交差の変化を
   報告しないことがあるため、1pxの高さを与えて確実に観測させる。 */
[data-og-actionbar-start] {
  display: block;
  height: 1px;
  margin: 0;
  padding: 0;
}

.og-mobile-actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--og-z-actionbar);
  box-sizing: border-box;
  display: flex;
  gap: 8px;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--og-line);
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: saturate(1.1) blur(6px);
  backdrop-filter: saturate(1.1) blur(6px);
  font-family: var(--og-font);

  /* 既定は隠す。記事を読み始めてから出す。 */
  transform: translateY(101%);
  visibility: hidden;
  transition: transform .26s ease, visibility .26s ease;
}

.og-mobile-actionbar.is-visible {
  transform: none;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   バー本体を1つのボタンにする（指示: 保存/MAPの2ボタンから単一行「保存しますか？」へ）。
   押すとライトボックス（#og-footer-save-modal）を開くだけで、ここではトグルしない。
   -------------------------------------------------------------------------- */
.og-mobile-actionbar__prompt {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 8px 10px;
  border: 1.5px solid var(--og-forest);
  border-radius: 8px;
  background: var(--og-paper);
  color: var(--og-forest);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 -2px 10px rgba(6, 11, 9, .12);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.og-mobile-actionbar__prompt:focus-visible {
  outline: 3px solid var(--og-forest-line);
  outline-offset: -1px;
}

/* すでに保存済みのときは色だけ変える（テキストは変えない。ライトボックス側で分かる）。 */
.og-mobile-actionbar__prompt.is-saved {
  border-color: var(--og-forest);
  background: var(--og-forest);
  color: var(--og-ivory);
}

/* --------------------------------------------------------------------------
   出さない条件
   -------------------------------------------------------------------------- */

/* PCでは出さない。記事内とNEXT STEPで足りる。 */
@media (min-width: 720px) {
  .og-mobile-actionbar { display: none; }
}

/* 画面が低い端末（横向き等）では本文を覆いすぎるので隠す。 */
@media (max-height: 420px) {
  .og-mobile-actionbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .og-mobile-actionbar { transition: none; }
}

/* ==========================================================================
   テーマ既存FAB（目次 / 質問BOX）との橋渡し
   --------------------------------------------------------------------------
   og-times-ja-theme/style.css 実測:
     .kotei-floating { position:fixed; right:20px; bottom:60px; z-index:1100; }
   テーマファイルは編集しない。このプラグインのCSSが後から読み込まれる
   （style.css は header.php で wp_head() より前にリンクされている）ため、
   同じ詳細度のこの1行だけで安全に上書きできる。
   mobile-actionbar.js / save.js が --og-actionbar-h / --og-toast-h を書き込み、
   出ている分だけ持ち上げる。両方0のときは元の60pxのまま。
   ========================================================================== */
.kotei-floating {
  bottom: calc(60px + var(--og-actionbar-h, 0px) + var(--og-toast-h, 0px));
  transition: bottom .24s ease;
}

/* スマホの既存「目次 / 質問BOX」導線。テーマに残る大きな margin-bottom を
   この保存バー併用時だけ取り除き、視線の流れを 目次 → 質問BOX → 保存 にする。 */
@media (max-width: 719px) {
  .kotei-floating.sma {
    /* テーマのスマホ用横書き質問BOXの幅を保つ。 */
    display: block !important;
    bottom: calc(21px + var(--og-actionbar-h, 0px) + var(--og-toast-h, 0px));
  }

  .kotei-floating.sma .float-btn.outline {
    /* 以前の45%余白ではなく、目次の直下に短い間隔だけ残す。 */
    display: flex;
    margin-left: auto;
    margin-bottom: 12px !important;
  }

  .kotei-floating.sma .ogt-qbox-trigger {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid #292929;
    border-radius: 10px;
    background: #383838;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(17, 17, 17, .18);
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
    margin: 0 !important;
  }

  .kotei-floating.sma .ogt-qbox-trigger:hover,
  .kotei-floating.sma .ogt-qbox-trigger:focus-visible {
    background: #1f1f1f;
    color: #fff;
    box-shadow: 0 6px 14px rgba(17, 17, 17, .22);
  }

  .kotei-floating.sma .ogt-qbox-trigger:focus-visible {
    outline: 3px solid #d7bf83;
    outline-offset: 3px;
  }

  .kotei-floating.sma .ogt-qbox-trigger:active {
    transform: translateY(1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kotei-floating,
  [data-og-footer-save].is-state-transition,
  [data-og-footer-save-heart].is-state-transition { transition: none; animation: none; }
}

/* --------------------------------------------------------------------------
   追尾フッターの「保存」ボタン（元は「大麻薬局」。theme-bridge.js が文言と
   挙動を差し替える）。テーマの .kotei-button-outline の見た目はそのまま、
   保存済みのときだけ色を付ける。
   -------------------------------------------------------------------------- */
[data-og-footer-save].is-saved {
  background-color: var(--og-forest) !important;
  border-color: var(--og-forest) !important;
  color: var(--og-ivory) !important;
}

[data-og-footer-save].is-state-transition,
[data-og-footer-save-heart].is-state-transition {
  animation: og-footer-save-state .26s cubic-bezier(.2, .8, .2, 1) 1;
}

@keyframes og-footer-save-state {
  0% { transform: scale(1); }
  48% { transform: scale(1.035); box-shadow: 0 5px 13px rgba(20, 48, 31, .22); }
  100% { transform: scale(1); }
}

/* 保存済みの印は「保存」と「質問BOX」の間にだけ現れる独立したボタンにする。
   保存を解除した場合は hidden 属性で要素自体を表示しない。 */
[data-og-footer-save-heart][hidden] {
  display: none;
}

[data-og-footer-save-heart] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #8d1e2d;
  border-radius: 5px;
  background: #8d1e2d;
  color: var(--og-ivory);
  font-family: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

[data-og-footer-save-heart] svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: currentColor;
}

[data-og-footer-save-heart] path {
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 1.15;
}

[data-og-footer-save-heart]:hover,
[data-og-footer-save-heart]:focus-visible {
  border-color: #68131f;
  background: #68131f;
  color: var(--og-ivory);
}

[data-og-footer-save-heart]:focus-visible {
  outline: 3px solid var(--og-forest-line);
  outline-offset: 3px;
}

[data-og-footer-save-heart]:active { transform: translateY(1px); }

/* PC固定フッターの4導線は、状態に関係なく同じ高さに揃える。 */
.button1 .kotei-buttons > .kotei-button-outline,
.button1 .kotei-buttons > .kotei-button-solid,
.button1 .kotei-buttons > [data-og-footer-save-heart] {
  box-sizing: border-box;
  min-height: 44px;
  height: 44px;
}

/* テーマ側の「3つ目は質問BOXを全幅」の旧ルールを、ハートを挿入した状態にも
   正しく適用する。狭い画面では [目次 / 保存]、[ハート / 質問BOX] の2列。 */
@media (max-width: 767px) {
  .kotei-buttons > [data-og-footer-save-heart],
  .kotei-buttons > .ogt-qbox-trigger {
    width: 46% !important;
  }
}

/* 追尾フッターの「保存」を押すと開くライトボックス。 */
.og-footer-save-modal__eyebrow {
  margin: 0 0 10px;
  color: var(--og-forest-line);
}

/* 保存済み通知はモーダルの横へ差し込ませない。フッターの保存モーダルでは
   操作の2ボタンを常に横書きの等幅にし、補足表示は使わない（PHPで note:false）。 */
.og-footer-save-modal .og-modal__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
}

.og-footer-save-modal .og-modal__actions > .og-btn,
.og-footer-save-modal .og-modal__actions > .og-save-button {
  box-sizing: border-box;
  display: inline-flex;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  height: auto;
  margin: 0;
  writing-mode: horizontal-tb;
}

.og-footer-save-modal .og-modal__actions .og-save-note {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
}

@media (max-width: 560px) {
  .og-footer-save-modal .og-modal__actions { grid-template-columns: 1fr; }
}