:root {
  --background: 214 24% 94%;
  --foreground: 224 71% 4%;
  --card: 0 0% 100%;
  --card-foreground: 224 71% 4%;
  --popover: 0 0% 100%;
  --popover-foreground: 224 71% 4%;
  --primary: 217 91% 55%;
  --primary-foreground: 210 40% 98%;
  --secondary: 220 14% 90%;
  --secondary-foreground: 224 71% 4%;
  --muted: 220 14% 90%;
  --muted-foreground: 220 8% 50%;
  --accent: 217 91% 95%;
  --accent-foreground: 224 71% 4%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;
  --border: 220 13% 88%;
  --input: 220 13% 88%;
  --ring: 217 91% 55%;
  --radius: 0.75rem;
  --sidebar-background: 0 0% 100%;
  --sidebar-foreground: 224 71% 4%;
  --sidebar-primary: 217 91% 55%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 217 91% 95%;
  --sidebar-accent-foreground: 224 71% 4%;
  --sidebar-border: 220 13% 88%;
  --sidebar-ring: 217 91% 55%;
}

/* Voting icons styling for all states */
.upvote [data-lucide="flame"],
.downvote [data-lucide="flame-kindling"] {
  fill: currentColor !important;
}

/* Active upvote state (orange-red or community color) */
[data-user-vote="up"] .upvote [data-lucide="flame"],
.upvote.text-primary [data-lucide="flame"],
.upvote .text-primary[data-lucide="flame"],
[data-lucide="flame"].filled {
  color: var(--community-color, #ff4500) !important;
}

/* Active downvote state (frosty ice-blue) */
[data-user-vote="down"] .downvote [data-lucide="flame-kindling"],
.downvote.text-destructive [data-lucide="flame-kindling"],
.downvote .text-destructive[data-lucide="flame-kindling"],
[data-lucide="flame-kindling"].filled {
  color: #0ea5e9 !important;
}

/* Notification icons active fill */
.notification-type-icon [data-lucide="flame"] {
  fill: #ff4500 !important;
  color: #ff4500 !important;
}
.notification-type-icon [data-lucide="flame-kindling"] {
  fill: #0ea5e9 !important;
  color: #0ea5e9 !important;
}

.dark {
  --background: 224 71% 4%;
  --foreground: 210 40% 98%;
  --card: 224 71% 8%;
  --card-foreground: 210 40% 98%;
  --popover: 224 71% 8%;
  --popover-foreground: 210 40% 98%;
  --primary: 217 91% 55%;
  --primary-foreground: 210 40% 98%;
  --secondary: 224 71% 12%;
  --secondary-foreground: 210 40% 98%;
  --muted: 224 71% 12%;
  --muted-foreground: 220 8% 60%;
  --accent: 217 91% 15%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62% 30%;
  --destructive-foreground: 210 40% 98%;
  --border: 224 71% 15%;
  --input: 224 71% 15%;
  --ring: 217 91% 55%;
  --sidebar-background: 224 71% 8%;
  --sidebar-foreground: 210 40% 98%;
  --sidebar-primary: 217 91% 55%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 217 91% 15%;
  --sidebar-accent-foreground: 210 40% 98%;
  --sidebar-border: 224 71% 15%;
  --sidebar-ring: 217 91% 55%;
}

/* Feed toggle – pill-shaped light switch */
.feed-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: hsl(var(--muted));
  border-radius: 9999px;
  padding: 3px;
  gap: 0;
  cursor: pointer;
}
.feed-toggle-option {
  position: relative;
  z-index: 2;
  padding: 4px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  border: none;
  background: transparent;
  color: hsl(var(--muted-foreground));
  border-radius: 9999px;
  cursor: pointer;
  transition: color 0.25s ease;
  white-space: nowrap;
  line-height: 1.4;
}
.feed-toggle-option.active {
  color: hsl(var(--primary-foreground));
}
.feed-toggle-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  height: calc(100% - 6px);
  border-radius: 9999px;
  background: hsl(var(--primary));
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  transition: transform 0.3s cubic-bezier(.4,.2,.2,1), width 0.3s cubic-bezier(.4,.2,.2,1);
  z-index: 1;
  pointer-events: none;
}
/* Dark mode adjustments */
.dark .feed-toggle {
  background: hsl(var(--muted));
}
.dark .feed-toggle-option.active {
  color: hsl(var(--primary-foreground));
}

*, *::before, *::after { border-color: hsl(var(--border)); }

html, body, * { 
  font-family: 'Fira Sans', ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; 
}

/* Ensure mobile content never touches edges */
@media (max-width: 1023px) {
  main#main-content {
    padding-left: 0.5rem;  /* 8px */
    padding-right: 0.5rem; /* 8px */
  }
  
  main#main-content > * {
    padding-left: 0;
    padding-right: 0;
  }
  
  /* If the direct child is already a container with flex gap-6 px-4 etc., keep existing padding */
  main#main-content > div.flex.gap-6 {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Ensure content boxes (rounded-xl border etc.) have proper spacing */
main#main-content .rounded-xl {
  margin-left: 0;
  margin-right: 0;
}
body { background-color: #edf0f4 !important; color: hsl(var(--foreground)); }

@keyframes accordion-down {
  from { height: 0; }
  to { height: var(--radix-accordion-content-height); }
}
@keyframes accordion-up {
  from { height: var(--radix-accordion-content-height); }
  to { height: 0; }
}

.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  background-color: rgba(0,0,0,0.5);
  display: none; align-items: center; justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal-content {
  background-color: hsl(var(--card)); color: hsl(var(--card-foreground));
  border-radius: var(--radius); width: 90%; max-width: 560px; max-height: 85vh;
  overflow-y: auto; padding: 1.5rem;
}

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

.notification-badge {
  position: absolute; top: -2px; right: -2px;
  width: 18px; height: 18px; border-radius: 50%;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 10px; display: flex; align-items: center; justify-content: center;
}


#lightbox-thumbnails { scrollbar-width: thin; }
#lightbox-thumbnails .thumb-active { outline: 2px solid white; outline-offset: -2px; }
#lightbox-thumbnails img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; cursor: pointer; flex-shrink: 0; }
@media (min-width: 768px) {
  #lightbox-img { max-height: 85vh !important; max-width: 90vw !important; }
  #lightbox-thumbnails { display: flex !important; }
}
@media (min-width: 768px) {
  #lightbox-img { max-height: 85vh !important; max-width: 90vw !important; }
  #lightbox-thumbnails { display: flex !important; }
}

.scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }
.gallery-arrow {
  -webkit-tap-highlight-color: transparent;
}


/* Toast Notifications */
.toast-container {
  position: fixed;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.toast-container.top-right {
  top: 64px; /* Below header (header is ~56px) */
  right: 1rem;
}
.toast-container.bottom-center {
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}
.toast {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: slideIn 0.3s ease-out;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
}
.toast.toast-success {
  border-left: 3px solid hsl(var(--primary));
}
.toast {
  overflow: hidden;
}
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: hsl(var(--primary) / 0.3);
  animation: toastProgress 3s linear forwards;
}
@keyframes toastProgress {
  from { width: 100%; }
  to { width: 0%; }
}
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}
.toast.removing {
  animation: slideOut 0.3s ease-out forwards;
}

/* Card style variations */
.post-list-container > .post-card:first-of-type {
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.post-list-container > .post-card:first-of-type .flex-1.p-4 {
  padding: 1.25rem;
}
.post-list-container > .post-card h2 {
  font-size: 1.0625rem; /* 17px */
}
@media (max-width: 640px) {
  .post-list-container > .post-card h2 {
    font-size: 1rem; /* 16px on mobile */
  }
}
/* Article card title */
.article-card h2 {
  font-size: 1.125rem; /* 18px */
}
@media (max-width: 640px) {
  .article-card h2 {
    font-size: 1rem; /* 16px on mobile */
  }
}
.post-list-container > .post-card:nth-of-type(3n) {
  background-color: hsl(var(--muted) / 0.5);
}
.post-list-container > .post-card:nth-of-type(even):not(:first-of-type) {
  border-radius: 0.5rem;
}
.post-list-container > .post-card:nth-of-type(odd):not(:first-of-type):not(:nth-of-type(3n)) {
  border-radius: 0.75rem;
}
/* Alternating background stripe after every 3rd card */
.post-list-container > .post-card:nth-of-type(3n)::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(to right, transparent, hsl(var(--primary) / 0.2), transparent);
  margin: 0;
}
.post-list-container > .post-card:nth-of-type(3n) {
  border-top: none;
}
/* Fixed: use border instead */
.post-list-container > .post-card:nth-of-type(3n) {
  border: 1px solid hsl(var(--border));
}

/* Card lift on hover */
.post-list-container > .post-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.post-list-container > .post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px -2px rgb(0 0 0 / 0.08);
}
.post-list-container > .post-card:first-of-type:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -2px rgb(0 0 0 / 0.12);
}

/* Carousel scroll arrows */
.carousel-wrapper {
  position: relative;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s, box-shadow 0.2s;
  color: hsl(var(--foreground));
  padding: 0;
  line-height: 1;
}
.carousel-arrow:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  animation: none;
}
.carousel-arrow-left {
  left: 4px;
  animation: carouselPeekPullLeft 4s ease-in-out infinite;
}
.carousel-arrow-right {
  right: 4px;
  animation: carouselPeekPullRight 4s ease-in-out infinite;
}
@keyframes carouselPeekPullLeft {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  40% { transform: translateY(-50%) translateX(10px); box-shadow: 0 4px 12px rgba(0,0,0,0.18); }
  46% { transform: translateY(-50%) translateX(-3px); box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
  52% { transform: translateY(-50%) translateX(0); }
}
@keyframes carouselPeekPullRight {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  40% { transform: translateY(-50%) translateX(-10px); box-shadow: 0 4px 12px rgba(0,0,0,0.18); }
  46% { transform: translateY(-50%) translateX(3px); box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
  52% { transform: translateY(-50%) translateX(0); }
}

/* Suggested Communities grid */
/* Suggested Communities carousel */
.suggested-grid-wrapper {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  max-width: 100%;
}
.suggested-grid-wrapper::-webkit-scrollbar {
  height: 4px;
}
.suggested-grid-wrapper::-webkit-scrollbar-thumb {
  background-color: hsl(var(--muted-foreground) / 0.3);
  border-radius: 4px;
}
.suggested-grid-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.suggested-grid {
  display: flex;
  gap: 0.75rem;
}
.suggested-grid > .suggested-card {
  scroll-snap-align: start;
  flex: 0 0 calc(33.333% - 0.5rem);
  min-width: 200px;
}
@media (max-width: 639px) {
  .suggested-grid > .suggested-card {
    flex: 0 0 calc(50% - 0.375rem);
    min-width: 140px;
  }
}
.suggested-card {
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  background-color: hsl(var(--card));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.suggested-card .suggested-card-desc {
  flex: 1;
  margin: 0.5rem 0.75rem;
}
.suggested-card > .join-community-btn {
  margin: 0 0.75rem 0.75rem;
  width: auto;
  align-self: stretch;
}
.suggested-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px -3px rgb(0 0 0 / 0.08);
}
.suggested-card-cover {
  height: 90px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  background-image: linear-gradient(135deg, hsl(var(--primary) / 0.3), hsl(var(--primary) / 0.1));
}
.suggested-grid > .suggested-card:nth-child(6n+1) .suggested-card-cover:not([style]),
.suggested-grid > .suggested-card:nth-child(6n+2) .suggested-card-cover:not([style]) { background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.suggested-grid > .suggested-card:nth-child(6n+3) .suggested-card-cover:not([style]),
.suggested-grid > .suggested-card:nth-child(6n+4) .suggested-card-cover:not([style]) { background-image: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.suggested-grid > .suggested-card:nth-child(6n+5) .suggested-card-cover:not([style]),
.suggested-grid > .suggested-card:nth-child(6n+6) .suggested-card-cover:not([style]) { background-image: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.suggested-card-icon-wrap {
  display: flex;
  justify-content: center;
  margin-top: -18px;
}
.suggested-card-icon-wrap img,
.suggested-card-icon-wrap span {
  border: 3px solid hsl(var(--background));
  border-radius: 9999px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
}
.suggested-card-info {
  padding: 0.5rem 0.75rem 0.75rem;
  text-align: center;
  flex: 1;
}

/* Single article content */
.single-article-content p {
  font-size: 15px;
}
.dark .single-article-content {
  color: hsl(var(--foreground));
}
.dark .single-article-content,
.dark .single-article-content p,
.dark .single-article-content li,
.dark .single-article-content blockquote,
.dark .single-article-content h1,
.dark .single-article-content h2,
.dark .single-article-content h3,
.dark .single-article-content h4,
.dark .single-article-content h5,
.dark .single-article-content h6,
.dark .single-article-content span,
.dark .single-article-content strong,
.dark .single-article-content em {
  color: hsl(var(--foreground));
}

/* Mention links: no underline, font-weight 500 */
.mention-link {
  text-decoration: none !important;
  font-weight: 500;
}
.mention-link:hover {
  text-decoration: none !important;
}

/* Right sidebar widget */
.right-sidebar-widget h3 {
  font-size: 15px;
}
.right-sidebar-widget .text-sm {
  font-size: 15px;
}

/* Suggested People carousel */
.suggested-people-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  width: 100%;
}
.suggested-people-scroll::-webkit-scrollbar {
  height: 4px;
}
.suggested-people-scroll::-webkit-scrollbar-thumb {
  background-color: hsl(var(--muted-foreground) / 0.3);
  border-radius: 4px;
}
.suggested-people-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.suggested-person-card {
  scroll-snap-align: start;
  flex: 0 0 calc(33.333% - 0.5rem);
  min-width: 200px;
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  background-color: hsl(var(--card));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.suggested-person-card .person-cover {
  height: 90px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.suggested-person-card .person-cover.person-gradient-1 {
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.suggested-person-card .person-cover.person-gradient-2 {
  background-image: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.suggested-person-card .person-cover.person-gradient-3 {
  background-image: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.suggested-person-card .person-avatar-wrap {
  margin-top: -28px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.suggested-person-card .person-avatar-wrap img,
.suggested-person-card .person-avatar-wrap div {
  border: 3px solid hsl(var(--card));
  border-radius: 50%;
}
.suggested-person-card .person-info {
  padding: 0.5rem 1rem 0.75rem;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.suggested-person-card .person-name {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}
.suggested-person-card .person-name a {
  color: hsl(var(--foreground));
}
.suggested-person-card .person-name a:hover {
  color: hsl(var(--primary));
}
.suggested-person-card .person-username {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}
.suggested-person-card .person-karma {
  font-size: 0.7rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.15rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.suggested-person-card .person-bio {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.35;
  margin-top: 0.35rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.suggested-person-card .follow-user-btn {
  margin: 0 0.75rem 0.75rem;
  width: auto;
  align-self: stretch;
}
.suggested-person-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px -3px rgb(0 0 0 / 0.08);
}
@media (max-width: 639px) {
  .suggested-person-card {
    flex: 0 0 calc(50% - 0.375rem);
    min-width: 140px;
  }
}

/* Sidebar widget variety */
.right-sidebar-widget:first-child {
  box-shadow: none;
}
.right-sidebar-widget:nth-child(2) {
  border-top: 3px solid hsl(var(--primary));
  border-radius: 0.5rem;
}
.right-sidebar-widget:nth-child(3) {
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.05);
}
.right-sidebar-widget:nth-child(4) {
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
}

/* Mobile nav active indicator */
.mobile-nav-link.active {
  color: hsl(var(--primary));
}

/* Section dividers with accent color */
.section-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, hsl(var(--primary) / 0.25), transparent);
  margin: 1.5rem 0;
  border: none;
}

/* Sidebar nav link enhanced hover */
.sidebar-nav-link:hover {
  background-color: hsl(var(--sidebar-accent));
}
.sidebar-nav-link:hover i,
.sidebar-nav-link:hover span:not(.truncate) {
  color: hsl(var(--sidebar-accent-foreground));
}

/* Focus ring for interactive elements */
a:focus-visible,
button:focus-visible {
  outline: none;
  ring: 2px solid hsl(var(--ring));
  ring-offset: 2px;
}

/* Footer menu links */
#site-footer nav a {
  font-weight: 500;
}

/* Social icons in footer */
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  color: hsl(var(--muted-foreground));
  background-color: hsl(var(--muted) / 0.3);
  transition: background-color 0.2s, color 0.2s;
}
.footer-social-link:hover {
  background-color: hsl(var(--primary) / 0.15);
  color: hsl(var(--primary));
}

/* Right sidebar widget headings */
.right-sidebar-widget h3 {
  font-size: 1rem; /* 16px */
}
.right-sidebar-widget {
  border-radius: 0.75rem;
}

/* Remove focus rings for staff input container */
#add_staff_container:focus,
#add_staff_container:focus-visible,
#add_staff_username:focus,
#add_staff_username:focus-visible,
#clear_selected_user:focus,
#clear_selected_user:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: hsl(var(--border)) !important;
}

/* NSFW blur container - reduce spread effect */
.nsfw-blur-container {
  /* Reduce the blur intensity slightly more at top/bottom */
  filter: blur(6px);
}

.nsfw-blur-container.nsfw-unblurred {
  filter: none;
}

/* Make the overlay slightly more opaque to compensate */
.nsfw-overlay {
  background: hsl(var(--card) / 0.85) !important;
}

/* Mention pills */
#post-mentions-container,
#edit-mentions-container {
  min-height: 0;
}
#post-mentions-container:not(.hidden),
#edit-mentions-container:not(.hidden) {
  padding: 2px 0;
}

/* Preserve line breaks in post textareas */
#post-content,
#edit-post-content {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Single post content formatting */
.single-article-content {
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.single-article-content > p:first-child {
  margin-top: 0;
}
.single-article-content > p:last-child {
  margin-bottom: 0;
}
.mention-dropdown {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
}
.mention-dropdown .mention-item:hover,
.mention-dropdown .mention-item.bg-gray-100 {
  background: hsl(var(--accent));
}