/* ===========================================
   Block Link Styles
   ブロックリンクのスタイル
   =========================================== */

/* リンク付きブロックはカーソルをポインターに */
.has-block-link {
    cursor: pointer;
}

/* フォーカス時のアウトライン（アクセシビリティ） */
.has-block-link:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.has-block-link:focus:not(:focus-visible) {
    outline: none;
}

.has-block-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ===========================================
   Responsive Layout for Group Block
   デバイス毎のレイアウト切り替え
   =========================================== */

/* ===========================================
   Content Justification補完
   WordPressが出力しないjustification用CSSルール
   =========================================== */

/* 水平レイアウトのleft配置（WordPressはデフォルトなのでCSSを出力しない） */
.is-layout-flex:not(.is-vertical).is-content-justification-left {
    justify-content: flex-start;
}

/* ===========================================
   SWELL is-stack 誤出力修正
   SWELLが横並び設定に対してis-stackを誤って追加する問題をCSSで修正
   =========================================== */

/* is-nowrap は横並びの特徴（折り返しなし）を示すため、
   is-stack（縦並び）と同時に存在する場合は横並びにする */
.wp-block-group.is-stack.is-nowrap {
    flex-direction: row !important;
}

/* is-row と is-stack が同時に存在する場合は is-row を優先 */
.wp-block-group.is-row.is-stack {
    flex-direction: row !important;
}

/* 背景色付きブロックの横並び修正
   SWELLが背景色付きブロックで誤って is-stack を出力する問題を
   特定のクラス組み合わせで修正。

   判断基準:
   - has-background + is-stack + is-content-justification-center + 子要素に outermost/icon-block がある
   → これらは通常、アイコン+テキストの横並びレイアウトとして使用される

   CSSだけでは子要素の種類を判断できないため、
   より汎用的なルールとして has-background + is-stack で
   直接の子要素が2つ以上ある場合を対象とする

   注意: この方法は完全ではないため、本当に縦並びにしたい背景付きブロックは
   明示的に orientation: vertical を設定する必要がある */

/* 汎用的な修正: has-row-layout クラスがある場合は横並びにする
   このクラスはPHPフィルターで横並び設定のブロックに追加される */
.wp-block-group.has-row-layout {
    flex-direction: row !important;
}

/* is-nowrap クラスがある場合のみ折り返しを無効にする
   「複数行に折り返す」がOFFの場合にWordPressが付与するクラス */
.wp-block-group.has-row-layout.is-nowrap {
    flex-wrap: nowrap !important;
}

/* タブレット表示 (959px以下) - SWELL準拠 */
@media (max-width: 959px) {
    /* タブレット: 縦並び */
    .wp-block-group.has-tablet-layout-column {
        flex-direction: column !important;
    }

    .wp-block-group.has-tablet-layout-column > *:not(.wp-block-outermost-icon-block) {
        flex-basis: auto !important;
        width: 100% !important;
    }

    /* タブレット: 横並び（明示的に指定した場合） */
    .wp-block-group.has-tablet-layout-row {
        flex-direction: row !important;
    }

    /* タブレット: justify-content（縦並び時は垂直方向の配置） */
    .wp-block-group.has-tablet-justify-flex-start {
        justify-content: flex-start !important;
    }
    .wp-block-group.has-tablet-justify-center {
        justify-content: center !important;
    }
    .wp-block-group.has-tablet-justify-flex-end {
        justify-content: flex-end !important;
    }
    .wp-block-group.has-tablet-justify-space-between {
        justify-content: space-between !important;
    }
    .wp-block-group.has-tablet-justify-space-around {
        justify-content: space-around !important;
    }
    .wp-block-group.has-tablet-justify-space-evenly {
        justify-content: space-evenly !important;
    }

    /* タブレット: align-items（縦並び時は水平方向の配置） */
    .wp-block-group.has-tablet-align-flex-start {
        align-items: flex-start !important;
    }
    .wp-block-group.has-tablet-align-center {
        align-items: center !important;
    }
    .wp-block-group.has-tablet-align-flex-end {
        align-items: flex-end !important;
    }
    .wp-block-group.has-tablet-align-baseline {
        align-items: baseline !important;
    }
    .wp-block-group.has-tablet-align-stretch {
        align-items: stretch !important;
    }
}

/* モバイル表示 (599px以下) - SWELL準拠 */
@media (max-width: 599px) {
    /* モバイル: 縦並び */
    .wp-block-group.has-mobile-layout-column {
        flex-direction: column !important;
    }

    .wp-block-group.has-mobile-layout-column > *:not(.wp-block-outermost-icon-block) {
        flex-basis: auto !important;
        width: 100% !important;
    }

    /* モバイル: 横並び（明示的に指定した場合） */
    .wp-block-group.has-mobile-layout-row {
        flex-direction: row !important;
    }

    /* モバイル: justify-content（縦並び時は垂直方向の配置） */
    .wp-block-group.has-mobile-justify-flex-start {
        justify-content: flex-start !important;
    }
    .wp-block-group.has-mobile-justify-center {
        justify-content: center !important;
    }
    .wp-block-group.has-mobile-justify-flex-end {
        justify-content: flex-end !important;
    }
    .wp-block-group.has-mobile-justify-space-between {
        justify-content: space-between !important;
    }
    .wp-block-group.has-mobile-justify-space-around {
        justify-content: space-around !important;
    }
    .wp-block-group.has-mobile-justify-space-evenly {
        justify-content: space-evenly !important;
    }

    /* モバイル: align-items（縦並び時は水平方向の配置） */
    .wp-block-group.has-mobile-align-flex-start {
        align-items: flex-start !important;
    }
    .wp-block-group.has-mobile-align-center {
        align-items: center !important;
    }
    .wp-block-group.has-mobile-align-flex-end {
        align-items: flex-end !important;
    }
    .wp-block-group.has-mobile-align-baseline {
        align-items: baseline !important;
    }
    .wp-block-group.has-mobile-align-stretch {
        align-items: stretch !important;
    }
}