/*
 * Careable - Block Styles
 * 投稿編集画面のサイドバー「スタイル」から適用できる装飾。
 * このファイルはフロント側と編集画面の両方で読み込まれるため、
 * 見た目が編集中とほぼ同じになる。
 *
 * 注意: フロント側の本文は Tailwind Typography (.prose) に包まれている。
 * .prose のセレクタ詳細度は (0,1,0) なので、必ず「要素名 + クラス名」
 * (例: h2.is-style-xxx) で書いて詳細度 (0,1,1) 以上を確保すること。
 */

:root {
    --careable-primary: #1e3a8a;
    --careable-secondary: #3b82f6;
    --careable-primary-soft: rgba(30, 58, 138, 0.07);
    --careable-border: #e5e7eb;
    --careable-text: #374151;
    --careable-attention: #d97706;
    --careable-attention-soft: rgba(217, 119, 6, 0.08);
}

/* =========================================================
   配置クラス (中央寄せ / 左寄せ / 右寄せ)
   ========================================================= */

/*
 * .aligncenter などの見た目はクラシックテーマ側で用意するのが WordPress の決まりで、
 * 本テーマには定義が無かった（それが「中央寄せが効かない」原因）。
 *
 * WordPress 本体の画像ブロック CSS が持っているのは
 *   .wp-block-image.aligncenter { display: table; text-align: center; }
 * までで、figure 自体を中央へ寄せる margin:auto は含まれない。
 * さらに Tailwind の Preflight が img { display: block } にするため、
 * text-align: center による中央寄せも効かない。
 * そこで幅を内容に合わせたうえで margin:auto で寄せる。
 *
 * .prose :where(figure) の詳細度 (0,1,0) を超えるよう要素名かクラス2つで書くこと。
 */

figure.aligncenter,
.wp-block-image.aligncenter,
.wp-block-embed.aligncenter,
.wp-block-table.aligncenter,
.wp-block-video.aligncenter {
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

figure.alignleft,
.wp-block-image.alignleft,
.wp-block-embed.alignleft,
.wp-block-table.alignleft {
    float: left;
    margin: 0.5em 1.5em 0.5em 0;
}

figure.alignright,
.wp-block-image.alignright,
.wp-block-embed.alignright,
.wp-block-table.alignright {
    float: right;
    margin: 0.5em 0 0.5em 1.5em;
}

/* 段落など figure 以外のブロックの中央寄せ */
p.aligncenter,
div.aligncenter {
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   リンク (core/button など)
   ========================================================= */

/*
 * 本文中のリンクの既定は「下線なし・ホバーで下線」。
 * フロント: header.php の tailwind.config > theme.extend.typography
 * 編集画面: assets/css/editor.css
 * ボタンはラベルなので、ホバーしても下線を出さない。
 * .prose :where(a) の詳細度 (0,1,0) を超えるため要素名を付けている。
 */
a.wp-block-button__link,
a.wp-block-button__link:hover {
    text-decoration: none;
}

/* =========================================================
   見出し (core/heading)
   ========================================================= */

/* 左ライン */
:is(h1, h2, h3, h4, h5, h6).is-style-careable-heading-bar {
    padding: 0.1em 0 0.1em 0.7em;
    border-left: 5px solid var(--careable-primary);
}

/* 下線 */
:is(h1, h2, h3, h4, h5, h6).is-style-careable-heading-underline {
    padding-bottom: 0.35em;
    border-bottom: 2px solid var(--careable-border);
}

/* 下線（アクセント付き） */
:is(h1, h2, h3, h4, h5, h6).is-style-careable-heading-underline-accent {
    position: relative;
    padding-bottom: 0.45em;
    border-bottom: 2px solid var(--careable-border);
}

:is(h1, h2, h3, h4, h5, h6).is-style-careable-heading-underline-accent::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 3em;
    height: 2px;
    background: var(--careable-primary);
}

/* 点線の下線 */
:is(h1, h2, h3, h4, h5, h6).is-style-careable-heading-dotted {
    padding-bottom: 0.35em;
    border-bottom: 2px dotted var(--careable-secondary);
}

/* 枠線で囲む */
:is(h1, h2, h3, h4, h5, h6).is-style-careable-heading-box {
    padding: 0.6em 0.9em;
    border: 2px solid var(--careable-primary);
    border-radius: 0.5rem;
}

/* 背景ベタ塗り */
:is(h1, h2, h3, h4, h5, h6).is-style-careable-heading-fill {
    padding: 0.6em 0.9em;
    border-radius: 0.5rem;
    background: var(--careable-primary);
    color: #ffffff;
}

/* 薄い背景 + 左ライン */
:is(h1, h2, h3, h4, h5, h6).is-style-careable-heading-band {
    padding: 0.6em 0.9em;
    border-left: 5px solid var(--careable-primary);
    border-radius: 0 0.5rem 0.5rem 0;
    background: var(--careable-primary-soft);
}

/* =========================================================
   リスト (core/list)
   ========================================================= */

/* ---------------------------------------------------------
   マーカーの種類
   サイドバーの「リストマーカー」で選択する独立した設定。
   クラス: careable-marker-{none|check|dot|arrow|number}
   ブロックスタイル（枠線で囲む 等）と自由に組み合わせられるよう、
   マーカー側は上下左右の余白を longhand でしか触らないこと。
   --------------------------------------------------------- */

ul[class*="careable-marker-"],
ol[class*="careable-marker-"] {
    list-style: none;
    /* li に上下パディングが付く枠線ボックス等で、マーカーの縦位置を揃えるための逃がし */
    --careable-marker-offset: 0em;
}

/* 枠線ボックスと併用するときはボックス側の内側余白を使う */
ul[class*="careable-marker-"]:not(.is-style-careable-list-box),
ol[class*="careable-marker-"]:not(.is-style-careable-list-box) {
    padding-left: 0;
}

ul[class*="careable-marker-"] > li,
ol[class*="careable-marker-"] > li {
    position: relative;
    padding-left: 1.7em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

ul[class*="careable-marker-"] > li::marker,
ol[class*="careable-marker-"] > li::marker {
    content: "";
}

/* マーカーなし */
ul.careable-marker-none > li,
ol.careable-marker-none > li {
    padding-left: 0;
}

/* チェックマーク */
ul.careable-marker-check > li::before,
ol.careable-marker-check > li::before {
    content: "";
    position: absolute;
    left: 0.15em;
    top: calc(var(--careable-marker-offset, 0em) + 0.38em);
    width: 0.45em;
    height: 0.8em;
    border-right: 2px solid var(--careable-primary);
    border-bottom: 2px solid var(--careable-primary);
    transform: rotate(45deg);
}

/* 丸ドット */
ul.careable-marker-dot > li::before,
ol.careable-marker-dot > li::before {
    content: "";
    position: absolute;
    left: 0.2em;
    top: calc(var(--careable-marker-offset, 0em) + 0.62em);
    width: 0.5em;
    height: 0.5em;
    border-radius: 9999px;
    background: var(--careable-secondary);
}

/* 矢印 */
ul.careable-marker-arrow > li::before,
ol.careable-marker-arrow > li::before {
    content: "";
    position: absolute;
    left: 0.2em;
    top: calc(var(--careable-marker-offset, 0em) + 0.5em);
    width: 0.42em;
    height: 0.42em;
    border-top: 2px solid var(--careable-primary);
    border-right: 2px solid var(--careable-primary);
    transform: rotate(45deg);
}

/* 番号バッジ */
ul.careable-marker-number,
ol.careable-marker-number {
    counter-reset: careable-list-number;
}

ul.careable-marker-number > li,
ol.careable-marker-number > li {
    counter-increment: careable-list-number;
    padding-left: 2.5em;
    margin-top: 0.7em;
    margin-bottom: 0.7em;
}

ul.careable-marker-number > li::before,
ol.careable-marker-number > li::before {
    content: counter(careable-list-number);
    position: absolute;
    left: 0;
    top: calc(var(--careable-marker-offset, 0em) + 0.1em);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75em;
    height: 1.75em;
    border-radius: 9999px;
    background: var(--careable-primary);
    color: #ffffff;
    font-size: 0.8em;
    font-weight: 700;
    line-height: 1;
}

/* ---------------------------------------------------------
   枠線で囲む（ブロックスタイル）
   マーカーの種類とは独立して効く。
   --------------------------------------------------------- */

ul.is-style-careable-list-box,
ol.is-style-careable-list-box {
    padding: 0.4em 1.4em;
    border: 1px solid var(--careable-border);
    border-radius: 0.75rem;
    background: #ffffff;
}

/* デフォルトマーカー（・/ 数字）のときだけマーカー分の左余白を確保する */
ul.is-style-careable-list-box:not([class*="careable-marker-"]),
ol.is-style-careable-list-box:not([class*="careable-marker-"]) {
    padding-left: 2.6em;
}

/* li の上パディング分だけマーカーを下げて、テキストと縦位置を揃える */
ul.is-style-careable-list-box[class*="careable-marker-"],
ol.is-style-careable-list-box[class*="careable-marker-"] {
    --careable-marker-offset: 0.7em;
}

/* padding-left はマーカー側の指定を潰さないよう longhand で触らない */
ul.is-style-careable-list-box > li,
ol.is-style-careable-list-box > li {
    padding-top: 0.7em;
    padding-bottom: 0.7em;
    margin-top: 0;
    margin-bottom: 0;
    border-bottom: 1px dashed var(--careable-border);
}

ul.is-style-careable-list-box > li:last-child,
ol.is-style-careable-list-box > li:last-child {
    border-bottom: none;
}

/* ---------------------------------------------------------
   ステップ（縦フロー）
   「契約までの流れ」のような手順に使う。li 1つが1ステップ。
   番号は CSS カウンタで自動採番されるので、途中に差し込んでもずれない。
   マーカー設定より後に書いて、こちらが必ず勝つようにしてある。
   丸のサイズは rem 固定。em にすると ::before 自身の font-size が
   基準になって計算がずれる。
   --------------------------------------------------------- */

ul.is-style-careable-list-steps,
ol.is-style-careable-list-steps {
    --careable-step-size: 2rem;
    list-style: none;
    padding-left: 0;
    counter-reset: careable-step;
}

ul.is-style-careable-list-steps > li,
ol.is-style-careable-list-steps > li {
    position: relative;
    counter-increment: careable-step;
    padding-left: calc(var(--careable-step-size) + 0.9rem);
    padding-bottom: 1.5rem;
    margin-top: 0;
    margin-bottom: 0;
    list-style: none;
}

ul.is-style-careable-list-steps > li:last-child,
ol.is-style-careable-list-steps > li:last-child {
    padding-bottom: 0;
}

/* 番号の丸 */
ul.is-style-careable-list-steps > li::before,
ol.is-style-careable-list-steps > li::before {
    content: counter(careable-step);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--careable-step-size);
    height: var(--careable-step-size);
    border-radius: 9999px;
    background: var(--careable-primary);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}

/* ステップ同士をつなぐ縦線。最後のステップには出さない */
ul.is-style-careable-list-steps > li::after,
ol.is-style-careable-list-steps > li::after {
    content: "";
    position: absolute;
    left: calc(var(--careable-step-size) / 2 - 1px);
    top: var(--careable-step-size);
    bottom: 0;
    width: 2px;
    background: var(--careable-border);
}

ul.is-style-careable-list-steps > li:last-child::after,
ol.is-style-careable-list-steps > li:last-child::after {
    content: none;
}

/* =========================================================
   段落 (core/paragraph)
   ========================================================= */

/* 補足ボックス */
p.is-style-careable-note {
    padding: 1em 1.2em;
    border-left: 4px solid var(--careable-secondary);
    border-radius: 0 0.5rem 0.5rem 0;
    background: var(--careable-primary-soft);
    color: var(--careable-text);
}

/* 注意ボックス */
p.is-style-careable-attention {
    padding: 1em 1.2em;
    border: 1px solid var(--careable-attention);
    border-radius: 0.5rem;
    background: var(--careable-attention-soft);
    color: #92400e;
}

/* 枠線で囲む */
p.is-style-careable-outline {
    padding: 1.2em 1.4em;
    border: 1px solid var(--careable-border);
    border-radius: 0.75rem;
}

/* リード文 */
p.is-style-careable-lead {
    font-size: 1.15em;
    font-weight: 500;
    line-height: 1.9;
    color: #1f2937;
}

/* マーカー風ハイライト（蛍光ペン。リストマーカーの careable-marker-* とは別物） */
p.is-style-careable-marker {
    background: linear-gradient(transparent 62%, rgba(59, 130, 246, 0.28) 62%);
}

/* =========================================================
   グループ (core/group)
   ========================================================= */

/* グループはタグ名を div 以外にも変更できるため、クラス2つで詳細度を確保する */
.wp-block-group.is-style-careable-card {
    padding: 1.75em;
    border: 1px solid var(--careable-border);
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.wp-block-group.is-style-careable-panel {
    padding: 1.75em;
    border-radius: 1rem;
    background: #f0f6fa;
}

.wp-block-group.is-style-careable-group-outline {
    padding: 1.75em;
    border: 2px solid var(--careable-primary);
    border-radius: 1rem;
}

/* =========================================================
   引用 (core/quote)
   ========================================================= */

blockquote.is-style-careable-quote-box {
    padding: 1.4em 1.6em;
    border: none;
    border-left: 4px solid var(--careable-primary);
    border-radius: 0 0.75rem 0.75rem 0;
    background: #f9fafb;
    font-style: normal;
    quotes: none;
}

blockquote.is-style-careable-quote-box p::before,
blockquote.is-style-careable-quote-box p::after {
    content: none;
}

/* =========================================================
   画像 (core/image)
   ========================================================= */

figure.is-style-careable-image-border img {
    border: 1px solid var(--careable-border);
    border-radius: 0.75rem;
}

figure.is-style-careable-image-shadow img {
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* =========================================================
   テーブル (core/table)
   ========================================================= */

figure.is-style-careable-table-lined table {
    width: 100%;
    border-collapse: collapse;
}

figure.is-style-careable-table-lined :is(th, td) {
    padding: 0.75em 1em;
    border: 1px solid var(--careable-border);
    text-align: left;
    vertical-align: top;
}

figure.is-style-careable-table-lined th {
    background: var(--careable-primary-soft);
    font-weight: 700;
    color: var(--careable-primary);
}

figure.is-style-careable-table-striped table {
    width: 100%;
    border-collapse: collapse;
}

figure.is-style-careable-table-striped :is(th, td) {
    padding: 0.75em 1em;
    border-bottom: 1px solid var(--careable-border);
    text-align: left;
    vertical-align: top;
}

figure.is-style-careable-table-striped tbody tr:nth-child(odd) {
    background: #f9fafb;
}

figure.is-style-careable-table-striped th {
    border-bottom: 2px solid var(--careable-primary);
    font-weight: 700;
    color: var(--careable-primary);
}