/*
 * ATrACT ブランドスキン（サイト全体のデザイン統一）
 * 参考: YouTube「-古本屋アトラクト-」の世界観
 *   = 白〜クリーム基調 / 赤の差し色 / 黒の太い丸ゴシック / 角丸カード / 余白多め
 *
 * 元テーマ (Tortuga) の style.css の後に読み込み、見た目だけを上書きする。
 * HTML 構造はほぼ変更しないため、テーマ機能・プラグインへの影響は最小限。
 */

:root {
	--at-bg:        #f6f1e7; /* ページ背景（クリーム） */
	--at-surface:   #ffffff; /* カード・ヘッダー */
	--at-sand:      #efe7d6; /* 一段濃いクリーム（フッター/タグ等） */
	--at-ink:       #241f1b; /* 文字・見出し（温かみのある黒） */
	--at-muted:     #726c63; /* 補助テキスト */
	--at-red:       #e23b2e; /* ブランドの赤（アクセント） */
	--at-red-dark:  #c22e22; /* 赤のホバー/濃い赤 */
	--at-border:    #e8e0cf; /* 境界線（クリーム寄り） */
	--at-radius:    14px;
	--at-radius-sm: 10px;
	--at-shadow:    0 6px 18px rgba(60, 45, 20, 0.08);
	--at-shadow-sm: 0 2px 8px rgba(60, 45, 20, 0.07);
	--at-sans:    'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', -apple-system, BlinkMacSystemFont, 'Noto Sans JP', 'Yu Gothic', Meiryo, sans-serif;
	--at-display: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
}

/*--------------------------------------------------------------
# ベース
--------------------------------------------------------------*/
body,
body.custom-background {
	background-color: var(--at-bg) !important;
	background-image: none !important;
}

body {
	color: var(--at-ink);
	font-family: var(--at-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--at-display);
	color: var(--at-ink);
	letter-spacing: 0.01em;
}

/* リンクは黒基調・ホバーで赤（チャンネル同様、赤はアクセントに集中させる）。 */
a:link,
a:visited {
	color: var(--at-ink);
}

a:hover,
a:active {
	color: var(--at-red);
}

/* 本文中のリンクだけは赤で「押せる」ことを明示。 */
.entry-content a:link,
.entry-content a:visited {
	color: var(--at-red-dark);
}

.entry-content a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

blockquote {
	border: 1px solid var(--at-border);
	border-left: 4px solid var(--at-red);
	border-radius: var(--at-radius-sm);
	background: #fffdf8;
}

/*--------------------------------------------------------------
# ヘッダー（明るいヘッダー＋マスコットロゴ）
--------------------------------------------------------------*/
.site-header {
	background: var(--at-surface);
	color: var(--at-ink);
	border-bottom: 1px solid var(--at-border);
}

.header-main {
	padding-top: 0.9em;
	padding-bottom: 0.9em;
}

.site-branding {
	float: none;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0.3em 0;
	padding-left: 86px;
	min-height: 70px;
}

.atract-brand-mark {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	line-height: 0;
}

.atract-brand-mark img {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 3px 10px rgba(60, 45, 20, 0.14);
	border: 2px solid #fff;
}

.site-title,
.site-title a,
.site-title a:link,
.site-title a:visited {
	color: var(--at-red);
	text-transform: none;
	font-family: var(--at-display);
	font-weight: 900;
	line-height: 1.25;
}

.site-title a:hover,
.site-title a:active {
	color: var(--at-red-dark);
}

.site-description {
	color: var(--at-muted);
}

/*--------------------------------------------------------------
# ナビゲーション（明るいバー）
--------------------------------------------------------------*/
.primary-navigation-wrap {
	background: var(--at-surface);
	border-bottom: 4px solid var(--at-red);
	box-shadow: 0 2px 10px rgba(60, 45, 20, 0.06);
	color: var(--at-ink);
}

.main-navigation-menu a,
.main-navigation-menu a:link,
.main-navigation-menu a:visited {
	color: var(--at-ink);
	text-transform: none;
	font-family: var(--at-display);
	font-weight: 700;
}

.main-navigation-menu > li > a {
	margin: 6px 1px;
	border-radius: 999px;
}

.main-navigation-menu a:hover,
.main-navigation-menu a:active,
.main-navigation-menu li.current-menu-item > a {
	background: var(--at-red);
	color: #fff;
}

/* ドロップダウン */
.main-navigation-menu ul {
	background: var(--at-surface);
	border-top: 4px solid var(--at-red);
	box-shadow: var(--at-shadow);
	border-radius: 0 0 12px 12px;
	overflow: hidden;
}

.main-navigation-menu ul a,
.main-navigation-menu ul a:link,
.main-navigation-menu ul a:visited {
	color: var(--at-ink);
	border-bottom: 1px solid var(--at-border);
}

.main-navigation-menu ul a:hover,
.main-navigation-menu ul a:active {
	background: var(--at-red);
	color: #fff;
}

.main-navigation-menu li ul ul {
	border-left: 1px solid var(--at-border);
}

/*--------------------------------------------------------------
# 記事・固定ページ・ウィジェットのカード
--------------------------------------------------------------*/
.type-post,
.type-page,
.type-attachment,
.comments-area,
.site-main > article:not(.type-post):not(.type-page):not(.type-attachment),
.post-wrapper > .post-column > article:not(.type-post):not(.type-page):not(.type-attachment),
.widget {
	border: 1px solid var(--at-border);
	border-top: 1px solid var(--at-border);
	border-radius: var(--at-radius);
	background: var(--at-surface);
	box-shadow: var(--at-shadow);
}

.sticky {
	border-color: var(--at-red);
	box-shadow: 0 0 0 2px rgba(226, 59, 46, 0.18), var(--at-shadow);
}

/* 見出し（記事タイトル＝黒の太字 / ホバーで赤、章タイトル＝赤） */
.archive-title,
.page-title,
.entry-title {
	color: var(--at-ink);
	text-transform: none;
	font-family: var(--at-display);
	font-weight: 900;
}

.entry-title a:link,
.entry-title a:visited {
	color: var(--at-ink);
}

.entry-title a:hover,
.entry-title a:active {
	color: var(--at-red);
}

.widget-title {
	color: var(--at-red);
	text-transform: none;
	font-family: var(--at-display);
	font-weight: 800;
}

.widget-header {
	border-bottom: 2px solid var(--at-border);
	padding-bottom: 0.5em;
}

/* 画像も角丸に */
.type-post .wp-post-image,
.type-page .wp-post-image,
.post-wrapper .wp-post-image,
.widget img {
	border-radius: var(--at-radius-sm);
}

/*--------------------------------------------------------------
# ボタン・リンク類（ピル型・赤）
--------------------------------------------------------------*/
.more-link,
.more-link:link,
.more-link:visited {
	background: var(--at-red);
	color: #fff;
	border-radius: 999px;
	font-family: var(--at-display);
	font-weight: 700;
	box-shadow: var(--at-shadow-sm);
}

.more-link:hover,
.more-link:active {
	background: var(--at-red-dark);
	color: #fff;
}

/* ページネーション */
.pagination a,
.pagination .current {
	border-radius: 999px;
	font-family: var(--at-display);
	font-weight: 700;
}

.pagination a,
.pagination a:link,
.pagination a:visited {
	background: var(--at-sand);
	color: var(--at-ink);
}

.pagination a:hover,
.pagination a:active,
.pagination .current {
	background: var(--at-red);
	color: #fff;
}

/* タグクラウド / 記事タグ */
.widget_tag_cloud .tagcloud a,
.entry-tags .meta-tags a {
	background: var(--at-sand);
	color: var(--at-ink);
	border-radius: 999px;
	text-transform: none;
}

.widget_tag_cloud .tagcloud a:link,
.widget_tag_cloud .tagcloud a:visited,
.entry-tags .meta-tags a:link,
.entry-tags .meta-tags a:visited {
	color: var(--at-ink);
}

.widget_tag_cloud .tagcloud a:hover,
.widget_tag_cloud .tagcloud a:active,
.entry-tags .meta-tags a:hover,
.entry-tags .meta-tags a:active {
	background: var(--at-red);
	color: #fff;
}

/* Gutenberg のプライマリ色 */
.has-primary-background-color {
	background-color: var(--at-red) !important;
}
.has-primary-color {
	color: var(--at-red) !important;
}

/*--------------------------------------------------------------
# 検索フォーム
--------------------------------------------------------------*/
.search-form .search-field {
	border: 1px solid var(--at-border);
	border-radius: 999px;
	background: #fff;
}

.search-form .search-submit {
	background: var(--at-red);
	border-radius: 0 999px 999px 0;
}

/*--------------------------------------------------------------
# フッター（明るいサンド + 赤の上線）
--------------------------------------------------------------*/
.footer-wrap {
	background: var(--at-sand);
	border-top: 4px solid var(--at-red);
}

.site-footer {
	color: var(--at-ink);
}

.site-footer a:link,
.site-footer a:visited {
	color: var(--at-red-dark);
	border-bottom: 1px dotted rgba(36, 31, 27, 0.3);
}

.site-footer a:hover,
.site-footer a:focus,
.site-footer a:active {
	color: var(--at-red);
}

/*--------------------------------------------------------------
# レスポンシブ
--------------------------------------------------------------*/

/* ナビが縦並びになるブレークポイント（テーマのモバイルメニュー幅に合わせる） */
@media only screen and (max-width: 60em) {
	/* ナビバーの上下に余白を確保し、トグルを中央寄せのバーとして見せる。 */
	.primary-navigation-wrap {
		padding: 0.7em 0;
	}

	/* ハンバーガー: 中央寄せの「メニュー」ラベル付きピルにして、中央寄せヘッダーと揃える。 */
	.main-navigation-toggle,
	.main-navigation-toggle:hover,
	.main-navigation-toggle:focus,
	.main-navigation-toggle:active {
		background: var(--at-red);
		border-radius: 999px;
		font-family: var(--at-display);
		font-weight: 700;
		color: #fff;
	}

	.main-navigation-toggle {
		display: flex;
		flex-direction: row-reverse; /* アイコン(:after)を左、ラベル(:before)を右に */
		align-items: center;
		justify-content: center;
		gap: 0.45em;
		float: none;
		width: max-content;
		max-width: 100%;
		margin: 0 auto; /* 中央寄せ */
		padding: 0.55em 1.6em;
		font-size: 1rem;
		line-height: 1;
	}

	.main-navigation-toggle:before {
		content: 'メニュー';
		line-height: 1;
	}

	.main-navigation-toggle:after {
		float: none;
		margin: 0;
		font-size: 22px;
		line-height: 1;
	}

	.main-navigation-menu {
		margin-top: 0.7em;
		border-top: 4px solid var(--at-red);
	}

	/* 縦並びのときはピル型をやめて全幅の行に */
	.main-navigation-menu > li > a {
		margin: 0;
		border-radius: 0;
		border-bottom: 1px solid var(--at-border);
	}

	.main-navigation-menu ul {
		box-shadow: none;
		border-radius: 0;
		border-top: none;
	}
}

/* スマホ：ヘッダーのマスコットとタイトルを中央寄せに */
@media only screen and (max-width: 40em) {
	.site-branding {
		align-items: center;
		text-align: center;
		padding-left: 0;
		padding-top: 78px;
		min-height: 0;
	}

	.atract-brand-mark {
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.atract-brand-mark img {
		width: 64px;
		height: 64px;
	}

	.type-post,
	.type-page,
	.type-attachment,
	.widget {
		border-radius: var(--at-radius-sm);
	}
}