/*
Theme Name: Hindareta Kissa Theme
Theme URI: https://example.com/
Author: hindareta
Description: 1カラムのスマホ特化型/PWA対応の喫茶店テーマ
Version: 0.2.3
License: GPLv2 or later
Text Domain: hindareta-kissa-theme
*/

/* ここからCSS本体 */
:root{ --bg:#f8f5f2; --fg:#222; --accent:#8B4513; --muted:#666; --card:#fff; }
html{ font-size:17px; }
body{ margin:0; color:var(--fg); background:var(--bg); font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans JP,sans-serif; line-height:1.6; }
a{ color:var(--accent); text-decoration:none; }
a:focus{ outline:2px solid var(--accent); outline-offset:2px; }
.kissa-header{ position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid #eee; }
.kissa-header__brand{ padding:.5rem .75rem; font-weight:700; }
.kissa-header .brand-link{ color:var(--fg); font-size:1.1rem; }
.kissa-nav{ border-top:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0; background:#fff; }
.kissa-nav .nav-scroll{ display:grid; grid-template-columns: repeat(6, 1fr); gap:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.nav-item{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:56px; padding:.25rem 0; font-size:.9rem; min-width:56px; }
.nav-item .icon{ font-size:1.2rem; line-height:1; }
.nav-item .label{ display:block; font-size:.88rem; }
.kissa-main{ padding:1rem .75rem 2.5rem; max-width:720px; margin:0 auto; }
.section{ background:var(--card); padding:1rem; border-radius:14px; box-shadow:0 1px 2px rgba(0,0,0,.04); margin:1rem 0; }
.section__title{ margin:0 0 .5rem; font-size:1.1rem; }
.kissa-menu{ list-style:none; padding:0; margin:.5rem 0 0; }
.kissa-menu li{ display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px dashed #eee; }
.kissa-menu__title{ font-weight:600; }
.kissa-menu__price{ color:var(--muted); }
.button{ display:inline-block; padding:.7rem 1rem; border-radius:999px; border:1px solid #ddd; background:#fff; color:var(--fg); }
.button.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.entry__title{ font-size:1.25rem; margin:.2rem 0 .5rem; }
.kissa-footer{ text-align:center; padding:2rem 1rem; color:var(--muted); }

/* Game */
.game-ui .game-controls{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.select{ font-size:1rem; padding:.5rem; }
.result{ margin-top:1rem; font-size:1.4rem; font-weight:700; text-align:center; padding:1rem; }

/* スキップリンク（視覚非表示、フォーカス時に表示） */
.screen-reader-text,
.screen-reader-shortcut{
  position:absolute !important; height:1px; width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.screen-reader-text:focus,
.screen-reader-shortcut:focus{
  position:static !important; height:auto; width:auto; clip:auto; clip-path:none;
  background:#fff; color:#000; padding:.5rem; border:2px solid #000;
}

@media (hover:hover){ .nav-item:hover{ background:#fafafa; } }




/* ===== メニュー一覧 共通 ===== */
.menu-wrap{max-width:720px;margin:12px auto;padding:0 12px}
.menu-title{font-size:1.25rem;margin:.5rem 0 1rem;font-weight:700}
.menu-desc{color:#555;margin:-.5rem 0 1rem;font-size:.95rem}

.menu-list{list-style:none;margin:0;padding:0;border-top:1px solid #e6e6e6}
.menu-item{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:14px 6px;border-bottom:1px solid #e6e6e6;
  font-size:1rem;line-height:1.6;
  column-gap:10px;
  touch-action:manipulation;
}
.menu-item:active{background:#fafafa}

/* 長い料理名を2行で省略（モバイル優先）*/
.menu-name{
  flex:1;padding-right:12px;word-break:break-word;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  /* 非WebKitフォールバック（2行分の高さで切る） */
  line-height:1.6; max-height:calc(1.6em * 2);
}

/* 価格は桁揃え＆右寄せ */
.menu-price{
  min-width:6ch;text-align:right;font-variant-numeric:tabular-nums;
}

/* スクリーンリーダー専用（見た目は非表示） */
.sr-only{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

@media (min-width:480px){
  .menu-item{font-size:1.0625rem}
  .menu-title{font-size:1.35rem}
}