/* 第二版內頁: 疊在第一版 style.css 上面, 讓內頁跟第二版首頁同一個樣子
   原始檔: _tools/v2-inner.css (build_pages.py 會複製到 css/) */

/* 2026-10-15 海邊主調: 覆寫第一版 style.css 的色票 (海洋藍／沙灘色／暖陽黃／珊瑚橘); style.css 本身不動 */
:root {
  --c-primary: #1769B0;        /* 海洋藍 主色 */
  --c-primary-dark: #0E3F6B;
  --c-primary-rgb: 23, 105, 176;
  --c-bg: #FFFFFF;             /* 沙灘白 底色 */
  --c-bg-2: #F3F8FD;           /* 沙色 */
  --c-sage: #E8F2FC;           /* 淺海藍 (原鼠尾草綠) */
  --c-sun: #F2A93B;            /* 暖陽黃 行動按鈕 */
  --c-sun-dark: #D98E1F;
  --c-terra: #1769B0;          /* 2026-10-16 改藍：小標、英文標、日期、徽章跟主色同一個藍 */
  --c-ink: #14263A;
  --c-ink-soft: #3E5266;
  --c-line: #DCE5EF;
  --c-on-dark: #EAF4F7;
  --c-on-dark-soft: #C4DCE5;
}

/* 第二版用的是 header 標籤 + Tailwind; 第一版的 :where(h1..) 字體保留 */
body.v2 { background-color: #FFFFFF; }
body.v2 main { display: block; }

/* 內頁大圖標題: 跟第二版一致, 圓角卡片感 + 細線田埂 */
body.v2 .page-hero { margin: 16px auto 0; max-width: 1280px; width: calc(100% - 32px); border-radius: 20px; overflow: hidden; min-height: 300px; }
body.v2 .page-hero.simple { min-height: 200px; }
body.v2 .page-hero h1 { letter-spacing: 4px; }
body.v2 .page-hero .en { font-family: "Noto Serif TC", serif; font-style: normal; font-size: 15px; letter-spacing: 3px; color: #F4E3BF; }
body.v2 .page-hero-inner::after { content: ""; display: block; width: 160px; height: 14px; margin-top: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14' fill='none' stroke='%23F4E3BF' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2 8c14-6 24 6 38 0s24-6 38 0 24 6 38 0 24-6 38 0'/%3E%3C/svg%3E") no-repeat; }

/* 卡片、按鈕: 圓角與陰影統一成第二版 */
body.v2 .card, body.v2 .p-card { border-radius: 16px; box-shadow: 0 6px 18px -8px rgba(78,64,42,.25); transition: transform .25s, box-shadow .25s; }
body.v2 .card:hover, body.v2 .p-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(78,64,42,.3); }
body.v2 .btn { border-radius: 10px; transition: transform .15s, background-color .2s, box-shadow .2s; }
body.v2 .btn:active { transform: scale(.96); }

/* 第一版的購物車數字 (#cartCount) 現在放在第二版的 .hf-badge 裡 */
body.v2 .hf-badge.cart-count:not(.is-on) { display: none; }
body.v2 .hf-badge.cart-count.bump { animation: hf-pop .4s ease; }

/* 結帳摘要黏住的位置: 第二版頁首高度 */
body.v2 .summary { top: 100px; }
body.v2 .faq-group { scroll-margin-top: 100px; }

/* 2026-10-15 海鮮餐飲頁、關於農場的園區規劃 */
body.v2 .dining-block { scroll-margin-top: 90px; }
body.v2 #notice, body.v2 #park { scroll-margin-top: 90px; }
body.v2 .dining-badge { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: var(--c-terra); color: #fff; font-size: 13px; letter-spacing: 1px; font-family: var(--f-sans); }
body.v2 .dining-price { color: var(--c-ink-soft); font-size: 14px; }
body.v2 .split-text .d-actions { display: flex; flex-wrap: wrap; gap: 10px; }
body.v2 .park-map { border-radius: 20px; overflow: hidden; box-shadow: 0 18px 40px -16px rgba(8,52,72,.35); max-width: 960px; margin: 0 auto; }
body.v2 .park-map img { display: block; width: 100%; height: auto; }
body.v2 .park-areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
body.v2 .park-area { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; background: #fff; border: 1px solid var(--c-line); border-radius: 14px; scroll-margin-top: 100px; transition: box-shadow .3s, border-color .3s; }
body.v2 .park-area:target { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(23,105,176,.18); }
body.v2 .park-area .ico { flex: none; width: 28px; height: 28px; color: var(--c-primary); }
body.v2 .park-area h4 { margin: 0 0 4px; font-size: 17px; }
body.v2 .park-area p { margin: 0 0 6px; font-size: 14px; color: var(--c-ink-soft); line-height: 1.7; }
body.v2 .park-area.is-soon { background: #fdf3ee; border-style: dashed; border-color: #e9b9a5; }
body.v2 .park-area.is-soon .ico { color: var(--c-terra); }

/* 2026-10-16 客戶：主色改藍、白底 —— 行動按鈕（原暖陽黃）改實心藍；焦點框改藍；頁尾跟首頁同為深海藍 */
body.v2 .btn-sun { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
body.v2 .btn-sun:hover { background: #145A96; border-color: #145A96; color: #fff; box-shadow: 0 8px 20px rgba(23,105,176,.3); }
body.v2 :focus-visible { outline-color: #1769B0; }
body.v2 .section-head .deco { background: #1769B0; }
body.v2 .page-hero .en { color: #DCEBFA; }

/* 手機底部列已由第二版提供 */
@media (max-width: 767px) {
  body.v2 .page-hero { width: calc(100% - 24px); margin-top: 12px; border-radius: 16px; min-height: 220px; }
  body.v2 .park-areas { grid-template-columns: 1fr; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  body.v2 .park-areas { grid-template-columns: repeat(2, 1fr); }
}

/* Tailwind 的 preflight 關掉了 -> 補回邊框預設值 (只給 Tailwind 寫的頁首頁尾用; :where 特異性 0, 不會壓過第一版的 class) */
:where(body.v2 header *, body.v2 footer *, body.v2 .hf-drawer *, body.v2 .hf-modal *, body.v2 aside *, body.v2 .mbar *),
:where(body.v2 header *, body.v2 footer *)::before, :where(body.v2 header *, body.v2 footer *)::after { border-width: 0; border-style: solid; border-color: currentColor; }
:where(body.v2 header, body.v2 footer) :where(h1, h2, h3, h4, h5, p, ul) { margin: 0; }