/* ================================================================
   Jackle Blog — 全域排版
   注意：這些是無 class 選擇器，對全站生效，不只文章頁。
   注意：原專案沒有安裝 @tailwindcss/typography，prose 系列 class 是無作用的裝飾，
         不要為了它們把插件裝回來，會把下面的字級與間距全部蓋掉。
   ================================================================ */

/* ---- 全域標題（無 class，全站生效） ---- */
h1 { font-size: 1.875rem; line-height: 1.2; font-weight: 600; letter-spacing: .025em; }
@media (min-width: 64rem) { h1 { font-size: 2.25rem; line-height: 1.11111; } }

h2 { font-size: 1.5rem; line-height: 1.33333; font-weight: 600; letter-spacing: .025em;
     margin-top: 3rem; margin-bottom: 1.5rem; }
@media (min-width: 48rem) { h2 { margin-top: 5rem; margin-bottom: 2.5rem; } }
@media (min-width: 64rem) { h2 { font-size: 1.875rem; line-height: 1.2; } }

h3 { font-size: 1.25rem; line-height: 1.4; font-weight: 700; letter-spacing: .025em;
     margin-block: 1.5rem; }
@media (min-width: 48rem) { h3 { margin-block: 2rem; } }
@media (min-width: 64rem) { h3 { font-size: 1.5rem; line-height: 1.33333; } }

h4 { font-size: 1.125rem; line-height: 1.55556; font-weight: 700; letter-spacing: .025em;
     margin-block: 1.5rem; }
@media (min-width: 48rem) { h4 { margin-block: 2rem; } }
@media (min-width: 64rem) { h4 { font-size: 1.25rem; line-height: 1.4; } }

h5 { font-size: 1rem; line-height: 1.5; font-weight: 700; letter-spacing: .025em;
     margin-block: 1.5rem; }
@media (min-width: 48rem) { h5 { margin-block: 2rem; } }
@media (min-width: 64rem) { h5 { font-size: 1.125rem; line-height: 1.55556; } }

/* ---- 全域 strong ---- */
strong { font-weight: 800; }

/* ---- 全域 blockquote ---- */
blockquote { margin-block: 2rem; padding: 1.5rem;
             border-left: 4px solid #00bba7;
             /* 半透明色要疊在不透明底上，否則背景網格會穿過引言的字 */
             background: linear-gradient(rgb(249 250 251 / .5), rgb(249 250 251 / .5)), var(--surface); }
.dark blockquote { background: linear-gradient(rgb(30 41 57 / .5), rgb(30 41 57 / .5)), var(--surface); }
blockquote p { color: #364153; }
.dark blockquote p { color: #d1d5dc; }
blockquote strong { color: #101828; }
.dark blockquote strong { color: #f3f4f6; }

/* ---- 文章內文（#article 容器內） ---- */
#article a { font-weight: 500; color: #00bba7; text-decoration-line: underline;
             text-decoration-color: #00786f; text-decoration-thickness: 2px;
             text-underline-offset: 2px; transition: .15s cubic-bezier(.4,0,.2,1); }
@media (hover: hover) { #article a:hover { text-decoration-color: #00bba7; } }
#article p  { font-size: 1rem; line-height: 1.75rem; margin-bottom: 1.5rem; }
@media (min-width: 64rem) { #article p { font-size: 1.125rem; line-height: 1.55556; } }
#article ul { list-style-type: disc;    margin-bottom: 1.5rem; padding-left: 1.5rem; }
#article ol { list-style-type: decimal; margin-bottom: 1.5rem; padding-left: 2rem; }
#article ul > *:not(:last-child), #article ol > *:not(:last-child) { margin-block-end: .5rem; }
#article li { font-size: 1rem; line-height: 1.75rem; }
@media (min-width: 64rem) { #article li { font-size: 1.125rem; line-height: 1.55556; } }
#article hr { border: 0; border-top: 2px solid rgb(229 231 235 / .5); margin-block: 3rem; }
.dark #article hr { border-top-color: rgb(54 65 83 / .5); }
#article code { background-color: #f3f4f6; color: #1e2939; border-radius: .25rem;
                font-family: var(--font-mono); font-size: .875rem;
                padding: .125rem .375rem; }
.dark #article code { background-color: #1e2939; color: #e5e7eb; }
#article pre { background-color: #030712; border: 1px solid #4a5565; border-radius: .625rem;
               font-size: .875rem; margin-block: 1.5rem; padding: 1rem;
               white-space: pre-wrap; overflow-wrap: break-word; }
.dark #article pre { border-color: #6a7282; }
#article pre code { background: transparent; display: block; padding: 0; }
#article table { width: 100%; min-width: 640px; border-collapse: collapse;
                 border: 1px solid #e5e7eb; border-radius: .625rem;
                 background-color: #fff; font-size: .875rem; text-align: left; }
.dark #article table { background-color: #101828; border-color: #364153; }
#article th { border: 1px solid #e5e7eb; background-color: #f9fafb; padding: 1rem;
              font-weight: 500; color: #101828; }
.dark #article th { border-color: #364153; background-color: #1e2939; color: #f3f4f6; }
#article td { border: 1px solid #e5e7eb; padding: 1rem; }
.dark #article td { border-color: #364153; }
#article tr:hover { background-color: rgb(249 250 251 / .5); transition: .15s cubic-bezier(.4,0,.2,1); }
.dark #article tr:hover { background-color: rgb(30 41 57 / .5); }
#article figure { margin-block: 3rem; margin-inline: auto; }
#article figcaption { margin-top: .75rem; text-align: center; font-size: .875rem; color: #4a5565; }
.dark #article figcaption { color: #99a1af; }
.content img { margin-inline: auto; margin-top: 1.5rem; border-radius: .625rem;
               object-fit: cover;
               box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); }
@media (min-width: 48rem) { .content img { margin-top: 4rem; } }