/* 1. Use Poppins Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

:root {
  --background-color: #ffffff;
  --foreground-color: #111111;
  --text-gray-500: #666666;
  --text-gray-600: #555555;
  --text-gray-700: #444444;
  --bg-gray-50: #f7f7f7;
  --bg-gray-100: #f0f0f0;
  --input-bg-color: #e6e6e6;
  --input-bg-color-hover: #dcdcdc;
  --dropdown-bg-color-hover: #cccccc;
  --btn--toggle-off-bg-color: #d0d0d0;
  --btn--toggle-on-bg-color: #0d77c4;
  --btn--dng-color: #dc2626;
  --btn--dng-color-hover: #b21d1d;
  --btn--prim-bg-color: #0d77c4;
  --btn--prim-bg-color-hover: #055b99;
  --selection-bg: #d0eaff;
  --selection-fg: #000000;
  --primary: #0d77c4;
  --staff-username: #7e22ce;
  --voted: #0d77c4;
  --link: #0d77c4;
  --link-hover: #055b99;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--background-color);
  color: var(--foreground-color);
}

/* Sticky Header */
#c-header {
  position: fixed;
  width: 100%;
  background-color: var(--background-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  z-index: 2;
}

/* Fix for content being hidden under header */
#p-home,
#p-show-post,
#p-my-settings {
  margin-top: 72px; /* Increased from 48px */
}

/* Vote Button Styling */
.c-vote-counter__button {
  color: var(--foreground-color);
  font-weight: 600;
  transition: all 0.2s ease-in-out;
}

.c-vote-counter__button:hover {
  color: var(--primary);
  text-shadow: 0 0 6px var(--primary);
  transform: scale(1.08);
}

.c-vote-counter__button--voted {
  color: var(--link);
}

.c-vote-counter__button--voted svg {
  color: var(--link);
  filter: drop-shadow(0 0 3px var(--link));
}

/* Colorful Category Tags */
.c-tag[data-category-name="Bug"] {
  background-color: #dc2626;
  color: #fff;
}

.c-tag[data-category-name="Feature"] {
  background-color: #0d9488;
  color: #fff;
}

.c-tag[data-category-name="Idea"] {
  background-color: #facc15;
  color: #000;
}

.c-tag[data-category-name="Improvement"] {
  background-color: #3b82f6;
  color: #fff;
}

.c-tag[data-category-name="Question"] {
  background-color: #8b5cf6;
  color: #fff;
}

/* Selection styling */
::selection {
  background-color: var(--selection-bg);
  color: var(--selection-fg);
}