/* Next.js版 src/app/globals.css を移植した CSS変数とベーススタイル */

:root {
	--background: 0 0% 100%;
	--foreground: 222.2 84% 4.9%;
	--card: 0 0% 100%;
	--card-foreground: 222.2 84% 4.9%;
	--popover: 0 0% 100%;
	--popover-foreground: 222.2 84% 4.9%;
	--primary: 222.2 47.4% 11.2%;
	--primary-foreground: 210 40% 98%;
	--secondary: 210 40% 96.1%;
	--secondary-foreground: 222.2 47.4% 11.2%;
	--muted: 210 40% 96.1%;
	--muted-foreground: 215.4 16.3% 46.9%;
	--accent: 210 40% 96.1%;
	--accent-foreground: 222.2 47.4% 11.2%;
	--destructive: 0 84.2% 60.2%;
	--destructive-foreground: 210 40% 98%;
	--border: 214.3 31.8% 91.4%;
	--input: 214.3 31.8% 91.4%;
	--ring: 222.2 84% 4.9%;
	--radius: 0.5rem;
}

.dark {
	--background: 222.2 84% 4.9%;
	--foreground: 210 40% 98%;
	--card: 222.2 84% 4.9%;
	--card-foreground: 210 40% 98%;
	--popover: 222.2 84% 4.9%;
	--popover-foreground: 210 40% 98%;
	--primary: 210 40% 98%;
	--primary-foreground: 222.2 47.4% 11.2%;
	--secondary: 217.2 32.6% 17.5%;
	--secondary-foreground: 210 40% 98%;
	--muted: 217.2 32.6% 17.5%;
	--muted-foreground: 215 20.2% 65.1%;
	--accent: 217.2 32.6% 17.5%;
	--accent-foreground: 210 40% 98%;
	--destructive: 0 62.8% 30.6%;
	--destructive-foreground: 210 40% 98%;
	--border: 217.2 32.6% 17.5%;
	--input: 217.2 32.6% 17.5%;
	--ring: 212.7 26.8% 83.9%;
}

* {
	border-color: hsl(var(--border));
}

body {
	background-color: hsl(var(--background));
	color: hsl(var(--foreground));
}

/* Hero / Slide の Swiper は fade エフェクトのみ使用するため、ナビゲーション用のCSSクラスは
   business ページのスライドでのみ有効化する */
.swiper-button-next,
.swiper-button-prev {
	color: #1d4ed8;
}

.swiper-pagination-bullet-active {
	background: #1d4ed8;
}

/* Next.js版の next/font/google Noto_Serif_JP（notoSerifJp）相当 */
.font-noto-serif-jp {
	font-family: 'Noto Serif JP', serif;
}

/* wp_nav_menu() の <li class="menu-item"> から標準の黒丸を除去 */
.menu-item {
	list-style: none;
}

/* モバイルメニュー：JS未実行時は非表示 */
[data-mobile-menu] {
	display: none;
}
[data-mobile-menu].is-open {
	display: block;
}

/* ページ内リンク（求人詳細の「メールで応募する」→ 応募フォーム）をなめらかに送る。
   OS側で「視差効果を減らす」を有効にしている環境では即座に移動させる */
html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/*
 * Contact Form 7（お問い合わせフォーム）
 *
 * [contact-form-7] が出力する input/textarea/submit には、CF7の
 * class:xxx オプションや html_class 属性経由でクラスを付与できるが、
 * WordPress core の sanitize_html_class() がコロンを含む文字列を除去するため
 * Tailwindのレスポンシブ/状態バリアント（lg:, focus-visible: など）を
 * そのまま渡すことができない。そのためCF7が自動付与するクラス
 * （.wpcf7-form-control など）に対して、元のデザイン
 * （page-contact.php の旧ハードコード実装）と同等の見た目をここで再現する。
 *
 * スコープの .syssupport-contact-form は page-contact.php が the_content() を
 * 囲むdivに付けているテーマ側のクラス。CF7のショートコード属性（html_class="..."）
 * には依存しないので、管理画面に表示されるショートコードをそのまま貼り直しても
 * スタイルが外れることはない。求人詳細ページの応募フォーム
 * （inc/job-apply.php）も同じクラスで囲んで、この見た目を共有している。
 */
.syssupport-contact-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* 入力欄。送信ボタンも .wpcf7-form-control を持つので :not() で除外する
   （除外しないと送信ボタンに mt-3 相当の余白と h-10 相当の高さが乗り、
   リセットボタンと上下位置がずれる） */
.syssupport-contact-form .wpcf7-form-control:not(.wpcf7-submit) {
	display: block;
	width: 100%;
	margin-top: 0.75rem; /* mt-3 */
	border-radius: calc(var(--radius) - 2px); /* rounded-md */
	border: 1px solid hsl(var(--input));
	background-color: hsl(var(--background));
	padding: 0.5rem 0.75rem; /* py-2 px-3 */
	font-size: 0.875rem; /* text-sm */
	line-height: 1.25rem;
}

.syssupport-contact-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-textarea) {
	height: 2.5rem; /* h-10 */
}

.syssupport-contact-form .wpcf7-textarea {
	min-height: 80px;
}

.syssupport-contact-form .wpcf7-form-control:not(.wpcf7-submit)::placeholder {
	color: hsl(var(--muted-foreground));
}

.syssupport-contact-form .wpcf7-form-control:not(.wpcf7-submit):focus-visible {
	outline: none;
	box-shadow:
		0 0 0 2px hsl(var(--background)),
		0 0 0 4px hsl(var(--ring));
}

.syssupport-contact-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: hsl(var(--destructive));
}

.syssupport-contact-form .wpcf7-response-output {
	margin-top: 2rem;
	border-radius: calc(var(--radius) - 2px);
	border: 1px solid hsl(var(--border));
	padding: 1rem;
	font-size: 0.875rem;
}

.syssupport-contact-form .wpcf7-submit {
	display: block;
	width: 100%;
	/* リセットボタンは border 付きなので、透明な1pxで高さを揃える */
	border: 1px solid transparent;
	border-radius: 0.25rem; /* rounded */
	background-color: #2563eb; /* bg-blue-600 */
	color: #fff;
	padding: 0.75rem 0; /* py-3 */
	font-size: 1.25rem; /* text-xl */
	line-height: 1.75rem;
	font-weight: 700;
	cursor: pointer;
}

.syssupport-contact-form .wpcf7-submit:hover {
	opacity: 0.8;
}

.syssupport-contact-form .wpcf7-submit:disabled {
	opacity: 0.4;
	cursor: default;
}

/* CF7のJSが送信ボタンの直後に差し込むスピナー。既定では visibility:hidden でも
   幅24px + 左右margin24pxの場所を占有し続けてボタンの位置をずらすため、
   絶対配置にしてレイアウトから外す（送信ボタンの親には relative が必要） */
.syssupport-contact-form .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: 0.75rem;
	margin: 0;
	transform: translateY(-50%);
	background-color: #fff;
}

.syssupport-contact-form .wpcf7-spinner::before {
	background-color: #2563eb;
}

@media (min-width: 1024px) {
	.syssupport-contact-form .wpcf7-form-control:not(.wpcf7-submit) {
		margin-top: 0; /* lg:mt-0 */
	}

	.syssupport-contact-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-textarea) {
		height: 4rem; /* lg:h-16 */
	}

	.syssupport-contact-form .wpcf7-submit {
		padding: 1rem 0; /* lg:py-4 */
	}
}

/*
 * reCAPTCHA v3 のバッジ（画面右下に固定表示される "protected by reCAPTCHA"）を隠す。
 *
 * Googleの利用規約では、バッジを隠す場合は代わりにreCAPTCHAで保護されている旨と
 * プライバシーポリシー・利用規約へのリンクをユーザーが見える位置に明示することが
 * 条件になっている。お問い合わせフォーム（CF7管理画面のフォームタブ）に該当の
 * 文言とリンクを入れてあるので、そちらは消さないこと。
 *
 * CF7はreCAPTCHAを全ページで読み込むためスコープは付けない。また display:none だと
 * トークンの取得に失敗することがあるので visibility:hidden で隠す。
 */
.grecaptcha-badge {
	visibility: hidden;
}