/*
Theme Name: katotax_classic
Theme URI: https://kato-tax-sr.com/
Author: 加藤税理士・社労士事務所
Author URI: https://kato-tax-sr.com/
Description: 加藤税理士・社労士事務所 公式サイト用のスタンドアロン WordPress クラシックテーマ。Noto Sans JP / Plus Jakarta Sans を中心に、ネイビー＋ペールラベンダー＋クリーム＋シャンパンゴールドの編集的なデザイン。ACF などのカスタムフィールドプラグインに依存しない設計。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: katotax_classic
Tags: business, professional, classic, custom-menu, featured-images, threaded-comments, translation-ready

メインのスタイルは assets/css/style.css (Production Theme CSS) を参照してください。
以下はテーマ固有の補助スタイル (production-theme.css の範囲外) のみを定義します。
*/

/* ===== 見出しの行バランス（2行折返し時の末尾1文字の孤立を防ぐ。keep-all は純カナではみ出すため使わない） ===== */
.section__title,
.pp-strength-head__title { text-wrap: balance; }

/* ===== Skip link ===== */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	position: absolute;
	overflow: hidden;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto;
	clip-path: none;
	color: var(--ink-deep);
	display: block;
	font-size: 14px;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}
.skip-link { position: absolute; top: -100px; left: 0; }
.skip-link:focus { top: 0; }

/* ===== WebP override for heavy CSS background images ===== */
/* Production CSS sets .page-head::before and .cta-band__bg to use the source .jpg.
   We override here to serve the much smaller .webp variants. Browsers that don't
   support WebP (very rare in 2026) will fall back via the production rule cascade. */
@supports (background-image: url(data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=)) {
	.page-head::before {
		background-image: url("assets/img/brand/texture-marble-gold.webp");
	}
	.cta-band__bg {
		background-image: url("assets/img/people/consultation-scene.webp");
	}
}

/* ===== Mobile nav toggle visibility — production CSS (v19+) handles full
   positioning, bar styling, and X-animation. Hide on desktop only (768+). ===== */
@media (min-width: 768px) {
	.site-header__toggle { display: none !important; }
}

/* ===== Mobile drawer list contents — production CSS (animations-loader.css)
   styles the .site-nav__mobile container itself (slide-in, z-index, etc.). ===== */
.site-nav__mobile { display: none; }
@media (max-width: 767px) {
	.site-nav__mobile { display: block; }
	.site-nav__mobile-list {
		display: grid;
		gap: 4px;
		margin-bottom: 24px;
	}
	.site-nav__mobile-list li a {
		display: block;
		padding: 14px 12px;
		font-size: 17px;
		font-weight: 600;
		color: rgba(255, 255, 255, 0.85);
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}
	.site-nav__mobile-list li a:hover { color: #fff; }
	body.is-nav-open { overflow: hidden; }
}

/* ===== Accordion compatibility — JS toggles .is-open;
   production CSS uses [aria-expanded="true"]; bridge both. ===== */
.c-accordion__item.is-open .c-accordion__chev { transform: rotate(180deg); }
.c-accordion__item.is-open .c-accordion__body { display: block; }

/* ===== Tabs compatibility — production CSS uses .is-active on button;
   panels need to switch visibility. ===== */
.c-tabs__panel { display: none; }
.c-tabs__panel.is-active { display: block; }

/* ===== Gold corner L-shapes follow the rounded edge inside .c-form
   (parent has border-radius:20px; L-shape uses matching radius on its outer
   corner so it tucks into the curve instead of poking past). ===== */
.c-form.gold-corners { position: relative; }
.c-form.gold-corners::before,
.c-form.gold-corners::after {
	width: 48px;
	height: 48px;
}
.c-form.gold-corners::before {
	top: -1px;
	left: -1px;
	border-top-left-radius: 20px;
}
.c-form.gold-corners::after {
	bottom: -1px;
	right: -1px;
	border-bottom-right-radius: 20px;
}

/* ===== Pagination (production CSS doesn't define this) ===== */
.pagination {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 48px;
}
.pagination .page-numbers {
	min-width: 40px;
	height: 40px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	font-size: 13px;
	font-weight: 600;
	background: transparent;
	color: var(--ink-base);
	border: 1px solid var(--ink-line);
	font-family: "Plus Jakarta Sans", sans-serif;
}
.pagination .page-numbers.current {
	background: var(--ink-deep);
	color: #fff;
	border-color: var(--ink-deep);
}
.pagination .page-numbers:hover:not(.current) {
	color: var(--ink-deep);
	border-color: var(--ink-dark);
}

/* ===== Category filter (blog index) ===== */
.cat-filter {
	display: flex;
	gap: 8px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}
.cat-filter a {
	padding: 9px 18px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	background: var(--paper-soft);
	color: var(--ink-base);
	border: 1px solid var(--ink-line);
	display: inline-block;
}
.cat-filter a:hover,
.cat-filter a.is-active {
	background: var(--ink-deep);
	color: #fff;
	border-color: var(--ink-deep);
}

/* ===== Featured post (news index) ===== */
.featured-post {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 24px;
	margin-bottom: 40px;
	background: var(--paper-soft);
	border-radius: 24px;
	overflow: hidden;
}
.featured-post__thumb { aspect-ratio: 16 / 10; background: var(--paper-soft); overflow: hidden; }
.featured-post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.featured-post__body { padding: 32px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.featured-post__title { font-size: 24px; font-weight: 700; line-height: 1.4; color: var(--ink-deep); }
.featured-post__lede { font-size: 14px; color: var(--ink-muted); line-height: 1.85; }
@media (max-width: 767px) {
	.featured-post { grid-template-columns: 1fr; }
	.featured-post__body { padding: 24px; }
	.featured-post__title { font-size: 20px; }
}

/* ===== WordPress search form ===== */
.search-form {
	max-width: 480px;
	margin: 0 auto;
}
.search-form > div {
	display: flex;
	gap: 10px;
}
.search-form input[type="search"] {
	flex: 1;
	padding: 12px 16px;
	border-radius: 12px;
	border: 1.5px solid var(--ink-line);
	font-size: 14px;
	outline: none;
}
.search-form input[type="search"]:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(36, 85, 199, 0.15);
}

/* ===== Entry content (the_content on legal/page templates) ===== */
.entry-content { font-size: 15px; line-height: 2; color: var(--ink-base); }
.entry-content > * + * { margin-top: 18px; }
.entry-content h2 { font-size: 22px; font-weight: 700; color: var(--ink-deep); margin: 32px 0 12px; }
.entry-content h3 { font-size: 18px; font-weight: 700; color: var(--ink-deep); margin: 24px 0 10px; }
.entry-content a { color: var(--accent); text-decoration: underline; }
.entry-content blockquote {
	padding: 20px 24px;
	background: var(--paper-warm);
	border-left: 3px solid var(--warm-ink);
	border-radius: 12px;
	font-size: 15px;
	color: var(--ink-base);
	margin: 24px 0;
}
.entry-content img { border-radius: 12px; margin: 24px 0; }
.entry-content ul, .entry-content ol { padding-left: 24px; margin: 12px 0; }
.entry-content ul li { list-style: disc; }
.entry-content ol li { list-style: decimal; }

/* ===== Single post extras ===== */
.single-related h3 {
	font-size: 22px;
	font-weight: 700;
	color: var(--ink-deep);
	margin-bottom: 20px;
}

/* ===== Body fallback (in case Google Fonts is delayed) ===== */
.katotax-body {
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
		-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
}

/* ===== Hero H1 — 「社会保険労務士事務所」(10字) が幅により 3 行折返しになる問題を回避 =====
   design (page-home.jsx) の clamp(26px, 4.6vw, 40px) を実装。ビューポート幅で自動縮小
   （最大40px・最小26px）し、常に「加藤税理士／社会保険労務士事務所」の 2 行に収める。
   #hero-title の ID 指定で production CSS の段階指定 .hero-cinematic__title(56/42/32px) を
   全幅で上書き＝競合するメディアクエリ見出し指定を無効化。仕様書 CSS は次回 fetch で
   上書きされるため、保護レイヤーのこの style.css に置く。clamp 値は全幅で現行以下のため
   新たな折返しは起きない（phone≤565px は floor 26px、26px×10字 ≒ 260px < 本文幅）。 */
#hero-title { font-size: clamp(26px, 4.6vw, 40px); }