@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* ==========================================================
   サイト共通配色トークン（仕様書スタイルガイド / 旅の記録ページ準拠）
   ========================================================== */
:root{
  --oj-navy:#1A5276;
  --oj-slate:#4A5568;
  --oj-pale:#EBF5FB;
  --oj-ink:#20241F;
}

/* ==========================================================
   整備記録(kms) / 部品マスタ(kpm) の配色を「旅の記録」に統一
   対象コードは Code Snippets 側（データ取得・検索絞り込みJS）で、
   ここでは見た目の色だけを上書きする。ロジックには触れない。
   ========================================================== */
#kms-t th,
#kp-table th{
  background:var(--oj-slate) !important;
}
#kms-t tr:nth-child(even) td,
#kp-table tr:nth-child(even) td{
  background:var(--oj-pale) !important;
}
#kms-t tr:hover td,
#kp-table tr:hover td{
  background:#DCEEFB !important;
}
.kms-badge{
  background:rgba(26,82,118,.12) !important;
  color:var(--oj-navy) !important;
}
.kms-sub li{
  border-left-color:var(--oj-navy) !important;
}

/* 整備記録・部品マスタの表をスマホで横スクロール可能にする */
@media screen and (max-width: 600px){
  #kms-t, #kp-table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
  }
}

/* ==========================================================
   新トップページ（front-page.php）用スタイル
   ブログ記事を主役に、旅の記録・整備記録・部品マスタは
   ページ下部の小さな「自分用リンク帯」として控えめに配置する。
   ========================================================== */
.oj-home{
  margin:-1px -1px 2.2rem;
}

/* ---- サイト本来のヘッダー画像（Cocoonカスタマイザー設定）を差し替え ---- */
.header{
  background-image:url('https://outdoor-junior.website/wp-content/themes/cocoon-child-master/images/hero-fuji.jpg') !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
}
.header .header-in{
  aspect-ratio:16/9 !important;
  min-height:0 !important;
  height:auto !important;
}
.header .site-name-text{
  font-size:clamp(22px, 3vw, 34px) !important;
  font-weight:800 !important;
  text-shadow:0 2px 8px rgba(0,0,0,.6) !important;
}
/* スクロール時に画面上部へ固定される「追従ミニヘッダー」には写真を出さない（中途半端に見切れるため） */
#header-container.fixed-header .header{
  background-image:none !important;
}
#header-container.fixed-header .header .header-in{
  aspect-ratio:auto !important;
}

.header .tagline{
  font-size:clamp(13px, 1.4vw, 16px) !important;
  text-shadow:0 1px 6px rgba(0,0,0,.6) !important;
}

/* ---- 写真ヒーロー（.oj-hero、元ヘッダーで使っていたキャンピングカー+富士山の写真） ---- */
.oj-hero{
  position:relative;
  min-height:340px;
  margin-bottom:2rem;
  border-radius:10px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  background-image:
    linear-gradient(180deg, rgba(20,24,30,.2) 0%, rgba(15,20,25,.6) 65%, rgba(10,14,18,.82) 100%),
    url('https://outdoor-junior.website/wp-content/uploads/2022/11/IMG_3552.jpeg');
  background-size:cover;
  background-position:center 60%;
}
.oj-hero-in{
  position:relative;
  padding:2.4rem 2rem 2rem;
  color:#fff;
}
.oj-hero .oj-tag{
  font-size:1rem;
  letter-spacing:.1em;
  color:#DCEEFB;
  font-weight:700;
  text-transform:uppercase;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.oj-hero h2{
  font-size:clamp(1.7rem, 4vw, 2.5rem);
  margin:.6rem 0 .7rem;
  color:#fff;
  font-weight:800;
  line-height:1.35;
  border:none;
  padding:0;
  background:none;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}
.oj-hero p{
  margin:0;
  color:#EDEDE6;
  font-size:1.1rem;
  max-width:56ch;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}

/* ---- 最新記事カード（メイン） ---- */
.oj-section-label{
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#5B5A4E;
  font-weight:700;
  margin:0 0 .8rem;
}
.oj-posts{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.1rem;
  margin-bottom:2.2rem;
}
.oj-post{
  display:block;
  text-decoration:none;
  border:1px solid #DAD4C3;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  transition:box-shadow .15s ease, transform .15s ease;
}
.oj-post:hover{
  box-shadow:0 4px 16px rgba(32,36,31,.12);
  transform:translateY(-2px);
}
.oj-post .oj-thumb{
  aspect-ratio:16/10;
  background:var(--oj-pale) center/cover no-repeat;
  display:block;
}
.oj-post .oj-post-body{
  padding:.9rem 1rem 1.1rem;
}
.oj-post time{
  font-size:.72rem;
  color:#8a8a7c;
  letter-spacing:.03em;
}
.oj-post h3{
  margin:.35rem 0 0;
  font-size:.98rem;
  line-height:1.5;
  color:var(--oj-ink);
  font-weight:700;
  border:none;
  padding:0;
  background:none;
}
.oj-post:hover h3{
  color:var(--oj-navy);
}

/* ---- 自分用リンク帯（旅の記録・整備・部品マスタ） ---- */
.oj-personal{
  border-top:1px solid #DAD4C3;
  padding-top:1.1rem;
}
.oj-personal .oj-section-label{
  display:flex;
  align-items:center;
  gap:.4rem;
}
.oj-personal-links{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}
.oj-personal-links a{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.82rem;
  color:var(--oj-navy);
  background:var(--oj-pale);
  border:1px solid rgba(26,82,118,.18);
  border-radius:100px;
  padding:.4rem .9rem;
  text-decoration:none;
}
.oj-personal-links a:hover{
  background:#DCEEFB;
}

/* ==========================================================
   サイドバーの整理
   ・季節スキン(skin-season-spring)による見出しの配色崩れを補正
   ・空ウィジェット/重複したページ一覧ウィジェットを非表示
   ・カテゴリーをタグ風のピル表示に
   ========================================================== */
#sidebar h2,
#sidebar h3.widget-title{
  background:none !important;
  color:var(--oj-ink) !important;
  border-left:4px solid var(--oj-navy);
  padding-left:.6rem !important;
  font-size:.92rem !important;
}

/* 空のグループウィジェットを非表示 */
#block-4{
  display:none;
}
/* 深く入れ子になった「リンク」ページ一覧は、トップページの記録リンク帯と重複するため非表示 */
#pages-3{
  display:none;
}

/* カテゴリー一覧をタグ風ピルに */
#block-6 ul.wp-block-categories{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  list-style:none;
  margin:0;
  padding:0;
}
#block-6 ul.wp-block-categories li{
  margin:0;
}
#block-6 ul.wp-block-categories a{
  display:inline-block;
  font-size:.76rem;
  color:var(--oj-navy);
  background:var(--oj-pale);
  border-radius:100px;
  padding:.25rem .7rem;
  text-decoration:none;
}
#block-6 ul.wp-block-categories a:hover{
  background:#DCEEFB;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  .oj-posts{
    grid-template-columns:repeat(2, 1fr);
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  .oj-hero{
    min-height:220px;
  }
  .oj-hero-in{
    padding:1.5rem 1.2rem 1.2rem;
  }
  .oj-posts{
    grid-template-columns:1fr;
  }
}