/* =========================================================
   QUADRA — 補助スタイル（最小）
   デザインの本体は quadra-build.css（元の Next.js ビルド済みCSSそのまま）。
   ここは、そのCSSだけでは足りない WordPress 側の最小補完のみを書く。
   ========================================================= */

/* フォント変数の配線。
   ビルド済みCSSでは --font-montserrat / --font-noto が next/font 生成の
   <html> クラスに定義されているが、WordPress の <html> にはそのクラスが無い。
   そこで :root に同名変数を定義し、Google Fonts で読み込む実体に結びつける。 */
:root {
	--font-montserrat: "Montserrat", sans-serif;
	--font-noto: "Noto Sans JP", sans-serif;
}

/* NEWS 記事本文（the_content）のタイポグラフィ。
   投稿はブロックエディタで編集されるため、素の <p>/<h*>/<ul> 等に
   デザインに沿った最小限のスタイルを当てる（ユーティリティが効かないため）。 */
.news-content {
	font-family: var(--font-noto);
	font-size: 14px;
	line-height: 1.9;
	color: #cccccc;
}
.news-content > * + * {
	margin-top: 1.5em;
}
.news-content h2 {
	font-weight: 700;
	font-size: 20px;
	line-height: 1.5;
	color: #ffffff;
}
.news-content h3 {
	font-weight: 700;
	font-size: 18px;
	line-height: 1.5;
	color: #ffffff;
}
.news-content h4 {
	font-weight: 700;
	font-size: 16px;
	line-height: 1.5;
	color: #ffffff;
}
.news-content a {
	color: #fe9a00;
	text-decoration: underline;
}
.news-content ul,
.news-content ol {
	padding-left: 1.4em;
}
.news-content ul {
	list-style: disc;
}
.news-content ol {
	list-style: decimal;
}
.news-content li + li {
	margin-top: 0.5em;
}
.news-content img {
	border-radius: 4px;
}
.news-content strong {
	color: #ffffff;
	font-weight: 700;
}
.news-content blockquote {
	border-left: 3px solid #fe9a00;
	padding-left: 1em;
	color: #808080;
}

/* =========================================================
   Contact Form 7 の入力欄を元のダークデザインに合わせる。
   （CF7 が生成する input/textarea/select はテーマのクラスが付かないため、
     ここでまとめてスタイルを当てる。page-contact.php の静的フォームと同じ見た目。）
   ========================================================= */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea,
.wpcf7-form select {
	width: 100%;
	background: #141f40; /* panel-light */
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 1px;
	padding: 0 12px;
	height: 48px;
	font-family: var(--font-noto);
	font-size: 12px;
	color: #ffffff;
	transition: border-color 0.2s;
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
}
.wpcf7-form select {
	color: #cccccc;
}
/* CF7 は input/select/textarea を span.wpcf7-form-control-wrap（インライン）で包む。
   そのままだと width:100% が効かず、グリッド/フレックス内で崩れるため block 化して幅いっぱいに。 */
.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}
/* CF7 が挿入する余計な改行・段落マージンを打ち消す（レイアウトは div/flex で組んでいるため） */
.wpcf7-form p {
	margin: 0;
}
.wpcf7-form br {
	display: none;
}
/* ラジオ（お問い合わせ種別）の項目テキスト色・並び */
.wpcf7-form .wpcf7-list-item-label {
	font-family: var(--font-noto);
	font-size: 12px;
	color: #cccccc;
}
/* 同意チェックボックスの行（中央寄せ）。
   入力欄用の .wpcf7-form-control-wrap は width:100% のブロックなので、
   その中で acceptance 自体を中央寄せにする。 */
.wpcf7-form .wpcf7-acceptance {
	display: flex;
	justify-content: center;
}
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}
.wpcf7-form .wpcf7-acceptance label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
/* 同意文中の「プライバシーポリシー」リンクを、ひと目でリンクと分かる見た目に */
.wpcf7-form .wpcf7-acceptance a {
	font-weight: 700;
	text-decoration: underline;
	color: #fe9a00;
}
.wpcf7-form .wpcf7-acceptance a:hover {
	color: #e88a00;
}
.wpcf7-form textarea {
	height: 160px;
	padding: 12px;
	resize: none;
	line-height: 1.7;
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
	color: #595959;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
	outline: none;
	border-color: #fe9a00;
}

@media (min-width: 1024px) {
	.wpcf7-form input[type="text"],
	.wpcf7-form input[type="email"],
	.wpcf7-form input[type="tel"],
	.wpcf7-form input[type="url"],
	.wpcf7-form select {
		height: 40px;
	}
}

/* ラジオ・チェックボックスのアクセントカラー */
.wpcf7-form input[type="radio"],
.wpcf7-form input[type="checkbox"] {
	accent-color: #fe9a00;
}

/* ラジオ（お問い合わせ種別）を横並び・中央寄せに */
.wpcf7-form .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}
.wpcf7-form .wpcf7-list-item {
	margin: 0;
}
.wpcf7-form .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-family: var(--font-noto);
	font-size: 12px;
	color: #cccccc;
}

/* 同意文言 */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item label {
	font-size: 12px;
	color: #cccccc;
}

/* 送信ボタン */
.wpcf7-form .wpcf7-submit {
	height: 44px;
	width: 200px;
	background: #fe9a00;
	color: #0a0f24; /* night */
	border: none;
	border-radius: 2px;
	font-family: var(--font-montserrat);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 1.5px;
	cursor: pointer;
	transition: background 0.2s;
}
.wpcf7-form .wpcf7-submit:hover {
	background: #e88a00;
}
/* CF7 の送信ボタン横のスピナーが中央寄せをずらすため非表示にする */
.wpcf7-form .wpcf7-spinner {
	display: none;
}

/* バリデーション・確認メッセージ */
.wpcf7-form .wpcf7-not-valid-tip {
	color: #ff6b6b;
	font-size: 11px;
}
.wpcf7 .wpcf7-response-output {
	color: #ffffff;
	font-size: 13px;
	border-color: rgba(255, 255, 255, 0.2);
}

/* お問い合わせ種別: 元デザインはスマホで左寄せ（納品コードが中央寄せにしていた誤りを修正）。
   PC は中央のまま。CF7 フォーム内の .bg-card は種別カードのみ。 */
@media (max-width: 1023px) {
	.wpcf7-form .bg-card,
	.wpcf7-form .bg-card > div {
		align-items: flex-start;
	}
	/* スマホは 3 項目を縦並び・左寄せ（元デザイン準拠） */
	.wpcf7-form .wpcf7-radio {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
}

/* トップの LINKS バナー（front-page.php）。
   元デザインは PC 4 枚（231px + gap 40px）だったが、掲載が 5 枚に増えて
   1 行に収まらなくなった。テーマ側に Tailwind のビルド環境が無く
   lg:w-[…] を新しく足せないため、ここで幅を持つ（.product-mark と同じ事情）。
   SP は従来どおり 2 列（gap 20px。5 枚目は justify-center で中央に落ちる）。 */
.links-banner {
	width: calc(50% - 10px);
}
@media (min-width: 1024px) {
	/* PC は 1 行 5 枚。gap は SP と同じ 20px（4 か所で 80px）。
	   幅はコンテナ（max-width:1280px）に追従させ、1024px 幅の画面でも
	   「茨城県筑西市 地域商社」が収まるようにする。 */
	.links-banner {
		width: calc((100% - 80px) / 5);
	}
}

/* 優良産品推奨マーク（トップ／商品一覧／商品詳細の3箇所）。
   画像枠は lg 未満で画面幅に追従して縮むが、マークを固定幅にすると
   狭い画面ほど相対的に大きくなり、被写体に重なってしまう。
   テーマ側に Tailwind のビルド環境が無く SP 用のサイズ指定クラスを
   追加できないため、枠に対する比率で持たせ、上限（＝従来の固定幅）だけ保つ。
   枠の大きさと従来幅はページごとに違うので、値は各テンプレートから
   カスタムプロパティで渡す（既定は商品詳細の 510px 枠 / 86px）。 */
.product-mark {
	width: var(--mark-w, 16.9%);
	max-width: var(--mark-max, 86px);
}
/* lg 以上は枠自体が固定サイズなので、マークも従来どおりの固定幅に戻す。
   （このルールが Tailwind の lg:w-[…] を上書きしてしまうため、
     値は --mark-lg で受け取る。未指定なら --mark-max と同値。） */
@media (min-width: 1024px) {
	.product-mark {
		width: var(--mark-lg, var(--mark-max, 86px));
		max-width: none;
	}
}