/* Author Oliver Shen 08/10/2025
  top banner styling
*/
.top-banner {
  display: grid;
  grid-template-columns: 1fr 3fr;
  height: 60px;
  position: sticky;   
  top: 0;
  width: 100%;
  z-index: 1000;
  min-height: 60px;
}

.tb-left {
  background: #195a65;
  display: flex;
  align-items: center;
  text-decoration: none; 
  padding: 0 16px;
  color: #fed3a8;
  font-size: 24px; 
  font-weight: bold;
  position: relative;
  cursor: pointer; 
  user-select: none;
}

.tb-toggle-overlay{
  position: absolute; inset: 0;
  cursor: pointer;
  /* 保持透明，不影响视觉 */
  background: transparent;
}

.tb-right {
  background: #9d1e31;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 0;
  padding: 0 16px;  
  list-style: none;
  position: relative;
  cursor: pointer;
  flex-wrap: wrap;
}

.tb-right a {
  color: #fed3a8;
  text-decoration: none;
  padding: 0 20px;    
}

.tb-right a:hover {
  color: #ffca39;
}

.tb-right a.active {
  color: #ffca39;
}


/* 隐藏锚点实体 */
#expand, #collapse { position:absolute; width:0; height:0; overflow:hidden; }

/* 默认（展开态）：显示“去折叠”的按钮；隐藏“去展开”的按钮；显示正常菜单 */
.tb-left--to-expand { display:none; }
.tb-right--collapsed { display:none; }

/* 折叠态（URL 有 #collapse） */
#collapse:target ~ nav.top-banner .tb-left--to-collapse { display:none; }
#collapse:target ~ nav.top-banner .tb-left--to-expand   { display:flex; }
#collapse:target ~ nav.top-banner .tb-right--expanded   { display:none; }
#collapse:target ~ nav.top-banner .tb-right--collapsed  { display:flex; }

/* 显式展开态（#expand 或无 hash） */
#expand:target ~ nav.top-banner .tb-left--to-collapse { display:flex; }
#expand:target ~ nav.top-banner .tb-left--to-expand   { display:none; }
#expand:target ~ nav.top-banner .tb-right--expanded   { display:flex; }
#expand:target ~ nav.top-banner .tb-right--collapsed  { display:none; }

/* —— 真正折叠的是左栏 —— */
#collapse:target ~ .maingrid {
  grid-template-columns: 0 minmax(0, 1fr);
}
#collapse:target ~ .maingrid .leftGrid{
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}