/*
 * Nettoge parchment group (front).
 * Phase 7-F. Sync: build/css/editor/parchment-nettoge.css
 */

.post_content .is-style-parchment,
.entry-content .is-style-parchment {
    --nettoge-parchment-bg: #f0e3be;
    --nettoge-parchment-ink: #463116;
    --nettoge-parchment-ink-muted: #5c4a32;
    --nettoge-parchment-ink-faint: #7a6248;
    --nettoge-parchment-accent: #7a430d;
    --nettoge-parchment-link: #6b3810;
    --nettoge-parchment-border01: #7a430d;
    --nettoge-parchment-border02: #5f2d04;
    --nettoge-parchment-border03: rgba(70, 49, 22, .48);
    --nettoge-parchment-border04: rgba(122, 67, 13, .32);
    --nettoge-parchment-border05: #2f2f2f;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 1.9em 2em 1.8em;
    color: var(--nettoge-parchment-ink);
    border: 0;
    border-radius: 0;
    background-color: var(--nettoge-parchment-bg);
    background-image: url("../../../../assets/img/Papier.webp");
    background-position: center top;
    background-size: 340px auto;
    background-repeat: repeat;
    box-shadow:
        0 2px 8px rgba(73, 46, 12, .08);
    line-height: 1.95;
}

.post_content .is-style-parchment::before,
.entry-content .is-style-parchment::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #7a430d;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .72) 5%, rgba(0, 0, 0, .22) 12%, transparent 24%, transparent 76%, rgba(0, 0, 0, .22) 88%, rgba(0, 0, 0, .72) 95%, #000 100%);
    mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .72) 5%, rgba(0, 0, 0, .22) 12%, transparent 24%, transparent 76%, rgba(0, 0, 0, .22) 88%, rgba(0, 0, 0, .72) 95%, #000 100%);
    pointer-events: none;
    opacity: .28;
}

.post_content .is-style-parchment::after,
.entry-content .is-style-parchment::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #5f2d04;
    -webkit-mask-image: radial-gradient(ellipse 72% 86% at 50% 50%, transparent 66%, rgba(0, 0, 0, .20) 78%, rgba(0, 0, 0, .66) 92%, #000 100%);
    mask-image: radial-gradient(ellipse 72% 86% at 50% 50%, transparent 66%, rgba(0, 0, 0, .20) 78%, rgba(0, 0, 0, .66) 92%, #000 100%);
    pointer-events: none;
    opacity: .18;
}

.post_content .is-style-parchment > *,
.entry-content .is-style-parchment > * {
    position: relative;
    z-index: 1;
}

.post_content .is-style-parchment > :first-child,
.entry-content .is-style-parchment > :first-child {
    margin-top: 0;
}

.post_content .is-style-parchment > :last-child,
.entry-content .is-style-parchment > :last-child {
    margin-bottom: 0;
}

/* ボーダーセット追加時は Tab_Border.php の手順に合わせて羊皮紙用の色も追加する */
.post_content .is-style-parchment .has-border.-border01,
.entry-content .is-style-parchment .has-border.-border01 {
    border-color: var(--nettoge-parchment-border01);
}

.post_content .is-style-parchment .has-border.-border02,
.entry-content .is-style-parchment .has-border.-border02 {
    border-color: var(--nettoge-parchment-border02);
}

.post_content .is-style-parchment .has-border.-border03,
.entry-content .is-style-parchment .has-border.-border03 {
    border-color: var(--nettoge-parchment-border03);
}

.post_content .is-style-parchment .has-border.-border04,
.entry-content .is-style-parchment .has-border.-border04 {
    border-color: var(--nettoge-parchment-border04);
}

.post_content .is-style-parchment .has-border.-border05,
.entry-content .is-style-parchment .has-border.-border05 {
    border-color: var(--nettoge-parchment-border05);
}

ul.is-style-parchment,
ol.is-style-parchment {
    padding-left: 2.35em;
}

/*
 * 羊皮紙はライト紙面を維持（ダーク UI 上の「古文書」）。
 * wp-blocks / typography の var(--color_text) より優先して墨字色を固定する。
 */
body :is(.post_content, .entry-content, .wp-block-post-content) :is(
    .wp-block-group,
    .wp-block-paragraph,
    ul,
    ol
).is-style-parchment {
    color: var(--nettoge-parchment-ink) !important;
}

body :is(.post_content, .entry-content, .wp-block-post-content) .is-style-parchment :is(
    p,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    dt,
    dd,
    figcaption,
    caption,
    label,
    summary,
    .wp-block-paragraph,
    .wp-block-group,
    .wp-block-list,
    .wp-block-quote,
    .wp-block-pullquote,
    .wp-block-preformatted,
    .wp-block-verse,
    .wp-block-table,
    .wp-block-columns,
    .wp-block-column,
    .wp-block-details,
    .wp-block-post-excerpt
) {
    color: inherit !important;
}

body :is(.post_content, .entry-content, .wp-block-post-content) .is-style-parchment ::marker {
    color: var(--nettoge-parchment-ink-muted);
}

body :is(.post_content, .entry-content, .wp-block-post-content) .is-style-parchment a:where(
    :not(.wp-block-file__button):not(.swell-block-button__link):not(.wp-element-button)
) {
    color: var(--nettoge-parchment-link) !important;
}

body :is(.post_content, .entry-content, .wp-block-post-content) .is-style-parchment a:where(
    :not(.wp-block-file__button):not(.swell-block-button__link):not(.wp-element-button)
):is(:hover, :focus-visible) {
    color: var(--nettoge-parchment-accent) !important;
}

body :is(.post_content, .entry-content, .wp-block-post-content) .is-style-parchment :is(
    .has-swl-main-color,
    .has-swl-main-thin-color,
    .u-col-main
) {
    color: var(--nettoge-parchment-accent) !important;
}

body :is(.post_content, .entry-content, .wp-block-post-content) .is-style-parchment :is(
    .has-swl-deep-01-color,
    .has-swl-deep-02-color,
    .has-swl-deep-03-color,
    .has-swl-deep-04-color
) {
    color: #8b3a18 !important;
}

body :is(.post_content, .entry-content, .wp-block-post-content) .is-style-parchment .swl-marker {
    color: inherit;
    background: color-mix(in srgb, var(--nettoge-parchment-accent) 22%, transparent);
}