/*!
Theme Name:  Kudoum Pop
Theme URI:   https://github.com/kudoum/kudoum-wp
Author:      kudoum
Author URI:  https://github.com/kudoum
Description: モダン・ポップなWordPressテーマ。明るくエネルギッシュなIT系オウンドメディア向け。参考: gsi-contents.com
Version:     1.1.5
Requires at least: 6.0
Tested up to: 6.7
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kudoum-pop
Tags:        pop, modern, colorful, blog, tech, japanese
*/

/* ━━━ CSS カスタムプロパティ ━━━ */
:root {
	--c-bg:      #F7F9FA;
	--c-white:   #FFFFFF;
	--c-text:    #0F172A;
	--c-muted:   #5B6472; /* WCAG 1.4.3: 白地/地色で 4.5:1 以上を確保（旧 #718096 は 4.0:1 で不足） */
	--c-border:  #E2E8F0;
	--c-blue:    #0055FF;
	--c-blue-lt: #EBF2FF;
	--c-yellow:  #FFD700;
	--c-yel-lt:  #FFFBEB;
	--c-orange:  #FF6B00;
	--c-ora-lt:  #FFF4EB;

	--font: 'Inter', 'Noto Sans JP', system-ui, sans-serif;

	--max-w:    1200px;
	--gutter:   clamp(1rem, 3vw, 2rem);
	--header-h: 68px;
	--banner-h: 44px;

	--r-sm:   8px;
	--r-card: 16px;
	--r-pill: 50px;

	--shadow-sm:    0 2px 8px rgba(0,0,0,.06);
	--shadow-card:  0 4px 24px rgba(0,0,0,.09);
	--shadow-hover: 0 16px 48px rgba(0,0,0,.18);
	--trans: all .25s cubic-bezier(.34,1.56,.64,1);
}

/* ━━━ スキップリンク（フォーカス時のみ表示） ━━━ */
.skip-link {
	position: absolute;
	left: 8px;
	top: -60px;
	z-index: 2000;
	padding: .6rem 1rem;
	background: #0F172A;
	color: #fff;
	border-radius: 0 0 8px 8px;
	font-weight: 700;
	text-decoration: none;
	transition: top .15s ease;
}
.skip-link:focus {
	top: 0;
	outline: 2px solid #FFD700;
	outline-offset: 2px;
}

/* ━━━ リセット ━━━ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
	scroll-behavior: smooth;
	/* 固定ヘッダー（バナー44px＋ヘッダー68px）分だけアンカー到達位置を下げ、
	   目次リンク先やフォーカスが隠れないようにする。 */
	scroll-padding-top: calc(var(--header-h) + var(--banner-h) + 8px);
}
body {
	font-family: var(--font);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.75;
	color: var(--c-text);
	background: var(--c-bg);
	padding-top: calc(var(--header-h) + var(--banner-h));
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: auto;
}
/* 管理バー分（32px / モバイル 46px）は WordPress が html { margin-top } で
 * 自動オフセットするため、body 側で再度足さない（足すとカテゴリナビ上に
 * 32px の空白行が出るバグになる）。固定要素 (.site-header / .recruit-bar) は
 * viewport 基準なので layout.css 側で top に 32/46 を加算している。 */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ━━━ コンテナ ━━━ */
.container {
	max-width: var(--max-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ━━━ ボタン ━━━ */
.btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .55rem 1.3rem;
	border-radius: var(--r-pill);
	font-family: var(--font);
	font-weight: 700;
	font-size: .875rem;
	border: 2.5px solid transparent;
	cursor: pointer;
	transition: var(--trans);
	line-height: 1;
}
.btn-primary { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,85,255,.35); }
.btn-orange  { background: var(--c-orange); color: #fff; border-color: var(--c-orange); }
.btn-orange:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(255,107,0,.35); }
.btn-outline { background: transparent; color: var(--c-blue); border-color: var(--c-blue); }
.btn-outline:hover { background: var(--c-blue); color: #fff; transform: translateY(-3px); }

/* ━━━ バッジ ━━━ */
.badge {
	display: inline-block;
	padding: .15rem .65rem;
	border-radius: var(--r-pill);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .04em;
}
.badge-blue   { background: var(--c-blue-lt); color: var(--c-blue); }
.badge-orange { background: var(--c-ora-lt);  color: var(--c-orange); }
.badge-yellow { background: var(--c-yel-lt);  color: #92650A; }

/* ━━━ セクションタイトル ━━━ */
.section-title {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-size: clamp(1.05rem, 2.5vw, 1.35rem);
	font-weight: 800;
	margin-bottom: 1.25rem;
}
.section-title__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--r-sm);
	font-size: 1.1rem;
	flex-shrink: 0;
}
.st--blue .section-title__icon   { background: var(--c-blue);   color: #fff; }
.st--orange .section-title__icon { background: var(--c-orange); color: #fff; }
.st--yellow .section-title__icon { background: var(--c-yellow); color: var(--c-text); }

/* ━━━ 記事カード ━━━ */
.post-card {
	background: var(--c-white);
	border-radius: var(--r-card);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	transition: var(--trans);
	border: 2px solid transparent;
	display: flex;
	flex-direction: column;
}
.post-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-hover);
	border-color: var(--c-blue);
}
.post-card__link { display: flex; flex-direction: column; flex: 1; }
.post-card__thumb {
	aspect-ratio: 16/9;
	overflow: hidden;
	background: var(--c-border);
	position: relative;
}
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post-card:hover .post-card__thumb img { transform: scale(1.06); }
.post-card__placeholder {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 2.5rem; font-weight: 900;
}
.post-card__body { padding: 1rem 1.2rem 1.4rem; flex: 1; }
.post-card__meta { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; flex-wrap: wrap; }
.post-card__cat {
	font-size: .7rem; font-weight: 700;
	color: var(--c-blue); background: var(--c-blue-lt);
	padding: .1rem .55rem; border-radius: var(--r-pill);
}
.post-card__date { font-size: .75rem; color: var(--c-muted); }
.post-card__title {
	font-size: .95rem; font-weight: 700; line-height: 1.55;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ━━━ モーション低減（WCAG 2.3.3 / prefers-reduced-motion）━━━
   OS で「視差効果を減らす」を選んだ利用者には、フェードイン・スムーススクロール等の
   動きを一律で無効化する（main.js の .fade-up 含む）。 */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.fade-up { opacity: 1 !important; transform: none !important; }
}