/* ══════════════════════════════════════
   木酌 Muku — 自訂樣式
   ══════════════════════════════════════ */

/* ── 基礎字體設定 ── */
body {
  font-family: "Noto Serif TC", serif;
  -webkit-font-smoothing: antialiased;
  background-color: #F8F4ED;
  color: #3C2F2F;
}

/* ── 木紋背景紋理（CSS 模擬） ── */
.wood-grain-bg {
  background-image:
    repeating-linear-gradient(
      87deg,
      transparent,
      transparent 2px,
      rgba(212, 175, 55, 0.03) 2px,
      rgba(212, 175, 55, 0.03) 4px
    ),
    repeating-linear-gradient(
      93deg,
      transparent,
      transparent 3px,
      rgba(212, 175, 55, 0.02) 3px,
      rgba(212, 175, 55, 0.02) 6px
    );
}

/* ── 導覽列連結動畫 ── */
.nav-link {
  position: relative;
  transition: color 0.2s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #C41E3A;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* ── 商品卡片 ── */
.product-card {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s ease;
}

.product-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 40px rgba(60, 47, 47, 0.12);
}

/* ── 金色分隔線 ── */
.gold-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #D4AF37, transparent);
}

/* ── 燒酎卡片圖片 zoom ── */
.product-card .img-wrapper {
  overflow: hidden;
}

.product-card .img-wrapper img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-card:hover .img-wrapper img {
  transform: scale(1.06);
}

/* ── 頁面進入動畫 ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
  animation: fadeInUp 0.5s ease forwards;
}

/* ── 測驗進度條動畫 ── */
@keyframes progressFill {
  from { width: 0; }
}

.progress-fill {
  animation: progressFill 0.5s ease forwards;
}

/* ── 標籤 hover ── */
.tag-pill {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tag-pill:hover {
  background-color: #3C2F2F;
  color: #F8F4ED;
  border-color: #3C2F2F;
}

/* ── 文字截斷（多行） ── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 平滑滾動 ── */
html {
  scroll-behavior: smooth;
}

/* ── 選取文字顏色 ── */
::selection {
  background-color: rgba(196, 30, 58, 0.15);
  color: #3C2F2F;
}

/* ── 自訂 scrollbar ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #EDE8DF;
}

::-webkit-scrollbar-thumb {
  background: #6B4F4F;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3C2F2F;
}

/* ── 表格 hover 行 ── */
tr.hover\:bg-warm\/30:hover td {
  background-color: rgba(248, 244, 237, 0.3);
}

/* ── Admin 表單 checkbox 自訂 ── */
input[type="checkbox"].accent-gold {
  accent-color: #D4AF37;
}

input[type="checkbox"].accent-brown {
  accent-color: #3C2F2F;
}

/* ── Hero 字體漸層 ── */
.text-gradient-gold {
  background: linear-gradient(135deg, #D4AF37, #E8D070);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 響應式圖片 ── */
img {
  max-width: 100%;
  height: auto;
}

/* ── 圓角卡片陰影系統 ── */
.card-shadow {
  box-shadow: 0 1px 3px rgba(60, 47, 47, 0.04),
              0 4px 12px rgba(60, 47, 47, 0.06);
}

.card-shadow-hover {
  box-shadow: 0 8px 24px rgba(60, 47, 47, 0.12),
              0 2px 6px rgba(60, 47, 47, 0.08);
}

/* ── 按鈕 ripple 效果 ── */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s, height 0.4s, opacity 0.4s;
}

.btn-ripple:active::after {
  width: 200px;
  height: 200px;
  opacity: 0;
}

/* ── 測驗卡片選中樣式 ── */
.quiz-option-selected {
  background-color: rgba(196, 30, 58, 0.05);
  border-color: #C41E3A !important;
  box-shadow: 0 0 0 2px rgba(196, 30, 58, 0.2);
}

/* ── 分數條動畫 ── */
@keyframes barGrow {
  from { width: 0; }
}

.score-bar {
  animation: barGrow 1s ease-out forwards;
  animation-delay: 0.3s;
}

/* ── Footer 鏈接 ── */
footer a {
  transition: color 0.2s ease;
}

/* ── 特殊裝飾：傾斜分隔 ── */
.section-divider-skew {
  height: 60px;
  background: #F8F4ED;
  clip-path: polygon(0 0, 100% 60px, 100% 100%, 0 100%);
  margin-top: -60px;
}

/* ══════════════════════════════════════
   CLICKABLE VS NON-CLICKABLE UX SYSTEM
   ══════════════════════════════════════ */

/* All interactive elements get cursor-pointer */
a, button, [role="button"], label[for], select,
input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"] {
  cursor: pointer;
}

/* Product cards — strong hover lift + glow */
.product-card {
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.32s ease,
              border-color 0.25s ease;
  cursor: pointer;
}
.product-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 24px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(201,169,110,0.22);
}
.product-card:active {
  transform: translateY(-2px) scale(1.005);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  transition-duration: 0.1s;
}

/* Quiz option buttons — clear hover state */
.quiz-option {
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
  min-height: 44px;
}
.quiz-option:hover {
  transform: translateX(3px);
}
.quiz-option:active {
  transform: translateX(1px);
  transition-duration: 0.08s;
}

/* All nav/header links */
header a, nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Buttons — minimum touch target 44px + active feedback */
button:not([disabled]) {
  min-height: 44px;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
button:not([disabled]):active {
  opacity: 0.85;
  transform: scale(0.97);
  transition-duration: 0.08s;
}

/* Gold CTA buttons — shimmer pulse on hover */
.btn-gold {
  position: relative;
  overflow: hidden;
}
.btn-gold::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}
.btn-gold:hover::after {
  transform: translateX(100%);
}

/* Non-clickable tags/badges — no hover, flat cursor */
.tag-static {
  cursor: default;
  user-select: none;
  pointer-events: none;
}

/* Ingredient category tiles on homepage */
.ingredient-tile {
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.25s ease,
              background 0.25s ease;
}
.ingredient-tile:hover {
  transform: translateY(-4px) scale(1.03);
}
.ingredient-tile:active {
  transform: translateY(-1px) scale(1.01);
  transition-duration: 0.1s;
}

/* Filter pills / tab buttons */
.filter-pill {
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.filter-pill:hover {
  transform: translateY(-1px);
}

/* ══════════════════════════════════════
   RESPONSIVE DESIGN FIXES
   ══════════════════════════════════════ */

/* Prevent horizontal overflow globally */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Product cards — ensure proper touch targets on mobile */
@media (max-width: 640px) {
  .product-card {
    touch-action: manipulation;
  }

  /* Make quiz options full width and larger touch targets */
  .quiz-option {
    min-height: 56px;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Prevent the catalog filter bar from overflowing */
  .filter-scroll-x {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .filter-scroll-x::-webkit-scrollbar {
    display: none;
  }

  /* Ensure the hero text doesn't overflow */
  h1, h2 {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Fix footer grid on mobile */
  footer .grid {
    gap: 2rem;
  }

  /* Product detail specs — stack on very small screens */
  .specs-row {
    flex-direction: column;
  }
}

/* Tablet adjustments */
@media (min-width: 641px) and (max-width: 1024px) {
  /* Catalog grid — 2 columns on tablet */
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Fix writing-mode vertical for non-supporting browsers */
.writing-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* Improved focus styles for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid rgba(201, 169, 110, 0.7);
  outline-offset: 2px;
}

/* Make admin panel scrollable on mobile */
@media (max-width: 1024px) {
  .admin-sidebar-nav {
    max-height: 60vh;
    overflow-y: auto;
  }
}