/*
Theme Name: Chin Sankaku
Theme URI: https://www.chinsankaku.jp
Author: 陳餐閣
Description: 兵庫県西宮市の本格上海料理店「陳餐閣」のために、モバイルファーストでゼロから設計したオリジナルWordPressテーマです。中国料理店らしい朱色と金のコンビネーション、回紋（かいもん）モチーフを使用し、メニューはカスタム投稿タイプで管理できます。
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: chinsankaku
Tags: custom-menu, custom-logo, featured-images, translation-ready

This stylesheet is written mobile-first: unprefixed rules target small
screens, and min-width media queries layer on progressively richer
layouts for tablet (600px) and desktop (900px/1180px).
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  --cs-red:          #c81d1d;
  --cs-red-deep:     #921313;
  --cs-vermilion:    #e90202;
  --cs-gold:         #d99a3d;
  --cs-gold-light:   #ffc578;
  --cs-ink:          #2a211a;
  --cs-ink-soft:     #6b5f54;
  --cs-cream:        #faf3e6;
  --cs-cream-deep:   #f0e4cc;
  --cs-white:        #ffffff;
  --cs-line:         #e8dcc4;

  --cs-font-display: "Shippori Mincho", "Noto Serif JP", serif;
  --cs-font-body: "Noto Sans JP", -apple-system, sans-serif;

  --cs-radius: 10px;
  --cs-radius-lg: 18px;
  --cs-shadow: 0 16px 34px -18px rgba(42,33,26,0.4);
  --cs-container: 1180px;
  --cs-header-h: 60px;
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family: var(--cs-font-body);
  color: var(--cs-ink);
  background: var(--cs-cream);
  font-size: 15px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--cs-red); text-decoration:none; }
a:hover{ color: var(--cs-red-deep); }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family: var(--cs-font-display);
  color: var(--cs-ink);
  line-height: 1.4;
  margin: 0 0 .5em;
  font-weight: 600;
}
h1{ font-size: clamp(1.7rem, 7vw, 2.8rem); line-height:1.3; }
h2{ font-size: clamp(1.35rem, 5vw, 1.9rem); }
h3{ font-size: 1.05rem; }
p{ margin: 0 0 1em; }
button, input, select, textarea{ font-family: inherit; font-size: 16px; } /* 16px avoids iOS zoom-on-focus */
:focus-visible{ outline: 3px solid var(--cs-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

.cs-container{ max-width: var(--cs-container); margin:0 auto; padding: 0 18px; }
@media (min-width: 600px){ .cs-container{ padding: 0 32px; } }

.cs-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--cs-font-display);
  font-size: .78rem; font-weight: 600; letter-spacing: .1em;
  color: var(--cs-red);
}
.cs-eyebrow::before{ content:""; width:18px; height:2px; background: var(--cs-gold); display:inline-block; }

.cs-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 24px; border-radius: 999px; min-height:48px;
  font-weight: 700; font-size: .92rem; cursor:pointer; border: 2px solid transparent;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.cs-btn-primary{ background: var(--cs-red); color: var(--cs-white); }
.cs-btn-primary:hover{ background: var(--cs-red-deep); color:#fff; transform: translateY(-2px); }
.cs-btn-gold{ background: var(--cs-gold); color: var(--cs-ink); }
.cs-btn-gold:hover{ background: var(--cs-gold-light); }
.cs-btn-outline{ background: transparent; border-color: var(--cs-ink); color: var(--cs-ink); }
.cs-btn-outline:hover{ background: var(--cs-cream-deep); }
.cs-btn-ghost{ background: transparent; border-color:#fff; color:#fff; }
.cs-btn-ghost:hover{ border-color: var(--cs-gold-light); color: var(--cs-gold-light); }

/* Signature: 回紋 (key-fret) divider, common in Chinese decorative borders */
.cs-fret{
  height: 12px; width:100%;
  background-image: repeating-linear-gradient(90deg, var(--cs-gold) 0 4px, transparent 4px 8px);
  background-size: 24px 12px;
  opacity:.55;
}

/* Signature: red seal / chop stamp */
.cs-seal{
  width: 74px; height:74px; border-radius:50%; flex-shrink:0;
  border: 2px solid var(--cs-red); color:var(--cs-red);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family: var(--cs-font-display); font-weight:700; font-size:.72rem; line-height:1.3;
  transform: rotate(-6deg);
}

/* =========================================================
   HEADER — mobile-first: hamburger + off-canvas nav under 900px
   ========================================================= */
.cs-topbar{ background: var(--cs-ink); color: var(--cs-cream-deep); font-size:.76rem; }
.cs-topbar .cs-container{ display:flex; justify-content:space-between; align-items:center; padding-top:6px; padding-bottom:6px; gap:12px; flex-wrap:wrap; }
.cs-topbar a{ color: var(--cs-cream-deep); }

.cs-header{ background: var(--cs-white); border-bottom: 3px solid var(--cs-red); position: sticky; top:0; z-index: 50; }
.cs-header-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 10px 0; min-height: var(--cs-header-h); }
.cs-logo img{ max-height:44px; width:auto; }
.cs-logo-text{ font-family: var(--cs-font-display); font-weight:700; font-size:1.1rem; color: var(--cs-red); }

.cs-header-actions{ display:flex; align-items:center; gap:10px; }
.cs-call-btn{
  display:flex; align-items:center; gap:6px; background: var(--cs-red); color:#fff;
  padding: 9px 14px; border-radius:999px; font-weight:700; font-size:.82rem; min-height:44px;
}
.cs-menu-toggle{
  display:flex; align-items:center; justify-content:center; width:44px; height:44px;
  background:none; border:2px solid var(--cs-ink); border-radius:8px; font-size:1.3rem; cursor:pointer; color: var(--cs-ink);
}

.cs-nav{
  position:fixed; top:0; right:-100%; width:min(84vw, 340px); height:100%; background: var(--cs-ink);
  z-index: 70; transition: right .28s ease; overflow-y:auto; padding: 20px 0 40px;
}
.cs-nav.is-open{ right:0; }
.cs-nav-close{ background:none; border:none; color:#fff; font-size:1.6rem; padding: 10px 20px; cursor:pointer; display:block; margin-left:auto; }
.cs-nav ul{ padding: 0 10px; }
.cs-nav a{
  display:block; padding: 13px 16px; color: var(--cs-cream); font-weight:600; font-size:.98rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.cs-nav a:hover, .cs-nav .current-menu-item > a, .cs-nav .current-menu-parent > a{ color: var(--cs-gold-light); }
.cs-nav-overlay{ position:fixed; inset:0; background: rgba(0,0,0,.5); z-index:60; opacity:0; pointer-events:none; transition: opacity .28s ease; }
.cs-nav-overlay.is-open{ opacity:1; pointer-events:auto; }
body.cs-nav-open{ overflow:hidden; }

@media (min-width: 900px){
  .cs-menu-toggle{ display:none; }
  .cs-nav-overlay{ display:none; }
  .cs-nav{
    position:static; width:auto; height:auto; background: var(--cs-red); right:auto; padding:0;
    overflow:visible;
  }
  .cs-nav-close{ display:none; }
  .cs-nav ul{ display:flex; flex-wrap:wrap; padding:0; }
  .cs-nav a{ padding: 13px 15px; font-size:.86rem; border-bottom:none; color:#fff; }
  .cs-nav a:hover, .cs-nav .current-menu-item > a{ background: var(--cs-red-deep); color: var(--cs-gold-light); }
}

/* Horizontal scrollable quick-category chips (mobile convenience nav) */
.cs-quicknav{ background: var(--cs-cream-deep); overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; padding: 10px 0; }
.cs-quicknav .cs-container{ display:inline-flex; gap:8px; padding-right:18px; }
.cs-quicknav a{
  display:inline-block; background:#fff; border:1px solid var(--cs-line); border-radius:999px;
  padding: 7px 14px; font-size:.78rem; font-weight:600; color: var(--cs-ink); white-space:nowrap;
}
.cs-quicknav a:hover{ background: var(--cs-red); color:#fff; border-color: var(--cs-red); }
@media (min-width: 900px){ .cs-quicknav{ display:none; } }

/* =========================================================
   HERO
   ========================================================= */
.cs-hero{ position:relative; min-height: 62vh; display:flex; align-items:flex-end; color:#fff; overflow:hidden; }
.cs-hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.cs-hero-bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(20,12,8,.92) 10%, rgba(20,12,8,.25) 70%); }
.cs-hero-inner{ position:relative; z-index:2; padding-bottom: 36px; max-width: 620px; }
.cs-hero .cs-eyebrow{ color: var(--cs-gold-light); }
.cs-hero .cs-eyebrow::before{ background: var(--cs-gold-light); }
.cs-hero h1{ color:#fff; }
.cs-hero-sub{ font-size:.98rem; color:#e9ded0; margin-bottom: 1.5em; max-width:44ch; }
.cs-hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
@media (min-width: 600px){ .cs-hero{ min-height:70vh; } }

/* =========================================================
   TRUST / FEATURE BAR
   ========================================================= */
.cs-trust{ background: var(--cs-white); padding: 24px 0; border-bottom: 1px solid var(--cs-line); }
.cs-trust-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 16px; text-align:center; }
.cs-trust-item{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.cs-trust-item .cs-icon{ font-size:1.6rem; }
.cs-trust-item strong{ font-size:.85rem; }
.cs-trust-item span{ font-size:.72rem; color: var(--cs-ink-soft); }
@media (min-width: 700px){ .cs-trust-grid{ grid-template-columns: repeat(4,1fr); } }

/* =========================================================
   SECTIONS
   ========================================================= */
.cs-section{ padding: 44px 0; }
.cs-section.tint{ background: var(--cs-white); }
.cs-section-head{ margin-bottom: 26px; text-align:center; }
.cs-section-head p{ margin:0; color: var(--cs-ink-soft); max-width: 50ch; margin-left:auto; margin-right:auto; }
@media (min-width: 700px){ .cs-section{ padding: 68px 0; } .cs-section-head{ margin-bottom: 38px; } }

/* Menu category grid — the main mobile-responsive touchpoint */
.cs-menu-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.cs-menu-card{
  position:relative; aspect-ratio: 1; border-radius: var(--cs-radius); overflow:hidden;
  display:flex; align-items:flex-end; background: var(--cs-cream-deep);
}
.cs-menu-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .3s ease; }
.cs-menu-card::after{ content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(20,12,8,.82), rgba(20,12,8,.05)); }
.cs-menu-card:active img, .cs-menu-card:hover img{ transform: scale(1.05); }
.cs-menu-card span{ position:relative; z-index:2; padding: 12px; color:#fff; font-family: var(--cs-font-display); font-size:.92rem; font-weight:600; }
@media (min-width: 600px){ .cs-menu-grid{ grid-template-columns: repeat(3,1fr); gap:16px; } .cs-menu-card span{ font-size:1rem; padding:16px; } }
@media (min-width: 900px){ .cs-menu-grid{ grid-template-columns: repeat(4,1fr); } }

/* Menu item cards (used on taxonomy archive pages) */
.cs-item-grid{ display:grid; grid-template-columns: 1fr; gap: 16px; }
.cs-item-card{ display:flex; gap:14px; background:#fff; border:1px solid var(--cs-line); border-radius: var(--cs-radius); padding:14px; align-items:center; }
.cs-item-thumb{ width:84px; height:84px; flex-shrink:0; border-radius: 8px; overflow:hidden; background: var(--cs-cream-deep); }
.cs-item-thumb img{ width:100%; height:100%; object-fit:cover; }
.cs-item-body h3{ margin-bottom:.2em; font-size:1rem; }
.cs-item-body p{ margin:0; font-size:.85rem; color: var(--cs-ink-soft); }
.cs-item-price{ font-family: var(--cs-font-display); color: var(--cs-red); font-weight:700; white-space:nowrap; margin-left:auto; padding-left:10px; }
@media (min-width: 700px){ .cs-item-grid{ grid-template-columns: repeat(2,1fr); } }

/* About / story split */
.cs-about-grid{ display:grid; grid-template-columns: 1fr; gap: 24px; align-items:center; }
.cs-about-grid img{ border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow); }
@media (min-width: 800px){ .cs-about-grid{ grid-template-columns: 1fr 1fr; gap:48px; } }

/* Access / map section */
.cs-access-grid{ display:grid; grid-template-columns: 1fr; gap: 24px; }
.cs-access-table{ width:100%; border-collapse:collapse; }
.cs-access-table th, .cs-access-table td{ text-align:left; padding: 10px 0; border-bottom:1px solid var(--cs-line); font-size:.9rem; }
.cs-access-table th{ width:110px; color: var(--cs-ink-soft); font-weight:600; }
.cs-map-frame{ border-radius: var(--cs-radius); overflow:hidden; border:1px solid var(--cs-line); aspect-ratio: 4/3; background: var(--cs-cream-deep); }
.cs-map-frame iframe{ width:100%; height:100%; border:0; }
@media (min-width: 800px){ .cs-access-grid{ grid-template-columns: 1fr 1fr; gap:40px; } }

/* CTA band */
.cs-cta{ background: var(--cs-ink); color:#fff; text-align:center; padding: 42px 0; }
.cs-cta h2{ color:#fff; }
.cs-cta p{ color:#d8cdbc; }
.cs-cta-buttons{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top: 18px; }

/* Sticky mobile call bar */
.cs-sticky-call{ position:fixed; left:0; right:0; bottom:0; z-index:55; background: var(--cs-red); padding:10px 16px; display:none; box-shadow: 0 -6px 16px rgba(0,0,0,.2); }
.cs-sticky-call a{ display:flex; align-items:center; justify-content:center; gap:8px; color:#fff; font-weight:700; }
@media (max-width: 899px){ .cs-sticky-call{ display:block; } body{ padding-bottom: 62px; } }

/* =========================================================
   FOOTER
   ========================================================= */
.cs-footer{ background: var(--cs-ink); color: #cbbfa9; padding-top: 36px; }
.cs-footer-grid{ display:grid; grid-template-columns: 1fr; gap: 26px; padding-bottom: 30px; }
.cs-footer h4{ color:#fff; font-size:.92rem; margin-bottom: .8em; font-family: var(--cs-font-display); }
.cs-footer ul li{ margin-bottom: .55em; font-size:.86rem; }
.cs-footer a{ color: #cbbfa9; }
.cs-footer a:hover{ color: var(--cs-gold-light); }
.cs-footer-logo{ max-height:38px; margin-bottom:12px; filter: brightness(0) invert(1); }
.cs-footer-bottom{ border-top: 1px solid rgba(255,255,255,.1); padding: 16px 0; font-size:.76rem; text-align:center; }
@media (min-width: 800px){ .cs-footer-grid{ grid-template-columns: 1.4fr 1fr 1fr; } }

/* =========================================================
   GENERIC PAGE / BLOG WRAPPER
   ========================================================= */
.cs-page-header{ background: var(--cs-cream-deep); padding: 32px 0; text-align:center; }
.cs-content-wrap{ padding: 40px 0; }
.cs-content-wrap .cs-container{ max-width: 780px; }
article.post{ background:#fff; border:1px solid var(--cs-line); border-radius: var(--cs-radius); padding: 20px; margin-bottom: 22px; }
@media (min-width: 700px){ .cs-page-header{ padding: 46px 0; } .cs-content-wrap{ padding: 56px 0; } article.post{ padding:28px; } }

.cs-blog-layout{ display:grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 800px){ .cs-blog-layout{ grid-template-columns: 2fr 1fr; gap:40px; align-items:start; } }

.nav-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.nav-links a, .nav-links span{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px; border:1px solid var(--cs-line); font-weight:600; font-size:.9rem; border-radius:6px; }
.nav-links a:hover{ background: var(--cs-red); border-color: var(--cs-red); color:#fff; }

.cs-visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Respect safe areas on notched phones for the sticky call bar */
@supports (padding: max(0px)) {
  .cs-sticky-call{ padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}