/*
Theme Name: kotohogi-renew
Theme URI: https://example.com/kotohogi-renew
Author: Your Name
Author URI: https://example.com
Description: A block theme for kotohogi.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kotohogi-renew
*/

/* 
 * This file is only used for theme metadata. 
 * All styling is handled by theme.json.
 * However, you can add custom CSS here if needed.
 */

/* =========================
   共通
========================= */
.vertical-text{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.1em;
}

.kotohogi-section{
  margin-block: var(--wp--preset--spacing--l);
}

@media (min-width: 768px){
  .kotohogi-section{
    margin-block: var(--wp--preset--spacing--xl);
  }
}

@media (max-width: 767px){
  .vertical-text-sp-normal{
    writing-mode: horizontal-tb;
  }
}

/* =========================
   ヘッダー（モック再現用）
   overlay / 2-row
   目的：heroにかぶせる / ナビ1段固定 / ピル表示（PC）
   ※ヘッダーはスクロール追従しない（absolute）
========================= */

/* 1) ヘッダーを最上部に重ねる（追従なし） */
.kotohogi-header{
  position: absolute !important;   /* fixed は使わない */
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  background: transparent !important;

  /* 被せた状態でもクリックできるようにする */
  pointer-events: none;
}
.kotohogi-header *{
  pointer-events: auto;
}

/* ヘッダー内の白背景を消す（ピル以外） */
.kotohogi-header .wp-block-columns,
.kotohogi-header .wp-block-navigation,
.kotohogi-header .kotohogi-header__top,
.kotohogi-header .kotohogi-header__nav{
  background: transparent !important;
}

/* ロゴ：薄い影（モック風） */
.kotohogi-header__logo img,
.kotohogi-header__logo{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
}

/* 上段（ロゴ＋ピル） */
.kotohogi-header__top{
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: 0px; /* ロゴ〜下段ナビの間を詰める */

  /* 右ピルが端に寄りすぎないよう左右余白 */
  padding-left: clamp(18px, 3.2vw, 52px) !important;
  padding-right: clamp(18px, 3.2vw, 52px) !important;
}

/* 上段3分割（Columns安定化） */
.kotohogi-header__top-cols{
  margin: 0;
  align-items: center;
}
.kotohogi-header__top-cols > .wp-block-column{
  display: flex;
  align-items: center;
}

.kotohogi-header__center{ justify-content: center; }
.kotohogi-header__logo{ margin: 0; }
.kotohogi-header__right{ justify-content: flex-end; }

/* ロゴ〜下段ナビの間をさらに詰める */
.kotohogi-header__nav{
  padding-top: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 6px;
}
.kotohogi-header__nav .wp-block-navigation{
  margin-top: 0 !important;
}

/* =========================
   ピンクピル（PC用）
   HTMLは「p.kotohogi-header__pill-item > a」前提
========================= */
.kotohogi-header__pill{
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;

  /* モック寄せ：薄め＆左右ゆったり */
  padding: 6px 26px;
  border-radius: 999px;
  background-color: rgba(255, 220, 226, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
}

/* リンクの見た目（黒文字） */
.kotohogi-header__pill-item{
  margin: 0;
}
.kotohogi-header__pill-item a{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: rgba(20,20,20,0.88) !important;
  text-decoration: none !important;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.05;
  white-space: nowrap;

  outline: none;
}
.kotohogi-header__pill-item a:hover{
  text-decoration: none !important;
  opacity: 0.78;
}

/* アイコン（a::before） */
.kotohogi-header__pill-item a::before{
  content: "";
  width: 16px;
  height: 16px;
  display: inline-block;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.9;
  transform: translateY(0.5px);
}

/* 区切り（2個目以降） */
.kotohogi-header__pill-item + .kotohogi-header__pill-item{
  margin-left: 12px;
  padding-left: 12px;
  position: relative;
}
.kotohogi-header__pill-item + .kotohogi-header__pill-item::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 10px;
  transform: translateY(-50%);
  background: rgba(20,20,20,0.16);
  border-radius: 1px;
}

/* 1つ目：ログイン（lock） */
.kotohogi-header__pill .kotohogi-header__pill-item:nth-child(1) a::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23222' d='M17 9h-1V7a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2Zm-7-2a2 2 0 1 1 4 0v2h-4V7Z'/%3E%3C/svg%3E");
}

/* 2つ目：マイページ（user） */
.kotohogi-header__pill .kotohogi-header__pill-item:nth-child(2) a::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23222' d='M12 12a4 4 0 1 0-4-4a4 4 0 0 0 4 4Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z'/%3E%3C/svg%3E");
}

/* 3つ目：買い物かご（cart） */
.kotohogi-header__pill .kotohogi-header__pill-item:nth-child(3) a::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23222' d='M7.17 14h9.76a2 2 0 0 0 1.93-1.48l1.38-5.52A1 1 0 0 0 20.28 6H6.21L5.73 4.4A1 1 0 0 0 4.77 4H3a1 1 0 0 0 0 2h1l2.4 8.4A2 2 0 0 0 8.32 16H19a1 1 0 0 0 0-2H8.32a.5.5 0 0 1-.48-.36Z'/%3E%3C/svg%3E");
}

/* =========================
   下段ナビ（PC用）
========================= */
.kotohogi-header__nav{
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  letter-spacing: 0.05em;
}

/* 文字色は白 */
.kotohogi-header__nav a{
  color: rgba(255,255,255,0.92) !important;
  text-decoration: none !important;
  font-size: 12.5px;
}
.kotohogi-header__nav a:hover{
  opacity: 0.75;
}

/* 1段固定（折り返し防止） */
.kotohogi-header__nav .wp-block-navigation__container{
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  gap: 18px !important;
}
.kotohogi-header__nav .wp-block-navigation-item__content,
.kotohogi-header__nav .wp-block-navigation-item__content a{
  white-space: nowrap !important;
}
.kotohogi-header__nav .wp-block-navigation-item{
  flex: 0 0 auto !important;
}

/* =========================
   hero の上余白を勝手に作らせない
========================= */
.wp-site-blocks{
  padding-top: 0 !important;
}
.wp-site-blocks > *:first-child{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 【白帯対策】homeだけ blockGap を無効化 */
body.home .wp-site-blocks{
  gap: 0 !important;
  row-gap: 0 !important;
  --wp--style--block-gap: 0px !important;
}
body.home .wp-site-blocks > .wp-block-template-part + *{
  margin-top: 0 !important;
}

/* =========================
   スマホ（<=780px）
   目的：ピル非表示 / ハンバーガー右上 / ≡を3本線で確実表示 / 開いたら赤背景
========================= */
@media (max-width: 780px){

  /* ピンクピルは非表示（モック準拠） */
  .kotohogi-header__pill{
    display: none !important;
  }

  /* 下段ナビの“テキストメニュー”はスマホでは使わない想定なので、
     表示崩れ防止に font-size だけ保険で下げる（必要なら後で消してOK） */
  .kotohogi-header__nav a{
    font-size: 12px !important;
  }

  /* ハンバーガー（開くボタン）を右上へ：ロゴ高さに合わせる */
  .kotohogi-header .wp-block-navigation__responsive-container-open{
    position: absolute !important;
    top: 26px !important;     /* ←ここだけ 22〜30px で微調整 */
    right: 14px !important;
    z-index: 100000 !important;

    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* WP標準のSVGは消す（2本線に見える事故を潰す） */
  .kotohogi-header .wp-block-navigation__responsive-container-open svg{
    display: none !important;
  }

  /* 疑似要素で3本線を描く（モックの赤） */
  .kotohogi-header .wp-block-navigation__responsive-container-open::before{
    content: "" !important;
    display: block !important;
    width: 26px;
    height: 26px;
    background:
      linear-gradient(#e06a6a,#e06a6a) 0 7px/26px 2px no-repeat,
      linear-gradient(#e06a6a,#e06a6a) 0 12px/26px 2px no-repeat,
      linear-gradient(#e06a6a,#e06a6a) 0 17px/26px 2px no-repeat;
  }

  /* メニュー開いた時：赤背景・白文字 */
  .wp-block-navigation__responsive-container.is-menu-open{
    background: #d85a55 !important;
    color: #fff !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open a{
    color: #fff !important;
    text-decoration: none !important;
  }

  /* 閉じる（×）ボタンも白に */
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close{
    color: #fff !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close svg *{
    fill: currentColor !important;
    stroke: currentColor !important;
  }
}

/* =========================
   【最終勝ち】スマホ：ハンバーガー位置を右上に強制固定
   ・中央寄りに落ちる/効かないのを潰す
========================= */
@media (max-width: 780px){

  /* スマホは上段を少し詰める（ロゴも上がる） */
  .kotohogi-header__top{
    padding-top: 18px !important;
  }

  /* ナビブロック側のレイアウト影響を断つ */
  .kotohogi-header .wp-block-navigation{
    position: static !important;
  }

  /* ≡ボタンを「必ず」右上へ */
  .kotohogi-header .wp-block-navigation .wp-block-navigation__responsive-container-open{
    position: absolute !important;
    top: calc(18px + var(--wp-admin--admin-bar--height, 0px)) !important;
    right: 14px !important;
    left: auto !important;

    margin: 0 !important;
    padding: 0 !important;
    width: 26px !important;
    height: 26px !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    transform: none !important;
    z-index: 100000 !important;
  }

  /* WP標準のSVGは消す（2本線事故を根絶） */
  .kotohogi-header .wp-block-navigation .wp-block-navigation__responsive-container-open svg{
    display: none !important;
  }

  /* 疑似要素で3本線（モックの赤） */
  .kotohogi-header .wp-block-navigation .wp-block-navigation__responsive-container-open::before{
    content: "" !important;
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    background:
      linear-gradient(#e06a6a,#e06a6a) 0 7px/26px 2px no-repeat,
      linear-gradient(#e06a6a,#e06a6a) 0 12px/26px 2px no-repeat,
      linear-gradient(#e06a6a,#e06a6a) 0 17px/26px 2px no-repeat;
  }
}