/* 🌟 Enhanced Forum Styling - Glass Morphism Edition
   A polished, modern design for forum listings with glass effects
*/

/* =====================
   🎯 FORUM CATEGORY HEADERS & CARDS
   ===================== */

/* Main forum card styling with glassmorphism */
.categories li.card {
  background: var(--glass-bg)  ;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border)  ;
  box-shadow: var(--glass-shadow)  ;
  border-radius: 1rem  ;
  overflow: hidden  ;
  transition: all 0.3s ease  ;
}

.categories li.card:hover {
  transform: translateY(-3px)  ;
  box-shadow: var(--glass-shadow-elevated)  ;
  border-color: var(--glass-border-bright)  ;
}

/* Card title styling */
.card-title {
  position: relative  ;
  padding: 1rem 1.5rem  ;
  background: rgba(var(--bg-card), 0.4)  ;
  backdrop-filter: blur(calc(var(--glass-blur) + 5px))  ;
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 5px)) ;
  border-bottom: 1px solid var(--glass-border)  ;
  box-shadow: inset 0 1px 0 var(--glass-highlight)  ;
  display: flex  ;
  align-items: center  ;
  justify-content: space-between  ;
}

/* Forum category headers */
.card-title h2 {
  font-size: 1.25rem  ;
  font-weight: 700  ;
  letter-spacing: 0.025em  ;
  color: rgb(var(--primary))  ;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2)  ;
  margin: 0  ;
  padding: 0  ;
  position: relative  ;
  display: flex  ;
  align-items: center  ;
}

.card-title h2 a {
  color: rgb(var(--primary))  ;
  text-decoration: none  ;
  transition: color 0.2s ease  ;
  position: relative  ;
}

.card-title h2 a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background: linear-gradient(90deg, rgb(var(--primary)), rgb(var(--accent)));
  transition: width 0.3s ease;
  opacity: 0;
}

.card-title h2 a:hover::after {
  width: 100%;
  opacity: 1;
}

/* =====================
   💎 FORUM ROW STYLING
   ===================== */

/* Forum rows with subtle dividers */
.topiclist.forums > li {
  padding: 1rem 1.5rem  ;
  position: relative  ;
  transition: all 0.2s ease  ;
  border-bottom: 1px solid rgba(var(--text-primary), 0.05)  ;
}

.topiclist.forums > li:last-child {
  border-bottom: none  ;
}

.topiclist.forums > li:hover {
  background: rgba(var(--primary), 0.03)  ;
}

/* Individual forum title styling */
h3.forum-title {
  font-size: 1.1rem  ;
  font-weight: 600  ;
  margin-bottom: 0.25rem  ;
  line-height: 1.4  ;
}

h3.forum-title a {
  color: rgb(var(--text-primary))  ;
  text-decoration: none  ;
  transition: color 0.2s ease  ;
  position: relative  ;
}

h3.forum-title a:hover {
  color: rgb(var(--primary))  ;
}

/* Forum description styling */
p.forum-desc {
  font-size: 0.9rem  ;
  line-height: 1.5  ;
  color: rgb(var(--text-secondary))  ;
  margin-top: 0.25rem  ;
  max-width: 90%  ;
}

/* Topic & post counts */
.topics, .posts {
  font-size: 0.95rem  ;
  color: rgb(var(--text-primary))  ;
  font-weight: 500  ;
  display: flex  ;
  flex-direction: column  ;
  align-items: center  ;
  padding: 0.5rem  ;
  background: rgba(var(--bg-input), 0.2)  ;
  border-radius: 0.5rem  ;
  min-width: 5rem  ;
  text-align: center  ;
}

.topics div, .posts div {
  font-size: 0.8rem  ;
  color: rgb(var(--text-secondary))  ;
  margin-top: 0.25rem  ;
}

/* Last post styling */
.lastpost {
  padding: 0.5rem 1rem  ;
  background: rgba(var(--bg-input), 0.1)  ;
  border-radius: 0.5rem  ;
  font-size: 0.9rem  ;
}

.lastpost a.lastsubject {
  font-weight: 500  ;
  color: rgb(var(--primary))  ;
  text-decoration: none  ;
  display: block  ;
  margin-bottom: 0.25rem  ;
  overflow: hidden  ;
  text-overflow: ellipsis  ;
  white-space: nowrap  ;
}

/* Subforum lists */
.subforums-title {
  color: rgb(var(--accent-secondary))  ;
  font-weight: 600  ;
  margin-top: 0.75rem  ;
  font-size: 0.85rem  ;
}

.subforums ul {
  padding: 0.5rem 0  ;
  display: flex  ;
  flex-wrap: wrap  ;
  gap: 0.75rem  ;
}

.subforums ul li a {
  display: inline-flex  ;
  align-items: center  ;
  padding: 0.25rem 0.75rem  ;
  border-radius: 1rem  ;
  background: rgba(var(--primary), 0.1)  ;
  color: rgb(var(--primary))  ;
  font-size: 0.8rem  ;
  transition: all 0.2s ease  ;
}

.subforums ul li a:hover {
  background: rgba(var(--primary), 0.2)  ;
  transform: translateY(-2px)  ;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .card-title h2 {
    font-size: 1.1rem  ;
  }
  
  h3.forum-title {
    font-size: 1rem  ;
  }
  
  .topiclist.forums > li {
    padding: 1rem  ;
  }
  
  .topics, .posts {
    min-width: auto  ;
    padding: 0.35rem  ;
  }
}