/*
Theme Name: Cocoon Child (しずくが落ちるとき。)
Theme URI: https://wp-cocoon.com/
Description: 「しずくが落ちるとき。」オリジナルスキン。水滴・波紋モチーフ、生成り〜ライトブルーの配色。
Author: ari-chan
Template: cocoon-master
Text Domain: cocoon-child
Version: 1.0.0
*/

@import url("../cocoon-master/style.css");

/* ============================================================
   フォント読み込み
   見出し：Shippori Mincho（しっとりした明朝）
   本文　：Zen Maru Gothic（やわらかい丸ゴシック）
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;700&family=Zen+Maru+Gothic:wght@400;500&display=swap');

/* ============================================================
   デザイントークン
   ============================================================ */
:root{
  /* ベースカラー（生成り） */
  --shizuku-cream:      #FAF7F1;
  --shizuku-cream-deep: #F3EEE4;

  /* テキストカラー */
  --shizuku-ink:    #3E4A52; /* 本文 */
  --shizuku-muted:  #7C8A90; /* 補足・キャプション */

  /* 水色〜青のグラデーション（アップロード画像から抽出） */
  --shizuku-blue-pale: #C7DEE7; /* 波の淡い部分 */
  --shizuku-blue-mid:  #6FA9AE; /* 波の中間（ティール寄り） */
  --shizuku-blue-deep: #4C6C8C; /* 波の濃い部分（ネイビー寄り） */

  --shizuku-border: #E7E2D8;

  --shizuku-font-heading: 'Shippori Mincho', serif;
  --shizuku-font-body: 'Zen Maru Gothic', sans-serif;
}

/* ============================================================
   ベース
   ============================================================ */
body{
  background-color: var(--shizuku-cream);
  color: var(--shizuku-ink);
  font-family: var(--shizuku-font-body);
  line-height: 1.9;
}

.article h1, .article h2, .article h3, .article h4,
.site-title, .tagline,
h1, h2, h3{
  font-family: var(--shizuku-font-heading);
  font-weight: 700;
  letter-spacing: 0.03em;
}

a{ color: var(--shizuku-blue-deep); }
a:hover{ color: var(--shizuku-blue-mid); }

.article{
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.article h2{
  border-bottom: 1px solid var(--shizuku-border);
  padding-bottom: 0.5em;
}

/* ============================================================
   ヘッダー（ヒーロー）
   Cocoon設定側の「ヘッダー背景画像」は未設定のままにしておいてください。
   （設定してあると、そちらのインライン指定が優先されてしまいます）
   ============================================================ */
.header{
  background-image: url('images/hero-bg.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: var(--shizuku-cream);
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header .site-name-title-logo,
.header .logo-header{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.header .site-title,
.header .site-title a{
  font-size: 2rem;
  color: var(--shizuku-ink);
}

.header .tagline{
  font-family: var(--shizuku-font-body);
  color: var(--shizuku-muted);
  font-size: 0.95rem;
  margin-top: 0.6em;
}

@media screen and (max-width: 600px){
  .header{
    background-image: url('images/hero-bg-mobile.webp');
    min-height: 38vh;
  }
  .header .site-title,
  .header .site-title a{
    font-size: 1.5rem;
  }
}

/* ============================================================
   ハンバーガーメニュー（アップロードいただいた波アイコンに差し替え）
   ============================================================ */
.navi-menu-icon.menu-icon{
  background-image: url('images/menu-icon.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px auto;
}
.navi-menu-icon .fa-bars{
  visibility: hidden;
}
@media (min-resolution: 2dppx){
  .navi-menu-icon.menu-icon{
    background-image: url('images/menu-icon@2x.png');
  }
}
@media (min-resolution: 3dppx){
  .navi-menu-icon.menu-icon{
    background-image: url('images/menu-icon@3x.png');
  }
}

/* スライドインメニューの中身 */
.navi-menu-content{
  background-color: rgba(250, 247, 241, 0.97);
}
.menu-drawer a{
  font-family: var(--shizuku-font-body);
  color: var(--shizuku-ink);
}
.menu-drawer a:hover{
  color: var(--shizuku-blue-deep);
  background-color: var(--shizuku-cream-deep);
}

/* ============================================================
   横スクロール写真ギャラリー（トップページ用）
   使い方：Gutenbergで「グループ」ブロックを作り、
   追加CSSクラスに hero-photo-scroll を指定 → 中に画像ブロックを並べる
   ============================================================ */
.hero-photo-scroll{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 12px;
  margin: 2em 0;
}
.hero-photo-scroll::-webkit-scrollbar{ height: 4px; }
.hero-photo-scroll::-webkit-scrollbar-thumb{
  background: var(--shizuku-blue-pale);
  border-radius: 4px;
}
.hero-photo-scroll .wp-block-image,
.hero-photo-scroll figure{
  flex: 0 0 auto;
  width: 68%;
  max-width: 300px;
  scroll-snap-align: start;
  margin: 0;
}
.hero-photo-scroll img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
@media screen and (min-width: 600px){
  .hero-photo-scroll .wp-block-image,
  .hero-photo-scroll figure{ width: 260px; }
}

/* ============================================================
   Pinterest風マソンリーギャラリー（「わたしのみている風景」用）
   使い方：グループブロックに photo-masonry クラスを指定し、
   中にギャラリーブロック（または画像ブロックを複数）を入れる
   ============================================================ */
.photo-masonry{
  column-count: 2;
  column-gap: 14px;
  margin: 1.5em 0;
}
.photo-masonry .wp-block-image,
.photo-masonry figure,
.photo-masonry .blocks-gallery-item{
  break-inside: avoid;
  margin: 0 0 14px;
}
.photo-masonry img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}
@media screen and (min-width: 600px){
  .photo-masonry{ column-count: 3; }
}
@media screen and (min-width: 900px){
  .photo-masonry{ column-count: 4; }
}