/* ============================================================
   sidebar.css — moribund-murdoch-blogger-theme
   Sidebar panel, archive tiles, label grid, widget icons,
   and the mobile toggle icon.
   ============================================================ */

.sidebar {
  position: sticky;
  top: 40px;
  padding: var(--padding-general);
  background: linear-gradient(135deg, var(--color-surface-0), #141414);
  border-radius: var(--radius-md);
  color: var(--color-text);
  height: fit-content;
  border: 20px solid transparent;
  border-image-source: var(--frame-border);
  border-image-slice: 40%;
  border-image-repeat: stretch;
  box-shadow: var(--glow-xs);
  transition: box-shadow var(--transition-base);
}
.sidebar:hover { box-shadow: var(--glow-md); }

.sidebar h2 {
  font-size: 1.625rem;
  font-weight: bold;
  margin: 0 0 15px;
  text-align: center;
  color: var(--color-text);
  text-shadow: var(--glow-text-xs);
  transition: font-size var(--transition-base), text-shadow var(--transition-base);
}

.sidebar a {
  font-size: 1.0625rem;
  color: var(--color-text);
  font-weight: 500;
  transition: color var(--transition-base),
              text-shadow var(--transition-base),
              font-size var(--transition-base);
}
.sidebar a:hover {
  color: var(--color-link-hover);
  text-shadow: var(--glow-text-md);
  font-size: 1.125rem;
}

.sidebar .widget { margin-bottom: 1.25rem; }

/* Archive date grid */
.sidebar ul.flat {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.sidebar ul.flat li.archivedate {
  background: linear-gradient(135deg, var(--color-surface-0), var(--color-surface-3));
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  text-align: center;
  padding: 6px 8px;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
  font-size: 0.8em;
  transition: transform var(--transition-fast), box-shadow var(--transition-base);
}
.sidebar ul.flat li.archivedate:hover {
  transform: scale(1.03);
  box-shadow: var(--glow-sm);
}
.sidebar ul.flat li.archivedate a {
  color: var(--color-text);
  font-weight: bold;
  display: block;
}

/* Category heading tweaks */
h2 > a[href="/p/categories.html"] { display: inline-block; margin-bottom: 0; }
h2:has(> a[href="/p/categories.html"]) { margin-bottom: 0; padding-bottom: 0; }
.widget-content.list-label-widget-content { margin-top: 0; padding-top: 0; }

/* Material Icon headers */
#BlogArchive1 h2::before,
#Label1 h2::before,
#Translate1 h2::before {
  font-family: 'Material Icons';
  margin-right: 8px;
  vertical-align: middle;
  color: var(--color-text);
  text-shadow: var(--glow-text-xs);
}
#BlogArchive1 h2::before { content: 'archive'; }
#Label1 h2::before       { content: 'label'; }
#Translate1 h2::before   { content: 'translate'; text-shadow: var(--glow-text-sm); }

/* Label tag grid */
.widget-content.list-label-widget-content ul {
  list-style: none;
  margin: 0;
  padding: var(--padding-general);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.widget-content.list-label-widget-content li { margin: 0; padding: 0; }
.widget-content.list-label-widget-content li a {
  display: block;
  padding: 4px 8px;
  background-color: var(--color-surface-0);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: 0.75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  text-align: center;
  box-shadow: var(--glow-xs);
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              box-shadow var(--transition-fast);
}
.widget-content.list-label-widget-content li a:hover {
  background-color: var(--color-surface-3);
  color: var(--color-link-hover);
  box-shadow: var(--glow-md), var(--glow-lg);
}
.widget-content.list-label-widget-content li span { display: none; }

/* Mobile toggle icon */
.sidebar-icon {
  display: none;
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1001;
  font-size: 1.5rem;
  color: var(--color-text);
  cursor: pointer;
  background-color: var(--color-surface-0);
  padding: 10px;
  border-radius: 50%;
  box-shadow: var(--glow-sm);
}