/* ===========================================================
   Hibachi W · UI Base (GLOBAL)
   可作为全站公共样式，禁止随意改动
=========================================================== */

/* ================== 1. Theme Variables ================== */
:root {
  --hw-bg:            #f5f5f5;
  --hw-card-soft:     #fff7f1;
  --hw-border:        #e4e4e4;
  --hw-text-main:     #222222;
  --hw-text-sub:      #666666;
  --hw-orange:        #ff4f00;
  --hw-orange-soft:   #ff6a26;
  --hw-orange-tint:   #ffe7d4;

  --hw-header-height: 78px;
}
/* ================== 2. Base Page Background & Font ================== */
.body .home-page,
.body .hibachiw-page,
.body .menulocations-page,
.body .photovideo-page,
.body .faq-page,
.body .rentals-page,
.body .contact-page,
.body .locations-page,
.body .northeast-page,
.body .florida-region-page,
.body .new-england-page,
.body .time-page,
/* Content  */
.body .blog-page,
.body .post-page,
.body .privacy-page,
.body .terms-page,
.body .refund-page,
.body .cookies-page,
.body .form-page,
.body .confirm-page,
.body .cancel-page,
.body .cancelmail-page {
  margin: 0;
  background: #f5f5f5;
  color: var(--hw-text-main);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    system-ui,
    Arial,
    sans-serif;
}
/* ==================  Base Page Background & Font ================== */

img {
  display: block;
  max-width: 100%;
}

body * {
  animation-duration: 0.001s;
}

/* ================== 3. Accessibility ================== */
.hw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ================== 4. Layout Helper ================== */
.hw-container {
  width: 100%;
  padding-inline: var(--bs-gutter-x, .75rem);
  margin-inline: auto;
}

/* ================== 5. Card System ================== */
.hw-card {
  background: #ffffff;
  border-radius: 22px;
  border: 1px solid var(--hw-border);
  padding: 28px 32px 30px;
  box-shadow:
    0 24px 60px rgba(0,0,0,.10),
    0 0 0 1px rgba(255,255,255,.8);
}

.hw-card-soft {
  background: #fff7f1;
  border-radius: 14px;
  border: 1px solid var(--hw-orange-tint);
}

/* ================== 6. List Reset ================== */
.hw-clean-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hw-clean-list li {
  font-size: 17px;
  margin: 8px 0;
}

#menu-by-state {
  scroll-margin-top: 120px;   /* 按你的 header 高度调，70~110px 都可以试试 */
}
/* =================================================================================
   Hibachi W · Button System (FINAL)
   规则：
   1）Base 只负责行为 & 交互（hover / active / focus）
   2）Skin 只负责变量（颜色 / 体型）
   3）页面只组合 class，不允许再写 hover
================================================================================= */
.hw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 35px;
  border-radius: 999px;
  background: var(--btn-bg, transparent);
  color: var(--btn-text, inherit);
  border: 1px solid var(--btn-border, transparent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition:
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    transform .14s ease;
}

/* Hover：统一交互（不允许在 skin 里再写） */
.hw-btn:hover {
  background: var(--btn-bg-hover, var(--btn-bg));
  color: var(--btn-text-hover, var(--btn-text));
  transform: translateY(-1px);
}

/* Active：按压感 */
.hw-btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

/* Focus：无障碍 */
.hw-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,79,0,.35),
    0 6px 14px rgba(0,0,0,.12);
}

/* Disabled */
.hw-btn[disabled],
.hw-btn.is-disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* Arrow / Icon 微动效 */
.hw-btn i {
  transition: transform .18s ease;
}
.hw-btn:hover i {
  transform: translateX(3px);
}

/* 去下划线（a 标签） */
.hw-btn,
.hw-btn:visited {
  text-decoration: none;
}

/* 布局辅助 */
.hw-btn-center {
  text-align: center;
  margin: 24px;
}

/* ================== Skins（视觉皮肤 · 只写变量） ================== */

/* 1️⃣ Primary —— 主转化 CTA */
.hw-btn--primary {
  --btn-bg: var(--hw-orange);
  --btn-bg-hover: var(--hw-orange-soft);
  --btn-text: #ffffff;
  --btn-text-hover: #111111;
  --btn-border: transparent;

  font-weight: 600;
}


/* 2️⃣ Ghost —— 描边次级操作 */
.hw-btn--ghost {
  --btn-bg: transparent;
  --btn-bg-hover: var(--hw-orange-soft);
  --btn-text: var(--hw-orange);
  --btn-text-hover: #ffffff;
  --btn-border: var(--hw-orange-soft);

  font-weight: 600;
}


/* 3️⃣ Soft —— 内容区辅助按钮 */
.hw-btn--soft {
  --btn-bg: #ffffff;
  --btn-bg-hover: var(--hw-orange-soft);
  --btn-text: var(--hw-orange);
  --btn-text-hover: #ffffff;
  --btn-border: var(--hw-orange-tint);

  box-shadow: 0 4px 14px rgba(15,23,42,.08);
}