/* ================================================================
   Simple Slider Block — フロントエンドスタイル
   ================================================================ */

/* ── スライダーコンテナ ─────────────────────────────────────────── */

.simple-slider-block {
    position: relative;
    overflow: hidden;
}

/*
 * ヘッダー直下のスライダー上部隙間対策。
 *
 * 原因① スライダー自身の margin-top
 *   → 親要素に依存せず :first-child のとき常にリセット
 * 原因② 親コンテナの padding-top（テーマ・ブロックテーマ共通）
 *   → :is() + :has() で多数の親セレクタを一括対象
 */

/* ① 親不問：スライダーが最初の子なら上マージンをゼロに */
.simple-slider-block:first-child {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
}

/*
 * ② 親コンテナの上パディングをリセット。
 *    :has() の条件から :first-child を外し、スライダーが直接の子であれば対象にする。
 *    .wp-block-post-content-is-layout-flow（WordPress が自動生成するスコープクラス）も追加。
 */
:is(
    main, #main, .main,
    .site-main, #site-main,
    .content-area, #content, .site-content,
    article, .hentry,
    .entry-content, .post-content, .page-content,
    .wp-block-post-content,
    .wp-block-post-content-is-layout-flow,
    .wp-block-group,
    .is-layout-constrained,
    .is-layout-flow
):has(> .wp-block-simple-slider-block-slider) {
    padding-top: 0 !important;
    padding-block-start: 0 !important;
}

/*
 * alignfull / alignwide の幅制御はブロックテーマ（Twenty Twenty-Five 等）が
 * theme.json の設定から生成する CSS に委ねる。
 * クラシックテーマ用のフォールバックのみここで定義する。
 */
.simple-slider-block.alignfull {
    /* クラシックテーマ用フォールバック */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/*
 * ブロックテーマ環境では上記フォールバックより
 * テーマが生成した .is-layout-constrained > .alignfull の CSS が優先される。
 * そのため alignfull で意図せず適用されるフォールバックを
 * .has-global-padding 配下では無効化する。
 */
.has-global-padding > .simple-slider-block.alignfull,
.is-layout-constrained > .simple-slider-block.alignfull {
    width: auto;
    max-width: none;
    margin-left: revert;
    margin-right: revert;
}

.simple-slider-block.alignwide {
    width: 100%;
    max-width: var(--wp--style--global--wide-size, 1200px);
    margin-left: auto;
    margin-right: auto;
}

/* ── 各スライド（カバーブロック）──────────────────────────────── */

/*
 * ブロックテーマが .is-layout-flow > * + * に適用するブロックギャップ
 * （margin-block-start）をリセットする。
 * JS 初期化前後どちらの状態でも上部に余白が生じないよう全カバーブロックに適用。
 */
.simple-slider-block > .wp-block-cover {
    margin-block-start: 0 !important;
    margin-top: 0 !important;
}

/*
 * JS 初期化前: カバーブロックを通常フロー表示（スタック崩れ防止）
 * JS が slider-slide クラスを付与した後: position:absolute に切り替わる
 */
.simple-slider-block > .wp-block-cover:not(.slider-slide) {
    display: block;
}

/* JS 初期化後 */
.simple-slider-block > .wp-block-cover.slider-slide {
    position: absolute;
    inset: 0;              /* top/right/bottom/left: 0 の短縮記法 */
    width: 100%;
    min-height: 0 !important;   /* カバーブロックの min-height インラインスタイルを上書き */
    margin: 0 !important;        /* テーマが付与する margin を打ち消す */
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
    z-index: 1;
}

.simple-slider-block > .wp-block-cover.slider-slide.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

/* カバーブロック内の is-layout-constrained が幅を制限しないよう調整 */
.simple-slider-block > .wp-block-cover > .wp-block-cover__inner-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ── アニメーション ─────────────────────────────────────────────── */

.simple-slider-block.animation-fade > .wp-block-cover.slider-slide {
    transform: none;
}

.simple-slider-block.animation-slide-left > .wp-block-cover.slider-slide {
    transform: translateX(100%);
}
.simple-slider-block.animation-slide-left > .wp-block-cover.slider-slide.active {
    transform: translateX(0);
}

.simple-slider-block.animation-slide-right > .wp-block-cover.slider-slide {
    transform: translateX(-100%);
}
.simple-slider-block.animation-slide-right > .wp-block-cover.slider-slide.active {
    transform: translateX(0);
}

.simple-slider-block.animation-zoom > .wp-block-cover.slider-slide {
    transform: scale(1.15);
}
.simple-slider-block.animation-zoom > .wp-block-cover.slider-slide.active {
    transform: scale(1);
}

.simple-slider-block.animation-flip > .wp-block-cover.slider-slide {
    transform: perspective(800px) rotateY(90deg);
}
.simple-slider-block.animation-flip > .wp-block-cover.slider-slide.active {
    transform: perspective(800px) rotateY(0);
}

/* ── ドットコントロール ─────────────────────────────────────────── */

.simple-slider-block .slider-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.simple-slider-block .slider-controls .control {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0;
    transition: background 0.3s;
}

.simple-slider-block .slider-controls .control.active,
.simple-slider-block .slider-controls .control:hover {
    background: rgba(255, 255, 255, 1);
}