/* ============================================================
   input.css — Styles specific to input.html (main landing page)
   ============================================================ */

/* Center card form for hero section */
#hero-form-card {
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}

/* Pain card hover */
.pain-card {
  transition: transform 0.25s ease;
}
.pain-card:hover {
  transform: translateY(-2px);
}

/* YouTube embed aspect ratio container */
.video-embed-wrapper {
  padding-top: 56.25%;
}

/* ============================================================
   Custom Token Classes (foreground / background / font)
   These mirror the React tailwind.config theme.extend definitions.
   Defined here so they are guaranteed to load AFTER common.css
   and resolve correctly regardless of any upstream CSS issue.
   ============================================================ */

/* ── Font Family ── */
.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }

/* ── Text Colors (foreground scale) ── */
.text-foreground-50  { color: oklch(var(--foreground-50)); }
.text-foreground-100 { color: oklch(var(--foreground-100)); }
.text-foreground-200 { color: oklch(var(--foreground-200)); }
.text-foreground-300 { color: oklch(var(--foreground-300)); }
.text-foreground-400 { color: oklch(var(--foreground-400)); }
.text-foreground-500 { color: oklch(var(--foreground-500)); }
.text-foreground-600 { color: oklch(var(--foreground-600)); }
.text-foreground-700 { color: oklch(var(--foreground-700)); }
.text-foreground-800 { color: oklch(var(--foreground-800)); }
.text-foreground-900 { color: oklch(var(--foreground-900)); }
.text-foreground-950 { color: oklch(var(--foreground-950)); }

/* ── Background Colors (background scale) ── */
.bg-background-50  { background-color: oklch(var(--background-50)); }
.bg-background-100 { background-color: oklch(var(--background-100)); }
.bg-background-200 { background-color: oklch(var(--background-200)); }

/* ── Background Colors (foreground scale, used as bg) ── */
.bg-foreground-50  { background-color: oklch(var(--foreground-50)); }
.bg-foreground-100 { background-color: oklch(var(--foreground-100)); }
.bg-foreground-200 { background-color: oklch(var(--foreground-200)); }
.bg-foreground-600 { background-color: oklch(var(--foreground-600)); }
.bg-foreground-900 { background-color: oklch(var(--foreground-900)); }
.bg-foreground-950 { background-color: oklch(var(--foreground-950)); }

/* ── Border Colors (foreground scale) ── */
.border-foreground-100 { border-color: oklch(var(--foreground-100)); }
.border-foreground-200 { border-color: oklch(var(--foreground-200)); }

/* ── Hover States ── */
.hover\:bg-background-50:hover { background-color: oklch(var(--background-50)); }
.hover\:text-foreground-900:hover { color: oklch(var(--foreground-900)); }

/* ── Foreground-900/40 overlay (used in hero) ── */
.bg-foreground-900\/40 { background-color: oklch(var(--foreground-900) / 0.4); }

/* ── FAQ expanded icon state (common.js toggles these) ── */
.faq-article .bg-primary-500.border-primary-500.text-white {
  /* This compound selector targets the toggled-open icon container */
}

/* ── Ensure FAQ answer transition matches React exactly ── */
.faq-answer {
  transition: all 300ms ease-in-out;
  overflow: hidden;
}
.faq-answer.collapsed {
  max-height: 0;
  opacity: 0;
}
.faq-answer.expanded {
  max-height: 600px;
  opacity: 1;
}

/* ── FAQ Section: bulletproof guaranteed styles ── */
/* 根源修正：
   1. 全部用「寫死的 hex 值」，不依賴 oklch(var(--xxx))，
      徹底排除 OKLCH 變數解析失敗導致 background/border 變空的問題。
   2. 用 #faq-list 做 id scope，specificity (id+class) 高於任何
      單一 utility class（如殘留的表格樣式 / bg-white 衝突），
      確保白底圓角框一定勝出，不需 !important。
   hex 值對應 React 版 OKLCH token：
   foreground-100 oklch(0.948 0.012 30) ≈ #F0ECEA
   foreground-900 oklch(0.210 0.016 22) ≈ #2D251F
   background-50  oklch(0.988 0.008 88) ≈ #FCFAF7
*/

/* 每張 FAQ 卡片：白底、12px 圓角、foreground-100 邊框 */
#faq-list .faq-article {
  background-color: #ffffff;
  background-image: none;
  border-radius: 0.75rem;
  border: 1px solid #F0ECEA;
  overflow: hidden;
}

/* 卡片間距（等同 space-y-3 的 0.75rem） */
#faq-list > .faq-article + .faq-article {
  margin-top: 0.75rem;
}

/* FAQ 按鈕 */
#faq-list .faq-toggle-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  text-align: left;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 150ms ease;
}

#faq-list .faq-toggle-btn:hover {
  background-color: #FCFAF7;
}

/* FAQ 問題文字 */
#faq-list .faq-toggle-btn h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: #2D251F;
  font-size: 1.125rem;
  line-height: 1.375;
  padding-right: 0.5rem;
}

/* FAQ 答案內文 */
#faq-list .faq-answer > div {
  padding: 0 1.25rem 1.25rem;
  font-family: var(--font-body);
  color: #2D251F;
  font-size: 1.125rem;
  line-height: 1.625;
}

/* Keep WenQu validation behavior while matching the approved input design. */
#hero-form [type="text"].wq-input.input-base,
#hero-form select.wq-select.input-base {
  width: 100%;
  height: auto;
  padding: 1rem;
  border: 1px solid oklch(var(--background-200));
  border-radius: 0.75rem;
  background-color: #fff;
  background-image: none;
  color: oklch(var(--foreground-950));
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  outline: none;
  transition: border-color 150ms ease;
}

#hero-form .select-wrapper select.wq-select.input-base {
  padding-right: 2.5rem;
}

#hero-form [type="text"].wq-input.input-base:focus,
#hero-form select.wq-select.input-base:focus {
  border-color: oklch(var(--accent-400));
}

#hero-form [type="text"].wq-input.input-base.error,
#hero-form select.wq-select.input-base.error {
  border-color: oklch(var(--primary-400));
  background-color: #fff;
  color: oklch(var(--foreground-950));
}

#hero-form [type="text"].wq-input.input-base::placeholder,
#hero-form [type="text"].wq-input.input-base.error::placeholder {
  color: oklch(var(--foreground-400));
}

/* The design already supplies #hero-name-clear; hide WenQu's duplicate icon. */
#hero-form .wq-iconx {
  display: none !important;
}

/* This button stays visible while the name is empty and opens the name hint. */
#hero-submit-disabled {
  cursor: pointer;
}

@media (max-width: 768px) {
  /* 手機版農曆閏年 */
  #hero-form .select-wrapper #hero-year {
    padding: 1rem;
  }
  #hero-form .select-wrapper #hero-month {
    padding: 1rem 0.5rem;
  }
  #hero-form .grid-cols-\[4fr_3fr_3fr\] {
    grid-template-columns: 3fr 3fr 3fr;
  }
  /* 手機版農曆閏年 */
}