/*
 Theme Name: Lightning Child
 Theme URI:  https://example.com/
 Description: Child theme for Lightning
 Author: あなたの名前
 Template: lightning
 Version: 1.0.2
*/

/* ========== 共通 ========== */
img, figure { max-width:100%; height:auto; }

/* =========================
   記事カード（一覧ページ／旧UI用）
   ========================= */
.posts {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:20px;
  align-items:start;
}
@media (min-width:900px){ .posts{ grid-template-columns:repeat(3,1fr); } }
.post{
  background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  padding:12px; font-size:14px;
  transition:box-shadow .15s ease, transform .04s ease;
}
.post:hover{ box-shadow:0 8px 20px rgba(0,0,0,.06); transform:translateY(-2px); }
.post h4{ font-size:16px; margin:0 0 6px; line-height:1.5; }
.post .meta{ font-size:12px; color:#6b7280; }

/* ==============================
   メイン＋サイド：2カラム共通
   ============================== */
.content-area{
  display:grid; grid-template-columns:1fr; gap:32px; align-items:start;
}
@media (min-width:1024px){ .content-area{ grid-template-columns:3fr 1fr; } }
.main-content{ width:100%; }
.sidebar{
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:20px;
}
.sidebar h3{ font-size:18px; margin:0 0 16px; }
.sidebar ul{ list-style:none; margin:0; padding:0; }
.sidebar li{ margin:0 0 10px; }
.sidebar a{ color:#15803d; text-decoration:none; }
.sidebar a:hover{ text-decoration:underline; }

/* ============================================================
   共通カテゴリUI（mybest風）: .lhc-* 名前空間
   ============================================================ */
.lhc-wrap *{ box-sizing:border-box; }
.lhc-wrap{ max-width:1150px; margin:0 auto; padding:24px; }

/* 記事カード（共通） */
.lhc-card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden;
  min-height:280px; position:relative; transition:box-shadow .15s ease, transform .04s ease;
}
.lhc-card:hover{ box-shadow:0 8px 20px rgba(0,0,0,.06); transform:translateY(-2px); }
.lhc-card .thumb{ width:100%; aspect-ratio:16/9; background:#f7f8fa; border-bottom:1px solid #e5e7eb; }
.lhc-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.lhc-card .body{ padding:14px; display:flex; flex-direction:column; gap:6px; flex:1 1 auto; }
.lhc-card .title{ font-size:16px; font-weight:700; line-height:1.5; margin:0; }
.lhc-card .meta{ font-size:12px; color:#6b7280; margin-top:auto; }

.lhc-pager{ display:flex; gap:8px; justify-content:center; margin:24px 0; }
.lhc-pager a,.lhc-pager span{
  padding:8px 12px; border:1px solid #e5e7eb; border-radius:8px; text-decoration:none; color:#111827;
}
.lhc-pager .current{ background:#16a34a; border-color:#16a34a; color:#fff; }

/* =========================
   ヘッダーロゴ関連
   ========================= */
/* サイトタイトル非表示（ロゴのみ） */
.site-branding .site-title,
.site-branding .site-description{
  position:absolute !important; clip:rect(1px,1px,1px,1px);
  width:1px; height:1px; overflow:hidden; white-space:nowrap;
}

/* ロゴサイズ調整 */
.vk-site-header-logo img.custom-logo,
.site-header .site-branding img.custom-logo,
.custom-logo-link>img.custom-logo{
  height:56px !important; width:auto !important; max-height:none !important; display:block;
}
@media (min-width:992px){
  .vk-site-header-logo img.custom-logo,
  .site-header .site-branding img.custom-logo,
  .custom-logo-link>img.custom-logo{ height:152px !important; }
}

/* ヘッダー余白 */
.site-header{ padding-top:4px; padding-bottom:4px; }
@media (min-width:992px){ .site-header{ padding-top:6px; padding-bottom:6px; } }
.site-header .site-branding,.vk-site-header-logo{ display:flex; align-items:center; }

/* カテゴリ見出しエリアのロゴ */
.lhc-header img.custom-logo,
.lhc-header .custom-logo-link>img.custom-logo{ height:56px; width:auto; display:block; }
@media (min-width:992px){
  .lhc-header img.custom-logo,.lhc-header .custom-logo-link>img.custom-logo{ height:76px; }
}

/* 旧「L+」は非表示 */
.lhc-logo{ display:none !important; }

/* 見出し帯 */
.lhc-header{ padding:8px 0; }
@media (min-width:992px){ .lhc-header{ padding:10px 0; } }

/* 投稿ページのロゴ＆余白 */
.single .vk-site-header-logo img.custom-logo,
.single .site-header .site-branding img.custom-logo,
.single .custom-logo-link>img.custom-logo,
.single header.site-header img.custom-logo,
.single .vk-header-logo img,.single .site-header-logo img{
  height:56px !important; width:auto !important; max-height:none !important; display:block;
}
@media (min-width:992px){
  .single .vk-site-header-logo img.custom-logo,
  .single .site-header .site-branding img.custom-logo,
  .single .custom-logo-link>img.custom-logo,
  .single header.site-header img.custom-logo,
  .single .vk-header-logo img,.single .site-header-logo img{ height:128px !important; }
}
.single .site-header{ padding-top:6px; padding-bottom:6px; }
@media (min-width:992px){ .single .site-header{ padding-top:8px; padding-bottom:8px; } }

/* =========================
   投稿ページの下部・サイドバー系を非表示
   ========================= */
.single .wp-block-categories,
.single .wp-block-archives,
.single .widget_categories,
.single .widget_archive,
.single aside#secondary,
.single .l-sidebar,
.single .site-sidebar,
.single .widget-area,
.single #side{ display:none !important; }

/* =========================
   Life hack+ custom footer（GMO風）
   ========================= */
.lhc-footer{
  background:#f6f7f9; color:#111827; border-top:1px solid #e5e7eb;
  margin-top:48px; font-size:14px;
}
.lhc-footer a{ color:inherit; text-decoration:none; }
.lhc-footer a:hover{ text-decoration:underline; }

.lhc-footer__container{
  max-width:1200px; margin:0 auto; padding:32px 20px;
  display:grid; gap:28px;
}

/* 上段：ブランド + 3カラムナビ */
.lhc-footer__brand{ display:flex; flex-direction:column; gap:10px; }

/* フッターロゴ */
.lhc-footer-logo-img{ height:128px; width:auto; display:block; }
@media (min-width:960px){ .lhc-footer-logo-img{ height:128px; } }
.lhc-footer__logo img{ height:128px; width:auto; display:block; } /* 互換 */

.lhc-footer__logo-text{ font-weight:700; font-size:18px; }
.lhc-footer__tagline{ color:#6b7280; margin:0; }
.lhc-footer__sns{ display:flex; gap:12px; list-style:none; padding:0; margin:2px 0 0; }

.lhc-footer__nav{ display:grid; gap:24px; }
.lhc-footer__col{ min-width:0; }
.lhc-footer__heading{
  font-size:16px; font-weight:700; margin:0 0 8px;
  border-bottom:1px solid #e5e7eb; padding-bottom:6px;
}
.lhc-footer__list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }

@media (min-width:960px){
  .lhc-footer__container{ grid-template-columns:1.2fr 2fr; align-items:start; }
  .lhc-footer__nav{ grid-template-columns:repeat(3,1fr); }
}

.lhc-footer__bottom{
  border-top:1px solid #e5e7eb; text-align:center;
  padding:14px 12px; color:#6b7280; background:#f6f7f9;
}
.lhc-footer__copy{ margin:0; }

/* 親テーマの既存フッターを消す保険 */
.site-footer,.vk-footer,.footer-widget-area,.site-info{ display:none !important; }

/* --- SNS アイコン（ブランドカラー版） --- */
.lhc-sns{ display:flex; gap:12px; list-style:none; padding:0; margin:2px 0 0; }
.lhc-sns__link{
  display:grid; place-items:center; width:40px; height:40px; border-radius:10px;
  background:#fff; border:1px solid #e5e7eb;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lhc-sns__icon{ width:22px; height:22px; display:block; }
.lhc-sns__link--x{ color:#000; }
.lhc-sns__link--x:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.08); border-color:#d1d5db; }
.lhc-sns__link--ig:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(221,42,123,.25); border-color:#f0a; }
.lhc-sns__link--yt:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(255,0,0,.18); border-color:#ff8a8a; }

/* =========================
   Category page base（崩れ対策）
   ========================= */
/* 見えないラベル（スクリーンリーダー用） */
.lhc-sr-only{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ヘッダー（ロゴ + 検索） */
.lhc-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin:12px 0 20px; }
.lhc-brand{ display:flex; align-items:center; gap:12px; }
.lhc-cat-logo{ height:36px; width:auto; display:block; }
@media (min-width:960px){ .lhc-cat-logo{ height:48px; } }

/* 検索フォーム */
.lhc-search{ flex:1 1 auto; max-width:520px; }
.lhc-searchform{ position:relative; }
.lhc-searchform .icon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; opacity:.6;
}
.lhc-searchform .field{
  width:100%; height:40px; padding:0 12px 0 40px;
  border:1px solid #e5e7eb; border-radius:10px; background:#fff;
  font-size:14px; outline:0;
}
.lhc-searchform .field:focus{ border-color:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.15); }

/* パンくず・タイトル */
.lhc-bc{ font-size:12px; color:#6b7280; display:flex; align-items:center; gap:6px; margin:6px 0 12px; }
.lhc-bc a{ color:inherit; text-decoration:none; }
.lhc-bc a:hover{ text-decoration:underline; }
.lhc-head h1{ font-size:28px; margin:0 0 6px; }
.lhc-head p{ color:#374151; margin:0 0 12px; line-height:1.7; }

/* 2カラムレイアウト（左ナビ / 右リスト） */
.lhc-grid{ display:grid; grid-template-columns:1fr; gap:24px; align-items:start; }
@media (min-width:1024px){ .lhc-grid{ grid-template-columns:280px 1fr; } }

/* 左ナビ（アコーディオン） */
.lhc-acc h3{ font-size:16px; margin:0 0 8px; font-weight:700; }
.lhc-acc details{ border:1px solid #e5e7eb; border-radius:10px; background:#fff; margin:10px 0; overflow:hidden; }
.lhc-acc summary{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; cursor:pointer; list-style:none; }
.lhc-acc .acc-title{ display:flex; align-items:center; gap:8px; font-weight:600; }
.lhc-acc .acc-icon{ width:20px; text-align:center; }
.lhc-acc .acc-count{ color:#6b7280; font-size:12px; }
.lhc-acc ul{ margin:0; padding:8px 12px 12px 12px; list-style:none; display:grid; gap:6px; }
.lhc-acc li a{ text-decoration:none; color:#111827; }
.lhc-acc li.is-current>a{ color:#16a34a; font-weight:700; }

/* 記事一覧のグリッド（カテゴリ） */
.lhc-posts{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); }

/* 並び替えタブ */
.lhc-sort{ display:flex; gap:10px; margin:6px 0 12px; }
.lhc-sort a{
  display:inline-block; padding:6px 10px; border:1px solid #e5e7eb; border-radius:8px;
  color:#111827; text-decoration:none; background:#fff;
}
.lhc-sort a.is-active{ background:#16a34a; border-color:#16a34a; color:#fff; }