/**
 * Block Styles
 *
 * Common block styles for both editor and frontend.
 * エディタとフロントエンドの両方で使用する共通ブロックスタイル
 *
 * @package Mitachi_Yuru
 * @since 1.0.0
 */

/* Shared Gutenberg image-size controls and captions.
   Selectors retain their original scope and specificity in both contexts. */
figure.wp-block-image.mitachi-image-size-80,
.editor-styles-wrapper figure.wp-block-image.mitachi-image-size-80,
.editor-styles-wrapper .mitachi-image-size-80 figure.wp-block-image {
    max-width: 80%;
}

figure.wp-block-image.mitachi-image-size-70,
.editor-styles-wrapper figure.wp-block-image.mitachi-image-size-70,
.editor-styles-wrapper .mitachi-image-size-70 figure.wp-block-image {
    max-width: 70%;
}

figure.wp-block-image.mitachi-image-size-50,
.editor-styles-wrapper figure.wp-block-image.mitachi-image-size-50,
.editor-styles-wrapper .mitachi-image-size-50 figure.wp-block-image {
    max-width: 50%;
}

figure.wp-block-image.mitachi-image-size-25,
.editor-styles-wrapper figure.wp-block-image.mitachi-image-size-25,
.editor-styles-wrapper .mitachi-image-size-25 figure.wp-block-image {
    max-width: 25%;
}

figure.wp-block-image figcaption,
.wp-block-image figcaption,
.editor-styles-wrapper figure.wp-block-image figcaption,
.editor-styles-wrapper .wp-block-image figcaption {
    text-align: center;
    font-size: 0.9rem;
    color: var(--c-text-light);
    margin-top: 0.5em;
}

/* ============================================================
   Paragraph Block Custom Styles
   段落ブロックのカスタムスタイル
   ============================================================ */

/* 枠等のスタイル */
p.is-style-border {
    padding: 1.5em;
    border: 2px solid var(--c-text-light, #968D85);
    border-radius: 8px;
    background-color: var(--c-bg-card, #FFFFFF);
}

p.is-style-double-border {
    padding: 1.5em;
    border: 4px double var(--c-text-light, #968D85);
    border-radius: 8px;
    background-color: var(--c-bg-card, #FFFFFF);
}

p.is-style-dotted-border {
    padding: 1.5em;
    border: 2px dotted var(--c-text-light, #968D85);
    border-radius: 8px;
    background-color: var(--c-bg-card, #FFFFFF);
}

p.is-style-shadow {
    padding: 1.5em;
    background-color: var(--c-bg-card, #FFFFFF);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

p.is-style-band {
    padding: 1.5em;
    background-color: var(--c-theme, #E0C895);
    color: var(--c-text-main, #595048);
    border-radius: 8px;
    font-weight: 700;
}

/* アイコン付きスタイル */
p.is-style-info,
p.is-style-question,
p.is-style-warning,
p.is-style-memo {
    padding: 1.2em 1.5em 1.2em 3.5em;
    border-radius: 8px;
    position: relative;
    margin-bottom: 1.5em;
}

p.is-style-info::before,
p.is-style-question::before,
p.is-style-warning::before,
p.is-style-memo::before {
    content: "";
    position: absolute;
    left: 1em;
    top: 1.45em;
    width: 1.5em;
    height: 1.5em;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* インフォ */
p.is-style-info {
    background-color: rgba(52, 152, 219, 0.1);
    /* フォールバック */
    background-color: color-mix(in srgb, var(--c-paragraph-info, #3498db) 10%, white);
    border-left: 4px solid var(--c-paragraph-info, #3498db);
}

p.is-style-info::before {
    color: var(--c-paragraph-info, #3498db);
    -webkit-mask-image: url("../icons/paragraph/info.svg");
    mask-image: url("../icons/paragraph/info.svg");
}

/* クエスチョン */
p.is-style-question {
    background-color: rgba(155, 89, 182, 0.1);
    /* フォールバック */
    background-color: color-mix(in srgb, var(--c-paragraph-question, #9b59b6) 10%, white);
    border-left: 4px solid var(--c-paragraph-question, #9b59b6);
}

p.is-style-question::before {
    color: var(--c-paragraph-question, #9b59b6);
    -webkit-mask-image: url("../icons/paragraph/circle-question-mark.svg");
    mask-image: url("../icons/paragraph/circle-question-mark.svg");
}

/* 注意 */
p.is-style-warning {
    background-color: rgba(231, 76, 60, 0.1);
    /* フォールバック */
    background-color: color-mix(in srgb, var(--c-paragraph-warning, #e74c3c) 10%, white);
    border-left: 4px solid var(--c-paragraph-warning, #e74c3c);
}

p.is-style-warning::before {
    color: var(--c-paragraph-warning, #e74c3c);
    -webkit-mask-image: url("../icons/paragraph/triangle-alert.svg");
    mask-image: url("../icons/paragraph/triangle-alert.svg");
}

/* メモ */
p.is-style-memo {
    background-color: rgba(46, 204, 113, 0.1);
    /* フォールバック */
    background-color: color-mix(in srgb, var(--c-paragraph-memo, #2ecc71) 10%, white);
    border-left: 4px solid var(--c-paragraph-memo, #2ecc71);
}

p.is-style-memo::before {
    color: var(--c-paragraph-memo, #2ecc71);
    -webkit-mask-image: url("../icons/paragraph/notebook-pen.svg");
    mask-image: url("../icons/paragraph/notebook-pen.svg");
}

/* レスポンシブ対応 */
@media (max-width: 768px) {

    p.is-style-info,
    p.is-style-question,
    p.is-style-warning,
    p.is-style-memo {
        padding: 1em 1em 1em 3em;
    }

    p.is-style-info::before,
    p.is-style-question::before,
    p.is-style-warning::before,
    p.is-style-memo::before {
        left: 0.8em;
        top: 1.4em;
        width: 1.2em;
        height: 1.2em;
    }
}

/* Keep decorative silhouettes visible when forced colors replace theme accents. */
@media (forced-colors: active) {
    p.is-style-info::before,
    p.is-style-question::before,
    p.is-style-warning::before,
    p.is-style-memo::before {
        forced-color-adjust: none;
        background-color: CanvasText;
    }
}

/* ============================================================
   Text Marker Styles
   テキストマーカースタイル
   ============================================================ */

/* マーカーベーススタイル */
.mitachi-marker {
    /* デフォルトは太線 - 動的CSSで上書きされる */
    background: linear-gradient(transparent 50%, var(--c-marker, #FFEF7E) 50%);
}

/* 個別スタイル（動的CSSで使用されない場合のフォールバック） */
.mitachi-marker--thick {
    background: linear-gradient(transparent 50%, var(--c-marker, #FFEF7E) 50%);
}

.mitachi-marker--thin {
    background: linear-gradient(transparent 70%, var(--c-marker, #FFEF7E) 70%);
}

.mitachi-marker--stripe {
    background: repeating-linear-gradient(-45deg,
            var(--c-marker, #FFEF7E),
            var(--c-marker, #FFEF7E) 2px,
            transparent 2px,
            transparent 4px);
    padding: 0.1em 0;
}