/* ==========================================================================
   Post body (お知らせ) — Figma 「/news/article-title - 3/11」. Used on the site AND inside the
   block editor (inc/news.php), so authors see the real design while writing:
     site   → .p-article__body > block
     editor → .editor-styles-wrapper .is-root-container > block
   Authors only pick blocks (段落 / 見出し H2・H3 / リスト / 画像 / テーブル / 引用 / ボタン / 区切り);
   every style below comes with the block.

   PC: text 14 / 1.6; blocks 22 apart (one blank line); lists right under their paragraph.
     H2 32/700, 4×40 #00479D bar, text 20 in; 40 above, 16 below.  H3 22/700, padding 8, 16 above.
     Image full width, 40 above / below.  Table: head #DDE3EA 16/700, cells 14 centered, 1px
     #DDE3EA, 1st column 1/3, 32 above / below.  Quote: 32 in, 1px dashed #9EA6AE, 24 padding,
     #5E6B78.  目次 box #F9F9F9, padding 40 / 64, 40 above / below.
   Not in the comp (same style family): link blue underlined, numbered list, caption 12px grey,
     button = site button, separator 1px #EEEEEE.
   SP (Figma 「/news/article」 SP): H2 24/700 lh 1.4, bar as tall as the heading (3 in top and
     bottom); H3 18 lh 1.4; 目次 padding 40 / 24; table: 1st column 100, body cells of the other
     columns left-aligned with padding 16.
   ========================================================================== */

:is(.p-article__body, .editor-styles-wrapper .is-root-container) {
	/* SP = Figma SP */
	--art-h2-size: 24px;
	--art-h2-lh: 1.4;
	--art-h2-bar-top: 3px;
	--art-h2-bar-bottom: 3px;
	--art-h2-bar-h: auto;
	--art-h3-size: 18px;
	--art-h3-lh: 1.4;
	--art-toc-pad: var(--space-10) var(--space-6);

	font-size: var(--fs-text);
	line-height: 1.6;
	color: var(--c-text);
	overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
	:is(.p-article__body, .editor-styles-wrapper .is-root-container) {
		--art-h2-size: 32px;
		--art-h2-lh: 1.6;
		--art-h2-bar-top: calc((1.6em - 40px) / 2); /* 40 tall, centered on the first line */
		--art-h2-bar-bottom: auto;
		--art-h2-bar-h: 40px;
		--art-h3-size: 22px;
		--art-h3-lh: 1.6;
		--art-toc-pad: var(--space-10) var(--space-16);
	}
}

:is(.p-article__body, .editor-styles-wrapper .is-root-container) > * {
	margin-block: 0;
}

:is(.p-article__body, .editor-styles-wrapper .is-root-container) > * + * {
	margin-top: 22px;
}

/* Paragraph → its list: no gap (Figma) */
:is(.p-article__body, .editor-styles-wrapper .is-root-container) > p + :is(ul, ol) {
	margin-top: 0;
}

/* --- Headings --------------------------------------------------------------- */
:is(.p-article__body, .editor-styles-wrapper .is-root-container) > h2 {
	position: relative;
	margin-top: var(--space-10);
	padding-left: 20px; /* bar 4 + 16 */
	font-size: var(--art-h2-size);
	font-weight: 700;
	line-height: var(--art-h2-lh);
}

:is(.p-article__body, .editor-styles-wrapper .is-root-container) > h2::before {
	content: "";
	position: absolute;
	top: var(--art-h2-bar-top);
	bottom: var(--art-h2-bar-bottom);
	left: 0;
	width: 4px;
	height: var(--art-h2-bar-h);
	background-color: var(--c-primary);
}

:is(.p-article__body, .editor-styles-wrapper .is-root-container) > h2 + * {
	margin-top: var(--space-4);
}

:is(.p-article__body, .editor-styles-wrapper .is-root-container) > h3 {
	margin-top: var(--space-4);
	padding-block: var(--space-2);
	font-size: var(--art-h3-size);
	font-weight: 700;
	line-height: var(--art-h3-lh);
}

:is(.p-article__body, .editor-styles-wrapper .is-root-container) > h3 + * {
	margin-top: 0;
}

/* --- Text ------------------------------------------------------------------- */
:is(.p-article__body, .editor-styles-wrapper .is-root-container) strong {
	font-weight: 700;
}

:is(.p-article__body, .editor-styles-wrapper .is-root-container) a:not(.wp-block-button__link, .p-toc a) {
	color: var(--c-primary);
	text-decoration: underline;
}

:is(.p-article__body, .editor-styles-wrapper .is-root-container) a:not(.wp-block-button__link, .p-toc a):hover {
	color: var(--c-primary-dark);
}

:is(.p-article__body, .editor-styles-wrapper .is-root-container) > ul {
	padding-left: 21px;
	list-style: disc;
}

:is(.p-article__body, .editor-styles-wrapper .is-root-container) > ol {
	padding-left: 1.6em;
	list-style: decimal;
}

:is(.p-article__body, .editor-styles-wrapper .is-root-container) :is(ul, ol) :is(ul, ol) {
	margin-top: 0;
}

/* --- Image ------------------------------------------------------------------ */
:is(.p-article__body, .editor-styles-wrapper .is-root-container) > .wp-block-image,
:is(.p-article__body, .editor-styles-wrapper .is-root-container) > .wp-block-image + * {
	margin-top: var(--space-10);
}

:is(.p-article__body, .editor-styles-wrapper .is-root-container) .wp-block-image img {
	width: 100%;
	height: auto;
}

:is(.p-article__body, .editor-styles-wrapper .is-root-container) .wp-block-image figcaption {
	margin: var(--space-2) 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--c-text-muted);
}

/* --- Table ------------------------------------------------------------------ */
:is(.p-article__body, .editor-styles-wrapper .is-root-container) > .wp-block-table,
:is(.p-article__body, .editor-styles-wrapper .is-root-container) > .wp-block-table + * {
	margin-top: var(--space-8);
}

:is(.p-article__body, .editor-styles-wrapper .is-root-container) .wp-block-table {
	overflow-x: auto;
}

:is(.p-article__body, .editor-styles-wrapper .is-root-container) .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}

:is(.p-article__body, .editor-styles-wrapper .is-root-container) .wp-block-table :is(thead, tfoot) {
	border: 0;
}

:is(.p-article__body, .editor-styles-wrapper .is-root-container) .wp-block-table :is(th, td) {
	padding: var(--space-4) 5px;
	text-align: center;
	vertical-align: middle;
	border: 1px solid var(--c-border);
}

/* Header cells: #DDE3EA fill, separated by 1px WHITE lines (Figma: cells 1px apart on white) */
:is(.p-article__body, .editor-styles-wrapper .is-root-container) .wp-block-table th {
	font-size: 16px;
	font-weight: 700;
	background-color: var(--c-border);
	border-color: var(--c-bg);
}

:is(.p-article__body, .editor-styles-wrapper .is-root-container) .wp-block-table :is(th, td):first-child {
	width: 33.4%;
}

@media (max-width: 1023.98px) {
	:is(.p-article__body, .editor-styles-wrapper .is-root-container) .wp-block-table :is(th, td):first-child {
		width: 100px;
	}

	:is(.p-article__body, .editor-styles-wrapper .is-root-container) .wp-block-table td:not(:first-child) {
		padding: var(--space-4);
		text-align: left;
	}
}

:is(.p-article__body, .editor-styles-wrapper .is-root-container) .wp-block-table figcaption {
	margin-top: var(--space-2);
	font-size: 12px;
	color: var(--c-text-muted);
}

/* --- Quote ------------------------------------------------------------------ */
:is(.p-article__body, .editor-styles-wrapper .is-root-container) > .wp-block-quote {
	margin: var(--space-6) 0 var(--space-6) var(--space-8);
	padding: 0 0 0 var(--space-6);
	color: var(--c-text-muted);
	border-left: 1px dashed var(--c-text-subtle);
}

:is(.p-article__body, .editor-styles-wrapper .is-root-container) > .wp-block-quote + * {
	margin-top: var(--space-6);
}

/* Quote → next section: 24 (quote bottom) + 40 (Figma) */
:is(.p-article__body, .editor-styles-wrapper .is-root-container) > .wp-block-quote + h2 {
	margin-top: var(--space-16);
}

:is(.p-article__body, .editor-styles-wrapper .is-root-container) .wp-block-quote > * + * {
	margin-top: 22px;
}

:is(.p-article__body, .editor-styles-wrapper .is-root-container) .wp-block-quote cite {
	display: block;
	font-size: 12px;
	font-style: normal;
}

/* --- Button (as the site's buttons) -------------------------------------------- */
:is(.p-article__body, .editor-styles-wrapper .is-root-container) > .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: var(--space-8);
}

:is(.p-article__body, .editor-styles-wrapper .is-root-container) > .wp-block-buttons + * {
	margin-top: var(--space-8);
}

:is(.p-article__body, .editor-styles-wrapper .is-root-container) .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 224px;
	min-height: 51px;
	padding: 15px 30px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--c-on-dark);
	text-decoration: none;
	background-color: var(--c-primary);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	transition: background-color var(--transition-fast);
}

:is(.p-article__body, .editor-styles-wrapper .is-root-container) .wp-block-button__link:hover {
	background-color: var(--c-primary-dark);
}

/* --- Separator -------------------------------------------------------------- */
:is(.p-article__body, .editor-styles-wrapper .is-root-container) > .wp-block-separator {
	height: 0;
	margin-block: var(--space-10);
	border: 0;
	border-top: 1px solid var(--c-border-light);
	opacity: 1;
}

/* --- 目次 (site only; built from the headings) --------------------------------- */
.p-article__body > .p-toc,
.p-article__body > .p-toc + * {
	margin-top: var(--space-10);
}

.p-toc {
	padding: var(--art-toc-pad);
	background-color: var(--c-toc-bg);
}

.p-toc__title {
	font-size: 23px;
	font-weight: 500;
	line-height: 1.6;
}

.p-toc__list,
.p-toc__sub {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-toc__list {
	gap: 10px;
	margin-top: 10px;
}

.p-toc__sub {
	gap: var(--space-1);
	margin-top: var(--space-1);
	padding-left: var(--space-4);
}

/* 「・」 hangs: a wrapped 2nd line starts under the text, not under the dot (design feedback 4/11) */
.p-toc__sub li {
	display: flex;
}

.p-toc__sub li::before {
	content: "・";
	flex-shrink: 0;
}

.p-toc a {
	color: var(--c-text);
	text-decoration: none;
}

.p-toc a:hover {
	color: var(--c-primary);
	text-decoration: underline;
}

/* --- Editor only: same column + title as the page ---------------------------- */
.editor-styles-wrapper {
	font-family: var(--font-ja);
	color: var(--c-text);
}

.editor-styles-wrapper .is-root-container,
.editor-styles-wrapper .editor-post-title {
	max-width: var(--container-article);
	margin-inline: auto;
}

.editor-styles-wrapper .editor-post-title {
	font-family: var(--font-ja);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.4;
}