/* 罫線ボックス（create-block/border-box）
   フロントとエディタの両方で読み込む（inc/custom-blocks.php）。
   罫線の色・太さ、背景色は管理画面で設定するとインライン style / クラスで上書きされる。 */

.wp-block-create-block-border-box {
    box-sizing: border-box;
    border: 2px solid #c8c8c8; /* 2px = 1.5pt（要件：1〜1.5pt 程度）。1.5px はブラウザで 1px に丸められるため使わない */
    padding: 24px;
    margin-top: 24px;
    margin-bottom: 24px;
    overflow-wrap: break-word;
}

/* カラムブロックの中に置いたとき：カラム同士の間隔（gap 32px）に罫線ボックスの上下の余白（24px）が加わり、
   スマートフォンでカラムが縦に並ぶとボックス同士の間隔が 80px に見える。
   カラム内の先頭・末尾にある罫線ボックスは上下の余白を付けず、段落だけのカラムと同じ間隔（32px）にする */
.wp-block-column > .wp-block-create-block-border-box:first-child {
    margin-top: 0;
}

.wp-block-column > .wp-block-create-block-border-box:last-child {
    margin-bottom: 0;
}

/* 中身の先頭・末尾の余白を消して、上下左右の余白を均等にする */
.wp-block-create-block-border-box > :first-child,
.wp-block-create-block-border-box > .block-editor-inner-blocks > .block-editor-block-list__layout > :first-child {
    margin-top: 0;
}

.wp-block-create-block-border-box > :last-child,
.wp-block-create-block-border-box > .block-editor-inner-blocks > .block-editor-block-list__layout > :last-child {
    margin-bottom: 0;
}

/* コラムの個別ページでは、ebm.assets の CSS（new-style.css の .column-single 内）で段落の間隔を
   padding-bottom: 24px で付けているため、ボックスの最後が段落だと文字の下に余白が重なって見える。
   最後の段落の padding-bottom を消す（.column-single 側の指定より優先させるため、セレクタを長くしている） */
.wp-block-create-block-border-box > p.wp-block-paragraph:last-child,
.wp-block-create-block-border-box > p:not([class]):last-child,
.wp-block-create-block-border-box > .wp-block-columns:last-child .wp-block-column > p.wp-block-paragraph:last-child,
.wp-block-create-block-border-box > .wp-block-columns:last-child .wp-block-column > p:not([class]):last-child {
    padding-bottom: 0;
}

.wp-block-create-block-border-box img {
    max-width: 100%;
    height: auto;
}

/* 背景色の選択肢（mdv-custom-blocks/src/border-box.jsx の backgroundPalette と合わせる） */
.wp-block-create-block-border-box.has-border-box-amber-background-color {
    background-color: #ffa600; /* オレンジ */
}

.wp-block-create-block-border-box.has-border-box-navy-background-color {
    background-color: #1b1c85; /* 紺 */
}

.wp-block-create-block-border-box.has-border-box-royal-blue-background-color {
    background-color: #5a72ff; /* 青 */
}

.wp-block-create-block-border-box.has-border-box-charcoal-background-color {
    background-color: #333333; /* チャコール */
}

.wp-block-create-block-border-box.has-border-box-silver-background-color {
    background-color: #b7b7c1; /* グレー */
}

.wp-block-create-block-border-box.has-border-box-dark-gray-background-color {
    background-color: #757584; /* 濃いグレー */
}

.wp-block-create-block-border-box.has-border-box-light-cyan-background-color {
    background-color: #e9f3f9; /* 薄い水色 */
}

.wp-block-create-block-border-box.has-border-box-light-blue-background-color {
    background-color: #ebf0ff; /* 薄い青 */
}

.wp-block-create-block-border-box.has-border-box-ivory-background-color {
    background-color: #fffbef; /* 薄いクリーム */
}

.wp-block-create-block-border-box.has-border-box-lavender-background-color {
    background-color: #d2ddff; /* 薄い青紫 */
}

.wp-block-create-block-border-box.has-border-box-light-gray-background-color {
    background-color: #e6e6ee; /* 薄いグレー */
}

.wp-block-create-block-border-box.has-border-box-white-background-color {
    background-color: #ffffff; /* 白 */
}

/* 新着情報の個別ページ（single-information.php）の本文の枠は、ebm.assets の CSS で
   .post-text { display: inline-block } になっていて、幅が中身に合わせて縮む。
   そのままだと中に置いた罫線ボックスの横幅（75% / 50%）の基準が縮んだ幅になり、指定が効かないため、
   本文の枠を親の幅いっぱいに広げる（.post-text 単体で使っている他のページには影響しない） */
.post-text.post-contents-area {
    display: block;
}

/* 横幅 */
.wp-block-create-block-border-box.is-width-full {
    width: 100%;
}

.wp-block-create-block-border-box.is-width-75 {
    width: 75%;
}

.wp-block-create-block-border-box.is-width-50 {
    width: 50%;
}

.wp-block-create-block-border-box.is-width-auto {
    width: fit-content;
    max-width: 100%;
}

/* 配置 */
.wp-block-create-block-border-box.is-align-left {
    margin-left: 0;
    margin-right: auto;
}

.wp-block-create-block-border-box.is-align-center {
    margin-left: auto;
    margin-right: auto;
}

.wp-block-create-block-border-box.is-align-right {
    margin-left: auto;
    margin-right: 0;
}

/* スマートフォンでは横幅の設定にかかわらず 100% にする */
@media screen and (max-width: 768px) {
    .wp-block-create-block-border-box[class*="is-width-"] {
        width: 100%;
    }

    .wp-block-create-block-border-box {
        padding: 16px;
    }
}