@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ（くるまのDIYラボ向けデザイン統一）
Theme URI: https://wp-cocoon.com/
Author: わいひら / カスタム: rake 用
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.2.0
*/

/* =========================================
   Design Baseline（くるまのDIYラボ）
   - 色・角丸・影・余白を変数で統一
   - ブレイクポイントは 1024 / 768 / 480 に集約
   ========================================= */
:root{
  --color-text: #2b2b2b;
  --color-muted:#6b7280;
  --color-primary:#90C31F; /* ブランドグリーンを統一 */
  --color-surface:#ffffff;
  --color-bg:#ffffff;

  --radius:12px;                  /* 角丸は全体で統一 */
  --shadow-sm:0 1px 4px rgba(0,0,0,.06);
  --shadow:0 6px 16px rgba(0,0,0,.08);
  --shadow-lg:0 10px 24px rgba(0,0,0,.12);
  --gap:16px;
}

/* ===== Reset/調整: 上位CSSの微調整を吸収 ===== */
.container { margin-top: 0 !important; }
body { color: var(--color-text); background: var(--color-bg); }

/* ===== アクセシビリティ（キーボード操作の可視化） ===== */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* =========================================
   Header（ロゴまわり）
   ========================================= */
.logo-image{
  margin: .75em 1em;
  max-height: 56px;
  padding: 0;
}
.logo-header img{ box-shadow:none !important; }
.logo{ text-align: left; }

@media (max-width:1024px){
  .logo{ text-align: center; }         /* モバイルは中央揃え */
  .logo-image{ margin: .5em auto; max-height: 48px; }
}

/* ▼（任意）モバイルで旧ヘッダーを隠したい場合だけON
@media (max-width:1024px){
  .header-container { display:none; }
  img.site-logo-image{ max-height:35px; padding:2px 0 0 5px; box-shadow:none; }
  .mobile-header-menu-buttons { background:#fff; }
}
*/

/* =========================================
   カテゴリーラベル（色・角丸を統一）
   ========================================= */
.eye-catch .cat-label, .cat-label{
  background-color: var(--color-primary);
  color:#fff;
  font-size: .75rem;
  border-radius: 9999px;
  padding: .15em .6em;
  margin:.4em;
}

/* =========================================
   おすすめカード / ナビカード（統一）
   ========================================= */
a.navi-entry-card-link.widget-entry-card-link.a-wrap{
  background: var(--color-surface) !important;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius) !important;
  margin: .75em 0 !important;
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
a.navi-entry-card-link.widget-entry-card-link.a-wrap:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
figure.navi-entry-card-thumb.widget-entry-card-thumb.card-thumb{ opacity:1; }
div.navi-entry-card-title.widget-entry-card-title.card-title{
  background: transparent;
  color: var(--color-text);
  font-weight: 700;
  font-size: .95rem;
  padding: .6em .8em;
  border-radius: var(--radius);
}

@media (max-width:768px){
  a.navi-entry-card-link.widget-entry-card-link.a-wrap{
    margin: .5em 0 !important;
    box-shadow: var(--shadow-sm);
  }
}

/* =========================================
   エントリーカード（一覧の揺れ止め&可読性UP）
   ========================================= */
/* 枠・背景・影を統一 */
a.entry-card-wrap.a-wrap.border-element.cf{
  width: 100% !important;        /* レイアウト幅はテーマ側に委ねる */
  display: block;
  border-radius: var(--radius) !important;
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  padding: 0 0 .5em;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
a.entry-card-wrap.a-wrap:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  background-color:#fff;
}

/* サムネ：高さの固定をやめ、比率で安定させる */
figure.entry-card-thumb.card-thumb.e-card-thumb{
  aspect-ratio: 16/9;     /* モダンブラウザで比率固定 */
  height: auto;           /* 既存のmax-height群を上書き */
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  display: block;
}
figure.entry-card-thumb.card-thumb.e-card-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* タイトル：左寄せ・読みやすいサイズ */
h2.entry-card-title.card-title.e-card-title{
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 700;
  text-align: left;
  margin: .75rem 1rem 0;
  padding: 0;
}

/* スニペット：色味・罫線・余白を統一 */
.entry-card-snippet.card-snippet.e-card-snippet{
  color: var(--color-muted);
  font-size: .95rem;
  line-height: 1.7;
  border-top: 2px solid var(--color-primary);
  margin: .5rem 1rem 1rem;
  padding-top: .6rem;
  max-height: none;       /* 可読性優先：制限を解除 */
}

/* 日付：色味を統一 */
a.entry-card-wrap.a-wrap.border-element.cf .post-date,
a.entry-card-wrap.a-wrap.border-element.cf .post-update{
  color: var(--color-muted) !important;
  font-size: .86em;
  margin-right: 1rem !important;
}

/* =========================================
   推奨の全体マージン微調整
   ========================================= */
main#main.main{ margin:0; }
.body .navi-entry-cards{ margin-bottom:0; }

/* =========================================
   レスポンシブ（3段に集約）
   ========================================= */
@media (max-width:1024px){
  a.navi-entry-card-link.widget-entry-card-link.a-wrap,
  a.entry-card-wrap.a-wrap.border-element.cf{
    box-shadow: var(--shadow-sm);
  }
}

@media (max-width:768px){
  h2.entry-card-title.card-title.e-card-title{
    font-size: 1rem;
    margin: .6rem .9rem 0;
  }
  .entry-card-snippet.card-snippet.e-card-snippet{
    font-size: .9rem;
    margin: .4rem .9rem .9rem;
  }
}

@media (max-width:480px){
  .logo-image{ max-height: 44px; }
  .cat-label{ font-size: .7rem; }
}

/* =========================================
   既存の“色ズレ”やmax-height乱立を吸収するための上書き
   （Cocoonの既定や過去CSSの影響を最小化）
   ========================================= */
.widget-entry-cards .a-wrap,
.widget-entry-cards .a-wrap:hover{
  transition: transform .12s ease, box-shadow .12s ease;
}
.widget-entry-cards.large-thumb-on .card-content{
  background: transparent;
}
div#list a{
  box-shadow: var(--shadow-sm);
}
div.admin-pv{ display:none; } /* 閲覧数非表示（維持） */
/* 固定ページ（page）だけ、本文上のアイキャッチを隠す */
.page .eye-catch{
  display: none !important;
}

/* 余白が気になる場合は上マージンを詰める（任意） */
.page .entry-content{
  margin-top: 0;
}