/* app/static/css/components/sidebar.css */
/* Sidebar Component using base CSS variables */

.sidebar {
  width: 100%;
  font-family: var(--font-family-base); /* Set base font for sidebar */
  font-size: var(--font-size-md); /* Set base size */
}

.sidebar__section {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: var(--border-width-default) solid var(--color-border);
}

.sidebar__section:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0; /* No bottom margin on last section */
}

.sidebar__title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-sm);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading); /* Use heading font */
  color: var(--color-text-primary);
}

.sidebar__content {
  font-size: inherit; /* Inherit base size from .sidebar */
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
  font-family: inherit; /* Inherit base font from .sidebar */
}

.sidebar__list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
}

.sidebar__list-item {
  padding: var(--spacing-xs) 0;
  border-bottom: var(--border-width-default) solid var(--color-border);
}

.sidebar__list-item:last-child {
  border-bottom: none;
  padding-bottom: 0; /* No padding below last item */
}

.sidebar__link {
  color: var(--color-text-primary);
  text-decoration: none;
  display: block; /* Make link take full width */
  transition: color var(--transition-duration-default) ease;
  font-size: var(--font-size-sm); /* Slightly smaller for list links */
}

.sidebar__link:hover {
  color: var(--color-link); /* Use link color on hover */
}

.sidebar__count {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs); /* Even smaller for counts */
  margin-left: var(--spacing-xs);
}

.sidebar__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}
/* Use generic .tag style defined in article.css or move .tag to global/base */
.sidebar__tags .tag {
  /* Inherits styles from .tag */
}

/* Add styles for weather/event components if needed */
.weather__now {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-sm);
  font-family: inherit;
}
.weather__now .temp {
  font-size: 2em; /* Keep relative size */
  font-weight: var(--font-weight-bold);
  margin-right: var(--spacing-xs);
  color: var(--color-text-primary);
}
.weather__forecast {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xs);
  text-align: center;
  font-size: var(--font-size-sm);
  font-family: inherit;
  color: var(--color-text-secondary);
}
.sidebar__event-date {
  font-weight: var(--font-weight-bold);
  display: block;
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-xs);
  color: var(--color-text-primary);
}
.events.sidebar__section .sidebar__list-item {
  font-family: inherit;
}