/*
Theme Name: 株式会社中小企業情報設計社
Template: nekonote_wp
Version: 0.6.10
Requires at least: 6.6
Requires PHP: 8.2
Text Domain: info-design
*/

/* IN-02 株式会社中小企業情報設計社（Info-Design for SMEs Co., Ltd.）の子テーマ。親は nekonote_wp（vendor/nekonote_wp・未改変）。
   トークン（色・書体・サイズ・余白）は theme.json、質感（--nk-*）と部位クラスの CSS はここ。共通 CSS/JS は親から読む＝ここにコピーしない。
   JS はテーマに置かない（装飾・振る舞いはプラグイン nekonote-hero / nekonote-nav）。
   出所: scripts/design-preview/（デザイン案 01・2026-10-13 基本了承）。CSS を変えたら上の Version を上げる（キャッシュバスター）。 */

/* =========================================================
   0. 書体
   見出しは Morisawa Fonts「Webフォント Lite」の UD 新ゴ コンデンス70 L／B（配信）。配信 CSS と family 名は functions.php が
   wp option から読んでフロント／エディタに足し、theme.json の heading（B）／heading-light（L）の先頭に差し込む（docs/webfont-license.md §5）。
   option が空の環境・配信が届かない端末はヒラギノ／游ゴシック。本文は常にヒラギノ／游ゴシック（Web フォントは見出しだけ・2026-10-15）。
   端末のデスクトップ版 UD 新ゴを local() で参照するのはやめた（制作機だけ EL で見えていた。2026-10-15 木下）。
   ========================================================= */

/* =========================================================
   1. 質感の変数（wp-ai theme extract-tokens が生成）＋案件固有の変数
   ========================================================= */
:root {
	--nk-radius: 0px;
	--nk-radius-sm: 0px;
	--nk-radius-button: 0px;
	--nk-shadow: none;
	--nk-line: var(--wp--preset--color--line); /* 罫線はパレット「罫線」が正（エディタで選べる） */
	/* 案件固有（palette に無い色は部品側で持つ） */
	--nk-accent-hover: #982032;
	--nk-index-color: color-mix(in srgb, var(--wp--preset--color--primary) 40%, var(--wp--preset--color--base));
	/* nekonote-nav の開閉ボタン: 色は主色 */
	--nk-burger-color: var(--wp--preset--color--primary);
}

strong {
	font-weight: 700;
}

html {
	scroll-padding-top: 1.5rem;
}

/* =========================================================
   2. 共通部品（editor-first・docs/block-editor-first.md）
   見た目はブロック属性（theme.json のプリセット）で持つ。ここに残すのは、ブロックの編集 UI で表せないものだけ:
   - 下線リンク（ブロックスタイル）… リンクの下線の描き方（段落の色・サイズは属性が勝つように :where）
   - ヒーローの題の改行制御（keep-all / anywhere）
   - カードの hover と「カード全体をリンク」
   - 一覧（クエリループ）の番号（CSS カウンタ）
   - 本文に CTA がある頁でフッターの CTA を隠す（:has）
   ========================================================= */
:where(.is-style-nk-text-link) a {
	color: inherit;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.35em;
	text-decoration: none;
}
:where(.is-style-nk-text-link) a:hover,
:where(.is-style-nk-text-link) a:focus-visible {
	text-decoration: none;
	opacity: 0.75;
}

/* ヒーローの題: 日本語の改行を単語単位に（属性 UI に無い） */
.nk-hero-title {
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* =========================================================
   3. ヘッダー（親の header-inline 原型。ナビ 3 項目のうち「お問い合わせ」は wp_navigation 側の
   追加 CSS クラス nk-nav-cta でボタン風にする。開閉ボタンは nekonote-nav、狭幅判定は core の 600px）
   ========================================================= */
.nk-header--inline {
	border-bottom: 1px solid var(--nk-line);
}
/* 高さはロゴ（290px 幅・約 92px）が決める。上下の余白は parts/header.html の Group の padding 属性
   （上 1.5rem／下 1rem・2026-10-16 木下「上が空きすぎ→半分に」）。縦位置は属性 verticalAlignment: bottom。
   広幅では min-height を持たない（持つと下揃えで上に余白がたまる） */
/* ロゴ: 親パターン site-logo の 160px をここで上書き（パターンの属性は触らない） */
.nk-header .wp-block-image {
	width: 290px;
	max-width: 48vw;
	margin: 0;
}
.nk-header .wp-block-image a {
	display: block; /* inline-block だと figure に文字の下余白（約 10px）が付き、下揃えでロゴが浮く */
}
.nk-header .wp-block-image img {
	width: 100% !important;
	height: auto !important;
	display: block;
}
.nk-header .wp-block-navigation__container {
	gap: 2.375rem;
	align-items: center;
}
.nk-header .nk-nav-cta .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: inline-block;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	padding: 0.7em 1.4em;
	line-height: 1.4;
	border-radius: var(--nk-radius-button);
	transition: background-color 0.2s ease;
}
.nk-header .nk-nav-cta .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.nk-header .nk-nav-cta .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	background: var(--nk-accent-hover);
	color: var(--wp--preset--color--base);
}

/* 狭幅: ロゴは固定幅 200px（高さ≒63px）・内側の最小高さ 4rem をその高さに合わせ、
   開閉ボタン（nekonote-nav の固定座標）の下端（文言「メニュー」の下）をロゴの下端に揃える（2026-10-16 木下）。
   ロゴ下端 = 上余白 40 + 内側の最小高さ 4rem。ボタン高さ 52px のうち下 6px は余白なのでその分だけ下げる。
   ロゴを vw で縮めると高さが変わりボタンとずれるので固定幅 */
@media (max-width: 599px) {
	:root {
		--nk-burger-top: calc(var(--wp--preset--spacing--40) + 4rem - var(--nk-burger-size-h, 52px) + 6px);
	}
	body.admin-bar {
		--nk-burger-top: calc(var(--wp--preset--spacing--40) + 4rem - var(--nk-burger-size-h, 52px) + 6px + var(--wp-admin--admin-bar--height, 32px));
	}
	.nk-header--inline .nk-header__inner {
		min-height: 4rem;
	}
	.nk-header .wp-block-image {
		width: min(200px, 100vw - 8rem); /* 320px 幅でも開閉ボタン（56px）と余白の分を残して折り返さない */
		max-width: none;
	}
	/* 開いたオーバーレイ（配色はブロック属性 base / contrast）: 大きな項目を縦に */
	.nk-header--inline .wp-block-navigation__responsive-container.is-menu-open {
		padding: clamp(3rem, 10vh, 6rem) var(--wp--style--root--padding-right) clamp(2rem, 8vh, 4rem) var(--wp--style--root--padding-left);
	}
	/* 項目の横位置はナビブロックの「配置」属性（center・0.6.8 木下「ハンバーガー時はセンタリング」）。core が --navigation-layout-justification-setting で縦並びにも反映する。
	   広幅ではナビの箱が内容幅（親の space-between）なので center でも見た目は右寄せのまま */
	.nk-header--inline .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--30);
	}
	.nk-header--inline .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-size: var(--wp--preset--font-size--large);
		font-weight: 700;
	}
	.nk-header--inline .wp-block-navigation__responsive-container.is-menu-open .nk-nav-cta {
		margin-top: var(--wp--preset--spacing--30);
	}
}

/* =========================================================
   4. トップのヒーロー（プラグイン nekonote-hero の .nk-carousel を案件の見た目に。プラグインの CSS/JS は触らない）
   白地・重ね色なし・前後ボタンは左右下・ドットは主色。本文幅は alignwide と揃える。
   ========================================================= */
.nk-home-hero.nk-carousel {
	--nk-carousel-padding-top: clamp(2.2rem, 5vw, 4.5rem);
	--nk-carousel-padding-bottom: clamp(5.5rem, 8vw, 6.25rem);
	--nk-carousel-padding-x: var(--wp--style--root--padding-left);
	margin-block: 0;
}
.nk-home-hero .nk-carousel__content {
	max-width: calc(var(--wp--style--global--wide-size) + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
}
.nk-home-hero .nk-carousel__slide,
.nk-home-hero .nk-carousel__foreground {
	min-height: 0;
	background: var(--wp--preset--color--base);
}
.nk-home-hero .nk-carousel__slide::after {
	display: none;
}
.nk-home-hero .nk-carousel__controls button {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}
.nk-home-hero .nk-carousel__controls button:hover {
	background: var(--nk-accent-hover);
	border-color: var(--nk-accent-hover);
}
.nk-home-hero .nk-carousel__controls button:focus-visible {
	outline-color: var(--wp--preset--color--accent);
	box-shadow: none;
}
.nk-home-hero .nk-carousel__controls .nk-carousel__prev,
.nk-home-hero .nk-carousel__controls .nk-carousel__next {
	top: auto;
	bottom: 1.25rem;
	transform: none;
}
.nk-home-hero .nk-carousel__prev {
	left: max(var(--wp--style--root--padding-left), calc((100% - var(--wp--style--global--wide-size)) / 2));
}
.nk-home-hero .nk-carousel__next {
	right: max(var(--wp--style--root--padding-right), calc((100% - var(--wp--style--global--wide-size)) / 2));
}
.nk-home-hero .nk-carousel__dots {
	background: var(--wp--preset--color--primary);
}

/* =========================================================
   5. 支援領域カード（枠線・余白・最小高さ・文字はブロック属性）。hover と「カード全面リンク」のブロックスタイルだけ CSS
   ========================================================= */
.nk-service-card {
	position: relative;
	transition: background-color 0.2s ease;
}
.nk-service-card:hover,
.nk-service-card:focus-within {
	background-color: var(--wp--preset--color--muted);
}
/* ブロックスタイル「カード全面リンク」: 段落の中のリンクを、位置の基準になる親（.nk-service-card）いっぱいに広げる。
   題に演出（nk-split）を付けても壊れないよう、題ではなく下段の段落に付ける。 */
:where(.is-style-nk-card-link) a {
	text-decoration: none;
}
:where(.is-style-nk-card-link) a::after,
:where(a.is-style-nk-card-link)::after {
	content: "";
	position: absolute;
	inset: 0;
}
/* クエリループの項目（li）の中のカードを行の高さいっぱいに（罫線を揃える） */
.wp-block-post-template > .wp-block-post > .nk-service-card {
	height: 100%;
}
/* ブロックスタイル「通し番号を前に付ける」: クエリループの項目は投稿ごとに番号を手入力できないので CSS カウンタ */
.wp-block-post-template {
	counter-reset: nk-card;
}
.wp-block-post-template > .wp-block-post {
	counter-increment: nk-card; /* 項目（li）で数える。段落の ::before で数えると li ごとに 01 に戻る */
}
:where(.is-style-nk-counter)::before {
	content: counter(nk-card, decimal-leading-zero) " / ";
}

/* =========================================================
   6. サービス一覧（固定ページ /services/ のクエリループ）: 項目の番号は CSS カウンタ（投稿ごとに手入力できないため）。
   罫線・上下余白・題名のサイズは属性。
   ========================================================= */
.entry-content,
.editor-styles-wrapper .is-root-container,
.editor-styles-wrapper .wp-block-post-content {
	counter-reset: nk-service;
}
.nk-service {
	position: relative;
	padding-left: 8.4rem;
	counter-increment: nk-service;
}
.nk-service::before {
	content: "0" counter(nk-service);
	position: absolute;
	left: 0;
	top: calc(var(--wp--preset--spacing--60) + 0.15rem);
	font-family: var(--wp--preset--font-family--label);
	font-weight: 300;
	font-size: 3.25rem;
	line-height: 1;
	color: var(--nk-index-color);
}
.nk-service p {
	max-width: 50rem;
}
.nk-service .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}
.nk-service .wp-block-post-title a:hover,
.nk-service .wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--accent);
}
.nk-service .wp-block-post-excerpt__excerpt {
	max-width: 50rem;
	margin: 0 0 1rem;
}
.nk-service .wp-block-post-excerpt__more-text {
	margin: 0;
	font-size: 1rem;
}
.nk-service .wp-block-post-excerpt__more-link {
	color: var(--wp--preset--color--primary);
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.35em;
	text-decoration: none;
}
.nk-service .wp-block-post-excerpt__more-link:hover,
.nk-service .wp-block-post-excerpt__more-link:focus-visible {
	opacity: 0.75;
}
@media (max-width: 781px) {
	.nk-service {
		padding-left: 0;
	}
	.nk-service::before {
		position: static;
		display: block;
		margin-bottom: 0.5rem;
		font-size: 2.25rem;
	}
}

/* 詳細（templates/single-service.html）: 他の支援領域のクエリループを横並びに（post-template に flex のレイアウト UI が無い） */
.nk-service-others .wp-block-post-template {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.5rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}
.nk-service-others .wp-block-post-template > li {
	margin: 0;
}
.nk-service-others .wp-block-post-title a {
	text-decoration: none;
}
.nk-service-others .wp-block-post-title a::after {
	content: " →" / "";
}

/* =========================================================
   7. フッター（parts/footer.html）: 本文に cta 節（className nk-cta）がある頁ではフッターの CTA を重ねない
   ========================================================= */
body:has(.entry-content .nk-cta) .nk-footer-cta {
	display: none;
}

/* =========================================================
   8. エディタ補正（フロント専用ラッパーに依存する規則はここに写す）
   ========================================================= */
.editor-styles-wrapper .nk-home-hero .nk-carousel__slide {
	border-bottom: 1px dashed var(--nk-line);
}