/* ============================================================
   栏目导航（子页面共用）
   为什么单独一个文件：识字写字、诗词百首、数学思维、阅读页都是自带
   <style> 的独立页面，各写一份导航一定会走偏（改一处漏三处）。
   这里只定义「深绿操作条里那排栏目链接」，颜色跟着 .bar 走，
   首页与列表页用的是 .site-header 那套，不受影响。
   ============================================================ */

.bar .cols {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.bar .cols::-webkit-scrollbar { display: none; }

.bar .cols a {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  color: #F2EDE2;
  font-size: 13px;
  line-height: 1.5;
  text-decoration: none;
  opacity: .72;
  white-space: nowrap;
}
.bar .cols a:hover { opacity: 1; background: rgba(255, 255, 255, .10); }

/* 当前所在栏目：实心底，一眼知道自己在哪 */
.bar .cols a[aria-current="page"] {
  opacity: 1;
  font-weight: 600;
  background: rgba(255, 255, 255, .16);
}

.bar .home {
  flex: 0 0 auto;
  color: #F2EDE2;
  font-size: 14px;
  text-decoration: none;
  opacity: .9;
}
.bar .home:hover { opacity: 1; }

@media (max-width: 560px) {
  .bar .cols a { font-size: 12.5px; padding: 4px 7px; }
  .bar .home { font-size: 13px; }
}