/* === メニューページ モバイル スペーシング調整 (スマホ表示時のみ) === */
@media (max-width: 781px) {
  /* カテゴリ名 (例: 一品料理, ドリンクメニュー など) */
  .menu-sp-fix h2.has-theme-1-color,
  .wp-block-group.alignwide.is-layout-flow > h2.has-theme-1-color {
    font-size: 2rem !important;
    margin-top: 3.5rem !important;
    margin-bottom: 1.25rem !important;
    padding-top: 1rem !important;
  }

  /* 最初のカテゴリ名は上余白を抑える */
  .menu-sp-fix h2.has-theme-1-color:first-of-type,
  .wp-block-group.alignwide.is-layout-flow > h2.has-theme-1-color:first-of-type {
    margin-top: 1rem !important;
  }

  /* サブセクション見出し (トッピング など) — 上は広く、下は狭く */
  .is-menu-section-name {
    margin-top: 3rem !important;
    margin-bottom: 0.25rem !important;
  }

  /* トッピング見出し直後のグループの上 padding を詰める */
  .is-menu-section-name + .wp-block-group {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* 画像ギャラリーが入っているカラム (flex-basis: 1000px) の下 padding を詰める。
     スマホで縦積みになると、ギャラリー下の余白がメニューとの間に大きな空白を作るため。 */
  .wp-block-columns .wp-block-column[style*="flex-basis:1000px"],
  .wp-block-columns .wp-block-column[style*="flex-basis: 1000px"] {
    padding-bottom: 0.5rem !important;
  }
}


/* === ハニートースト画像だけ大きくなるを修正 === */
/* PC ・ タブレット: 4カラム */
.wp-block-gallery .gallery-fix-last,
.wp-block-gallery .gallery-fix-last.wp-block-image{
  flex-grow: 0 !important;
  flex-basis: calc(25% - 19px) !important;
  max-width: calc(25% - 19px) !important;
}
/* スマホ: 599px以下だと2カラム */
@media (max-width: 599px){
  .wp-block-gallery .gallery-fix-last,
  .wp-block-gallery .gallery-fix-last.wp-block-image{
    flex-basis: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
  }
}


/* === ヘッダーナビゲーションの縦位置調整 === */
/* サイトタイトルのベースラインに合わせてナビ項目を下げる */
.wp-block-template-part header .wp-block-navigation,
header .wp-block-navigation {
  align-self: flex-end;
}


/* === スマホ表示の崩れ修正 (Claude) === */
@media (max-width: 600px) {
  /* 予約ボタンの縦幅を狭く */
  header .wp-block-button__link,
  .wp-block-button.is-style-outline--3 .wp-block-button__link {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  /* ヘッダーを画面内に収める（ロゴ・予約ボタン・メニューが見切れないように） */
  header.wp-block-group.alignwide {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding-right: 4px !important;
  }
  header .wp-block-site-title {
    font-size: 14px !important;
  }
  header .wp-block-group.is-nowrap {
    gap: 6px !important;
  }
  header .wp-block-button__link {
    font-size: 10.5px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* お店案内などの固定幅画像が画面からはみ出すのを防ぐ */
  .wp-block-image.is-resized,
  .wp-block-image.is-resized img,
  .wp-block-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* 入り口画像(かむらどとはの上)をお好み焼き画像と同じように左右余白を揃える */
  .wp-block-group.about-sp-fix {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  figure.wp-image-447,
  .wp-block-image.size-full:has(> img.wp-image-447) {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 横方向のはみ出し(横スクロール)を止める */
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* ヘッダー(固定)の下に出る余分なすき間を詰めて、金ラインをヘッダー直下に密着させる。
     body の padding-top をヘッダーの高さ(約78px)に合わせる */
  body {
    background-color: rgb(90, 83, 84) !important;
    padding-top: 78px !important;
  }

  /* 電話番号CTAがwidth:200%/margin-left:-100%で左にずれるのを打ち消す */
  html body .komrade-tel-cta {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
  }
  .komrade-tel-cta a[href^="tel:"] {
    display: inline-block;
    text-align: center;
  }
}


/* ROBUST_ENTRANCE_FIX */
@media (max-width: 768px) {
  /* 入り口画像を含むグループに左右の余白を確実に付ける */
  .wp-block-group.about-sp-fix {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 16px !important;
    box-sizing: border-box !important;
  }
  /* スライダー(お店案内)と入り口画像の間の上余白を詰める */
  .kamurando-cube-gallery {
    padding-bottom: 16px !important;
  }
  /* 画像のコラムにエディターで設定された106pxの上余白をスマホだけ詰める */
  body .about-sp-fix .wp-block-columns > .wp-block-column:first-child,
  body .about-sp-fix .wp-block-columns > .wp-block-column {
    padding-top: 16px !important;
  }
  /* 画像本体はコラム幅に収め、両端に余白を作る */
  .about-sp-fix .wp-block-image,
  .about-sp-fix figure.wp-block-image.is-resized,
  .about-sp-fix figure.wp-image-447,
  .about-sp-fix .wp-block-image img,
  .about-sp-fix img.wp-image-447 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
}

/* === ヘッダー タイトル＆メニューアイコン スマホ調整 === */
@media (max-width: 768px) {
  /* サイト名を大きく＆2行に改行（鉄板焼きダイニング / かむらど） */
  header h2.wp-block-site-title {
    font-size: 0 !important;
    line-height: 1.3 !important;
  }
  header h2.wp-block-site-title::after {
    content: "\9244\677F\713C\304D\30C0\30A4\30CB\30F3\30B0\A\304B\3080\3089\3069";
    white-space: pre;
    font-size: 22px;
    line-height: 1.3;
    display: inline-block;
  }
  /* ハンバーガーメニュー（横線2本）のアイコンを大きく */
  header .wp-block-navigation__responsive-container-open svg {
    width: 38px !important;
    height: 38px !important;
  }
}

/* === PC版 ヘッダー追従固定（全ページ） === */
@media (min-width: 769px) {
  /* ヘッダーのテンプレートパートを sticky にして、TOP以外のページでも
     スクロール時にヘッダーが上部に追従固定されるようにする */
  header.wp-block-template-part {
    position: sticky;
    top: 0;
    z-index: 100;
  }
  /* 内側の sticky を解除し、二重 sticky による微妙なズレ（ガタつき）を防ぐ */
  header.wp-block-template-part .wp-block-group.is-position-sticky {
    position: static !important;
    top: auto !important;
  }
}

/* === スマホ版 ヘッダー追従固定（全ページ／TOPと同方式・fixed） === */
@media (max-width: 768px) {
  header.wp-block-template-part {
    position: fixed !important;
    left: 0;
    right: 0;
    width: 100%;
    top: 0;
    z-index: 999;
  }
  /* 固定ヘッダー分のすき間（重なり防止） */
  body { padding-top: 114px; }
  /* 管理バー表示時はヘッダーを下げる（ログイン中のみ） */
  body.admin-bar header.wp-block-template-part { top: 32px; }
  /* 内側の二重 sticky を解除してガタつき防止 */
  header.wp-block-template-part .wp-block-group.is-position-sticky {
    position: static !important;
    top: auto !important;
  }
}


/* === スマホ表示 メニュー写真ギャラリー 縦横間隔統一 === */
/* とりあえず一品・サラダ・鉄板焼き等のメニュー写真で
   縦間隔と横間隔が異なって見える問題を解消。
   figureのjustify-content:centerによりimgがfigの中央に配置され
   余白が生まれているため、figをimg同サイズ(正方形)に固定して解消。 */
@media (max-width: 768px) {
  .menu-sp-fix .wp-block-gallery.has-nested-images figure.wp-block-image {
    aspect-ratio: 1 !important;
    overflow: hidden !important;
  }
  .menu-sp-fix .wp-block-gallery.has-nested-images figure.wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }
}

/* 商品名が2行でも金額を右端に固定する */
.wp-block-group .wp-block-heading.is-accordion-trigger.is-menu-item-name {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  white-space: normal !important;
}
.is-menu-item-price {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  text-align: right !important;
}


/* === フッター著作権表示 スマホ表示時のフォント縮小（改行防止） === */
@media (max-width: 781px) {
  footer p.has-text-align-center {
    font-size: 15px !important;
    white-space: nowrap !important;
  }
}


/* === ページ上部へ戻るボタン 矢印アイコンが消えた問題の修正（CSSで上向き矢印を描画） === */
#komurado-pagetop { display: flex; align-items: center; justify-content: center; }
#komurado-pagetop::before {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  border-top: 3px solid #fff;
  border-left: 3px solid #fff;
  transform: translateY(2px) rotate(45deg);
  box-sizing: border-box;
}


/* === コース料理「詳細はこちら」を目立たせる === */
.wp-block-details > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 10px 24px;
  background-color: #B07A1F;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 15px;
  border-radius: 0 16px;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.wp-block-details > summary::-webkit-details-marker {
  display: none;
}
.wp-block-details > summary::after {
  content: "\203A";
  font-size: 20px;
  line-height: 1;
  margin-left: 2px;
  transition: transform 0.2s ease;
}
.wp-block-details[open] > summary::after {
  transform: rotate(90deg);
}
.wp-block-details > summary:hover {
  background-color: #c8912f;
  transform: translateY(-2px);
}