/* 基礎樣式：Tailwind preflight 重設、設計系統色票、導覽列與內文區塊的預設樣式。
   熟時自己的樣式在 global.css 與各頁 <style>。 */

/* ---- 重設（Tailwind v3 preflight，MIT） ---- */
*,::before,::after{box-sizing:border-box;border:0 solid #e5e7eb}
html{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC",sans-serif;-webkit-tap-highlight-color:transparent}
body{line-height:inherit;margin:0}
hr{height:0;color:inherit;border-top-width:1px}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
small{font-size:80%}
table{text-indent:0;border-color:inherit;border-collapse:collapse}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}
button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}
blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}
ol,ul,menu{margin:0;padding:0;list-style:none}
button,[role=button]{cursor:pointer}
img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}
img,video{max-width:100%;height:auto}
[hidden]{display:none}

/* ---- 設計系統色票 ---- */
:root{
  --st-brand:#DB0000;--st-on-brand:#ffffff;--st-bg:#F5F3EC;--st-fg:#393939;
  --st-bg-elev:#f5f3ec;--st-bg-overlay:#eae8e1;--st-fg-muted:#5f5e5d;--st-fg-subtle:#7b7a78;--st-line:#dbd9d3;
  --ds-secondary:#C99A4E;--ds-radius-sm:8px;--ds-radius-md:12px;--ds-radius-lg:16px;
  --ds-font-size-sm:14px;--ds-font-size-base:16px;
}
html,body{background:var(--st-bg);color:var(--st-fg)}
body{min-height:100vh;overflow-y:scroll}
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}

/* ---- 導覽列預設（頁首、頁尾共用，global.css 再覆寫外觀） ---- */
:where(.zb-navbar){font-family:inherit;position:relative}
:where(.zb-navbar) a{border-radius:var(--ds-radius-md);color:inherit;font-size:var(--ds-font-size-base);white-space:nowrap;align-items:center;gap:6px;padding:8px 12px;line-height:1.4;text-decoration:none;display:flex}
:where(.zb-navbar) a:where(:focus-visible){outline:2px solid var(--st-brand);outline-offset:2px}
:where(.zb-navbar) a:where(.active,[aria-current=page]){color:var(--st-brand);font-weight:600}
ul:where(.zb-navbar-list){margin:0;padding:0;list-style:none;flex-wrap:wrap;align-items:center;gap:4px 8px;display:flex}
:where(.zb-navbar-list) li{position:relative}
button:where(.zb-navbar-toggle){border:1px solid var(--st-line);border-radius:var(--ds-radius-md);width:40px;height:40px;color:inherit;cursor:pointer;background:none;justify-content:center;align-items:center;font-size:1.25rem;line-height:1;display:none}
button:where(.zb-navbar-toggle:focus-visible){outline:2px solid var(--st-brand);outline-offset:2px}
button:where(.zb-navbar-toggle[aria-expanded=true]){background:var(--st-bg-overlay)}
/* 手機：選單變成直排下拉。用 :where() 讓權重為 0，global.css 的頁首、頁尾樣式可以直接覆寫 */
@media (max-width:767.98px){
  button:where(.zb-navbar-toggle){display:inline-flex}
  ul:where(.zb-navbar-list){z-index:20;border:1px solid var(--st-line);border-radius:var(--ds-radius-md);background:var(--st-bg-elev);width:max-content;min-width:14rem;max-width:calc(100vw - 32px);max-height:calc(100vh - 120px);color:var(--st-fg);flex-direction:column;align-items:stretch;gap:0;padding:6px;display:none;position:absolute;top:calc(100% + 8px);right:0;overflow-y:auto;box-shadow:0 10px 30px -12px #00000040}
  ul:where(.zb-navbar-list.open){display:flex}
  :where(.zb-navbar) a{white-space:normal}
}

/* ---- 內文區塊（食譜的食材、步驟清單） ---- */
.zb-user-content :where(p,ul,ol){margin:0 0 1em}
.zb-user-content ul{padding-left:1.5em;list-style:outside}
.zb-user-content ol{padding-left:1.5em;list-style:decimal}
.zb-user-content li{margin:.25em 0}