/* ==========================================================================
   CHANGELOG STYLES
   Extends css/style.css. `.changelog-entry` is one repeatable post inside
   a `.changelog-category` — meant to become a PHP loop over a
   changelog_posts table (category, author, date, tagged line items) later.
   ========================================================================== */

.changelog-tabs{
  max-width:900px; margin:0 auto; padding:0 5%;
  display:flex; justify-content:center; gap:6px; border-bottom:1px solid var(--border); flex-wrap:wrap;
}
.changelog-tabs button{
  padding:14px 20px; font-size:0.8rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--text-dim); border:none; border-bottom:2px solid transparent;
  background:none; font-family:var(--font-body); cursor:pointer; transition:all .2s;
}
.changelog-tabs button:hover{color:var(--text);}
.changelog-tabs button.active{color:var(--frost-glow); border-color:var(--frost);}

.changelog-category-hidden{display:none;}

.changelog-intro{max-width:700px; margin:0 auto; padding:60px 5% 0; text-align:center;}
.changelog-intro h2{font-family:var(--font-display); font-size:1.5rem; letter-spacing:0.3px;}
.changelog-intro p{color:var(--text-dim); margin-top:14px; line-height:1.8;}
.changelog-intro.changelog-intro-hidden{display:none;}

.changelog-groups{max-width:900px; margin:0 auto; padding:60px 5% 150px;}

.changelog-category{margin-bottom:70px;}
.changelog-category:last-child{margin-bottom:0;}
.changelog-category-head{
  display:flex; align-items:center; gap:14px;
  margin-bottom:30px; padding-bottom:16px; border-bottom:1px solid var(--border);
}
.changelog-category-icon{
  width:42px; height:42px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.changelog-category-icon img{width:38px; height:auto; filter:drop-shadow(0 0 10px rgba(111,216,255,0.35));}
.changelog-category-head h2{font-family:var(--font-display); font-size:1.3rem; letter-spacing:0.3px;}
.changelog-category-head p{color:var(--text-dim); font-size:0.82rem; margin-top:3px;}

.changelog-entry{
  border:1px solid var(--border); border-radius:12px; padding:24px 26px;
  background:linear-gradient(160deg, var(--panel), var(--bg-alt));
  margin-bottom:18px;
  transition:border-color .25s ease;
}
.changelog-entry:hover{border-color:var(--frost-dim);}
.changelog-entry:last-child{margin-bottom:0;}
.changelog-entry-head{
  display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:10px;
  margin-bottom:16px;
}
.changelog-entry h3{font-family:var(--font-display); font-size:1.02rem; letter-spacing:0.3px;}
.changelog-meta{text-align:right;}
.changelog-date{color:var(--text-dim); font-size:0.78rem;}
.changelog-author{color:var(--frost-glow); font-size:0.75rem; margin-top:3px;}

.changelog-list{display:flex; flex-direction:column; gap:10px;}
.changelog-item{display:flex; gap:12px; align-items:flex-start; font-size:0.87rem; color:var(--text-dim); line-height:1.6;}

.changelog-tag{
  flex-shrink:0; margin-top:1px; font-size:0.6rem; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  padding:3px 10px; border-radius:20px; border:1px solid; white-space:nowrap;
}
.changelog-tag.added{color:#8fe0a8; border-color:rgba(143,224,168,0.4); background:rgba(143,224,168,0.08);}
.changelog-tag.fixed{color:var(--frost-glow); border-color:var(--frost-dim); background:rgba(111,216,255,0.08);}
.changelog-tag.changed{color:#ffd98f; border-color:rgba(255,217,143,0.4); background:rgba(255,217,143,0.08);}
.changelog-tag.removed{color:#ff8a8a; border-color:rgba(255,110,110,0.4); background:rgba(255,110,110,0.08);}

@media(max-width:560px){
  .changelog-entry-head{flex-direction:column;}
  .changelog-meta{text-align:left;}
}