/*
Theme Name: Taiyo Pop
Theme URI: https://taiyokaigo.com/blog/
Author: 太陽介護サービス（有限会社あまくさ）
Author URI: https://taiyokaigo.com/
Description: 太陽介護サービス本体サイト（https://taiyokaigo.com/）と完全に統一したブログ用テーマ。本体の共通スタイル taiyo.css・共通スクリプト taiyo.js・Google Fonts（Bricolage Grotesque / Zen Maru Gothic / Noto Sans JP）をそのまま読み込み、本体のヘッダー（☀ 太陽介護サービス＋ドロワーナビ）とフッターのマークアップ・クラスを踏襲しています。オレンジ主役・白基調・ブロブ・手書き風のポップなデザイン。木更津・地域密着の介護事業者向け。
Version: 1.0.3
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: taiyo-pop
Tags: blog, custom-menu, featured-images, translation-ready, two-columns, right-sidebar

このファイルの「下」にあるCSSは、本体の taiyo.css に *追記* する形のブログ専用の微調整だけを記述しています。
色・フォント・ボタン・ブロブ等の本体定義は taiyo.css 側（functions.php で enqueue）が担当します。
本体に存在しない CSS 変数は使わず、taiyo.css が定義する --orange / --green / --ink / --cream などをそのまま再利用します。
*/

/* ══════════════════════════════════════════════════════════════
   Taiyo Pop ― ブログ専用の微調整（本体 taiyo.css への追記）
   本体に無いクラスだけを定義し、本体のクラス/変数は再利用する
   ══════════════════════════════════════════════════════════════ */

/* メインの段組み（記事一覧・記事詳細＋サイドバー） */
.blog-shell{ padding: 128px 0 30px; }
@media(max-width:900px){ .blog-shell{ padding: 110px 0 30px; } }

.blog-layout{ display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 40px; align-items: start; }
@media(max-width:960px){ .blog-layout{ grid-template-columns: 1fr; gap: 32px; } }

/* 本体トップへ戻る導線（目立つ帯） */
.back-home{ display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-jp-head); font-weight: 700; font-size: 13.5px; color: var(--green-deep); background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 8px 16px 8px 14px; box-shadow: 3px 3px 0 var(--ink); transition: transform .12s, box-shadow .12s, color .15s; margin-bottom: 22px; }
.back-home:hover{ transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink); color: var(--orange-deep); }
.back-home .ar{ font-family: var(--font-disp); font-weight: 800; }

/* ページ見出し（一覧／アーカイブ／検索） */
.blog-head{ margin-bottom: 34px; }
.blog-head .h2{ margin-top: 14px; }
.blog-head .lead{ margin-top: 12px; max-width: 40em; }

/* 記事カード一覧（本体「太陽の人たち」のカード風＝.pcard を踏襲） */
.post-grid{ display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
@media(max-width:680px){ .post-grid{ grid-template-columns: 1fr; } }

.post-card{ background: #fff; border: 3px solid var(--ink); border-radius: 20px; box-shadow: 6px 6px 0 var(--ink); overflow: hidden; display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s; }
.post-card:nth-child(odd){ transform: rotate(-1deg); }
.post-card:nth-child(even){ transform: rotate(1deg); }
.post-card:hover{ transform: translateY(-4px) rotate(0deg); box-shadow: 9px 11px 0 var(--ink); }
@media(max-width:560px){ .post-card{ transform: none !important; } }

.post-card .pcat{ background: var(--orange); }
.post-card .pphoto{ height: 188px; }
.post-card .pphoto img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card .pphoto .noimg{ width: 100%; height: 100%; display: grid; place-items: center; font-size: 46px; background: var(--cream-2); }
.post-card .pbody{ padding: 18px 18px 20px; }
.post-card .ptitle{ font-family: var(--font-jp-head); font-weight: 900; font-size: 17px; line-height: 1.5; margin-bottom: 8px; }
.post-card .ptitle a:hover{ color: var(--orange-deep); }
.post-card .pexcerpt{ font-size: 13px; color: var(--ink-soft); line-height: 1.85; margin-bottom: 12px; }
.post-card .pmeta{ margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--ink-soft); font-family: var(--font-jp-head); font-weight: 700; }
.post-card .pmeta time{ display: inline-flex; align-items: center; gap: 5px; }

/* 記事詳細の本文タイポグラフィ（見出し・引用・画像・リスト・表の余白） */
.article-card{ background: #fff; border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 7px 7px 0 var(--ink); padding: 34px 34px 40px; overflow: hidden; }
@media(max-width:600px){ .article-card{ padding: 24px 20px 30px; } }

.article-head{ margin-bottom: 24px; }
.article-cat{ display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-jp-head); font-weight: 900; font-size: 12.5px; color: #fff; background: var(--orange); border: 2px solid var(--ink); border-radius: 999px; padding: 5px 14px; box-shadow: 2px 2px 0 var(--ink); }
.article-title{ font-family: var(--font-jp-head); font-weight: 900; font-size: clamp(24px,3.8vw,38px); line-height: 1.35; margin: 16px 0 12px; }
.article-meta{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--font-jp-head); font-weight: 700; font-size: 12.5px; color: var(--ink-soft); }
.article-meta time{ display: inline-flex; align-items: center; gap: 6px; }

.article-thumb{ margin: 0 0 28px; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--ink); overflow: hidden; }
.article-thumb img{ width: 100%; height: auto; display: block; }

/* 記事本文プロース */
.prose{ font-size: 15.5px; color: var(--ink); line-height: 2.05; }
.prose > *:first-child{ margin-top: 0; }
.prose p{ margin: 0 0 18px; text-wrap: pretty; overflow-wrap: anywhere; }
.prose h2{ font-family: var(--font-jp-head); font-weight: 900; font-size: 22px; line-height: 1.5; margin: 40px 0 14px; padding-left: 16px; border-left: 7px solid var(--lime); }
.prose h3{ font-family: var(--font-jp-head); font-weight: 900; font-size: 18px; line-height: 1.5; margin: 30px 0 10px; display: flex; align-items: baseline; gap: 8px; }
.prose h3::before{ content: "✿"; color: var(--green); }
.prose h4{ font-family: var(--font-jp-head); font-weight: 700; font-size: 16px; margin: 24px 0 8px; }
.prose ul, .prose ol{ margin: 0 0 20px; padding-left: 26px; }
.prose li{ margin-bottom: 6px; line-height: 1.9; }
.prose ul li::marker{ color: var(--orange); }
.prose a{ color: var(--green-deep); border-bottom: 2px solid var(--lime); font-weight: 700; }
.prose a:hover{ color: var(--orange-deep); border-bottom-color: var(--orange); }
.prose strong{ font-weight: 700; background: linear-gradient(transparent 62%, var(--sun) 62%); padding: 0 .08em; }
.prose img{ height: auto; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 5px 5px 0 var(--ink); margin: 8px 0 24px; }
.prose figure{ margin: 8px 0 24px; }
.prose figure img{ margin: 0; }
.prose figcaption{ font-size: 12.5px; color: var(--ink-soft); text-align: center; margin-top: 8px; }
.prose blockquote{ margin: 8px 0 24px; padding: 18px 22px; background: var(--cream-2); border: 2px dashed #E0B98C; border-radius: 16px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.95; }
.prose blockquote p:last-child{ margin-bottom: 0; }
.prose pre{ background: var(--ink); color: var(--cream); border-radius: 14px; padding: 18px 20px; overflow-x: auto; margin: 8px 0 24px; font-size: 13.5px; line-height: 1.7; }
.prose code{ font-family: var(--font-disp), monospace; background: var(--cream-2); border: 1.5px solid #E0CDA8; border-radius: 6px; padding: 1px 6px; font-size: 13.5px; }
.prose pre code{ background: none; border: none; padding: 0; color: inherit; }
.prose table{ width: 100%; border-collapse: collapse; margin: 8px 0 24px; border: 2.5px solid var(--ink); border-radius: 12px; overflow: hidden; }
.prose th, .prose td{ border: 1.5px solid #E7D7BC; padding: 10px 14px; font-size: 14px; text-align: left; }
.prose th{ background: var(--cream-2); font-family: var(--font-jp-head); font-weight: 700; }
.prose hr{ border: none; border-top: 2px dashed #E0B98C; margin: 32px 0; }

/* WordPress 既定クラス対応 */
.alignleft{ float: left; margin: 4px 24px 16px 0; }
.alignright{ float: right; margin: 4px 0 16px 24px; }
.aligncenter{ margin-left: auto; margin-right: auto; }
.wp-caption{ max-width: 100%; }
.wp-caption-text{ font-size: 12.5px; color: var(--ink-soft); text-align: center; margin-top: 6px; }
.sticky-badge{ font-size: 11px; }
.screen-reader-text{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* 記事下のCTA（サービスを相談する） */
.post-cta{ margin-top: 40px; }

/* 前後記事ナビ */
.post-nav{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
@media(max-width:600px){ .post-nav{ grid-template-columns: 1fr; } }
.post-nav a{ background: #fff; border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--ink); padding: 14px 16px; transition: transform .12s, box-shadow .12s; }
.post-nav a:hover{ transform: translate(-1px,-1px); box-shadow: 6px 6px 0 var(--ink); }
.post-nav .dir{ font-family: var(--font-disp); font-weight: 800; font-size: 11px; color: var(--orange-deep); letter-spacing: .08em; }
.post-nav .pn-title{ font-family: var(--font-jp-head); font-weight: 700; font-size: 13.5px; color: var(--ink); line-height: 1.5; display: block; margin-top: 4px; }
.post-nav .next{ text-align: right; }

/* サイドバー */
.sidebar .widget{ background: #fff; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--ink); padding: 22px 20px; margin-bottom: 22px; }
.sidebar .widget-title{ font-family: var(--font-jp-head); font-weight: 900; font-size: 15px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.sidebar .widget-title::before{ content: "☀"; color: var(--orange); }
.sidebar ul{ list-style: none; }
.sidebar li{ padding: 7px 0; border-bottom: 2px dashed #E7D7BC; font-size: 13.5px; }
.sidebar li:last-child{ border-bottom: none; }
.sidebar a:hover{ color: var(--orange-deep); }
.sidebar .menu-card{ background: var(--cream-2); }

/* 検索フォーム */
.search-form{ display: flex; gap: 8px; }
.search-form .search-field{ flex: 1; min-width: 0; font-family: var(--font-jp); font-size: 14px; color: var(--ink); background: var(--cream); border: 2.5px solid var(--ink); border-radius: 12px; padding: 10px 13px; }
.search-form .search-field:focus{ outline: none; background: #fff; box-shadow: 3px 3px 0 var(--orange); }
.search-form .search-submit{ flex-shrink: 0; font-family: var(--font-jp-head); font-weight: 700; font-size: 14px; cursor: pointer; border: 2.5px solid var(--ink); border-radius: 12px; background: var(--orange); color: #fff; box-shadow: 3px 3px 0 var(--ink); padding: 10px 16px; transition: transform .12s, box-shadow .12s; }
.search-form .search-submit:hover{ transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink); background: var(--orange-deep); }

/* ページネーション */
.pagination{ margin: 38px 0 10px; display: flex; justify-content: center; }
.pagination .nav-links{ display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers{ font-family: var(--font-disp); font-weight: 800; font-size: 14px; min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; box-shadow: 3px 3px 0 var(--ink); transition: transform .12s, box-shadow .12s; }
.pagination .page-numbers:hover{ transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink); }
.pagination .page-numbers.current{ background: var(--orange); color: #fff; }
.pagination .page-numbers.dots{ border: none; box-shadow: none; background: none; }

/* 固定ページ */
.page-card{ background: #fff; border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 7px 7px 0 var(--ink); padding: 34px 34px 40px; }
@media(max-width:600px){ .page-card{ padding: 24px 20px 30px; } }

/* 404 */
.error-404{ text-align: center; padding: 30px 0 40px; }
.error-404 .big{ font-family: var(--font-disp); font-weight: 800; font-style: italic; font-size: clamp(80px,16vw,150px); line-height: 1; color: var(--orange); -webkit-text-stroke: 3px var(--ink); }

/* 投稿一覧が空のとき */
.no-posts{ background: #fff; border: 3px dashed #E0B98C; border-radius: var(--radius); padding: 40px 28px; text-align: center; color: var(--ink-soft); }

/* ───────── WordPress管理バー × 固定ヘッダーの重なり対策 ─────────
   ログイン中は上部に管理バー（黒帯）が出るため、固定ヘッダーをその分下げる。
   未ログインの訪問者には影響しない（.admin-bar が付くのはログイン時のみ）。 */
.admin-bar #header{ top: 32px; }
@media screen and (max-width:782px){ .admin-bar #header{ top: 46px; } }
@media screen and (max-width:600px){ .admin-bar #header{ top: 0; } } /* 600px以下は管理バーが固定解除されるため */

/* ───────── 本文内 <header> の位置リセット ─────────
   taiyo.css の「header{ position:fixed }」は本体サイトの固定ヘッダー専用。
   ブログ本文内の <header>（ページ見出し .blog-head／記事見出し等）は
   その固定指定を打ち消し、通常のレイアウトに戻す（左上への張り付き・切れを解消）。 */
.blog-shell header{ position: static; inset: auto; z-index: auto; transition: none; transform: none; }