/*!
Theme Name:   FBA Child
Theme URI:    https://fba.fanbasecompany.com/
Description:  FBA向けAstra子テーマ。FBC C.I.マニュアルに準拠したカラー・タイポグラフィを適用し、PMProおよびwpForoとの統合スタイルを提供。
Author:       FBA / 林田
Author URI:   https://fba.fanbasecompany.com/
Template:     astra
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  fba-child
Tags:         membership, community, professional
*/

/* ============================================================
   FBA Child Theme - Brand Tokens
   FBC C.I.マニュアル (2026/05/21) 準拠
   ============================================================ */

:root {
	/* —— 基本カラー（C.I.マニュアル P2）—— */
	--fba-corporate-red:   #DF0515;    /* ハイライト-コーポレート赤・FBC核 */
	--fba-function-red:    #F24E4B;    /* サブ1-機能：朱 */
	--fba-emotion-teal:    #33C2B0;    /* サブ2-情緒：ライトターコイズ */
	--fba-future-amber:    #FBC002;    /* サブ3-未来：アンバー */
	--fba-seminar-blue:    #18658F;    /* サブ4-セミナー：ブルー */

	/* —— モノクロ系 —— */
	--fba-ink:             #333333;    /* 黒（本文）*/
	--fba-ink-mute:        #676767;    /* グレー（補助テキスト）*/
	--fba-ink-soft:        #BFBFBF;    /* ライトグレー（除外色）*/
	--fba-brown:           #91673E;    /* 茶 */

	/* —— 背景 —— */
	--fba-bg-white:        #FFFFFF;
	--fba-bg-beige:        #F7F6EC;    /* ベージュ（暖色背景）*/
	--fba-bg-gray:         #F2F2F2;    /* グレー（寒色背景）*/
	--fba-bg-beige-soft:   #FBFAF3;    /* ベージュ薄め（カード用に調整）*/

	/* —— 境界線 —— */
	--fba-line:            #E8E5D8;    /* ベージュ系の柔らかい線 */
	--fba-line-strong:     #333333;    /* 強調用の濃い線 */

	/* —— セマンティックエイリアス（実用上の用途別）—— */
	--fba-primary:         var(--fba-corporate-red);
	--fba-primary-hover:   var(--fba-function-red);
	--fba-link:            var(--fba-corporate-red);
	--fba-link-hover:      var(--fba-function-red);
	--fba-text:            var(--fba-ink);
	--fba-text-muted:      var(--fba-ink-mute);

	/* —— タイポグラフィ —— */
	--fba-font-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont,
		"Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",
		"Yu Gothic", "游ゴシック", Meiryo, sans-serif;
	--fba-font-display: var(--fba-font-sans);
	--fba-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	/* —— 文字サイズ（モバイル基準）—— */
	--fba-text-xs:    12px;
	--fba-text-sm:    14px;
	--fba-text-base:  16px;
	--fba-text-lg:    18px;
	--fba-text-xl:    22px;
	--fba-text-2xl:   28px;
	--fba-text-3xl:   36px;
	--fba-text-4xl:   48px;

	/* —— 余白スケール（8pxベース）—— */
	--fba-space-1:    4px;
	--fba-space-2:    8px;
	--fba-space-3:    16px;
	--fba-space-4:    24px;
	--fba-space-5:    32px;
	--fba-space-6:    48px;
	--fba-space-7:    64px;
	--fba-space-8:    96px;

	/* —— 角丸（シンプル・芯のあるトンマナのため小さめ）—— */
	--fba-radius-sm:  2px;
	--fba-radius:     4px;
	--fba-radius-lg:  8px;

	/* —— インタラクション —— */
	--fba-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* デスクトップでの文字サイズ拡張 */
@media (min-width: 768px) {
	:root {
		--fba-text-2xl:   32px;
		--fba-text-3xl:   44px;
		--fba-text-4xl:   60px;
	}
}

/* ============================================================
   Base Typography
   ============================================================ */

html {
	font-size: 100%;
}

body {
	font-family: var(--fba-font-sans);
	font-weight: 400;
	font-size: var(--fba-text-base);
	line-height: 1.85;
	letter-spacing: 0.02em;
	color: var(--fba-text);
	background-color: var(--fba-bg-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "palt" 1;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.wp-block-heading {
	font-family: var(--fba-font-display);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	color: var(--fba-text);
	margin-top: 0;
}

h1 { font-size: var(--fba-text-4xl); }
h2 { font-size: var(--fba-text-3xl); }
h3 { font-size: var(--fba-text-2xl); }
h4 { font-size: var(--fba-text-xl); }
h5 { font-size: var(--fba-text-lg); }
h6 { font-size: var(--fba-text-base); }

/* 数字を等幅に（料金表・カウンター表示で位ズレを防ぐ）*/
.fba-num,
.pmpro_levels_table .pmpro_price,
.fba-group-code-value,
.fba-text-en {
	font-feature-settings: "tnum" 1, "lnum" 1;
}

/* 英文用ユーティリティクラス */
.fba-text-en {
	font-family: var(--fba-font-sans);
	letter-spacing: 0.05em;
	font-weight: 500;
}

p {
	margin: 0 0 1em;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--fba-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--fba-transition), text-decoration-color var(--fba-transition);
}

a:hover,
a:focus {
	color: var(--fba-link-hover);
	text-decoration-color: var(--fba-link-hover);
}

a:focus-visible {
	outline: 2px solid var(--fba-primary);
	outline-offset: 2px;
	border-radius: var(--fba-radius-sm);
}

/* ============================================================
   Buttons
   ============================================================ */

.ast-button,
.wp-block-button__link,
.pmpro_btn,
button.pmpro_btn,
input.pmpro_btn,
input[type="submit"]:not(.search-submit) {
	display: inline-block;
	padding: 14px 32px;
	background-color: var(--fba-primary);
	color: var(--fba-bg-white) !important;
	border: 1px solid var(--fba-primary);
	border-radius: var(--fba-radius);
	font-family: var(--fba-font-sans);
	font-size: var(--fba-text-base);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: all var(--fba-transition);
	-webkit-appearance: none;
	appearance: none;
}

.ast-button:hover,
.wp-block-button__link:hover,
.pmpro_btn:hover,
button.pmpro_btn:hover,
input.pmpro_btn:hover,
input[type="submit"]:not(.search-submit):hover {
	background-color: var(--fba-primary-hover);
	border-color: var(--fba-primary-hover);
	color: var(--fba-bg-white) !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(223, 5, 21, 0.15);
}

.ast-button:active,
.wp-block-button__link:active,
.pmpro_btn:active {
	transform: translateY(0);
	box-shadow: 0 1px 4px rgba(223, 5, 21, 0.2);
}

/* セカンダリボタン（アウトライン） */
.fba-button-outline,
.is-style-outline .wp-block-button__link {
	background-color: transparent !important;
	color: var(--fba-primary) !important;
	border: 1.5px solid var(--fba-primary);
}

.fba-button-outline:hover,
.is-style-outline .wp-block-button__link:hover {
	background-color: var(--fba-primary) !important;
	color: var(--fba-bg-white) !important;
}

/* ============================================================
   Forms
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"],
textarea,
select {
	width: 100%;
	padding: 12px 16px;
	font-family: var(--fba-font-sans);
	font-size: var(--fba-text-base);
	line-height: 1.6;
	color: var(--fba-text);
	background-color: var(--fba-bg-white);
	border: 1px solid var(--fba-line);
	border-radius: var(--fba-radius);
	transition: border-color var(--fba-transition), box-shadow var(--fba-transition);
	-webkit-appearance: none;
	appearance: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--fba-primary);
	box-shadow: 0 0 0 3px rgba(223, 5, 21, 0.12);
}

label {
	display: inline-block;
	margin-bottom: var(--fba-space-2);
	font-weight: 600;
	font-size: var(--fba-text-sm);
	color: var(--fba-text);
}

/* ============================================================
   Layout Helpers
   ============================================================ */

.fba-section {
	padding: var(--fba-space-7) 0;
}

.fba-section--beige {
	background-color: var(--fba-bg-beige);
}

.fba-section--gray {
	background-color: var(--fba-bg-gray);
}

.fba-section--dark {
	background-color: var(--fba-ink);
	color: var(--fba-bg-white);
}

.fba-section--dark h1,
.fba-section--dark h2,
.fba-section--dark h3 {
	color: var(--fba-bg-white);
}

@media (max-width: 767px) {
	.fba-section {
		padding: var(--fba-space-5) 0;
	}
}

/* セクション見出しの装飾（左に細い赤線）*/
.fba-section-title {
	position: relative;
	padding-left: var(--fba-space-3);
	border-left: 3px solid var(--fba-primary);
	margin-bottom: var(--fba-space-5);
}

/* ============================================================
   PMPro Overrides
   ============================================================ */

/* レベル選択ページ */
#pmpro_levels_table,
.pmpro_levels_table {
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--fba-line);
	border-radius: var(--fba-radius-lg);
	overflow: hidden;
	margin: var(--fba-space-5) 0;
	background: var(--fba-bg-white);
}

#pmpro_levels_table th,
.pmpro_levels_table th {
	background-color: var(--fba-bg-beige);
	color: var(--fba-text);
	font-weight: 700;
	font-size: var(--fba-text-base);
	padding: var(--fba-space-3);
	text-align: left;
	border-bottom: 1px solid var(--fba-line);
}

#pmpro_levels_table td,
.pmpro_levels_table td {
	padding: var(--fba-space-3);
	border-bottom: 1px solid var(--fba-line);
	vertical-align: top;
}

#pmpro_levels_table tr:last-child td,
.pmpro_levels_table tr:last-child td {
	border-bottom: none;
}

/* チェックアウトページ */
#pmpro_form,
.pmpro_form,
.pmpro_checkout {
	background: var(--fba-bg-beige-soft);
	padding: var(--fba-space-5);
	border-radius: var(--fba-radius-lg);
	margin: var(--fba-space-4) 0;
}

.pmpro_checkout-fields legend {
	font-weight: 700;
	font-size: var(--fba-text-lg);
	color: var(--fba-text);
	padding: 0 var(--fba-space-2);
}

/* マイページ・アカウント */
.pmpro_account {
	margin: var(--fba-space-5) 0;
}

.pmpro_account-membership,
.pmpro_account-billing,
.pmpro_account-orders,
.pmpro_account-profile {
	background: var(--fba-bg-white);
	border: 1px solid var(--fba-line);
	border-radius: var(--fba-radius);
	padding: var(--fba-space-4);
	margin-bottom: var(--fba-space-4);
}

.pmpro_account h3 {
	color: var(--fba-text);
	border-bottom: 2px solid var(--fba-primary);
	padding-bottom: var(--fba-space-2);
	margin-bottom: var(--fba-space-3);
}

/* メッセージ */
.pmpro_message,
.pmpro_error,
.pmpro_success {
	padding: var(--fba-space-3) var(--fba-space-4);
	border-radius: var(--fba-radius);
	margin: var(--fba-space-3) 0;
}

.pmpro_success {
	background-color: rgba(51, 194, 176, 0.1);
	border-left: 4px solid var(--fba-emotion-teal);
	color: var(--fba-text);
}

.pmpro_error {
	background-color: rgba(223, 5, 21, 0.08);
	border-left: 4px solid var(--fba-primary);
	color: var(--fba-text);
}

/* ============================================================
   FBA Group Codes Plugin Style Overrides
   ============================================================ */

.fba-group-code-box {
	border-color: var(--fba-primary) !important;
	background: var(--fba-bg-beige) !important;
}

.fba-group-code-title {
	color: var(--fba-text) !important;
	font-family: var(--fba-font-display);
}

.fba-group-code-value {
	color: var(--fba-primary) !important;
	border-color: var(--fba-primary) !important;
	background: var(--fba-bg-white) !important;
}

/* ============================================================
   wpForo Overrides
   ============================================================ */

#wpforo-wrap,
.wpforo {
	font-family: var(--fba-font-sans) !important;
}

#wpforo-wrap a,
.wpforo a {
	color: var(--fba-primary);
}

#wpforo-wrap a:hover,
.wpforo a:hover {
	color: var(--fba-primary-hover);
}

#wpforo-wrap .wpforo-forum,
#wpforo-wrap .wpforo-topic-wrap,
.wpforo-forum,
.wpforo-topic-wrap {
	background: var(--fba-bg-white);
	border: 1px solid var(--fba-line);
	border-radius: var(--fba-radius);
}

/* 投稿の見出し */
#wpforo-wrap .wpforo-forum-title a,
#wpforo-wrap .wpforo-topic-title a,
.wpforo-forum-title a,
.wpforo-topic-title a {
	color: var(--fba-text);
	font-family: var(--fba-font-display);
	font-weight: 700;
}

#wpforo-wrap .wpforo-forum-title a:hover,
.wpforo-forum-title a:hover {
	color: var(--fba-primary);
}

/* 通知バッジ・カウンター */
.wpforo-counter,
#wpforo-wrap .wpforo-counter {
	background-color: var(--fba-primary);
	color: var(--fba-bg-white);
}

/* ============================================================
   Header / Footer adjustments
   ============================================================ */

.site-header {
	background-color: var(--fba-bg-white);
	border-bottom: 1px solid var(--fba-line);
}

.site-footer {
	background-color: var(--fba-bg-beige);
	color: var(--fba-text);
	padding: var(--fba-space-6) 0 var(--fba-space-4);
}

.site-footer a {
	color: var(--fba-text);
}

.site-footer a:hover {
	color: var(--fba-primary);
}

/* ============================================================
   Misc Utility
   ============================================================ */

.fba-divider {
	height: 1px;
	background: var(--fba-line);
	border: none;
	margin: var(--fba-space-5) 0;
}

.fba-divider--accent {
	height: 2px;
	background: var(--fba-primary);
	width: 60px;
	margin-left: 0;
}

.fba-text-muted {
	color: var(--fba-text-muted);
}

.fba-bg-beige {
	background-color: var(--fba-bg-beige);
}

.fba-bg-gray {
	background-color: var(--fba-bg-gray);
}

/* Selection style */
::selection {
	background: var(--fba-primary);
	color: var(--fba-bg-white);
}