/*
Theme Name:   NINJA Fly Fishing (Storefront Child)
Theme URI:    https://ninjaflyfishing.com
Description:  NINJA Fly Fishing 用のデザイン。Storefront の子テーマです。色・文字・ボタン・商品カード・ヘッダー・フッターをまとめて変更します。
Author:       NINJA Fly Fishing
Template:     storefront
Version:      1.0.0
Text Domain:  ninja-child
*/

/* ==========================================================
   ① デザイン設定（ここの数字・色を変えるだけで全体が変わります）
   ========================================================== */
:root {
	/* 色 */
	--ninja-ink:        #14181a;   /* 文字・ヘッダー・フッターの黒 */
	--ninja-ink-soft:   #4a5256;   /* 補助的な文字 */
	--ninja-green:      #2f6b3a;   /* メインカラー（ボタン・リンク） */
	--ninja-green-dark: #1f4a27;   /* ボタンにマウスを乗せた色 */
	--ninja-sale:       #c8102e;   /* セール表示の赤 */
	--ninja-bg:         #ffffff;   /* ページの背景 */
	--ninja-bg-soft:    #f3f4ef;   /* 薄いグレーの背景（ヒーロー・カード） */
	--ninja-line:       #e1e3dc;   /* 区切り線 */

	/* 文字 */
	--ninja-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
	              "Hiragino Kaku Gothic ProN", "Noto Sans JP", Arial, sans-serif;

	/* 形・大きさ */
	--ninja-radius:     8px;       /* 角の丸み（0にすると角ばる） */
	--ninja-site-width: 1200px;    /* サイト全体の最大幅 */
	--ninja-hero-max:   900px;     /* トップのヒーロー部分の最大幅（小さいほど文字と写真が近づく） */
	--ninja-hero-gap:   24px;      /* ヒーローの文字と写真のすき間 */
}

/* ==========================================================
   ② 全体
   ========================================================== */
body,
button,
input,
select,
textarea {
	font-family: var(--ninja-font);
	color: var(--ninja-ink);
}

body {
	background: var(--ninja-bg);
	-webkit-font-smoothing: antialiased;
}

.site .col-full {
	max-width: var(--ninja-site-width);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ninja-font);
	color: var(--ninja-ink);
	font-weight: 700;
	letter-spacing: -0.01em;
}

a {
	color: var(--ninja-green);
}

a:hover,
a:focus {
	color: var(--ninja-green-dark);
}

img {
	border-radius: var(--ninja-radius);
}

/* ==========================================================
   ③ ヘッダー・メニュー
   ========================================================== */
.site-header {
	background: var(--ninja-ink);
	border-bottom: 3px solid var(--ninja-green);
	padding-top: 1em;
	padding-bottom: 0;
}

.site-header .site-branding img {
	max-height: 64px;
	width: auto;
	border-radius: 4px;
}

.site-header a:not(.button),
.site-header .site-title a,
.site-header .site-description,
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a,
.site-header-cart .cart-contents {
	color: #ffffff;
}

.main-navigation ul.menu > li > a:hover,
.main-navigation ul.nav-menu > li > a:hover,
.site-header-cart .cart-contents:hover {
	color: #a9d4b1;
}

.main-navigation ul li a {
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* ドロップダウン */
.main-navigation ul ul {
	background: var(--ninja-ink);
	border-radius: 0 0 var(--ninja-radius) var(--ninja-radius);
}

.main-navigation ul ul a {
	color: #ffffff !important;
}

/* 検索窓 */
.site-search .widget_product_search input[type="search"] {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #ffffff;
	border-radius: var(--ninja-radius);
}

/* ==========================================================
   ④ ボタン（全部まとめて）
   ========================================================== */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart,
.wp-block-button__link {
	background: var(--ninja-ink);
	color: #ffffff;
	border: 0;
	border-radius: var(--ninja-radius);
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 0.85em 1.6em;
	transition: background 0.2s ease, transform 0.2s ease;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.added_to_cart:hover,
.wp-block-button__link:hover {
	background: var(--ninja-green-dark);
	color: #ffffff;
	transform: translateY(-1px);
}

/* 目立たせたいボタン（カートに入れる・レジに進む・注文する） */
button.alt,
input.alt,
a.button.alt,
button.button.alt,
.single_add_to_cart_button,
.checkout-button,
#place_order {
	background: var(--ninja-green);
	color: #ffffff;
}

button.alt:hover,
input.alt:hover,
a.button.alt:hover,
button.button.alt:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
#place_order:hover {
	background: var(--ninja-green-dark);
	color: #ffffff;
}

/* ==========================================================
   ⑤ 商品一覧（カード風）
   ========================================================== */
ul.products li.product {
	background: var(--ninja-bg);
	border: 1px solid var(--ninja-line);
	border-radius: var(--ninja-radius);
	padding: 1em;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

ul.products li.product:hover {
	box-shadow: 0 8px 24px rgba(20, 24, 26, 0.12);
	transform: translateY(-3px);
}

ul.products li.product img {
	border-radius: var(--ninja-radius);
	background: var(--ninja-bg-soft);
}

ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ninja-ink);
}

ul.products li.product .price,
.single-product div.product .price {
	color: var(--ninja-ink);
	font-weight: 700;
}

ul.products li.product .price del,
.single-product div.product .price del {
	color: var(--ninja-ink-soft);
	font-weight: 400;
}

ul.products li.product .price ins,
.single-product div.product .price ins {
	color: var(--ninja-sale);
	text-decoration: none;
}

/* セール・ベストセラーのバッジ */
.onsale {
	background: var(--ninja-sale);
	color: #ffffff;
	border: 0;
	border-radius: 999px;
	font-weight: 700;
	padding: 0.3em 0.9em;
	min-width: 0;
	min-height: 0;
	line-height: 1.6;
}

/* 星の評価 */
.star-rating span::before,
.star-rating::before {
	color: var(--ninja-green);
}

/* ==========================================================
   ⑥ 商品ページ・カート・チェックアウト
   ========================================================== */
.single-product div.product .product_title {
	font-size: 2rem;
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--ninja-green);
	border-bottom: 2px solid var(--ninja-green);
}

.woocommerce-breadcrumb,
.woocommerce-breadcrumb a {
	color: var(--ninja-ink-soft);
}

table.shop_table,
.woocommerce-checkout #payment {
	border-radius: var(--ninja-radius);
}

.woocommerce-info,
.woocommerce-message {
	border-top-color: var(--ninja-green);
	border-radius: var(--ninja-radius);
}

.woocommerce-info::before,
.woocommerce-message::before {
	color: var(--ninja-green);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select,
.input-text {
	border: 1px solid var(--ninja-line);
	border-radius: var(--ninja-radius);
	background: var(--ninja-bg);
	color: var(--ninja-ink);
	box-shadow: none;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--ninja-green);
	outline: 2px solid rgba(47, 107, 58, 0.25);
}

/* ==========================================================
   ⑦ トップページ（ヒーロー：文字と写真を近づける）
   ========================================================== */
.home .wp-block-columns:first-of-type {
	max-width: var(--ninja-hero-max);
	margin-left: auto;
	margin-right: auto;
	gap: var(--ninja-hero-gap);
	align-items: center;
}

.home .wp-block-columns:first-of-type .wp-block-column:first-child {
	text-align: right;
}

.home .wp-block-media-text:first-of-type {
	max-width: var(--ninja-hero-max);
	margin-left: auto;
	margin-right: auto;
	column-gap: var(--ninja-hero-gap);
	align-items: center;
}

.home .wp-block-cover:first-of-type .wp-block-cover__inner-container {
	max-width: var(--ninja-hero-max);
	margin-left: auto;
	margin-right: auto;
}

.home .wp-block-columns:first-of-type img,
.home .wp-block-media-text:first-of-type img {
	max-width: 100%;
	height: auto;
}

@media (max-width: 781px) {
	.home .wp-block-columns:first-of-type .wp-block-column:first-child {
		text-align: center;
	}
}

/* ==========================================================
   ⑧ フッター
   ========================================================== */
.site-footer {
	background: var(--ninja-ink);
	color: #c9cfd1;
	border-top: 3px solid var(--ninja-green);
}

.site-footer a:not(.button),
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4 {
	color: #ffffff;
}

.site-footer a:not(.button):hover {
	color: #a9d4b1;
}

/* ==========================================================
   ⑨ スマホ
   ========================================================== */
@media (max-width: 768px) {
	.single-product div.product .product_title {
		font-size: 1.5rem;
	}

	.site-header {
		padding-top: 0.6em;
	}
}