/*
Theme Name:   Mark Ke Astra
Theme URI:    https://mark-ke.com/
Description:  小柯的資訊手札 - Astra child theme。藍色系、系統字型、零外部資源。
Author:       mark-ke
Template:     astra
Version:      1.2.1
Requires at least: 6.5
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  mark-ke-astra
*/

/* ===== mark-ke.com Astra override v1.2.1 (2026-10-31)：深藍頁首＋Occasio 風格卡片版面 ===== */
:root {
  --mk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --mk-mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", monospace;
  --mk-code-bg: #0F1E33;
  --mk-bright: #3B82F6;
}

/* 1. 字型：系統字型，明確列出中文字型 */
body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6, .site-title, .main-header-menu { font-family: var(--mk-font); }

/* 2. 中文長文閱讀 */
.entry-content :where(p, li) { line-height: 1.85; letter-spacing: 0.02em; }
.entry-content h2 {
  margin-top: 2.4em;
  padding-left: 0.6em;
  border-left: 4px solid var(--ast-global-color-0);
}
.entry-content h3 { margin-top: 1.8em; }
.entry-content a { text-underline-offset: 3px; }

/* 3. 程式碼 */
.entry-content :not(pre) > code {
  font-family: var(--mk-mono);
  font-size: 0.9em;
  background: var(--ast-global-color-6);
  color: var(--ast-global-color-2);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}
.entry-content pre,
.entry-content pre.wp-block-code {
  font-family: var(--mk-mono);
  font-size: 0.9em;
  line-height: 1.6;
  background: var(--mk-code-bg);
  color: #E6EDF7;
  border: 0;
  border-radius: 8px;
  padding: 1.1em 1.3em;
  overflow-x: auto;
  box-sizing: border-box;
}
.entry-content pre code { background: none; color: inherit; padding: 0; }

/* 4. 提示框：區塊「進階 → 其他 CSS class」填類別名稱 */
.mk-note, .mk-verify, .mk-rollback, .mk-warn {
  padding: 1em 1.2em;
  margin-block: 1.5em;
  border-left: 4px solid;
  border-radius: 6px;
  box-sizing: border-box;
}
.mk-note::before, .mk-verify::before, .mk-rollback::before, .mk-warn::before {
  display: block;
  font-weight: 700;
  margin-bottom: 0.4em;
}
.mk-note     { background: var(--ast-global-color-6); border-color: var(--ast-global-color-0); }
.mk-note::before     { content: "補充"; color: var(--ast-global-color-0); }
.mk-verify   { background: #EEF7F1; border-color: #2E7D4F; }
.mk-verify::before   { content: "驗證方式"; color: #2E7D4F; }
.mk-rollback { background: #FFF6E8; border-color: #B26A00; }
.mk-rollback::before { content: "回滾方式"; color: #B26A00; }
.mk-warn     { background: #FDEEEE; border-color: #B42318; }
.mk-warn::before     { content: "注意"; color: #B42318; }

/* 5. 卡片 */
.mk-card {
  background: var(--ast-global-color-4);
  border: 1px solid var(--ast-global-color-7);
  border-radius: 8px;
  padding: 1.5em;
  box-sizing: border-box;
}

/* 6. 卡片式版面（參考 Occasio）：淡藍灰底，文章、側欄小工具是白色卡片 */
/* 不論 Astra 容器樣式是否已切成 boxed，整頁底色都用淡藍灰 */
body,
body.ast-separate-container,
body.ast-plain-container { background-color: var(--ast-global-color-5); }

/* 單篇文章、留言：白色卡片 */
.ast-separate-container .ast-article-single,
.ast-separate-container .comments-area {
  background-color: var(--ast-global-color-4);
  border: 1px solid var(--ast-global-color-7);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 42, 74, 0.06);
}

/* 文章列表：卡片網格，無側欄（桌機三欄、平板兩欄、手機一欄） */
.blog .ast-article-post,
.archive .ast-article-post,
.search .ast-article-post {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.blog .ast-article-inner,
.archive .ast-article-inner,
.search .ast-article-inner {
  height: 100%;
  background-color: var(--ast-global-color-4);
  border: 1px solid var(--ast-global-color-7);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 42, 74, 0.06);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.blog .ast-article-inner:hover,
.archive .ast-article-inner:hover,
.search .ast-article-inner:hover {
  border-color: var(--ast-global-color-0);
  box-shadow: 0 6px 20px rgba(15, 42, 74, 0.10);
}
@media (min-width: 769px) {
  .blog #main > .ast-row,
  .archive #main > .ast-row,
  .search #main > .ast-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5em;
    margin-left: 0;
    margin-right: 0;
  }
  .blog #main > .ast-row::before, .blog #main > .ast-row::after,
  .archive #main > .ast-row::before, .archive #main > .ast-row::after,
  .search #main > .ast-row::before, .search #main > .ast-row::after { display: none; }
  .blog #main > .ast-row > .ast-article-post,
  .archive #main > .ast-row > .ast-article-post,
  .search #main > .ast-row > .ast-article-post {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    float: none;
  }
}
@media (min-width: 1024px) {
  .blog #main > .ast-row,
  .archive #main > .ast-row,
  .search #main > .ast-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .blog .ast-article-post,
  .archive .ast-article-post,
  .search .ast-article-post { margin-bottom: 1.5em; }
}
.ast-article-post .ast-blog-featured-section img,
.ast-article-post .post-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.ast-article-post .entry-title { font-size: 1.25em; line-height: 1.45; }
.ast-article-post .entry-title a { color: var(--ast-global-color-2); text-decoration: none; }
.ast-article-post .entry-title a:hover { color: var(--ast-global-color-0); }

/* 文章資訊（日期）用灰藍，分類維持品牌藍 */
.entry-meta, .entry-meta a {
  color: var(--ast-global-color-8);
}
.ast-taxonomy-container a, .cat-links a {
  color: var(--ast-global-color-0);
  font-weight: 600;
  font-size: 0.85em;
  text-decoration: none;
}

/* 「繼續閱讀」做成外框按鈕 */
.ast-article-post .read-more a,
.ast-article-post .ast-read-more-container a {
  display: inline-block;
  margin-top: 0.5em;
  padding: 0.45em 1.1em;
  border: 1px solid var(--ast-global-color-0);
  border-radius: 6px;
  color: var(--ast-global-color-0);
  font-weight: 600;
  font-size: 0.9em;
  text-decoration: none;
}
.ast-article-post .read-more a:hover,
.ast-article-post .ast-read-more-container a:hover {
  background: var(--ast-global-color-0);
  color: var(--ast-global-color-4);
}

/* 分頁 */
.ast-pagination .page-numbers {
  border-radius: 6px;
  background: var(--ast-global-color-4);
  border: 1px solid var(--ast-global-color-7);
}
.ast-pagination .page-numbers.current {
  background: var(--ast-global-color-0);
  border-color: var(--ast-global-color-0);
  color: var(--ast-global-color-4);
}

/* 7. 側欄 */
#secondary .widget { margin-bottom: 1.5em; }
#secondary .widget h2,
#secondary .widget h3 {
  font-size: 1em;
  margin: 0 0 1em;
  padding-bottom: 0.6em;
  border-bottom: 2px solid var(--ast-global-color-0);
  color: var(--ast-global-color-2);
}
#secondary .widget p { line-height: 1.8; }
#secondary .wp-block-latest-posts li {
  display: flex;
  gap: 0.75em;
  align-items: center;
  margin-bottom: 0.9em;
}
#secondary .wp-block-latest-posts__featured-image { margin: 0 !important; flex: 0 0 64px; }
#secondary .wp-block-latest-posts__featured-image img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
}
#secondary .wp-block-latest-posts__post-title {
  font-size: 0.95em;
  line-height: 1.4;
  color: var(--ast-global-color-2);
  text-decoration: none;
}
#secondary .wp-block-latest-posts__post-date {
  font-size: 0.8em;
  color: var(--ast-global-color-8);
}
#secondary .wp-block-categories a,
#secondary .wp-block-tag-cloud a { text-decoration: none; }
#secondary .wp-block-tag-cloud a {
  display: inline-block;
  margin: 0 0.3em 0.4em 0;
  padding: 0.2em 0.7em;
  font-size: 0.85em !important;
  background: var(--ast-global-color-6);
  border-radius: 999px;
  color: var(--ast-global-color-2);
}

/* 8. 表格 */
.entry-content table { border-collapse: collapse; font-size: 0.95em; }
.entry-content :is(th, td) {
  border: 1px solid var(--ast-global-color-7);
  padding: 0.55em 0.8em;
}
.entry-content th {
  background: var(--ast-global-color-6);
  color: var(--ast-global-color-2);
}
.entry-content .wp-block-table thead {
  border-bottom: 2px solid var(--ast-global-color-0);
}

/* 9. 頁首：深海藍底、白字站名與選單（桌機與手機都適用） */
#masthead .ast-primary-header-bar,
#masthead .main-header-bar,
#masthead .ast-mobile-header-wrap .ast-primary-header-bar {
  background-color: var(--ast-global-color-1);
  border-bottom: 3px solid var(--ast-global-color-0);
}
#masthead .site-title,
#masthead .site-title a {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  text-decoration: none;
}
#masthead .site-description { color: var(--ast-global-color-7); font-size: 0.9rem; }

/* 桌機第一層選單：白字，滑過或目前頁面出現淺藍底線 */
.ast-desktop #masthead .main-header-menu > .menu-item > .menu-link {
  font-weight: 600;
  color: #FFFFFF;
  border-bottom: 2px solid transparent;
}
.ast-desktop #masthead .main-header-menu > .menu-item:hover > .menu-link,
.ast-desktop #masthead .main-header-menu > .current-menu-item > .menu-link {
  color: #FFFFFF;
  border-bottom-color: var(--ast-global-color-7);
}

/* 搜尋圖示、手機漢堡選單按鈕：白色 */
#masthead .ast-header-search .astra-search-icon,
#masthead .ast-header-search .ast-icon svg,
#masthead .ast-mobile-menu-trigger-minimal,
#masthead .menu-toggle,
#masthead .menu-toggle .ast-icon svg {
  color: #FFFFFF;
  fill: #FFFFFF;
}
.ast-button, .button, button,
input[type="submit"], input[type="button"],
.wp-block-button__link, .wp-element-button { border-radius: 6px; }

/* 10. 頁尾：深海藍底、白字（底部列，也就是版權那一列） */
.site-footer .site-below-footer-wrap,
.site-footer .site-primary-footer-wrap {
  background-color: var(--ast-global-color-1);
}
.site-footer .site-below-footer-wrap,
.site-footer .site-below-footer-wrap a,
.site-footer .site-primary-footer-wrap,
.site-footer .site-primary-footer-wrap a,
.site-footer .ast-footer-copyright,
.site-footer .ast-footer-copyright p,
.site-footer .ast-footer-copyright a {
  color: #FFFFFF;
}

/* 11. 鍵盤操作焦點 */
:focus-visible { outline: 2px solid var(--mk-bright); outline-offset: 2px; }