/* =============================================================================
   從以下 3 個源文件 <head><style> 合併（未改源文件、未參考既有獨立 CSS）：
   - index.html
   - thoughts/thoughts.html
   - python/basicmenu.html
   相同規則只留一份；不相同的全部保留並標註來源；註解全部保留。
   ============================================================================= */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* url() 相對 common.css，各頁 HTML 不論在哪一層都指向同一張圖 */
body {
  /* font-family: "Baskerville", "LiSong Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, serif; */
  /* font-family: "Baskerville", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, serif; */
  background: url('images/Feather.jpg?20250609') no-repeat center center fixed !important;
  background-size: cover !important;
  color: #333;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
}

a { font-family: inherit; text-decoration: none; color: #f67300; }
a:hover { text-decoration: none; }


.sidebar {
  width: 400px;
  background: rgba(255,255,255,0.1) !important;
  backdrop-filter: blur(6px);
  padding: 24px 0;
  border-right: 1px solid rgba(255,255,255,0.1);
  position: fixed;
  height: 100vh;
  overflow-y: auto;
  z-index: 10;
}

.logo {
  font-size: 1.6rem;
  font-weight: bold;
  padding: 0 20px 24px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.nav-link {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
  font-size: 1.3em;
  transition: all 0.2s;
}

.nav-link:hover,
.nav-link.active,
.toggle-btn:hover,
.toggle-btn.active {
  background: #9de0fa !important;
  color: white !important;
}

.sub { padding-left: 40px; font-size: 1.3em; }

/* ==================== 選單層級樣式 ==================== */
.section-title {
  display: block;
  padding: 10px 20px 6px;
  font-size: 1.3em;
  font-weight: bold;
  color: #333;
  margin-top: 8px;
}

/* --------------- 折疊選單 --------------------------------- */

.toggle-btn {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1.3em;
  font-weight: bold;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: inherit;
}

/* 第2級 */
.toggle-btn.level2 {
  padding: 9px 20px 9px 40px !important;
  font-weight: 600;
  font-size: 1.3em;
  color: #222;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 第3級 */
.level3-link {
  display: block;
  padding: 6px 20px 6px 60px !important;
  font-size: 1.3em;
  color: #444;
  font-weight: normal;
}

.level3-link:hover {
  background: #9de0fa !important;
  color: white !important;
}

.arrow {
  transition: transform 0.3s ease;
  font-size: 1.2em;
  opacity: 0.85;
  margin-left: auto;
}

.toggle-btn.active .arrow { transform: rotate(180deg); }

/* ---------- submenu ---------- */

.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  padding-left: 16px;
  margin-top: 2px;
}

.submenu.open {
  max-height: none;           /* 取消高度限制，讓它自動撐開 */
  overflow: visible;          /* 確保不會被切掉 */
  transition: max-height 0.4s ease;  /* 保留展開動畫 */
}

.nav-link.sub {
  display: block;
  padding: 6px 12px 6px 28px;
  text-decoration: none;
}

.chapter-label {
  display: block;
  font-size: 0.6em;           /* 比原本大很多，更清楚 */
  color: #f79d16;
  margin: 5px 10%;     /* 上下左右留一點空間 */
  font-weight: bold;
  opacity: 1;
}

.grok-icon {
  height: 0.9em;
  width: auto;
  vertical-align: middle;
  margin: 0 1px;
  display: inline-block;
}

/* ----------------------- 右側內容區 --------------------------- */

main {
  flex: 1;
  margin-left: 200px;
  padding: 40px;
  overflow-y: auto;
}

/* ---------- content-box：不完全相同，全部保留 ---------- */

/* index.html / thoughts/thoughts.html */
.content-box {
  max-width: 1600px;
  margin-left: 200px;
  padding: 40px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
}

/* index.html */
.content-title,
.main-font {
  font-size: 1.6em;
  font-weight: bold;
  margin-bottom: 1.5em;
  /* font-family: "Baskerville", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", serif; */
  /*
  background: rgba(255, 255, 255, 0.9);
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);  */
}

.article-list li {
  font-size: 1.2em;
  margin-bottom: 30px;
  line-height: 1.7;
  padding-left: 4px;
  display: flow-root;           /* 阻斷 margin collapse */
}

.highlight {
  color: #e74c3c;     /* 紅色 */
  font-weight: bold;  /* 可順便加粗 */
}

.mgt40 {margin-top: 40px;}
.mgb40 {margin-bottom: 40px;}
.mgt30 {margin-top: 30px;}
.mgb30 {margin-bottom: 30px;}

/* 瀏覽器預設把 pre 設成 monospace，會跟 p 看起來不一樣 */
pre {
  font-family: inherit;
  font-size: inherit;
}

.accent {
  color: #0243f7;
  font-weight: bold;
}

/* ==================== 新增：中文專用 LiSong Pro ====================
   以下註解三份略有差異，全部保留 */

/* index.html
    :lang(zh-HK), :lang(zh-TW), :lang(zh) {
      font-family: "LiSong Pro", "Baskerville", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, serif;
    }. */

/* thoughts/thoughts.html
    :lang(zh-HK), :lang(zh-TW), :lang(zh) {
      font-family: "LiSong Pro", "Baskerville", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, serif;
    } */

/* python/basicmenu.html
    :lang(zh-HK), :lang(zh-TW), :lang(zh) {
      font-family: "LiSong Pro", "Baskerville", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, serif;
    } */

/* 確保內容區強制套用 */

/* index.html
    .content-box,
    main,
    .main-font {
      font-family: "LiSong Pro", "Baskerville", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, serif;
    }. */

/* thoughts/thoughts.html
    .content-box,
    main,
    .main-font {
      font-family: "LiSong Pro", "Baskerville", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, serif;
    } */

/* python/basicmenu.html
    .content-box,
    main,
    .main-font {
      font-family: "LiSong Pro", "Baskerville", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, serif;
    }. */

/* --------------- 👆🏻右方內容區的 Text Format end --------------------- */


/* thoughts/thoughts.html */
/*  me & grok  */
.ask {
  border:dotted 3px #02c6f797;
  font-weight: bold;
  font-size: 1.2em;
  padding: 20px;
  margin: 20px 20px;
  margin-bottom: 40px;
  background: rgba(184, 239, 252, 0.4);
  line-height: 2;
}

.grok {
  font-size: 1.2em;
  padding: 20px;
  margin: 20px 20px;
  margin-bottom: 40px;
  line-height: 2;
}

.both {
  border:dotted 3px #90e7fd97;
  font-size: 1.2em;
  padding: 20px;
  margin: 20px 20px;
  margin-bottom: 40px;
  background: rgba(206, 235, 242, 0.4);
  line-height: 2;
}


/* python/basicmenu.html */
/* ===================== 右方內容局部左右並列 ======================== */
.code-explain {
  display: flex;              /* 這一行最重要！讓子元素並排 */
  align-items: center;        /* 垂直置中對齊 */
  gap: 15px;                  /* 左右間距 */
  flex-wrap: wrap;            /* 小螢幕時自動換行 */
  margin: 5px 0;           /* 上下間距 */
  padding: 4px 0;           /* 輔助用，幫助阻斷 collapse */
}

.code-left {
  font-weight: bold;
  background: rgba(255, 255, 255, 0);
  padding: 12px 20px;
  border-radius: 8px;
  flex: 0 0 auto;             /* 程式碼區不被壓縮 */
  white-space: pre-wrap;
  border: double;
  font-size: 1em;
}

.explain-right {
  background: rgba(1, 196, 255, 0.2);
  padding: 12px 20px;
  border-radius: 8px;
  flex: 1;                    /* 佔據剩餘空間 */
  min-width: 280px;
  font-size: 1em;
}

/* 如果想讓程式碼區固定寬度 */
.code-explain .code-left {
  min-width: 680px;   /* 可依你需求調整 */
}
