/* main.css */

/* 全局樣式 */
/* 引入其他 CSS 文件 */
@import url('style.css');
@import url('style_archives_tagCatego.css');
@import url('style_header.css');
@import url('style_index_post.css');
@import url('style_post.css');
@import url('style_popup_tag.css');
@import url('style_search.css');
@import url('style_post_tags_categories.css');
@import url('style_sidebar.css');
@import url('style_toc.css');
@import url('style_post_comments.css');
@import url('style_footer.css');
@import url('weimeng_indexPost.css');


/* 響應式設計 */
@media (max-width: 821px) {
    .post {
      max-width: 100%; 
      width: 100%; /* 手機模式目錄不會直接跳出 因此可以直接滿版 */
    }

    .header-content {
      display: flex;
      align-items: center;
      justify-content: flex-start; /* 正確的寫法 */
      gap: 0.0em; /* 可選：讓圖與標題靠近一點 */
    }

    .header-content img {
      order: 1; /* 確保圖片顯示在標題左邊 */
    }

    .header-content h1 {
      order: 2; /* 確保標題顯示在圖片右邊 */
    }

    .home-intro h2 {
      font-size: 1em; /* 平板或小屏幕的字體大小 */
    }

    header h1 {
      font-size: 1.1em; /* 根據需要調整 */
    }

    header .logo {
      width: 25%;
    }

    header .logo2 {
      display: none; /* 隱藏 logo2 */
    }
  
    header {
      flex-direction: column;
    }
  
    nav {
      flex-direction: column;
      align-items: flex-start;
    }
  
    nav a {
      margin-bottom: 10px;
    }
  
    /* Archives 主內容 */
    main {
      padding: 5px;
      max-width: 98%; /* 使主內容區域的最大寬度為100% */
    }

    

    /* 移動版選單的顯示 */
    .popup-menu.nav-menu {
      left: 0 !important;
      right: 0 !important;
      width: 100vw !important;
      max-width: 100vw !important;
      border-radius: 0 !important;
      height: 45vh !important; /* ⭐ 高度為螢幕一半 */
      overflow-y: auto; /* ⭐ 可以滾動 */
      padding: 16px 20px;
      box-sizing: border-box;
    }

    .popup-menu.nav-menu a {
      display: block;
      width: 100%;
      text-align: center;
    }

    .nav-top {
      position: relative; /* 固定在頁面上 */
      background-color: rgba(255, 139, 197, 0.89); /* 滾動條滑塊顏色 */
      display: flex; /* 使用彈性布局 */
      flex-wrap: wrap; /* 讓項目換行 */
      justify-content: space-between; /* ✅ 調整為平均分布 */
      max-height: 200px; /* 限制高度，避免太長 */
      overflow: visible;       /* ✅ 允許 dropdown 超出父層顯示 */
      overflow-x: hidden;
      padding: 5px;
      gap: 5px;
      width: 100%;
    }

    .nav-top li {
      flex: 0 0 calc(33.33% - 7px); /* 考慮 gap 空間 */
      box-sizing: border-box;
    }

    .nav-top li a {
      display: block;
      padding: 0px 22px; /* ✅ 按鈕內部更大 */
      font-size: 1.1em;
      font-weight: bold;
      text-align: center;
      border: 3px dashed rgba(255, 255, 255, 0.4);
      border-radius: 10px;
      background-color: rgb(168, 31, 68);
      color: #ffffff;
    }
    
    .nav-top li a:hover {
      background-color: rgb(200, 50, 90); /* 背景色變亮一點 */
      color: #fff;
      border-color: rgba(255, 255, 255, 0.6); /* 邊框變更明亮 */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 加入陰影 */
      transform: translateY(-2px); /* 輕微上移，像浮起來 */
      transition: all 0.2s ease; /* 平滑過渡效果 */
    }
    
    .mobile-nav.active {
        display: block; /* 顯示菜單 */
    }

    .menu-toggle {
      display: block;
      height: 100px;
      width: 50px; /* 手機常見漢堡選單寬度 */
      top: 10px;
      right: 0px;
    }

    /* 透明灰背景效果 */
    .overlay-background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.5); /* 半透明灰色 */
      z-index: 999; /* 比 mobile-nav 還低或一樣 */
    }

  
    
    .mobile-nav {
      display: none; /* 初始隱藏 */
      position: fixed; /* 使用固定定位 */
      top: 150px; /* 調整為適合的距離 */
      right: 10px; /* 調整為適合的距離 */
      width: 95%; /* 設置為螢幕的 90% 寬度 */
      /* max-width: 300px; 最大寬度限制 */
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      z-index: 1000;
    }

    header .close-button {
      display: block;
      background-color: rgba(255, 222, 222, 0.6);
      border: none;
      font-size: 24px;
      cursor: pointer;
      position: absolute;
      top: -50px;
      right: 0px;
    }

    .nav-menu {
      position: fixed; /* 固定定位 */
      top: 250px; /* 調整下拉選單距離頂部的位置 */
      right: 0;
      left: 0;
      overflow-y: auto !important; /* ⭐ 可以滾動 */
      padding: 16px 20px;
      -webkit-overflow-scrolling: touch; /* ✅ 對 iOS Safari 很重要 */
    }



    #open-btn {
      width: 60px; /* 在小屏幕上設置較小的寬度 */
      height: 60px; /* 在小屏幕上設置較小的高度 */
      font-size: 30px; /* 減少字體大小 */
    }

    


    .toc {
      display: none; /* 隱藏目錄 */
    }
    
    .toc.show {
      display: block; /* 顯示目錄 */
    }

    .toc-toggle-btn {
      bottom: 65px;
      padding: 5px 8px; /* 上下 10px，左右 15px */
      background-color: rgba(0, 0, 0, 0.02); /* 恢復原本的背景色 */
      display: none;
    }

    .toc-toggle-btn:hover {
      background-color: rgba(0, 0, 0, 0.04); /* 恢復原本的背景色 */
    }

    .scroll-to-top-btn {
      padding: 10px 13px;
    }

    .scroll-to-top-btn:hover {
      background-color: rgba(0, 0, 0, 0.2);
    }

    /* 背景設定 */
    .posts-container{
      background-size: 0%; /* 設置背景圖片的大小0 */
    }

    .post_bg, .archive_bg {
      background-position: center top; /* 置中對齊 */
    }

    .footer-logo {
      display: none; /* 隱藏一般 logo */
    }
    
    .footer-rwd-logo {
      display: block; /* 顯示 RWD logo */
    }



    
    .option {
      width: 100%; /* 小型螢幕時每個選項佔 100% 寬度 */
      margin-bottom: 20px; /* 選項間距 */
    }

    /* 💗 愛心動畫靠近標題 */
    .floating-heart {
      top: 65px; /* 根據你標題位置微調 */
      left: 75%; /* 可依標題長度微調位置 */
    }



  }
  
  @media (max-width: 480px) {
    /* 標題樣式 */
    .post h1 {
      font-size: 2em;
      margin-top: 0em; /* 調整標題與上方內容的距離 */
      margin-bottom: 0.1em; /* 調整標題與下方內容的距離 */
      padding: 0px;
    }

    .post h2 {
      font-size: 1.8em;
    }

    .home-intro h2 {
      font-size: 1.2em; /* 手機屏幕的字體大小 */
    }
  
    header h1 {
      font-size: 1.2em; /* 根據需要調整 */
    }

    header .logo2 {
      display: none; /* 隱藏 logo2 */
    }

    header .logo3_2{
      left: 50%;
      opacity: 0;
    }

    header .logo3{
      opacity: 0;
    }
    
    header img {
      max-width: 100px;
      height: auto;
      border-radius: 100%;
      /* position: fixed;
      left: 50%;
      transform: translateX(-50%);
      z-index: -1; */
    }
  
    header {
      padding: 15px;
    }

  
    nav {
      align-items: center;
    }
  
    button {
      padding: 8px 16px;
      font-size: 0.9em;
    }
  
    /* Archives 主內容 */
    main {
      padding: 5px;
    }



    .toc {
      position: fixed;
      right: 0;
      top: 90px;
      width: 100%;
      max-height: 150px; /* 限制最大高度 */
      height: auto; /* 高度自動調整 */
      box-shadow: none; /* 移除陰影 */
      border-left: none; /* 移除邊框 */
      border-top: 1px solid #ddd; /* 增加上邊框 */
      background: #f9f9f9;
    }
  
    .toc ul {
      padding: 10px; /* 增加內邊距 */
    }
  
    .toc ul li a {
      font-size: 0.9em; /* 調整字體大小 */
      padding: 12px; /* 增加內邊距 */
    }

    .welcome-desktop {
      display: none; /* 隱藏桌面版本 */
    }
  
    .welcome-mobile {
      display: block; /* 顯示手機版本 */
    }



    #open-btn {
      width: 50px; /* 在非常小的屏幕上設置最小的寬度 */
      height: 55px; /* 在非常小的屏幕上設置最小的高度 */
      left: 2px;
      font-size: 30px; /* 進一步減少字體大小 */
      padding: 0px; /* 內邊距 */
      box-shadow: none;
    }

    #sidebar {
      width: 230px; /* 在更小屏幕上進一步縮小側邊欄的寬度 */
    }

    #sidebar #close-btn {
      font-size: 24px;
      padding: 9px;
      cursor: pointer;
      top: 0px; /* 距離頂部20px */
      right: 0px; /* 距離右邊20px */
    }
    
    .info-wrapper {
      flex-direction: column; /* 在手機模式下改為垂直排列 */
      align-items: center; /* 水平居中 */
    }
  
    .social-icons {
      flex-direction: row; /* 改為橫向排列 */
      margin-bottom: 10px; /* 上方間距 */
      justify-content: center; /* 水平居中 */
    }

    .social-icon {
      margin: 0 5px; /* 左右間距 */
      width: 30px; /* 圖標寬度 */
      height: 30px; /* 圖標高度 */
      padding: 0%;
    }

    .hover-icon {
      left: 66%; /* 讓圖片在標題右側顯示 */
      top: 30%; /* 垂直居中 */
    }
    

    /* 使用 > 符號來創建引用框 */
    .custom-quote img {
      max-width: 100%; /* 最大寬度為父元素的 80% */
      height: auto; /* 自動調整高度 */
      margin: 0 auto; /* 置中顯示 */
      display: block; /* 使圖片成為塊級元素以便於置中 */
      border-radius: 0%; /* 圓角 */
    }

    .large-hover-image{
      position: fixed;
      top: 10%;
    }


      /* 整體文章區域 */
      .posts-container {
        gap: 10px; /* 文章之间的间距 */
      }
  
      /* 每篇文章的樣式 */
      .index_post {
        padding: 15px; /* 減少內邊距以適應小螢幕 */
      }
  
      /* 標題樣式 */
      .index_post h2 {
        font-size: 1.4em; /* 減小字體大小 */
      }
  
      /* 文章信息區 */
      .index_post p {
        text-align: center; /* 左對齊 */
        margin: 0px 0; /* 減小外邊距 */
      }
  
      /* 摘要區 */
      .index_post .excerpt {
        line-height: 1.5; /* 調整行高 */
        text-align: left;
      }
  
      /* 讀更多連結 */
      .index_post .read-more {
        display: none;
      }
  
      /* 標籤和類別樣式 */
      .post-tags,
      .post-categories {
        margin: 3px 0; /* 減少外邊距 */
      }
  }


  .dropdown_section a {
    display: block;
    padding: 8px 12px;
    margin: 4px 0;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s ease;
  }
  
  .dropdown_section a:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }
  
 @media (max-width: 391px) {
    header h1 {
      font-size: 1.1em; /* 根據需要調整 */
    }
 }