/*
 * article.css — 投稿・固定ページ。記事ページで最も大事なファイル。
 *
 * ■ specificity の方針（重要）
 * `.entry-content` の中には 963 記事ぶんの旧マークアップが入っている。
 * 旧 STORK ブロック、手貼りの inline style、自作 HTML パーツ（.picico-blog-wrap 等、
 * ページ内 <style> で !important を多用）が混在する。
 * そこでテーマ側の本文スタイルは `:where(.entry-content) 要素` の形にして
 * specificity を「要素セレクタ1個ぶん（0,0,1）」まで落としてある。
 * こうすると .picico-blog-wrap h2（0,1,1）のような旧指定が必ず勝ち、
 * 新テーマが旧記事の見た目を壊さない。テーマ独自クラス（.pc-*）だけは
 * 通常どおりクラスセレクタで書く。
 *
 * `.entry-content` という名前自体も変えない（D-003。TypeSquare と旧「追加CSS」が
 * このセレクタ前提で書かれている）。
 */

/* ---------------------------------------------------------------- 記事ヘッダー */

.pc-entry__header {
	margin-block-end: var(--picico-space-lg);
	padding-block-end: var(--picico-space-md);
	border-bottom: 1px solid var(--picico-color-border);
}

.pc-entry__title {
	margin-block: var(--picico-space-xs) var(--picico-space-sm);
	font-size: var(--picico-font-size-xxl);
	line-height: var(--picico-line-height-tight);
}

.pc-entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--picico-space-xs) var(--picico-space-sm);
	margin: 0;
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-xs);
}

.pc-entry-meta__date--updated {
	color: var(--picico-color-accent-dark);
}

.pc-entry-meta__cat {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--picico-space-xs);
}

.pc-entry__eyecatch {
	margin-block-end: var(--picico-space-lg);
	border-radius: var(--picico-radius-md);
	overflow: hidden;
}

.pc-entry__eyecatch-img {
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------- 固定ページのテンプレート差 */

/*
 * ブリーフ §3.4。layout.css（Worker A 所有）には手を入れず、
 * 固定ページ側の幅はここで持つ。
 *   page-wide : 本文 760px 中央。alignwide / alignfull だけ wide(1200px) まで抜ける
 *   page-full : 本文 wide(1200px)
 *   page-lp   : フル幅（コンテナの最大幅と左右余白を外す）
 */

.pc-page--wide .pc-content {
	max-width: var(--picico-content-width);
}

/* 760px の外へ広げる。margin の % は包含ブロック（= .pc-content）の幅基準。 */
.pc-page--wide .entry-content .alignwide,
.pc-page--wide .entry-content .alignfull {
	width: min(var(--picico-wide-width), calc(100vw - var(--picico-gutter) * 2));
	max-width: none;
	margin-inline: calc(50% - min(var(--picico-wide-width), calc(100vw - var(--picico-gutter) * 2)) / 2);
}

.pc-page--full .pc-content {
	max-width: var(--picico-wide-width);
}

.pc-page--lp {
	max-width: none;
	padding-inline: 0;
}

.pc-page--lp .pc-content {
	max-width: none;
}

/* LP の本文は自前で余白を持つ自作 HTML が多い。素の段落だけ左右に余白を足す。 */
.pc-page--lp .entry-content > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, table, pre) {
	padding-inline: var(--picico-gutter);
}

/* ---------------------------------------------------------------- 本文のリズム */

.entry-content {
	font-size: var(--picico-font-size-md);
	line-height: var(--picico-line-height-body);
}

/* 直下の要素どうしの間隔。旧マークアップのブロックにも同じ間隔で効く。 */
.entry-content > * + * {
	margin-block-start: 1.6em;
}

:where(.entry-content) p {
	margin-block: 0;
}

:where(.entry-content) a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ---------------------------------------------------------------- 見出し */

/* h2: primary-pale の背景 + 左 4px の帯。 */
:where(.entry-content) h2 {
	margin-block: var(--picico-space-xl) var(--picico-space-md);
	padding: 0.6em 0.8em;
	border-left: 4px solid var(--picico-color-primary);
	border-radius: 0 var(--picico-radius-sm) var(--picico-radius-sm) 0;
	background-color: var(--picico-color-primary-pale);
	font-size: var(--picico-font-size-xl);
}

/* h3: 下線 2px。 */
:where(.entry-content) h3 {
	margin-block: var(--picico-space-lg) var(--picico-space-sm);
	padding-block-end: 0.3em;
	border-bottom: 2px solid var(--picico-color-primary);
	font-size: var(--picico-font-size-lg);
}

/* h4: 先頭に小さな正方形。 */
:where(.entry-content) h4 {
	margin-block: var(--picico-space-lg) var(--picico-space-sm);
	font-size: var(--picico-font-size-md);
}

:where(.entry-content) h4::before {
	content: "";
	display: inline-block;
	width: 0.55em;
	height: 0.55em;
	margin-inline-end: 0.5em;
	border-radius: 2px;
	background-color: var(--picico-color-accent);
	vertical-align: 0.05em;
}

:where(.entry-content) h5,
:where(.entry-content) h6 {
	margin-block: var(--picico-space-md) var(--picico-space-xs);
}

/* ---------------------------------------------------------------- リスト */

:where(.entry-content) ul,
:where(.entry-content) ol {
	padding-left: 1.6em;
}

:where(.entry-content) ul {
	list-style: disc;
}

:where(.entry-content) ol {
	list-style: decimal;
}

:where(.entry-content) li + li {
	margin-block-start: 0.4em;
}

:where(.entry-content) li::marker {
	color: var(--picico-color-primary);
}

:where(.entry-content) dt {
	font-weight: var(--picico-font-weight-bold);
}

:where(.entry-content) dd {
	margin-inline-start: 1.2em;
}

/* ---------------------------------------------------------------- 引用・コード・区切り */

:where(.entry-content) blockquote {
	margin-inline: 0;
	padding: var(--picico-space-sm) var(--picico-space-md);
	border-left: 4px solid var(--picico-color-primary-light);
	border-radius: 0 var(--picico-radius-sm) var(--picico-radius-sm) 0;
	background-color: var(--picico-color-surface-alt);
	color: var(--picico-color-text-muted);
}

:where(.entry-content) pre {
	padding: var(--picico-space-sm);
	overflow-x: auto;
	border: 1px solid var(--picico-color-border);
	border-radius: var(--picico-radius-sm);
	background-color: var(--picico-color-surface-alt);
	line-height: 1.7;
}

:where(.entry-content) code {
	padding: 0.1em 0.35em;
	border-radius: 4px;
	background-color: var(--picico-color-surface-alt);
}

:where(.entry-content) pre code {
	padding: 0;
	background: none;
}

:where(.entry-content) hr {
	margin-block: var(--picico-space-xl);
	height: 1px;
	border: 0;
	background-color: var(--picico-color-border);
}

/* ---------------------------------------------------------------- 画像・図版 */

:where(.entry-content) img {
	max-width: 100%;
	height: auto;
	border-radius: var(--picico-radius-sm);
}

:where(.entry-content) figure {
	margin-inline: 0;
}

:where(.entry-content) figcaption {
	margin-block-start: var(--picico-space-xs);
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-sm);
	text-align: center;
}

/* 旧記事の align 系（クラシックエディタが付ける）。 */
:where(.entry-content) .aligncenter {
	margin-inline: auto;
}

:where(.entry-content) .alignleft,
:where(.entry-content) .alignright {
	max-width: 100%;
}

/* ---------------------------------------------------------------- 表 */

/*
 * 素の <table> は JS なしで外側を包めないので、table 自身を
 * display:block + overflow-x:auto にして横スクロールさせる。
 * ブロックエディタの <figure class="wp-block-table"> があるときは
 * そちらに overflow を持たせ、table は table のままにする（blocks.css）。
 */
:where(.entry-content) table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: var(--picico-font-size-sm);
	-webkit-overflow-scrolling: touch;
}

:where(.entry-content) th,
:where(.entry-content) td {
	padding: 0.5em 0.8em;
	border: 1px solid var(--picico-color-border);
	vertical-align: top;
}

:where(.entry-content) th {
	background-color: var(--picico-color-primary-pale);
	text-align: left;
	white-space: nowrap;
}

:where(.entry-content) tbody tr:nth-child(even) {
	background-color: var(--picico-color-surface-alt);
}

/* ---------------------------------------------------------------- 埋め込み */

:where(.entry-content) iframe,
:where(.entry-content) video,
:where(.entry-content) embed,
:where(.entry-content) object {
	max-width: 100%;
}

/* 動画の埋め込みだけ 16:9 に固定する。地図など高さに意味がある iframe は触らない。 */
:where(.entry-content) iframe[src*="youtube.com"],
:where(.entry-content) iframe[src*="youtube-nocookie.com"],
:where(.entry-content) iframe[src*="youtu.be"],
:where(.entry-content) iframe[src*="player.vimeo.com"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* ---------------------------------------------------------------- 本文中のフォーム */

/*
 * Contact Form 7 などプラグインが本文に出すフォーム部品。
 * size="40" などの属性幅がそのまま効くと 320px で横スクロールが出るので、
 * 幅の上限だけ入れる。見た目はプラグイン側の CSS に任せる。
 */
:where(.entry-content) input,
:where(.entry-content) select,
:where(.entry-content) textarea {
	max-width: 100%;
}

:where(.entry-content) textarea {
	width: 100%;
}

/* ---------------------------------------------------------------- 記事フッター */

.pc-entry__footer {
	margin-block-start: var(--picico-space-xl);
}

.pc-entry__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--picico-space-xs);
	margin: 0;
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-sm);
}

.pc-entry__tags a {
	display: inline-flex;
	align-items: center;
	min-height: var(--picico-tap-size-inline);
	padding: 0.1em 0.8em;
	border: 1px solid var(--picico-color-border);
	border-radius: var(--picico-radius-pill);
	color: var(--picico-color-text-muted);
	text-decoration: none;
}

.pc-entry__tags a:hover {
	border-color: var(--picico-color-primary);
	color: var(--picico-color-primary);
}

.pc-entry__pages {
	margin-block-start: var(--picico-space-lg);
	text-align: center;
}

/* ---------------------------------------------------------------- シェア */

/*
 * .pc-share__list と .pc-btn の基本形は components.css（Worker A）が持つ。
 * ここは「記事のシェア」固有の見た目だけを足す。
 */

.pc-share__item {
	flex: 1 1 7.5rem;
}

.pc-share__btn {
	width: 100%;
	padding-inline: var(--picico-space-xs);
	border-color: var(--picico-color-border);
	background-color: var(--picico-color-surface);
	font-size: var(--picico-font-size-sm);
}

.pc-share__btn:hover {
	border-color: var(--picico-color-primary);
	color: var(--picico-color-primary);
}

.pc-share__btn[data-picico-share-state="done"] {
	border-color: var(--picico-color-primary);
	color: var(--picico-color-primary);
}

.pc-share__btn .pc-icon {
	flex: 0 0 auto;
}

.pc-share__fallback {
	margin-block-start: var(--picico-space-xs);
}

.pc-share__input {
	width: 100%;
	padding: 0.5em 0.7em;
	border: var(--picico-border-width) solid var(--picico-color-border);
	border-radius: var(--picico-radius-sm);
	font-size: var(--picico-font-size-sm);
}

/* ---------------------------------------------------------------- 著者ボックス */

/* 器（枠・余白・背景）は components.css の .pc-author。ここは中身だけ。 */

.pc-author__avatar {
	flex: 0 0 auto;
}

.pc-author__avatar img {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
}

.pc-author__text {
	min-width: 0;
}

.pc-author__name {
	margin: 0;
	font-weight: var(--picico-font-weight-bold);
}

.pc-author__position {
	margin-block-start: 0.2em;
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-sm);
}

.pc-author__description {
	margin-block-start: var(--picico-space-xs);
	font-size: var(--picico-font-size-sm);
	line-height: 1.8;
}

/* ---------------------------------------------------------------- 前後記事 */

/* 2カラムの grid は components.css の .pc-prevnext。ここは中の 1 枚ぶん。 */

.pc-prevnext {
	margin-block-start: var(--picico-space-xl);
}

.pc-prevnext__item {
	display: block;
	padding: var(--picico-space-sm);
	border: var(--picico-border-width) solid var(--picico-color-border);
	border-radius: var(--picico-radius-md);
	color: inherit;
	text-decoration: none;
}

.pc-prevnext__item:hover {
	border-color: var(--picico-color-primary);
	color: inherit;
}

.pc-prevnext__label {
	display: block;
	margin-block-end: var(--picico-space-xs);
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-xs);
}

.pc-prevnext__body {
	display: grid;
	grid-template-columns: 5rem minmax(0, 1fr);
	gap: var(--picico-space-sm);
	align-items: center;
}

.pc-prevnext__title {
	font-size: var(--picico-font-size-sm);
	font-weight: var(--picico-font-weight-bold);
	line-height: var(--picico-line-height-tight);
}

.pc-prevnext__item--next .pc-prevnext__label {
	text-align: right;
}

/* ---------------------------------------------------------------- CTA / コメント / 関連 */

.pc-related,
.pc-cta-area,
.pc-comments {
	margin-block-start: var(--picico-space-xxl);
}

.pc-comments__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-comments__closed {
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-sm);
}