/*
Theme Name: Lightning Child (じょいん)
Theme URI: https://musubime.biz/
Description: Lightning の子テーマ。じょいん公式サイト用カスタマイズ。
Author: 合同会社むすびめ
Author URI: https://musubime.biz/
Template: lightning
Version: 0.2.0
Text Domain: lightning-child
*/

/* ========================================================
   ▼ デザイントークン (むすびめ名刺カラーをベースに)
======================================================== */
:root {
  /* ── じょいん デザイントークン ── */
  --jn-color-primary: #E0B274;
  --jn-color-primary-deep: #C99551;
  --jn-color-primary-soft: #F4DDB8;
  --jn-color-primary-pale: #FBF1DE;
  --jn-color-accent: #6B8E7F;
  --jn-color-link: #B8843D;
  --jn-color-bg: #FFFFFF;
  --jn-color-bg-soft: #FBF7F0;
  --jn-color-bg-section: #FAF4EA;
  --jn-color-text: #2D2D2D;
  --jn-color-text-light: #6E6E6E;
  --jn-color-text-mute: #999999;
  --jn-color-border: #E8DFCD;
  --jn-radius: 16px;
  --jn-radius-pill: 999px;
  --jn-shadow-soft: 0 4px 20px rgba(180, 130, 60, 0.08);
  --jn-shadow-card: 0 2px 12px rgba(180, 130, 60, 0.10);

  /* ── Lightning / VK Blocks テーマ変数を上書き ── */
  --vk-color-primary: #E0B274;
  --vk-color-primary-dark: #C99551;
  --vk-color-primary-vivid: #D4A060;
  --vk-color-link: #B8843D;
  --vk-color-link-text: #B8843D;
  --vk-color-link-text-hover: #C99551;
}

/* ========================================================
   ▼ ベースタイポ
======================================================== */
body {
  color: var(--jn-color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Meiryo", sans-serif;
  font-feature-settings: "palt";
  letter-spacing: 0.02em;
  line-height: 1.85;
  background: var(--jn-color-bg);
}
p { line-height: 1.95; }
a { color: var(--jn-color-link); transition: opacity 0.2s; }
a:hover { opacity: 0.7; }

/* 見出しの和文を少し柔らかく */
h1, h2, h3, h4, h5, h6,
.entry-title,
.wp-block-heading {
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ========================================================
   ▼ ハイライター (vk_highlighter) を名刺ゴールドに置換
   旧: 黄色 (#fffd6b, #fffda3)
   新: 柔らかゴールド
======================================================== */
.vk_highlighter,
span.vk_highlighter[data-color] {
  background: linear-gradient(transparent 60%, rgba(244, 221, 184, 0.85) 60%) !important;
  padding: 0 0.1em;
}

/* ========================================================
   ▼ 黄色背景の見出し (#eca30a インライン) を上書き
======================================================== */
h2.wp-block-heading[style*="eca30a"],
h3.wp-block-heading[style*="eca30a"],
h4.wp-block-heading[style*="eca30a"],
h5.wp-block-heading[style*="eca30a"],
h6.wp-block-heading[style*="eca30a"],
[class*="wp-block-heading"][style*="background-color:#eca30a"],
[class*="wp-block-heading"][style*="background-color: #eca30a"] {
  background-color: var(--jn-color-primary) !important;
  color: #FFFFFF !important;
  padding: 16px 32px !important;
  border-radius: var(--jn-radius-pill) !important;
  display: inline-block !important;
  font-size: clamp(20px, 4vw, 28px) !important;
  letter-spacing: 0.1em !important;
  box-shadow: var(--jn-shadow-soft) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* テキストアラインセンターのときは中央寄せに */
.has-text-align-center[style*="eca30a"] {
  display: block !important;
  width: fit-content !important;
}

/* ========================================================
   ▼ 「is-style-vk-heading-plain」の見出しを刷新
   左に縦線アクセント
======================================================== */
.wp-block-heading.is-style-vk-heading-plain:not([style*="eca30a"]) {
  position: relative;
  padding: 0.2em 0 0.2em 1em;
  border-left: 5px solid var(--jn-color-primary);
  margin: 1.5em 0 1em;
  font-size: clamp(18px, 3.5vw, 24px);
}

/* ========================================================
   ▼ ボタン (汎用)
======================================================== */
.wp-block-button__link,
.btn-primary,
button[type="submit"],
.wpcf7-submit {
  background-color: var(--jn-color-primary) !important;
  border-color: var(--jn-color-primary) !important;
  color: #FFFFFF !important;
  border-radius: var(--jn-radius-pill) !important;
  padding: 14px 36px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  box-shadow: var(--jn-shadow-soft) !important;
  transition: all 0.25s ease !important;
}
.wp-block-button__link:hover,
.btn-primary:hover,
button[type="submit"]:hover,
.wpcf7-submit:hover {
  background-color: var(--jn-color-primary-deep) !important;
  transform: translateY(-1px);
}

/* アウトライン版 */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--jn-color-primary-deep) !important;
  border: 2px solid var(--jn-color-primary) !important;
}

/* ========================================================
   ▼ カラム/カード共通: 余白とシャドウ
======================================================== */
.wp-block-columns {
  gap: 24px;
}
.wp-block-column {
  border-radius: var(--jn-radius);
}

/* 画像にも軽い角丸とシャドウ */
.wp-block-image img,
.wp-block-gallery img {
  border-radius: var(--jn-radius);
  box-shadow: var(--jn-shadow-card);
}

/* ========================================================
   ▼ セクション間スペース
======================================================== */
.wp-block-spacer { height: 60px !important; }
.entry-content > * { margin-top: 1.5em; }
.entry-content > h2 { margin-top: 4em; margin-bottom: 1em; }

/* ========================================================
   ▼ メインビジュアル（スライダー）非表示
======================================================== */
.ltg-slide { display: none !important; }

/* ========================================================
   ▼ サイトヘッダー/ナビ
======================================================== */
.site-header {
  background: var(--jn-color-bg);
  border-bottom: 1px solid var(--jn-color-border);
  box-shadow: var(--jn-shadow-soft);
}

/* ロゴを丸く・柔らかく */
.site-header-logo img {
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(160, 115, 50, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.site-header-logo a:hover img {
  transform: scale(1.05);
  box-shadow: 0 6px 28px rgba(160, 115, 50, 0.42);
}

/* ナビメニュー */
#site-header-menu .menu-item a {
  color: var(--jn-color-text);
  font-weight: 500;
  letter-spacing: 0.05em;
  position: relative;
  padding: 0.5em 1em;
}
#site-header-menu .menu-item a:hover {
  color: var(--jn-color-primary-deep);
}
#site-header-menu .menu-item.current-menu-item a::after,
#site-header-menu .menu-item a:hover::after {
  content: "";
  position: absolute;
  left: 1em;
  right: 1em;
  bottom: 4px;
  height: 2px;
  background: var(--jn-color-primary);
  border-radius: 2px;
}

/* ========================================================
   ▼ フッター
======================================================== */
.site-footer {
  background: var(--jn-color-bg-soft);
  border-top: 4px solid var(--jn-color-primary);
  color: var(--jn-color-text);
  padding-top: 48px;
}
.site-footer a { color: var(--jn-color-link); }

/* コピーライト */
.site-footer-copyright {
  background: var(--jn-color-bg-section);
  color: var(--jn-color-text-light);
  font-size: 12px;
}

/* ========================================================
   ▼ お知らせリスト
======================================================== */
.veu_post-info-list .item {
  border-bottom: 1px dashed var(--jn-color-border);
  padding: 14px 4px;
  transition: background 0.2s;
}
.veu_post-info-list .item:hover {
  background: var(--jn-color-bg-soft);
}
.veu_post-info-list .item time {
  color: var(--jn-color-primary-deep);
  font-weight: 600;
}

/* ========================================================
   ▼ 引用 (理念の詩) のスタイル強化
======================================================== */
.entry-content blockquote {
  border-left: 4px solid var(--jn-color-primary);
  background: var(--jn-color-primary-pale);
  padding: 1.5em 1.8em;
  border-radius: 8px;
  font-style: normal;
}

/* ========================================================
   ▼ 段落の見やすさ調整 (本文のみ)
======================================================== */
.entry-content p {
  margin-bottom: 1em;
}
.entry-content .has-text-align-center {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ========================================================
   ▼ Contact Form 7
======================================================== */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  border: 1px solid var(--jn-color-border);
  border-radius: 8px;
  padding: 12px 14px;
  width: 100%;
  background: var(--jn-color-bg-soft);
  transition: border-color 0.2s;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  border-color: var(--jn-color-primary);
  outline: none;
  background: #FFFFFF;
}

/* ========================================================
   ▼ ヒーローセクション（外観写真カバー）
======================================================== */
.jn-hero-cover {
  min-height: 380px !important;
  margin-bottom: 60px !important;
}

.jn-hero__title {
  font-size: clamp(22px, 4.5vw, 42px) !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  letter-spacing: 0.06em !important;
  margin: 0 auto 20px !important;
  max-width: 800px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85), 0 0 40px rgba(0, 0, 0, 0.6) !important;
}

.jn-hero__sub {
  font-size: clamp(12px, 1.8vw, 15px) !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 36px !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8) !important;
}

/* ヒーローのボタンはやや大きめ */
.jn-hero-cover .wp-block-button__link {
  padding: 16px 44px !important;
  font-size: 15px !important;
}

@media (max-width: 767px) {
  .jn-hero-cover { min-height: 260px !important; }
}

/* ========================================================
   ▼ VK Flow ブロック (ご利用までの流れ)
======================================================== */
.vk_flow .vk_flow_frame {
  border: 2px solid var(--jn-color-border) !important;
  border-radius: var(--jn-radius) !important;
  background: var(--jn-color-bg) !important;
  box-shadow: var(--jn-shadow-card) !important;
  padding: 20px 24px !important;
  transition: box-shadow 0.25s;
}
.vk_flow .vk_flow_frame:hover {
  box-shadow: 0 6px 24px rgba(180, 130, 60, 0.18) !important;
}
.vk_flow .vk_flow_frame_text_title {
  border-bottom: 2px solid var(--jn-color-primary-soft) !important;
  color: var(--jn-color-primary-deep) !important;
  font-weight: 700 !important;
  font-size: 1.1em !important;
  letter-spacing: 0.04em !important;
  padding: 0 0 8px !important;
  margin: 0 0 12px !important;
}

/* フロー矢印をゴールドに (background-imageを直接!importantで上書き) */
.vk_flow.vk_flow-arrow-on::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpolygon fill='%23E0B274' points='11.7%2C20 24%2C32.3 36.2%2C20'/%3E%3C/svg%3E") !important;
}

/* ========================================================
   ▼ テーブル (料金・アクセス)
======================================================== */
/* 外枠・角丸は figure ラッパーに持たせる */
figure.wp-block-table {
  border: 1.5px solid var(--jn-color-border);
  border-radius: var(--jn-radius);
  overflow: hidden;
  box-shadow: var(--jn-shadow-card);
  margin: 0;
}
.wp-block-table table {
  border-collapse: collapse;
  width: 100%;
  margin: 0;
}
.wp-block-table table td,
.wp-block-table table th {
  border: 1px solid var(--jn-color-border);
  padding: 12px 16px;
  vertical-align: top;
  line-height: 1.7;
}
/* 1行目をヘッダー風に */
.wp-block-table table tr:first-child td,
.wp-block-table table th {
  background-color: var(--jn-color-primary-pale);
  font-weight: 700;
}
/* 2行目以降の奇数・偶数ストライプ */
.wp-block-table table tbody tr:not(:first-child):nth-child(odd) td {
  background-color: var(--jn-color-bg-soft);
}
.wp-block-table table tbody tr:not(:first-child):nth-child(even) td {
  background-color: var(--jn-color-bg);
}
/* 左列ラベルを少し強調 */
.wp-block-table table td:first-child {
  font-weight: 600;
  color: var(--jn-color-text);
  white-space: nowrap;
}

/* ========================================================
   ▼ レスポンシブ調整
======================================================== */
@media (max-width: 767px) {
  .wp-block-spacer { height: 40px !important; }
  .entry-content > h2 { margin-top: 2.5em; }
  .wp-block-table table td:first-child { white-space: normal; }
}

/* ========================================================
   ▼ Google マップ レスポンシブ
======================================================== */
.wp-block-html iframe[src*="google.com/maps"] {
  width: 100% !important;
  max-width: 100%;
  height: 450px;
  border-radius: var(--jn-radius);
  display: block;
}