/* blog.css - SEO & HTML5 Optimized */

* {
    box-sizing: border-box;
}

html {
    background-color: darkgray;
    /* [SEO] 使用系統預設字體堆疊，加快載入速度並提升可讀性 */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6; /* [SEO] 增加行高，提升閱讀體驗 */
}

body {
    background-color: darkgray;
    margin: 0;
    padding: 0;
    width: auto;
    font-size: 16px; /* [SEO] 設定基礎字體大小，避免搜尋引擎警告字體過小 */
}

/* [HTML5] 通用容器設定 (移除 div 前綴) */
.outermost {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    background-color: gray;
    padding-bottom: 10px;
    padding-top: 20px;
    margin: auto;
    display: block;
}

.head {
    width: 96%;
    margin: auto;
    background-color: rgb(175, 175, 175);
    border-color: whitesmoke;
    border-style: solid;
    margin-bottom: 10px;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    display: block;
}

.blog_name {
    font-size: xx-large;
    font-weight: bold;
    color: darkgreen;
    margin: 5px;
}

.blog_comment {
    font-size: medium;
    font-weight: bold;
    color: black;
    margin: 5px;
}

.blog_name_link {
    text-decoration: none;
}

.post_content img {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    max-width: 65%;
    border-color: whitesmoke;
    border-style: solid;
    
    /* [SEO] 圖片優化：防止圖片載入時版面位移 (CLS) */
    height: auto;
    vertical-align: middle;
}

.post_content hr {
    width: 98%;
    height: 1px; /* size 屬性無效，改用 height */
    background-color: whitesmoke;
    border: none;
}

/* 側邊欄與列表區域 */
#AllPostList, 
#AllTagList, 
#AllcategoryList,
#blog_search,
#AllCommentList,
#AllDateList {
    background-color: rgb(220, 220, 220);
    border-color: whitesmoke;
    margin: auto;
    width: 90%;
    text-align: center;
    border-style: solid;
    display: block;
}

.post_outermost {
    width: 96%;
    background-color: rgb(141, 141, 141);
    margin: auto;
    border-style: solid;
    border-color: whitesmoke;
    margin-bottom: 10px;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 10px;
    display: block;
}

.post_title_outermost {
    width: 100%;
    background-color: rgb(175, 175, 175);
    margin: auto;
    display: block;
}

.post_time {
    margin: 5px;
    font-size: medium;
    display: block;
}

.post_title {
    margin: 5px;
    font-size: 1.5rem; /* 或者 24px */
    font-weight: bold;
    display: block;
    line-height: 1.3;
}


.more_div { margin: auto; text-align: center; }
.more_a { text-decoration: none; }
.more_p { color: darkred; font-size: large; font-weight: bold; }
.back_top { text-align: center; color: darkred; font-size: large; font-weight: bold; }
.top_a { text-decoration: none; }
.read_title { color: black; margin-top: 4px; margin-bottom: 4px; }
.post_list_border { border-style: solid; padding-left: 20px; }

/* [SEO] 無障礙優化：鍵盤操作時顯示框線 */
a:focus {
    outline: 2px dashed darkblue;
    outline-offset: 2px;
}

/* Loading 動畫 */
#loading { width: 25%; margin: auto; }
.loader { width: fit-content; font-weight: bold; font-family: monospace; font-size: 30px; clip-path: inset(0 3ch 0 0); animation: l4 1s steps(4) infinite; margin: auto; }
.loader:before { content: "Loading..." }
@keyframes l4 { to { clip-path: inset(0 -1ch 0 0) } }

/* 分類與標籤 */
.categorys_title, .tags_title { font-size: medium; font-weight: bold; margin: 0 0 5px 0; }
.categorys, .tags { display: flex; flex-wrap: wrap; align-items: flex-end; margin-left: 15%; }
.category_p, .tag_p { color: darkblue; margin: 0 0 5px 0; }
.tag_link, .date_link, .category_link { text-decoration: none; }
.category_item_region, .tag_item_region { margin-left: 6px; }

.tag_list_region, .date_list_region, .category_list_region { 
    display: flex; flex-wrap: wrap; align-items: flex-end; margin: auto; 
    border-style: solid; width: 98%; border-color: whitesmoke; 
}

/* 文字對齊修正 */
#AllTagList p, #AllcategoryList p, #AllDateList p, #AllCommentList p, #blog_search_google p {
    font-weight: bold; text-align: center;
}
#AllDateList { text-align: left; }

/* 日期選單與影片 */
ul, #myUL { list-style-type: none; }
#myUL { margin-left: 5px; padding: 0; width: 95%; }
.caret { cursor: pointer; user-select: none; }
.caret::before { content: "\25B6"; color: black; display: inline-block; margin-right: 6px; }
.caret-down::before { transform: rotate(90deg); }
.nested { display: none; padding-left: 30px; }
.active { display: block; padding-left: 30px; }

.youtube-video { aspect-ratio: 16 / 9; width: 60%; max-width: 100%; }
.youtube-vide-portrait { aspect-ratio: 16 / 9; width: 99%; max-width: 100%; }