/* ==========================================
   kitchen 共通スタイル（黄色テーマ）
   - 全ページで使う基礎だけを置く
   - 画面専用のものは各ページCSSへ
   ========================================== */

body {
  background-color: #fff9e6; /* 淡いクリーム色 */
  color: #333;
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  margin: 0;
  padding: 0;
}

/* 既存の header / footer スタイル */
header,
footer {
  background-color: #ffeec2; /* 少し濃い黄色系 */
  padding: 12px 20px;
}

header h1 {
  margin: 0;
  font-size: 1.4rem;
}

header nav {
  margin-top: 4px;
  font-size: 0.9rem;
}

main {
  padding: 16px 20px 40px;
}

/* リンク */
a {
  color: #cc9900; /* 落ち着いた黄土色系 */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* カード */
.card {
  background: #fffdfa;
  border: 1px solid #f2e6b3;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 12px;
}

/* フォーム・ボタン（button要素の共通） */
button,
input[type="submit"],
input[type="button"] {
  background-color: #ffd86b;
  border: 1px solid #f1c965;
  border-radius: 4px;
  padding: 6px 14px;
  cursor: pointer;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: #ffcf4d;
}

input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
  border: 1px solid #e2d9b3;
  border-radius: 3px;
  padding: 4px 6px;
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
  background-color: #fffdf7;
}

/* aタグをボタンっぽくする共通クラス（多画面で使用） */
.btn {
  display: inline-block;
  background-color: #ffd86b;
  border: 1px solid #f1c965;
  border-radius: 4px;
  padding: 6px 14px;
  color: #333;
  text-decoration: none;
  font-weight: 600;
}

.btn:hover {
  background-color: #ffcf4d;
  text-decoration: none;
}

/* ============================
   共通：危険アクション（削除）ボタン
   - どの画面でも class="btn btn-danger" で赤になる
   - .btn と併用を前提にして、衝突を避ける
   ============================ */
.btn.btn-danger {
  background-color: #f26b6b; /* 赤 */
  border-color: #e05555;
  color: #fff;
}

.btn.btn-danger:hover {
  background-color: #e05555;
  color: #fff;
  text-decoration: none;
}

/* ナビゲーション用の「リンク風ボタン」 */
.link-button {
  border: none;
  background: none;
  padding: 0;
  margin: 0 0 0 4px;
  color: #cc9900; /* 既存のリンク色と合わせる */
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

.link-button:hover {
  text-decoration: none;
}

/* ============================
   ナビゲーション（PC & スマホ）
   ============================ */

/* base.html の <header class="site-header"> 用 */
.site-header {
  background-color: #ffeec2; /* 既存 header と同じ色に合わせる */
  padding: 8px 12px;
}

/* ヘッダー内コンテナ：すべて左寄せ */
.nav-container {
  width: 100%;
  margin: 0;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

/* タイトル（ロゴ） */
.nav-title a {
  font-size: 1.2rem;
  font-weight: bold;
  color: #cc9900;
  text-decoration: none;
}

.nav-title a:hover {
  text-decoration: underline;
}

/* メニューブロック（PC表示） */
.nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.nav-menu a {
  color: #cc9900;
  text-decoration: none;
  font-size: 0.95rem;
}

.nav-menu a:hover {
  text-decoration: underline;
}

/* ユーザー名表示 */
.nav-user {
  font-size: 0.85rem;
  opacity: 0.8;
}

/* ハンバーガー用チェックボックス（非表示） */
.nav-toggle {
  display: none;
}

/* ハンバーガーアイコン（3本線） */
.nav-toggle-label {
  display: none; /* PC では非表示 */
  cursor: pointer;
  padding: 6px;
}

.nav-toggle-label span {
  display: block;
  width: 20px;
  height: 2px;
  background-color: #cc9900;
  position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background-color: #cc9900;
}

.nav-toggle-label span::before {
  top: -6px;
}

.nav-toggle-label span::after {
  top: 6px;
}

/* ----------------------------
   スマホ表示（幅 768px 以下）
   ---------------------------- */
@media (max-width: 1024px) {
  .nav-container {
    flex-wrap: wrap;
    align-items: center;
  }

  /* スマホで三本線を表示（左）、タイトルはその右 */
  .nav-toggle-label {
    display: block;
  }

  /* デフォルトではメニュー非表示（開閉式） */
  .nav-menu {
    width: 100%;
    display: none;
    margin-top: 4px;
  }

  .nav-menu ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-top: 4px;
  }

  /* チェックが入ったらメニュー表示 */
  .nav-toggle:checked ~ .nav-menu {
    display: block;
  }
}

/* ============================
   汎用 UI パーツ（複数画面で使用）
   ============================ */

/* 一覧用のシンプルなリスト */
.simple-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.simple-list li {
  padding: 6px 0;
  border-top: 1px solid #f2e6b3;
}

.simple-list li:first-child {
  border-top: none;
}

/* リスト内の「編集／削除」ボタンを並べる */
.list-actions {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* 小さめボタン（既存 .btn と組み合わせて使用） */
.btn-small {
  font-size: 0.85rem;
  padding: 2px 8px;
}

/* 件数など小バッジ */
.badge-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.3em;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.75rem;
  background-color: #fff3cd;
  border: 1px solid #f2e6b3;
  color: #665000;
}

/* 手順の補足など（任意：複数画面で使える） */
.step-meta {
  margin-top: 4px;
  font-size: 0.9rem;
  color: #665000;
  opacity: 0.9;
}

/* ここから：<=1024px（スマホ扱い）文字サイズ【最大強化】 ===================== */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 1024px) {

  /* ===== ベース文字サイズ =====
     ・iPhone 15：20px前後
     ・iPad：最大24px
     → 体感 1.5〜2倍クラス
  */
  html {
    font-size: clamp(20px, 2vw + 12px, 24px);
  }

  body {
    line-height: 1.9;
  }

  /* ===== 見出し ===== */
  h1 {
    font-size: clamp(2.1rem, 3vw + 1.2rem, 2.8rem);
    line-height: 1.2;
  }

  h2 {
    font-size: clamp(1.8rem, 2.6vw + 1.1rem, 2.3rem);
    line-height: 1.2;
  }

  h3 {
    font-size: clamp(1.55rem, 2.2vw + 1.05rem, 1.9rem);
    line-height: 1.15;
  }

  h4 {
    font-size: 1.3rem;
    line-height: 1.15;
  }

  /* ===== カード本文 ===== */
  .card {
    font-size: 1rem; /* html底上げで十分大きい */
  }

  /* ===== ボタン（重要） ===== */
  .btn,
  button,
  input[type="submit"],
  input[type="button"] {
    font-size: 1.25rem;
    line-height: 1.3;
    padding: 14px 18px; /* タップしやすさ重視 */
  }

  /* ===== 小さすぎ問題の救済ゾーン ===== */
  .btn-small,
  .badge-small,
  small,
  .tag-chip,
  .dish-image-help,
  .dish-image-upload-label,
  .checkbox-inline,
  .step-meta {
    font-size: 1.3rem;
    line-height: 1.55;
  }

  /* ===== フォーム ===== */
  .form-control,
  input,
  select,
  textarea {
    font-size: 1.1rem;
    line-height: 1.45;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  label {
    font-size: 1.1rem;
    line-height: 1.4;
  }

  /* ===== 一覧（カード行・リスト） ===== */
  .ingredient-row,
  .simple-list li {
    font-size: 1.1rem;
    line-height: 1.7;
  }


/* ここから：ナビゲーション文字サイズを本文と統一 ===================== */

/* ナビ全体（header / nav / ul / li / a の一般的な構成を想定） */
nav,
.nav,
.navbar,
.site-nav {
  font-size: 1.1rem; /* 本文とほぼ同等 */
  line-height: 1.4;
}

/* ナビ内リンク */
nav a,
.nav a,
.navbar a,
.site-nav a {
  font-size: inherit;   /* 親に合わせる */
  line-height: 1.4;
}

/* ハンバーガーメニュー展開時の項目（もしあれば） */
.nav-menu a,
.nav-links a,
.menu a {
  font-size: 1.2rem;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* ここまで：ナビゲーション文字サイズを本文と統一 ===================== */

/* 汎用リスト */
ul li,
ol li,
.simple-list li {
  font-size: 1.1rem;
  line-height: 1.7;
}

/* カード内の一覧行 */
.card li,
.card .list-item,
.card .row-item {
  font-size: 1.1rem;
  line-height: 1.7;
}

/* 汎用リスト */
ul li,
ol li,
.simple-list li {
  font-size: 1.1rem;
  line-height: 1.7;
}


p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 0.9em; /* 文章の区切りを明確に */
}

/* カード内本文は少しだけ引き締める（縦伸び防止） */
.card p {
  font-size: 1.1rem;
  line-height: 1.75;
}

/* メニュー一覧（カード内の説明文） */
.dish-card p,
.dish-item p,
.card p {
  font-size: 1.1rem;
  line-height: 1.8;
}

}

/* ここまで：<=1024px（スマホ扱い）文字サイズ【最大強化】 ===================== */