/* ============================================================
   タイ屋台 ロイロイ 神戸三宮食堂 - Thai Restaurant Kobe

   DESIGN RATIONALE. A Thai street stall in a windowless second-floor
   room. The ground is a deep jade, the colour of a night market awning
   rather than a beach poster, and the single accent is marigold, which
   is both the garland colour and the colour of the food itself. The
   brief asked for street-food energy without kitsch, so there is no
   elephant, no gold trim and no tourist palette: warmth comes from the
   type and the ground, not from decoration.

   Display face Kaisei Decol, a rounded mincho: soft enough to read as
   appetising, still a mincho so it sits in a Japanese street rather
   than an international chain. Body Zen Kaku Gothic Antique, a
   different family from the Zen Kaku Gothic New used elsewhere in this
   project, slightly warmer in the kana.

   Radius lock 18px. Wrap 1000px, narrower than most of the project
   because this is a small room and the page should not sprawl.
   Chrome: NAV-A inline, RES-C full-width band, FOOT-A two column.
   All eleven colour pairings computed before writing: worst 5.72:1.
   ============================================================ */

:root {
  --bg: #0d2420;
  --bg-2: #143029;
  --bg-3: #1b3a32;
  --line: rgba(242, 237, 225, 0.13);
  --text: #f2ede1;
  --muted: #a9bcae;
  --accent: #e8a32b;
  --accent-hover: #f2b243;
  --accent-ink: #1a1200;
  --warn: #f0a58c;
  --r: 18px;
  --font-display: "Kaisei Decol", "Hiragino Mincho ProN", serif;
  --font-body: "Zen Kaku Gothic Antique", "Hiragino Kaku Gothic ProN", sans-serif;
  --nav-h: 66px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

/* ---------- NAV-A: inline bar ---------- */

.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 40;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(13, 36, 32, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { width: 100%; display: flex; align-items: center; gap: 1.5rem; }

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.nav-links { display: flex; gap: 1.4rem; margin-left: auto; font-size: 0.9rem; font-weight: 500; }
.nav-links a { color: var(--muted); transition: color 0.2s; }
.nav-links a:hover { color: var(--text); }

.lang { display: flex; gap: 0.3rem; font-size: 0.8rem; font-weight: 700; }
.lang a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 0.3rem 0.55rem;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: calc(var(--r) / 2);
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.lang a:hover { color: var(--text); }
.lang a[aria-current="true"] { color: var(--text); border-color: var(--line); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.8rem 1.6rem;
  font-family: var(--font-body);
  font-size: 1rem; font-weight: 700;
  white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--r);
  transition: transform 0.15s, background 0.2s, border-color 0.2s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--muted); }
.nav .btn { padding: 0.5rem 1.1rem; font-size: 0.88rem; }

/* ---------- Hero ---------- */

.hero {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  padding-top: var(--nav-h);
}
.hero-copy { padding: clamp(2.5rem, 6vw, 4rem) 0 2rem; }

.eyebrow {
  font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 1.2rem;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.32;
  letter-spacing: 0.01em;
  margin-bottom: 1.3rem;
}
.hero-sub { color: var(--muted); max-width: 34em; margin-bottom: 2rem; }
.hero-ctas { display: flex; gap: 0.9rem; flex-wrap: wrap; }

/* The closed-days notice is the single most important operational fact
   on this page: the shop is shut BOTH Sunday and Wednesday, which the
   prospect list did not record. It sits in the hero so nobody plans a
   Sunday visit. */
.closed-flag {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-top: 1.6rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  background: var(--bg-2);
  font-size: 0.92rem; font-weight: 700;
  color: var(--accent);
}

.hero-media {
  position: relative;
  /* width:100% is load-bearing. .hero-media is a .wrap, and .wrap carries
     `margin: 0 auto`. As a grid item, auto side margins suppress the
     default stretch, so the item sizes to its content instead. Its only
     child is the .m-ph placeholder, whose `width: 100%` then resolves
     against an auto-width parent, which is circular and collapses to the
     label's own size. Measured at a 390px viewport before this rule:
     .hero-media was 127px wide and the placeholder rendered as an 87x49
     box floating mid-page. Giving the item an explicit width breaks the
     circularity; .wrap's max-width still caps it on desktop. */
  width: 100%;
}

/* ---------- Sections ---------- */

section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.sec-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.sec-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  line-height: 1.35;
}
.sec-head p { color: var(--muted); max-width: 40em; margin-top: 0.8rem; }

/* ---------- Dishes ---------- */

.dishes { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.dish {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  overflow: hidden;
}
.dish .m-ph { border-radius: 0; }
.dish-body { padding: 1.2rem 1.3rem 1.4rem; }
.dish h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
.dish .romaji { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.04em; }
.dish p { color: var(--muted); font-size: 0.92rem; margin-top: 0.5rem; }

.menu-note { margin-top: 1.4rem; color: var(--muted); font-size: 0.85rem; }

/* ---------- Entry guidance: this page's core job ---------- */

.finding { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.steps { list-style: none; display: grid; gap: 1rem; counter-reset: s; }
.step {
  display: grid; grid-template-columns: 44px 1fr; gap: 1rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.step:last-child { border-bottom: none; }
.step .n {
  counter-increment: s;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-weight: 700; font-size: 0.95rem;
}
.step .n::before { content: counter(s); }
.step h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 0.2rem; }
.step p { color: var(--muted); font-size: 0.92rem; }

/* ---------- Hours ---------- */

.info-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3.5rem); }

.hours-table { width: 100%; border-collapse: collapse; }
.hours-table th, .hours-table td {
  text-align: left;
  padding: 0.7rem 0.2rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
}
.hours-table th { font-weight: 700; width: 6em; }
.hours-table td.closed { color: var(--accent); font-weight: 700; }

.info-list { list-style: none; }
.info-list li { padding: 1rem 0; display: flex; flex-direction: column; gap: 0.15rem; }
.info-list li + li { border-top: 1px solid var(--line); }
.info-list .label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; color: var(--muted); }
.info-list a.link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--accent); font-weight: 700; text-decoration: underline;
}
.info-actions { margin-top: 1.5rem; display: flex; gap: 0.9rem; flex-wrap: wrap; }

/* ---------- RES-C: full-width band, form in a rank ---------- */

.reserve { background: var(--bg-2); border-top: 1px solid var(--line); }
.reserve-copy { max-width: 44em; margin-bottom: 2.2rem; }
.reserve-copy h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  margin-bottom: 0.9rem;
}
.reserve-copy p { color: var(--muted); }
.reserve-alt { margin-top: 1.4rem; font-size: 0.92rem; color: var(--muted); }
.reserve-alt a { color: var(--accent); font-weight: 700; text-decoration: underline; }

.form { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; }
.field input, .field select {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  min-height: 44px;
  padding: 0.75rem 0.95rem;
  appearance: none; -webkit-appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a9bcae' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.field input:focus, .field select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.field input::placeholder { color: var(--muted); opacity: 1; }

.form-error, .form-ok { grid-column: 1 / -1; display: none; font-size: 0.92rem; }
.form-error { color: var(--warn); font-weight: 500; }
.form-ok { color: var(--text); background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r); padding: 0.9rem 1.1rem; }
.form-error.show, .form-ok.show { display: block; }
.form .btn { grid-column: 1 / -1; justify-self: start; }

.form-note {
  grid-column: 1 / -1;
  font-size: 0.85rem; color: var(--accent); font-weight: 700;
}

/* ---------- FOOT-A: two column ---------- */

footer { padding: 2.8rem 0 3.2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.88rem; }
.foot-grid { display: flex; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; }
.foot-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--text); margin-bottom: 0.3rem; }
.foot-links { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-links a:hover { color: var(--text); }
.demo-note { margin-top: 1.5rem; font-size: 0.79rem; }

/* ---------- Reveal ---------- */

.rv { opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .btn, .lang a, .nav-links a { transition: none; }
}

/* ---------- Wider screens ---------- */

@media (min-width: 720px) {
  .dishes { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .info-grid { grid-template-columns: 1fr 1fr; }
  .form { grid-template-columns: repeat(2, 1fr); }
  .form .field.full { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .dishes { grid-template-columns: repeat(4, 1fr); }
  .form { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Phone ---------- */

@media (max-width: 900px) {
  .nav-links { display: none; }
}
@media (max-width: 560px) {
  .lang { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .lang::-webkit-scrollbar { display: none; }
  .lang a { flex: 0 0 auto; }
}
@media (max-width: 430px) {
  /* Keep brand, languages and the booking button on one row without the
     CTA running off the right edge, which happened across this project
     before it was measured. */
  .nav .wrap { gap: 0.5rem; }
  .nav .btn { padding: 0.45rem 0.7rem; font-size: 0.78rem; }
  .lang { gap: 0.1rem; }
  .lang a { padding: 0.3rem 0.35rem; font-size: 0.7rem; }
  .brand { font-size: 1.02rem; }
  .hero-ctas .btn { width: 100%; }
}