/*
Theme Name: code-d5.org
Theme URI: https://code-d5.org/
Author: domdom
Description: code-d5.org 専用のクラシックテーマ。WordPress は管理画面としてのみ使い、公開は coded5-publisher による静的HTMLで行う構成に合わせて、必要なマークアップとCSSだけを出す。一覧と個別記事で同じテンプレートパートとクラスを使うことで、遷移時のレイアウトのズレを構造的に防いでいる。
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: coded5
*/

/* ==========================================================================
   目次
   1. リセットと基本
   2. レイアウト（コンテナ / サイドバー）
   3. ヘッダー
   4. 記事パーツ（一覧と個別で共有）★シームレス化の要
   5. 本文の中身
   6. サイドバー
   7. ページャ / フッター
   8. アクセシビリティ
   9. レスポンシブ
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. デザイントークンの対応付け

   値の正は theme.json 側にある。ここは長い --wp--custom--* を
   短い別名に置き換えているだけで、数値は一切持たない。
   サイズや余白を変えるときは theme.json を直せば、公開画面と
   ブロックエディタの両方に反映される。
   -------------------------------------------------------------------------- */

:root {
	--c5-container-max:      var(--wp--custom--container--max);
	--c5-gutter:             var(--wp--custom--container--gutter);
	--c5-sidebar-width:      var(--wp--custom--sidebar--width);
	--c5-sidebar-pad:        var(--wp--custom--sidebar--pad);
	--c5-primary-max:        var(--wp--custom--primary--max);
	--c5-primary-pad:        var(--wp--custom--primary--pad);
	--c5-column-gap:         var(--wp--custom--sidebar--gap);
	--c5-block-gap:          var(--wp--custom--block--gap);

	--c5-size-site-title:    var(--wp--custom--size--site-title);
	--c5-size-site-desc:     var(--wp--custom--size--site-desc);
	--c5-size-post-title:    var(--wp--custom--size--post-title);
	/* WordPress は theme.json の custom キーをケバブケース化するとき、
	   英字と数字の間にハイフンを入れる。theme.json の `h2` は
	   `--wp--custom--size--h2` ではなく `--wp--custom--size--h-2` になる。
	   `postTitle` → `post-title` は素直に変換されるため気づきにくい。 */
	--c5-size-h2:            var(--wp--custom--size--h-2);
	--c5-size-h3:            var(--wp--custom--size--h-3);
	--c5-size-h4:            var(--wp--custom--size--h-4);

	--c5-heading-gap-top:    var(--wp--custom--gap--heading-top);
	--c5-heading-gap-bottom: var(--wp--custom--gap--heading-bottom);
	--c5-para-gap:           var(--wp--custom--gap--para);
	--c5-post-sep-gap:       var(--wp--custom--gap--post-separator);
	--c5-pager-top:          var(--wp--custom--gap--pager-top);
	--c5-content-top:        var(--wp--custom--gap--content-top);

	--c5-font-body:          var(--wp--preset--font-family--body);
	--c5-font-mono:          var(--wp--preset--font-family--mono);

	--c5-color-text:         var(--wp--preset--color--text);
	--c5-color-heading:      var(--wp--preset--color--heading);
	--c5-color-bg:           var(--wp--preset--color--base);
	/* リンクは Astra 実測の #045CB4。パレットの primary(#0067FF) は
	   検索ボタンなどのアクセントに使い、リンクとは分けている。 */
	--c5-color-link:         var(--wp--preset--color--link);
	--c5-color-accent:       var(--wp--preset--color--primary);
	--c5-color-link-hover:   var(--wp--preset--color--primary-dark);
	--c5-color-muted:        var(--wp--preset--color--muted);
	--c5-color-ink:          var(--wp--preset--color--ink);
	--c5-color-border:       var(--wp--preset--color--border);
	--c5-color-rule:         var(--wp--preset--color--accent);
	--c5-color-code-bg:      var(--wp--preset--color--code);
}

/* --------------------------------------------------------------------------
   1. リセットと基本
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* 縦スクロールバーを常に出す。
   ページの高さによってスクロールバーが出たり消えたりすると、
   中央寄せのコンテナが左右に動いてしまうため。 */
html {
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;

	/* Astra が html{font-size:106.25%} を持っており、1rem = 17px を前提に
	   全体のサイズが決まっている。見た目を合わせるため同じ基準にする。
	   これを 100% に戻すと全体が約6%小さくなる。 */
	font-size: 106.25%;
}

body {
	margin: 0;
	font-family: var(--c5-font-body);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	line-height: 1.65;
	color: var(--c5-color-text);
	background-color: var(--c5-color-bg);
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

a {
	color: var(--c5-color-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

a:hover,
a:focus {
	color: var(--c5-color-link-hover);
}

/* --------------------------------------------------------------------------
   2. レイアウト
   -------------------------------------------------------------------------- */

.c5-container {
	width: 100%;
	max-width: var(--c5-container-max);
	margin-inline: auto;
	padding-inline: var(--c5-gutter);
}

/* ヘッダーからの立ち上がりは、記事どうしの間隔とは別物として持つ。
   Astra はここを 68px 取っている。 */
.c5-site-content {
	display: flex;
	gap: var(--c5-column-gap);
	align-items: flex-start;
	padding-block-start: var(--c5-content-top);
	padding-block-end: var(--c5-block-gap);
}

/* 本文カラムは 1024px を上限とし、狭い画面では縮む。
   サイドバーは 300px を基準に、余った幅を吸収する（flex-grow:1）。
   こうしないと広い画面で右端に余白が残り、左右が非対称に見える。
   サイドバーの中身は右寄せなので、広がっても見た目は変わらない。 */
/* 基準幅を明示し、伸びない（grow:0）ようにする。
   auto のままだと中身の量で基準が決まり、狙った幅にならなかった。

   max-width は border-box なので padding を含む。本文の実効幅を 1024px に
   保つため 1024 + 40(padding-right) = 1064px を指定している。
   padding-right が無いと、コードブロックや hr が区切り線に接して
   サイドバーに食い込んで見える。 */
.c5-primary {
	flex: 0 1 var(--c5-primary-max);
	max-width: var(--c5-primary-max);
	min-width: 0; /* flex 子要素がはみ出さないように */
	padding-right: var(--c5-primary-pad);
	border-right: 1px solid var(--c5-color-border);
}

/* 余った幅はサイドバーが吸収する（中身は右寄せなので見た目は変わらない） */
.c5-secondary {
	flex: 1 1 var(--c5-sidebar-width);
	min-width: 240px;
	padding-inline-start: var(--c5-sidebar-pad);
	border-left: 1px solid var(--c5-color-border);
	margin-left: -1px;
}

/* --------------------------------------------------------------------------
   3. ヘッダー
   -------------------------------------------------------------------------- */

.c5-header {
	border-bottom: 1px solid var(--c5-color-border);
	background-color: var(--c5-color-bg);
}

.c5-header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.25rem;
}

/* Astra 実測に合わせる。サイト名は記事タイトル(29.75px)より必ず大きく保つ。
   小さいと階層が逆転して、記事名のほうが主に見えてしまう。 */
.c5-site-title {
	margin: 0;
	font-size: var(--c5-size-site-title);
	font-weight: 700;
	line-height: 1.2;
	color: var(--c5-color-heading);
}

.c5-site-title a {
	color: inherit;
	text-decoration: none;
}

.c5-site-description {
	margin: 0.25rem 0 0;
	font-size: var(--c5-size-site-desc);
	color: var(--c5-color-text);
}

.c5-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	justify-content: flex-end;
}

.c5-nav a {
	text-decoration: none;
}

.c5-nav a:hover,
.c5-nav a:focus {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   4. 記事パーツ（一覧と個別で共有）

   ここが移行のいちばんの目的。
   見出しの「レベル」と「見た目」を切り離し、スタイルはクラスで決める。
   一覧では h2、個別では h1 を出すが、どちらも .c5-post-title なので
   フォントサイズも余白も完全に一致する。

   Astra ではここが .ast-excerpt-container と .entry-content の2スコープに
   分かれていたため、同じ「記事本文の h2」が18pxと22pxに割れていた。
   -------------------------------------------------------------------------- */

.c5-post {
	margin-block-end: var(--c5-block-gap);
}

/* 一覧で記事が連続するときの区切り。個別記事には出ない */
/* 区切り線はサイト内で1種類に統一する。
   本文とサイドバーの境界（1px / --c5-color-border）を基準にした。 */
.c5-post + .c5-post {
	border-top: 1px solid var(--c5-color-border);
	padding-block-start: var(--c5-post-sep-gap);
	margin-block-start: var(--c5-post-sep-gap);
}

.c5-post-head {
	margin-block-end: 1rem;
}

/* 一覧(h2)と個別(h1)で同じ見た目にする */
.c5-post-title {
	margin: 0;
	font-size: var(--c5-size-post-title);
	font-weight: 700;
	line-height: 1.4;
}

.c5-post-title a {
	color: inherit;
	text-decoration: none;
}

.c5-post-title a:hover,
.c5-post-title a:focus {
	text-decoration: underline;
}

/* Astra に合わせ、日付もカテゴリーもリンク色。区切りは「/」 */
.c5-post-meta {
	margin-block-start: 0.5rem;
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--c5-color-link);
}

.c5-post-meta a {
	color: var(--c5-color-link);
	text-decoration: none;
}

.c5-post-meta a:hover,
.c5-post-meta a:focus {
	text-decoration: underline;
}

.c5-post-meta > * + *::before {
	content: "/";
	margin-inline: 0.4em;
	color: var(--c5-color-link);
}

.c5-post-thumb {
	margin-block-end: 1.25rem;
}

.c5-post-thumb img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 6px;
}

/* 本文。一覧では more まで、個別では全文。同じCSSが当たる。
   padding-left の類は一切付けない（Astra のズレの原因がこれだった） */
.c5-post-body {
	padding: 0;
}

/* 本文中のリンクは既定で下線を出さず、ホバー時のみ出す。
   サイドバーのリンクと同じ挙動に揃えている。 */
.c5-post-body a {
	text-decoration: none;
}

.c5-post-body a:hover,
.c5-post-body a:focus {
	text-decoration: underline;
}

/* 「続きを読む」。ここだけは一覧にしか出ないので、余白を最小にして
   遷移時の段差を減らす */
.c5-more {
	margin-block-start: 1.25rem;
}

.c5-more a {
	display: inline-block;
	font-weight: 700;
	text-decoration: none;
}

.c5-more a:hover,
.c5-more a:focus {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   5. 本文の中身

   theme.json でも見出しサイズを定義しているが、theme.json はブロックの
   タイプセレクタにしか効かない。クラシックエディタ由来の素の h2 などにも
   確実に当てるため、ここでも同じ値を書いている。値を変えるときは
   theme.json と両方を直すこと。
   -------------------------------------------------------------------------- */

.c5-post-body > *:first-child {
	margin-block-start: 0;
}

.c5-post-body > *:last-child {
	margin-block-end: 0;
}

.c5-post-body p {
	margin-block: 0 var(--c5-para-gap);
}

.c5-post-body :where(h1, h2, h3, h4, h5, h6) {
	margin-block: var(--c5-heading-gap-top) var(--c5-heading-gap-bottom);
	line-height: 1.4;
	clear: none;
}

.c5-post-body :where(h2) { font-size: var(--c5-size-h2); }
.c5-post-body :where(h3) { font-size: var(--c5-size-h3); }
.c5-post-body :where(h4),
.c5-post-body :where(h5),
.c5-post-body :where(h6) { font-size: var(--c5-size-h4); }

.c5-post-body ul,
.c5-post-body ol {
	margin-block: 0 var(--c5-para-gap);
	padding-inline-start: 1.5em;
}

.c5-post-body li + li {
	margin-block-start: 0.5em;
}

.c5-post-body blockquote {
	margin-inline: 0;
	padding-inline-start: 1.25em;
	border-inline-start: 4px solid var(--c5-color-rule);
	color: var(--c5-color-muted);
}

.c5-post-body figure {
	margin-inline: 0;
	margin-block: 2em 2em;
}

.c5-post-body figcaption {
	margin-block-start: 0.5em;
	font-size: 0.85rem;
	color: var(--c5-color-muted);
	text-align: center;
}

.c5-post-body :where(pre, code) {
	font-family: var(--c5-font-mono);
}

/* Astra 実測に合わせる: 背景 #ECEFF3 / 角丸なし / padding 1.6em。
   等幅フォントだけは自前のスタックを使う（Astra は Courier 10 Pitch）。 */
.c5-post-body pre {
	overflow-x: auto;
	padding: 1.6em;
	border-radius: 0;
	background-color: var(--c5-color-code-bg);
	color: var(--c5-color-text);
	font-size: 1rem;
	line-height: 1.5;
}

.c5-post-body :not(pre) > code {
	padding: 3px 6px;
	border-radius: 0;
	background-color: var(--c5-color-code-bg);
	color: var(--c5-color-text);
	font-size: 1em;
}

/* (2) 本文中の区切り線は短く中央寄せ（Astra 実測: 幅100px・中央）。
   色と太さはサイト共通の 1px / --c5-color-border に揃える。 */
.c5-post-body hr,
.c5-post-body .wp-block-separator {
	width: 100px;
	max-width: 100px;
	margin: 2.5em auto;
	height: 0;
	border: 0;
	border-top: 1px solid var(--c5-color-border);
	background: none;
}

.c5-post-body table {
	width: 100%;
	border-collapse: collapse;
	margin-block-end: var(--c5-para-gap);
}

.c5-post-body :where(th, td) {
	padding: 0.5em 0.75em;
	border: 1px solid var(--c5-color-border);
	text-align: start;
}

/* 記事末尾のタグ。以前は mu-plugin がインラインスタイルで Astra の
   CSS 変数を参照していたが、テーマへ取り込んだので素直に書ける。 */
.c5-tags {
	margin-block-start: 2.5rem;
	font-size: 0.8rem;
	color: var(--c5-color-link);
}

.c5-tag {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 4px 12px;
	border-radius: 3px;
	background-color: var(--c5-color-rule);
	color: var(--c5-color-heading);
	font-size: 0.8rem;
	line-height: 1.2;
	text-decoration: none;
}

.c5-tag:hover,
.c5-tag:focus {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   6. サイドバー
   -------------------------------------------------------------------------- */

.c5-widget {
	margin-block-end: 1.5rem;
}

/* Astra はサイドバーの見出し（Author / Archives / Category）を
   本文見出しと同じくらい大きく出していた。階層が分かるよう合わせる。 */
.c5-widget :where(h1, h2, h3, h4, h5, h6) {
	margin-block: 0 0.5rem;
	font-size: var(--c5-size-h2);
	line-height: 1.3;
}

.c5-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.c5-widget li {
	margin-block-end: 0.35rem;
}

/* 現行サイドバーは右寄せで組んである（ウィジェット側の設定を尊重しつつ、
   カテゴリーとアーカイブのリストだけ揃える） */
/* 余白は .c5-widget 側だけが持つ。ここでも margin を足すと二重になり、
   ウィジェット間の間隔が不揃いに見えた。 */
.c5-secondary .wp-block-categories,
.c5-secondary .wp-block-archives {
	text-align: right;
	margin-block: 0;
}

/* 中身を空にしたウィジェット（coded5_drop_blank_widget が処理）は
   枠ごと消して、margin も出さない。 */
.c5-secondary .c5-widget:empty {
	display: none;
	margin: 0;
}

.c5-secondary .wp-block-search__inside-wrapper {
	display: flex;
	gap: 0.25rem;
}

.c5-secondary .wp-block-search__input {
	min-width: 0;
	flex: 1 1 auto;
	padding: 0.4em 0.6em;
	border: 1px solid var(--c5-color-border);
	border-radius: 4px;
}

.c5-secondary .wp-block-search__button {
	padding: 0.4em 0.9em;
	border: 1px solid var(--c5-color-accent);
	border-radius: 4px;
	background-color: var(--c5-color-accent);
	color: #fff;
	cursor: pointer;
}

.c5-secondary .wp-block-search__button:hover,
.c5-secondary .wp-block-search__button:focus {
	background-color: var(--c5-color-link-hover);
	border-color: var(--c5-color-link-hover);
}

.c5-secondary .wp-block-social-link:hover {
	transform: none;
}

/* サイドバーの区切りウィジェット。
   ブロックが Astra のパレットクラス（has-ast-global-color-5-background-color）を
   持っており、coded5 では解決できずブラウザ既定の濃い hr 色に落ちていた。
   サイト共通の区切り線と同じ 1px / --c5-color-border に揃える。 */
.c5-secondary hr,
.c5-secondary .wp-block-separator {
	width: 100%;
	max-width: none;
	height: 0;
	margin-block: 1.5rem;
	border: 0;
	border-top: 1px solid var(--c5-color-border);
	background: none;
}

/* Astra に合わせ、サイドバーのリンクは既定で下線を出さない */
.c5-secondary a {
	text-decoration: none;
}

.c5-secondary a:hover,
.c5-secondary a:focus {
	text-decoration: underline;
}

/* アーカイブ・検索結果の見出し。
   下に区切り線を置いて、直後の記事タイトルとくっつかないようにする。 */
.c5-archive-head {
	margin-block-end: var(--c5-post-sep-gap);
	padding-block-end: var(--c5-post-sep-gap);
	border-bottom: 1px solid var(--c5-color-border);
}

.c5-archive-desc {
	margin-block-start: 0.5rem;
	color: var(--c5-color-muted);
}

/* 関連記事。Astra の設定に合わせて4件・デスクトップ4列。 */
.c5-related {
	margin-block-start: var(--c5-post-sep-gap);
	padding-block-start: var(--c5-post-sep-gap);
	border-top: 1px solid var(--c5-color-border);
}

.c5-related-title {
	margin-block: 0 1.5rem;
	font-size: var(--c5-size-h2);
}

.c5-related-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c5-related-item {
	margin: 0;
}

.c5-related-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.c5-related-link:hover .c5-related-name,
.c5-related-link:focus .c5-related-name {
	text-decoration: underline;
}

.c5-related-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 6px;
	background-color: var(--c5-color-code-bg);
}

.c5-related-thumb + .c5-related-name {
	margin-block-start: 0.6rem;
}

.c5-related-name {
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--c5-color-heading);
}

.c5-related .c5-post-meta {
	margin-block-start: 0.3rem;
	color: var(--c5-color-muted);
}

.c5-related .c5-post-meta > * + *::before {
	content: "/";
	margin-inline: 0.4em;
	color: var(--c5-color-muted);
}

@media (max-width: 921px) {
	.c5-related-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.c5-related-list { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   7. ページャ / フッター
   -------------------------------------------------------------------------- */

/* ページャー。Astra 実測に合わせる:
   本文領域内で中央寄せ、42x42 の正方形、現在ページは鮮やかな青地に白文字。
   上に区切り線を置いて記事一覧と切り分ける。 */
.c5-pagination {
	margin-block-start: var(--c5-post-sep-gap);
	padding-block-start: var(--c5-pager-top);
	border-top: 1px solid var(--c5-color-border);
	text-align: center;
}

.c5-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
}

.c5-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 0.5em;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--c5-color-text);
	font-size: 1.07rem;
	text-decoration: none;
}

.c5-pagination a.page-numbers:hover,
.c5-pagination a.page-numbers:focus {
	background-color: var(--c5-color-rule);
}

.c5-pagination .page-numbers.current {
	background-color: var(--c5-color-accent);
	color: #fff;
}

/* Astra は数字を中央に置き、前後リンクだけを両端へ寄せている。
   auto マージンだと余白を全部吸って数字が片寄るため、前後リンクを
   流れから外して両端に固定する。こうすると数字は純粋に中央のまま。 */
.c5-pagination .nav-links {
	position: relative;
}

.c5-pagination .prev.page-numbers,
.c5-pagination .next.page-numbers {
	position: absolute;
	top: 0;
}

.c5-pagination .prev.page-numbers { inset-inline-start: 0; }
.c5-pagination .next.page-numbers { inset-inline-end: 0; }

/* 狭い画面では重なるので流れに戻す */
@media (max-width: 600px) {
	.c5-pagination .prev.page-numbers,
	.c5-pagination .next.page-numbers {
		position: static;
	}
}

.c5-post-nav {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-block-start: var(--c5-block-gap);
	padding-block-start: 1.5rem;
	border-top: 1px solid var(--c5-color-border);
	font-size: 0.9rem;
}

.c5-post-nav > div {
	max-width: 48%;
}

.c5-post-nav-next {
	text-align: right;
}

.c5-post-nav a {
	display: block;
	text-decoration: none;
}

.c5-nav-label {
	display: block;
	font-size: 0.85rem;
	color: var(--c5-color-muted);
}

.c5-nav-title {
	display: block;
	margin-block-start: 0.2rem;
}

.c5-post-nav a:hover,
.c5-post-nav a:focus {
	text-decoration: underline;
}

.c5-footer {
	border-top: 1px solid var(--c5-color-border);
	padding-block: 2rem;
	font-size: 0.8rem;
	color: var(--c5-color-muted);
	text-align: center;
}

.c5-footer p {
	margin: 0 0 0.35rem;
}

/* ページの先頭へ戻るボタン。
   既定は非表示で、1画面ぶんスクロールすると出る（制御は back-to-top.js）。
   JS が動かない環境では出ないままになるが、それで困る機能ではない。 */
.c5-to-top {
	position: fixed;
	inset-block-end: 24px;
	inset-inline-end: 24px;
	z-index: 50;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;

	border: 1px solid var(--c5-color-border);
	border-radius: 50%;
	background-color: var(--c5-color-bg);
	color: var(--c5-color-link);
	cursor: pointer;

	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.c5-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.c5-to-top:hover,
.c5-to-top:focus-visible {
	background-color: var(--c5-color-accent);
	border-color: var(--c5-color-accent);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.c5-to-top {
		transition: none;
	}
}

@media print {
	.c5-to-top {
		display: none;
	}
}

/* 日付アーカイブの隣接ナビ。記事の前後リンクと同じ見た目にする。 */
.c5-archive-nav {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-block-start: var(--c5-post-sep-gap);
	padding-block-start: var(--c5-pager-top);
	border-top: 1px solid var(--c5-color-border);
	font-size: 0.9rem;
}

.c5-archive-nav-next {
	text-align: right;
	margin-inline-start: auto;
}

.c5-archive-nav a {
	display: block;
	text-decoration: none;
}

.c5-archive-nav a:hover,
.c5-archive-nav a:focus {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   8. アクセシビリティ
   -------------------------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.c5-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: 0.75em 1em;
	background-color: var(--c5-color-bg);
	border: 2px solid var(--c5-color-link);
}

.c5-skip-link:focus {
	left: 1rem;
	top: 1rem;
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--c5-color-link);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   9. レスポンシブ
   -------------------------------------------------------------------------- */

@media (max-width: 921px) {
	.c5-site-content {
		flex-direction: column;
	}

	.c5-primary,
	.c5-secondary {
		flex: 1 1 auto;
		max-width: none;
		width: 100%;
		border: 0;
		margin-left: 0;
		padding-inline: 0;
	}

	.c5-header-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.c5-nav ul {
		justify-content: flex-start;
	}
}

@media print {
	.c5-secondary,
	.c5-nav,
	.c5-pagination,
	.c5-post-nav {
		display: none;
	}
}