/*
Theme Name: Nuanwan Restaurant
Theme URI: https://example.com
Author: ร้านนวลวรรณ์
Description: ธีมอาหารจานเดียว รสมือที่คุ้นเคย สำหรับร้านนวลวรรณ์โดยเฉพาะ
Version: 1.4
License: GNU General Public License v2 or later
Text Domain: nuanwan
*/

:root {
  --ink: #2c2119;
  --cream: #fff7e8;
  --red: #9f2d22;
  --gold: #d58a2a;
  --leaf: #455d35;
}

html { scroll-behavior: smooth; }
body { font-family: "Noto Sans Thai", sans-serif; color: var(--ink); background: #fff7e8;}
.brand-font { font-family: "Fraunces", "Noto Sans Thai", serif; }
.grain {
  background-image: radial-gradient(rgba(82, 54, 26, .11) .7px, transparent .7px);
  background-size: 11px 11px;
}
.hero-wash {
  background: linear-gradient(90deg, rgba(46, 29, 17, .91) 0%, rgba(46, 29, 17, .73) 45%, rgba(46, 29, 17, .17) 100%);
}
.menu-card {
  transition: transform .28s ease, box-shadow .28s ease;
}
.menu-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 40px rgba(59, 34, 16, .15);
}
.menu-card img { transition: transform .5s ease; }
.menu-card:hover img { transform: scale(1.06); }

/* สไตล์สำหรับปุ่มเชียงใหม่เมื่อถูกเลือก (สีเขียว) */
#chiangmai-button[aria-pressed="true"] {
  background: #455d35;
  color: #ffffff;
  border-color: #455d35;
  box-shadow: 0 8px 18px rgba(69, 93, 53, .22);
}

/* สไตล์สำหรับปุ่มกรุงเทพเมื่อถูกเลือก (สีแดง) */
#bangkok-button[aria-pressed="true"] {
  background: #9f2d22;
  color: #ffffff;
  border-color: #9f2d22;
  box-shadow: 0 8px 18px rgba(159, 45, 34, .22);
}

.branch-choice[aria-pressed="true"],
.branch-choice[aria-pressed="true"] > span,
.branch-choice[aria-pressed="true"]:hover,
.branch-choice[aria-pressed="true"]:hover > span,
#chiangmai-button[aria-pressed="true"] > span,
#bangkok-button[aria-pressed="true"] > span {
  color: #ffffff !important;
}

.branch-choice > span {
  display: inline-block;
  animation: branch-text-blink .72s ease-in-out infinite;
}
@keyframes branch-text-blink {
  0%, 100% { opacity: 1; }
  45% { opacity: .28; }
  60% { opacity: 1; }
}
.branch-panel { display: none; }
.branch-panel.is-active { display: flex; animation: rise .35s ease both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal { animation: reveal .7s ease both; }
.delay-1 { animation-delay: .12s; }
.delay-2 { animation-delay: .24s; }
@keyframes reveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
:focus-visible {
  outline: 3px solid #d58a2a;
  outline-offset: 4px;
}