/* コードブロックのコピーボタン(表示側)。
   functions.php が has_block('core/code') のページだけ読み込む */

.wp-block-post-content pre.wp-block-code {
  position: relative;
  padding-right: 60px; /* ボタン(32px+余白)ぶんを確保し、1行目の文字と重ねない */
  /* 親テーマの :where(pre){overflow-x:auto} を上書き。autoだとpreがスクロール
     コンテナになり、ボタン上に出すツールチップがクリップされて見えない。
     中身は pre-wrap + break-word で必ず折り返すため、visibleでもはみ出さない */
  overflow: visible;
}

.cs-code-copy {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(10, 10, 10, 0.2);
  border-radius: 6px;
  background: #FFFBF7;
  color: rgba(10, 10, 10, 0.6);
  cursor: pointer;
}
.cs-code-copy:hover,
.cs-code-copy:focus-visible {
  color: #0A0A0A;
  background: #FFFFFF;
}
.cs-code-copy.is-copied {
  color: #0F6E56;
  border-color: rgba(15, 110, 86, 0.5);
}
.cs-code-copy svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* ツールチップ(CSSのみ・aria-labelの文言を表示)。hoverの無い端末では出さない */
@media (hover: hover) {
  .cs-code-copy::after {
    content: attr(aria-label);
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: #0A0A0A;
    color: #FFFBF7;
    font-family: var(--wp--preset--font-family--body-font, sans-serif);
    font-size: 12px;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
  }
  .cs-code-copy:hover::after,
  .cs-code-copy:focus-visible::after {
    opacity: 1;
  }
}

/* スクリーンリーダー向けライブ領域(視覚非表示) */
.cs-code-copy-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}