/*
Template: nekonote_wp
Theme Name: addSound
Theme URI:
Author: under the tree
Description: 株式会社あおごち addSound サイトのブロックテーマ（nekonote_wp 0.1.0 派生）
Version: 0.2.38
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 8.0
Text Domain: addsound
*/

/* =========================================================
   nk- コンポーネントクラス（house CSS レイヤー）
   - 効果・部品のみ。余白・整列・色など theme.json でできることは作らない。
   - 中身は必ず theme.json の CSS 変数で書く → 案件ごとのシステムに自動追従。
   - CSS のみ（JS は使わない）。「高度な設定 > 追加 CSS クラス」欄で適用する。

   Phase 2（案B「余白・静穏」採用・2026-08-19）で確定。
   ========================================================= */

/* ルート直下（header / main / footer）の間にコアが入れる 24px の自動マージン
   （:where(.wp-site-blocks) > * の margin-block-start）を打ち消す。
   セクション余白は各セクションの padding で管理するため、ここは常に密着（2026-09-02）。
   theme.json の styles.spacing.blockGap を 0 にするとサイト全体の
   デフォルト間隔まで消えるため、対象を絞って CSS で行う */
.wp-site-blocks > main,
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* エディタ操作で本文末尾に紛れ込む空段落（<p></p>）を無効化する防御ルール。
   ブロック間マージン 24px 分の白帯がフッター手前に出るのを防ぐ（2026-09-02） */
.entry-content > p:empty {
	display: none;
}

/* ヘッダーを上部固定（fixed・2026-09-02）
   - テンプレートパーツのラッパー（.wp-site-blocks 直下）に掛ける
   - fixed はフロー上の場所を取らないため、コンテンツがヘッダーの高さ分
     上に詰まり、半透明ヘッダーの下にヒーローが潜り込む（オーバーレイ型）
   - z-index はコンテンツ（斜めカットのネガティブマージン重なり含む）より上に
   - ログイン時は管理バーの高さ分だけ下げる（WP が変数を提供） */
.wp-site-blocks > header.wp-block-template-part {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

body.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* 固定ヘッダーの高さ分、アンカー移動（/#contact 等）の着地位置を下げる */
html {
	scroll-padding-top: 5rem;
}

/* ナビリンクのホバーを本文リンクと同じ挙動（マゼンタ化）に揃える。
   コアのナビ CSS がリンク色を高詳細度の inherit で固定しているため
   theme.json では上書きできず、ここで同等以上の詳細度を使う（2026-08-19） */
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--primary);
}

/* 視覚的に隠す（支援技術には読ませる）。製品ページの h1 タイトル等に使用 */
.nk-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* セクション見出し下の短いアクセント罫（core/separator に適用） */
.nk-rule-accent {
	width: 28px;
	max-width: 28px;
	border: none;
	border-top: 2px solid var(--wp--preset--color--primary);
	margin-left: auto;
	margin-right: auto;
}

/* 「詳しく見る」型の下線リンク（paragraph 内の a に適用） */
.nk-link-underline a {
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--contrast);
	padding-bottom: 0.25em;
}

.nk-link-underline a:hover {
	border-bottom-color: var(--wp--preset--color--primary);
}

/* =========================================================
   製品カード（2026-08-19 改）
   - タイル通常時: 背景白・黒罫線（ロゴは墨のまま）
   - ホバー時: 背景黒・黒罫線（ロゴ・文字は CSS で白反転）
   - カード全体リンク: 「詳しく見る」の a を stretched-link 化（JS 不使用）
   ========================================================= */

.nk-product-card {
	position: relative;
}

.nk-product-card .nk-product-tile {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
	/* 正円（2026-08-19）: 幅=高さ・角丸50%。列幅が狭い環境では列幅いっぱいまで */
	width: min(100%, 15rem);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	margin-left: auto;
	margin-right: auto;
	align-items: center;
	align-content: center;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.nk-product-card .nk-product-tile img {
	transition: filter 0.2s ease;
}

.nk-product-card:hover .nk-product-tile {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
}

.nk-product-card:hover .nk-product-tile img {
	filter: invert(1) hue-rotate(180deg);
}

/* カード内の「詳しく見る」リンクをカード全面に広げる */
.nk-product-card .nk-link-underline a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* セクションの縁を斜めにカットする（2026-09-02）
   - nk-slant-top: 上辺を右上がりにカット＋斜め分のネガティブマージンで
     前のセクションに食い込ませる（inline の margin-top に勝つため !important）
   - nk-slant-bottom: 下辺を右下がりにカット
   - 片方だけでも併用でも可。深さは CSS 変数。上は最大 6rem と深めなので、
     上辺付近に左寄せの要素を置くセクションでは掛かりに注意（中央寄せなら安全） */
:root {
	/* 斜めカットの深さトークン（nk-slant-* と nk-tilt-top で共有） */
	--nk-slant-depth-top: clamp(3rem, 6vw, 6rem);
	--nk-slant-depth-bottom: clamp(2.25rem, 4.5vw, 4.5rem);
}

.nk-slant-top,
.nk-slant-bottom {
	--nk-slant-top: 0rem;
	--nk-slant-bottom: 0rem;
	clip-path: polygon(0 var(--nk-slant-top), 100% 0, 100% 100%, 0 calc(100% - var(--nk-slant-bottom)));
}

.nk-slant-top {
	--nk-slant-top: var(--nk-slant-depth-top);
	margin-top: calc(-1 * var(--nk-slant-top)) !important;
}

.nk-slant-bottom {
	--nk-slant-bottom: var(--nk-slant-depth-bottom);
}

/* テキストボックス等を nk-slant-top の斜辺と同じ角度に傾ける（2026-09-02）
   - atan2(深さ, 100vw) で角度を実測どおりに導出。clamp の下限/上限が効く
     画面幅でもカットの斜辺と常に平行を保つ（右上がり＝負回転）
   - 「高度な設定 > 追加 CSS クラス」で適用する */
.nk-tilt-top {
	transform: rotate(atan2(calc(-1 * var(--nk-slant-depth-top)), 100vw));
}

/* =========================================================
   Fluent Forms をトークンに揃える（プラグイン既定の青を打ち消す）
   ========================================================= */

.fluentform .ff-btn-submit {
	background-color: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--surface) !important;
	border: none;
	border-radius: 0;
	font-weight: 500;
	padding: 0.85em 3em;
}

.fluentform .ff-btn-submit:hover {
	background-color: var(--wp--preset--color--primary) !important;
}

.fluentform .ff-el-input--label label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

/* =========================================================
   ヒーロー背景: 音の波紋アニメーション（2026-09-02）
   - SMIL アニメーション入り SVG（assets/img/hero-ripples.svg）を背景画像に。
     背景画像内の SMIL は動作し、JS 不要・エディタの本文も汚さない
   - prefers-reduced-motion では背景ごと外す（静止画の意味も薄い線画のため）
   ========================================================= */

.nk-hero-ripples {
	background-image: url(assets/img/hero-ripples.svg?v=28);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

@media (prefers-reduced-motion: reduce) {
	.nk-hero-ripples {
		background-image: none;
	}
}

/* =========================================================
   FAQ（core/details で組む前提。JS は使わない）
   FAQ はスコープ外だが、将来の FAQ 案件用に残置。
   ========================================================= */

.nk-faq-item {
	border-bottom: 1px solid var(--wp--preset--color--muted);
	padding-block: var(--wp--preset--spacing--30);
}

.nk-faq-item > summary {
	cursor: pointer;
	font-weight: 700;
}