/*
Theme Name: Astra Child EN
Template: astra
Description: EN store (en.jpmassage.online) child theme. Brand fonts + WooCommerce page styling. LP pages use their own templates (tpl-en-*.php).
Version: 1.0.0
*/

/* ============================================================
   1. Brand fonts (Chat-approved pair)
   - Cormorant Garamond: LARGE headings only (LP hero / H2)
   - Spectral: body serif
   - Inter: UI (buttons, badges, forms, prices)
   ============================================================ */
body {
	font-family: 'Spectral', Georgia, serif;
}
button, input, select, textarea,
.woocommerce #payment, .woocommerce form .form-row,
.price, .woocommerce-Price-amount, .badge, .ast-button, .button {
	font-family: 'Inter', -apple-system, sans-serif;
}
h1, h2 {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 600;
}
h3, h4, h5, h6 {
	font-family: 'Spectral', Georgia, serif;
	font-weight: 600;
}

/* ============================================================
   2. Brand accent (mirrors JP store "ブランド統一" section:
      Astra accent -> terracotta / rounded primary buttons)
   ============================================================ */
:root {
	--ast-global-color-0: #CE6B49; /* accent (links/buttons) */
	--jma-en-ink: #3A322B;
	--jma-en-bg: #FAF6EF;
}
.woocommerce #payment button#place_order,
.woocommerce a.button, .woocommerce button.button,
.ast-button, .wp-block-button__link {
	border-radius: 10px;
}

/* ============================================================
   3. WooCommerce function pages (checkout / my-account)
   ============================================================ */
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce {
	max-width: 760px;
	margin: 0 auto;
}

/* ============================================================
   4. Lesson pages (dry-beginner-lessons etc.)
   ============================================================ */
/* メタ行（タイトル直下・JP店と統一 2026-07-16） */
.jma-course-meta {
	display: block;
	margin: 0 0 12px;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: #8A8178;
	letter-spacing: .02em;
}
/* 導入文（枠なしフロー文・JP店と統一） */
.jma-course-intro {
	margin: 0 0 1.6em;
	font-size: 15px;
	line-height: 1.75;
	color: #4a453f;
}
.jma-course-intro p { margin: 0 0 .5em; }
.jma-course-intro p:last-child { margin-bottom: 0; }
.jma-course-intro .subs-note { color: #2C2C34; } /* 字幕説明は本文よりやや濃く目立たせる */
/* 旧: 枠内メタ（後方互換・現在は未使用） */
.jma-course-intro .meta {
	display: block;
	margin-top: 4px;
	font-family: 'Inter', sans-serif;
	font-size: 12.5px;
	color: #8A8178;
}
.jma-lesson-t {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 46px 0 12px;
	font-family: 'Spectral', Georgia, serif;
	font-size: 21px;
	font-weight: 600;
	color: #2C2C34;
}
/* スマホ:バッジを上・タイトル左揃え（長い動画タイトルが2行になっても整う・2026-07-15） */
@media (max-width: 768px) {
	.jma-lesson-t { flex-direction: column; align-items: flex-start; gap: 4px; }
}
.jma-lesson-t .n {
	font: 700 10px/1 'Inter', sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background: #CE6B49;
	padding: 4px 8px;
	border-radius: 999px;
	white-space: nowrap;
	flex: none;
	position: relative;
	top: -1px; /* ラテンcapの光学中心へ微調整（2026-07-16） */
}

/* My Account: Your Courses list (rendered by functions.php §8) */
.jma-en-courses {
	margin: 1.2em 0 2em;
	padding: 1.4em 1.6em;
	background: var(--jma-en-bg);
	border-radius: 12px;
}
.jma-en-courses h3 { margin-top: 0; }
.jma-en-courses ul { list-style: none; margin: 0; padding: 0; }
.jma-en-courses li { padding: 8px 0; border-bottom: 1px solid #EFE6D7; }
.jma-en-courses li:last-child { border-bottom: none; }
.jma-en-courses a { font-weight: 600; text-decoration: none; }

/* ============================================================
   5. Checkout cleanup（JP店と同方針）
   - added-to-cart通知（View cartボタン付き）を非表示
     ※エラーは .woocommerce-error なので影響なし
   ============================================================ */
.woocommerce-message { display: none; }

/* ============================================================
   6. SPヘッダー: サイト名を1行に（2026-07-12 きくさん指定）
   - Astraヘッダーの .site-title がスマホで2行に折り返すのを防止
   - LPは独自ヘッダー（tpl-en-*内）のため対象外＝無影響
   ============================================================ */
@media (max-width: 768px) {
	.site-title { white-space: nowrap; }
	.site-title a { font-size: clamp(13px, 4.4vw, 22px); }
}

/* ============================================================
   7. My Account: Explore More Courses（クロスセル・2026-07-13）
   - JP店mypage「あなたにおすすめの講座」の思想を移植
   ============================================================ */
.jma-en-explore {
	margin: 0 0 2em;
	padding: 1.4em 1.6em;
	background: #fff;
	border: 1px solid #EFE6D7;
	border-radius: 12px;
}
.jma-en-explore h3 { margin-top: 0; }
.jma-en-explore ul { list-style: none; margin: 0; padding: 0; }
.jma-en-explore li {
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	padding: 8px 0; border-bottom: 1px solid #F4EEE2;
}
.jma-en-explore li:last-child { border-bottom: none; }
.jma-en-explore li a { font-weight: 600; text-decoration: none; white-space: nowrap; }

/* ============================================================
   8. 視聴ページ: Your Next Course（次の講座アップセル・2026-07-13）
   ============================================================ */
.jma-en-next {
	margin: 2.5em 0 1em;
	padding: 1.6em 1.8em;
	background: var(--jma-en-bg, #FAF6EF);
	border-radius: 12px;
	text-align: center;
}
.jma-en-next h3 { margin-top: 0; }
.jma-en-next p { margin: 0.5em 0; }
a.jma-en-next-btn {
	display: inline-block;
	background: #CE6B49;
	color: #fff !important;
	padding: 10px 26px;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	margin-top: 4px;
}
a.jma-en-next-btn:hover { filter: brightness(1.08); }

/* ============================================================
   9. My Account: サムネイル付き講座カード（2026-07-13 きくさん指定）
   - JP店mypageの画像ボタン相当。Your Courses / Explore More 共通
   ============================================================ */
.jma-en-cardgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 14px;
	margin-top: 0.6em;
}
/* カードが1〜2枚でも巨大化しない（JP店並みの3列密度を維持） */
.jma-en-cardgrid .jma-en-card { max-width: 300px; }
a.jma-en-card {
	display: block;
	background: #fff;
	border: 1px solid #EFE6D7;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow .18s, transform .18s;
}
a.jma-en-card:hover {
	box-shadow: 0 6px 18px rgba(60, 40, 20, .12);
	transform: translateY(-2px);
}
.jma-en-card-img {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #F4EEE2;
}
.jma-en-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.jma-en-card-body {
	display: block;
	padding: 12px 14px 14px;
}
.jma-en-card-name {
	display: block;
	font-weight: 600;
	line-height: 1.35;
	color: #2B2B2B;
	margin-bottom: 6px;
}
.jma-en-card-cta {
	display: block;
	font-size: .9em;
	font-weight: 600;
	color: #CE6B49;
}
/* カード化に伴い旧テキストリスト用のliボーダーはカードには適用されない（ul不使用） */

/* カテゴリチップ（JP店のSTRETCH/DRYチップ相当・2026-07-13） */
.jma-en-card-img { position: relative; }
.jma-en-card-chip {
	position: absolute;
	top: 10px; left: 10px;
	background: rgba(30, 36, 50, .82);
	color: #fff;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .14em;
	padding: 3px 9px;
	border-radius: 4px;
	z-index: 2;
}

/* ============================================================
   10. My Account レイアウト最適化（2026-07-13）
   - Astraがアカウントブロックを幅760px+左220pxに狭める仕様を解除
   - ログイン済みのマイページのみ（ログイン画面・checkoutには影響させない）
   ============================================================ */
body.logged-in.woocommerce-account .woocommerce {
	width: 100%;
	max-width: none; /* コンテナ幅いっぱい＝見出し・ヘッダーメニューと左右端が揃う */
	margin-left: 0;
}
body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation { width: 220px; }
/* ナビ枠の左端を見出しと揃える（Astraのul padding-left:20pxを解除） */
body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation ul { padding-left: 0; margin-left: 0; }
body.logged-in.woocommerce-account .woocommerce-MyAccount-content { width: calc(100% - 260px); }
@media (max-width: 768px) {
	body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation,
	body.logged-in.woocommerce-account .woocommerce-MyAccount-content { width: 100%; }
}

/* ============================================================
   11. 受講ページ: Course Outline 目次（2026-07-13）
   ============================================================ */
.jma-en-toc {
	background: #fff;
	border: 1px solid #EFE6D7;
	border-radius: 12px;
	padding: .8em 1.3em .9em;
	margin: 0 0 1.6em;
}
/* 目次はデフォルト折り畳み（PC・スマホ共通・JP店と統一 2026-07-16） */
.jma-en-toc h4 { margin: 0; font-size: 16px; cursor: pointer; position: relative; padding-right: 24px; }
.jma-en-toc.open h4 { margin-bottom: .35em; }
.jma-en-toc h4::after { content: '›'; position: absolute; right: 2px; top: 50%; transform: translateY(-50%) rotate(0deg); font-size: 1.3em; color: #CE6B49; transition: transform .2s; }
.jma-en-toc.open h4::after { transform: translateY(-50%) rotate(90deg); }
.jma-en-toc:not(.open) ol,
.jma-en-toc:not(.open) .jma-en-toc-ch { display: none; }
.jma-en-toc ol {
	/* 1列表示（各項目を1行ずつ）＝JP店と統一（2026-07-17。旧: columns:2 の2列） */
	margin: 0;
	padding-left: 1.3em;
	font-size: 14px;
}
.jma-en-toc li { padding: 2px 0; break-inside: avoid; }
.jma-en-toc a { text-decoration: none; }
.jma-en-toc a:hover { text-decoration: underline; }
@media (max-width: 768px) {
	.jma-en-toc ol { columns: 1; }
}
/* アンカー着地位置（ヘッダーに隠れない）＋スムーズスクロール */
h3.jma-lesson-t { scroll-margin-top: 100px; }
html { scroll-behavior: smooth; }

/* 章見出し帯＋目次の章グループ（2026-07-13） */
.jma-en-chapter {
	margin: 3.2em 0 1.2em;
	padding-top: 1.6em;
	border-top: 2px solid #EFE6D7;
	display: flex;
	align-items: center; /* バッジとタイトルを中心線で揃える（2026-07-16） */
	gap: 12px;
}
/* STEP帯直後のLESSONを近づける（JP店と統一 2026-07-16） */
.jma-en-chapter + h3.jma-lesson-t { margin-top: 16px; }
.jma-en-chapter .step {
	background: #1E2432; /* 紺=構造（LESSONのテラコッタ=行動と区別・カードチップと統一） */
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	padding: 3px 12px;
	border-radius: 999px;
	white-space: nowrap;
	position: relative;
	top: -1px; /* ラテンcapの光学中心へ微調整 */
}
.jma-en-chapter .t {
	font-family: inherit;
	font-size: 1.35em;
	font-weight: 600;
	color: #1E2432;
}
.jma-en-toc-ch {
	font-weight: 700;
	font-size: .92em;
	color: #8A6A4F;
	margin: .9em 0 .2em;
	letter-spacing: .02em;
}
.jma-en-toc-ch:first-of-type { margin-top: .2em; }

/* ============================================================
   12. スマホ版レッスンページのブラッシュアップ（2026-07-13）
   ============================================================ */
@media (max-width: 768px) {
	/* ① ヘッダー薄型化（実測80px→56px・Astraのmin-height:80px上書き） */
	.ast-primary-header-bar,
	.ast-mobile-header-wrap .ast-primary-header-bar,
	.ast-header-break-point .site-header .ast-primary-header-bar { min-height: 56px; }
	.site-header .ast-site-identity,
	.site-header .site-branding { padding-top: 6px; padding-bottom: 6px; }
	/* ② ページタイトルとヘッダー線の間隔 */
	h1.entry-title { margin-top: .7em; }
	/* ④ 目次の開閉は基本CSSへ集約（2026-07-16・PCも既定折り畳み）。スマホは余白のみ調整 */
	.jma-en-toc { padding-bottom: 1.1em; }
}


/* ============================================================
   13. My Account: スマホのメニューを横並びチップ化（2026-07-13）
   - 縦積み4行 → 1〜2行のチップ。折りたたまず全項目常時見える
   ============================================================ */
@media (max-width: 768px) {
	body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: 1.2em;
	}
	body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li {
		border: 1px solid #EFE6D7;
		border-radius: 999px;
		background: #fff;
	}
	body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li a {
		display: block;
		padding: 7px 16px;
		font-size: .92em;
	}
	body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li.is-active {
		background: #1E2432 !important;
		border-color: #1E2432 !important;
	}
	body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
		color: #fff !important;
		background: transparent !important; /* Astraがa要素に敷く背景を無効化 */
	}
}

/* ============================================================
   14. 未購入者向け制限メッセージ（LP誘導ボックス・2026-07-13）
   ============================================================ */
.jma-en-restricted {
	margin: 1.5em 0 2.5em;
	padding: 2em 1.8em;
	background: var(--jma-en-bg, #FAF6EF);
	border-radius: 12px;
	text-align: center;
}
.jma-en-restricted h3 { margin-top: 0; }
.jma-en-restricted p { margin: .5em 0; }
.jma-en-restricted-sub { font-size: .9em; color: #6B6258; margin-top: 1em !important; }

/* ============================================================
   15. UXレビュー反映（2026-07-13・functions.php §18EN 対応）
   ============================================================ */

/* B-6: WC Stripe のスタイル計測用 hidden input がレイアウトに残り
   モバイルで約24pxの横オーバーフローを起こす対策。
   computed style の取得（フォント等）には影響しない */
#wc-stripe-hidden-style-input {
	position: absolute !important;
	left: -9999px !important;
}

/* A-2: 初回購入者向け案内（ログイン / lost-password ページ） */
.jma-en-first-time {
	font-size: .9em;
	color: #6B6258;
	margin-top: .8em;
}

/* B-9: 検索結果の投稿日メタ非表示（コース販売サイトに投稿日表示は不要） */
.search .entry-meta { display: none !important; }

/* C-15: Account details の氏名欄の必須アスタリスク非表示
   （サーバー側で任意化済み・§18EN。氏名2欄は form-row-first / form-row-last のみ） */
.woocommerce-EditAccountForm .form-row-first .required,
.woocommerce-EditAccountForm .form-row-last .required { display: none; }

/* ============================================================
   Section 14: Mobile checkout — show "Your order" above billing
   (2026-07-24, mirrors JP store section 11; price-first like
   Stripe Checkout. CSS visual order only; desktop 2-col untouched)
   ============================================================ */
@media (max-width: 768px) {
    form.woocommerce-checkout {
        display: flex;
        flex-direction: column;
    }
    form.woocommerce-checkout #order_review_heading { order: 1; margin-top: 6px; }
    form.woocommerce-checkout #order_review { order: 2; margin-bottom: 18px; }
    form.woocommerce-checkout #customer_details { order: 3; }
}

/* ============================================================
   Section 16: Checkout tidy-up (2026-07-27, mirrors JP store
   section 12/13 changes made on 2026-07-26)
   - "Your order" moved to the very top on mobile. The old rule left
     Apple Pay / G Pay first, so buyers could tap Apple Pay without ever
     seeing the price. Stripe Checkout shows the amount first; match it.
     Default order:5 keeps future Stripe GW elements between the order
     summary (1,2) and billing (9) automatically — never target
     individual Stripe elements, they change between releases.
   - Page heading "Checkout" hidden visually (checkout is noindex, and
     the product name + price + card fields make the context obvious).
     sr-only, NOT display:none, so screen readers still announce it.
   - Privacy text / footer legal links down to 12.5px to match.
   - 73px dead space between the order button and the footer trimmed;
     it came from stacked theme + WooCommerce defaults, not by design.
   ⚠️ The withdrawal-consent checkbox (§10EN) is deliberately left at its
      original size/position — it is a required EU/UK consent, not a notice.
   ============================================================ */
@media (max-width: 768px) {
    form.woocommerce-checkout > * { order: 5; }
    form.woocommerce-checkout #order_review_heading { order: 1; margin-top: 6px; }
    form.woocommerce-checkout #order_review { order: 2; margin-bottom: 20px; }
    form.woocommerce-checkout #customer_details { order: 9; }
}

body.woocommerce-checkout .entry-title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

form.checkout .woocommerce-privacy-policy-text,
.woocommerce form.checkout .woocommerce-privacy-policy-text,
form.checkout .woocommerce-privacy-policy-text p,
.woocommerce form.checkout .woocommerce-privacy-policy-text p {
    font-size: 12.5px !important;
    line-height: 1.75 !important;
    color: #6b6b6b;
}

footer .menu-link,
footer .astra-footer-horizontal-menu a {
    font-size: 12.5px !important;
    line-height: 1.8 !important;
}

form.checkout .form-row.place-order,
.woocommerce form.checkout .form-row.place-order {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
form.checkout #place_order,
.woocommerce form.checkout #place_order {
    margin-bottom: 0 !important;
}

/* ============================================================
   Section 17: Combined terms/privacy notice under the order button
   (2026-07-27, §10EN — Stripe Checkout style: one line below the
   button rather than two notices in separate places.)
   ============================================================ */
/* WooCommerce/Astra float #place_order to the right, so without clear:both
   this line wraps beside the button and overlaps it (measured -32px on 2026-07-27). */
form.checkout .jma-en-terms-notice,
.woocommerce form.checkout .jma-en-terms-notice {
    clear: both;
    /* margin-top gets absorbed by the clearance, so use padding for the gap. */
    margin: 0 !important;
    padding-top: 26px;
    font-size: 12.5px !important;
    line-height: 1.75 !important;
    color: #6b6b6b;
    text-align: center;
}
form.checkout .jma-en-terms-notice a,
.woocommerce form.checkout .jma-en-terms-notice a {
    text-decoration: underline;
    color: #CE6B49;
}

/* ============================================================
   Section 18: Highlight the field that blocked checkout
   (2026-07-27, mirrors JP store section 15 / §34).
   The email-match check (§3EN) is custom validation, so WooCommerce
   leaves the confirm field green while the top notice says the emails
   do not match — the buyer cannot tell which field to fix. The JS in
   §29EN adds .jma-field-error to the offending field; colour it and
   state the action. Cleared as soon as the field is edited.
   ============================================================ */
form.checkout .form-row.jma-field-error input {
    border-color: #d63638 !important;
    background: #fdf3f3;
}
form.checkout .form-row.jma-field-error::after {
    content: "Please check this field.";
    display: block;
    margin-top: 6px;
    color: #d63638;
    font-size: 12.5px;
    line-height: 1.6;
    font-weight: 600;
}

/* ============================================================
   Section 19: Field descriptions at note size (2026-07-27)
   The email hint sat at 14.6px — same weight as body copy, louder
   than the field itself. Match the 12.5px used by the terms notice
   under the order button and the footer legal links.
   ============================================================ */
form.checkout .form-row .description,
.woocommerce form.checkout .form-row .description {
    font-size: 12.5px !important;
    line-height: 1.7 !important;
    color: #6b6b6b;
    margin-top: 5px;
}