/*
 * news-content.css
 *
 * 新聞詳細頁 content_html 區塊的排版樣式。
 * 原本使用 Tailwind typography plugin 的 prose class，但全站 layout 的
 * Tailwind CDN 已移除 ?plugins=typography 參數（為了與正式站 preflight 一致），
 * 故改以 .news-content 為 root selector 自訂子元素樣式。
 *
 * 色彩延續原站 CI：oz-cyan #017DCA / oz-dark #1A4E7E / oz-orange #FAA60A。
 */

.news-content {
    color: #57534e;              /* stone-600 */
    font-size: 1rem;             /* 16px */
    line-height: 2;              /* leading-loose */
}

@media (min-width: 1024px) {
    .news-content {
        font-size: 1.125rem;     /* lg:prose-lg ≒ 18px */
        line-height: 1.75;
    }
}

/* ===== 段落與一般文字 ===== */
.news-content p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.news-content strong, .news-content b {
    color: #1c1917;              /* stone-900 */
    font-weight: 600;
}

.news-content em, .news-content i {
    font-style: italic;
}

.news-content small {
    font-size: 0.875em;
}

/* ===== 標題 ===== */
.news-content h1,
.news-content h2,
.news-content h3,
.news-content h4,
.news-content h5,
.news-content h6 {
    color: #1c1917;              /* stone-900 */
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    scroll-margin-top: 6rem;
}

.news-content h1 {
    font-size: 2.25em;
    margin-top: 0;
    margin-bottom: 0.8888em;
}

.news-content h2 {
    font-size: 1.625em;
    margin-top: 3rem;
    margin-bottom: 1rem;
}
@media (min-width: 768px) {
    .news-content h2 { font-size: 1.875em; }
}

.news-content h3 {
    font-size: 1.375em;
    margin-top: 2rem;
    margin-bottom: 0.8em;
}
@media (min-width: 768px) {
    .news-content h3 { font-size: 1.5em; }
}

.news-content h4 {
    font-size: 1.125em;
    margin-top: 1.75em;
    margin-bottom: 0.6em;
}

.news-content h5,
.news-content h6 {
    font-size: 1em;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

/* ===== 連結 ===== */
.news-content a {
    color: #017DCA;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
    word-break: break-word;
}
.news-content a:hover {
    color: #1A4E7E;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ===== 清單 ===== */
.news-content ul,
.news-content ol {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.625em;
}

.news-content ul { list-style: disc; }
.news-content ul > li::marker { color: #017DCA; }

.news-content ol { list-style: decimal; }
.news-content ol > li::marker { color: #017DCA; font-weight: 600; }

.news-content li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-left: 0.375em;
}

.news-content li > p {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

.news-content ul ul,
.news-content ul ol,
.news-content ol ul,
.news-content ol ol {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

/* ===== 引用區塊 ===== */
.news-content blockquote {
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    padding: 0.75rem 1.5rem;
    border-left: 4px solid #017DCA;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 0 0.5rem 0.5rem 0;
    color: #44403c;              /* stone-700 */
    font-style: normal;
}
.news-content blockquote p:first-of-type { margin-top: 0; }
.news-content blockquote p:last-of-type { margin-bottom: 0; }

/* ===== 行內 code / 程式區塊 ===== */
.news-content code {
    color: #1A4E7E;
    background: #ffffff;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.9em;
    font-weight: 400;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.news-content pre {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    padding: 1rem 1.25rem;
    background: #1c1917;          /* stone-900 */
    color: #f5f5f4;
    border-radius: 0.75rem;
    overflow-x: auto;
    font-size: 0.875em;
    line-height: 1.7;
}
.news-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}

/* ===== 表格 ===== */
.news-content table {
    width: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-collapse: collapse;
    font-size: 0.9375em;
}

.news-content thead th {
    background: #017DCA;
    color: #ffffff;
    font-weight: 600;
    text-align: left;
    padding: 0.75rem 1rem;
}

.news-content tbody td {
    border-bottom: 1px solid #e7e5e4;   /* stone-200 */
    padding: 0.75rem 1rem;
}

.news-content tbody tr:hover td {
    background: rgba(1, 125, 202, 0.04);
}

/* ===== 圖片與影像 ===== */
.news-content img,
.news-content picture img {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
}

.news-content figure {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}
.news-content figure img { margin-top: 0; margin-bottom: 0.5rem; }
.news-content figcaption {
    color: #78716c;               /* stone-500 */
    font-size: 0.875em;
    line-height: 1.6;
    text-align: center;
}

/* ===== 分隔線 ===== */
.news-content hr {
    margin-top: 2.5em;
    margin-bottom: 2.5em;
    border: 0;
    border-top: 1px solid #d6d3d1;   /* stone-300 */
}

/* ===== 第一個元素消除上邊距（讓 content 頂部貼齊容器） ===== */
.news-content > :first-child {
    margin-top: 0;
}
.news-content > :last-child {
    margin-bottom: 0;
}