/* Mukta font for Devanagari (Nepali/Hindi) text */
@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@300;400;500;600;700;800&display=swap&subset=devanagari');

/* Override Mukta to only serve Devanagari characters */
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Mukta Light'), local('Mukta-Light'), url(https://fonts.gstatic.com/s/mukta/v12/iJWHBXzCpASFkFZvQ_I3v0a07Wl.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+200C, U+200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF, U+1CD0-1CFA, U+0950-0955, U+0958-095F, U+0960-0963, U+0964-0965, U+0970-097F;
}
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Mukta Regular'), local('Mukta-Regular'), url(https://fonts.gstatic.com/s/mukta/v12/iJWKBXzCpASFkFZvQ_I3v0a07Wl.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+200C, U+200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF, U+1CD0-1CFA, U+0950-0955, U+0958-095F, U+0960-0963, U+0964-0965, U+0970-097F;
}
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Mukta Medium'), local('Mukta-Medium'), url(https://fonts.gstatic.com/s/mukta/v12/iJWJBXzCpASFkFZvQ_I3v0a07Wl.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+200C, U+200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF, U+1CD0-1CFA, U+0950-0955, U+0958-095F, U+0960-0963, U+0964-0965, U+0970-097F;
}
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Mukta SemiBold'), local('Mukta-SemiBold'), url(https://fonts.gstatic.com/s/mukta/v12/iJWEBXzCpASFkFZvQ_I3v0a07Wl.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+200C, U+200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF, U+1CD0-1CFA, U+0950-0955, U+0958-095F, U+0960-0963, U+0964-0965, U+0970-097F;
}
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Mukta Bold'), local('Mukta-Bold'), url(https://fonts.gstatic.com/s/mukta/v12/iJWIBXzCpASFkFZvQ_I3v0a07Wl.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+200C, U+200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF, U+1CD0-1CFA, U+0950-0955, U+0958-095F, U+0960-0963, U+0964-0965, U+0970-097F;
}
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local('Mukta ExtraBold'), local('Mukta-ExtraBold'), url(https://fonts.gstatic.com/s/mukta/v12/iJWICXzCpASFkFZvQ_I3v0a07Wl.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+200C, U+200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF, U+1CD0-1CFA, U+0950-0955, U+0958-095F, U+0960-0963, U+0964-0965, U+0970-097F;
}

@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/FiraSans-Latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/FiraSans-Latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/FiraSans-Latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/FiraSans-Latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/FiraSans-Latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/FiraSans-Latin-800.woff2') format('woff2');
}

: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: 214 24% 92%;
  --secondary-foreground: 224 71% 4%;
  --muted: 214 24% 92%;
  --muted-foreground: 214 16% 52%;
  --accent: 217 91% 95%;
  --accent-foreground: 224 71% 4%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;
  --border: 214 20% 90%;
  --input: 214 20% 90%;
  --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: 214 20% 90%;
  --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% 56%;
  --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', 'Mukta', 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;
  }
}

/* Sidebar collapsed on desktop - center content, full-width section backgrounds */
@media (min-width: 1024px) {
  body.sidebar-collapsed #main-content {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 65.625rem; /* 1050px */
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  body.sidebar-collapsed #site-footer {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 65.625rem;
    width: 100%;
  }
  
  /* Full-bleed heroes: break out of the centered (sidebar-collapsed) container to full
     viewport width, then re-center the inner content at 1050px. Covers <section> and
     <div> hero patterns used across pages so the hero background is never constrained. */
  body.sidebar-collapsed #main-content > section,
  body.sidebar-collapsed #main-content > div.relative.overflow-hidden,
  body.sidebar-collapsed #main-content > div.about-full-width,
  body.sidebar-collapsed #main-content > div.blooms-hero-bg,
  body.sidebar-collapsed #main-content > section.wc-hero-section,
  body.sidebar-collapsed #main-content > section.trends-hero,
  body.sidebar-collapsed #main-content > .hero-bleed,
  body.sidebar-collapsed #main-content > div > section,
  body.sidebar-collapsed #main-content > div > div.relative.overflow-hidden,
  body.sidebar-collapsed #main-content > div > .hero-bleed,
  body.sidebar-collapsed #main-content > div > div.about-full-width,
  body.sidebar-collapsed #main-content .about-full-width,
  body.sidebar-collapsed #main-content .hero-bleed,
  body.sidebar-collapsed #main-content .blooms-hero-bg,
  body.sidebar-collapsed #main-content .wc-hero-section,
  body.sidebar-collapsed #main-content .trends-hero {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* Re-center the hero's inner content at 1050px */
  body.sidebar-collapsed #main-content > section > div,
  body.sidebar-collapsed #main-content > div.relative.overflow-hidden > div,
  body.sidebar-collapsed #main-content > div.about-full-width > div,
  body.sidebar-collapsed #main-content > section.wc-hero-section > *,
  body.sidebar-collapsed #main-content > section.trends-hero > *,
  body.sidebar-collapsed #main-content > .hero-bleed > *,
  body.sidebar-collapsed #main-content > div > section > div,
  body.sidebar-collapsed #main-content > div > div.relative.overflow-hidden > div,
  body.sidebar-collapsed #main-content > div > .hero-bleed > *,
  body.sidebar-collapsed #main-content > div > div.about-full-width > div,
  body.sidebar-collapsed #main-content .about-full-width > div,
  body.sidebar-collapsed #main-content .hero-bleed > *,
  body.sidebar-collapsed #main-content .wc-hero-section > *,
  body.sidebar-collapsed #main-content .trends-hero > * {
    max-width: 65.625rem;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
    box-sizing: border-box;
  }
}

/* Standalone full-bleed hero utility: any hero tagged with .hero-bleed breaks out to
   full viewport width (desktop) and re-centers its inner content, independent of the
   sidebar-collapsed state. Useful for pages that center content another way. */
@media (min-width: 1024px) {
  #main-content > .hero-bleed,
  #main-content > div > .hero-bleed,
  #main-content .hero-bleed {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
  #main-content > .hero-bleed > *,
  #main-content > div > .hero-bleed > *,
  #main-content .hero-bleed > * {
    max-width: 65.625rem;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
    box-sizing: border-box;
  }
}

/* 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)); }
.dark body { background-color: hsl(var(--background)) !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;
}

/* ============ Naver-Style Cards ============ */
/* Feather-light shadow cards with no border */
.post-card,
.article-card,
.suggested-person-card,
.right-sidebar-widget,
.rounded-xl.border,
#left-sidebar,
#site-header:not(.bg-transparent) {
  border: none !important;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.04), 0 1px 2px -1px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.post-card:hover,
.article-card:hover,
.suggested-card:hover,
.suggested-person-card:hover {
  box-shadow: 0 4px 8px -2px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
  transform: translateY(-1px);
}

/* Explore grid cards (wrapped in <a>) */
a:hover > .rounded-xl.border {
  box-shadow: 0 4px 8px -2px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
  transform: translateY(-1px);
}

.post-list-container > .post-card h2 {
  font-size: 1.0625rem;
}
@media (max-width: 640px) {
  .post-list-container > .post-card h2 {
    font-size: 1rem;
  }
}
/* Article card title */
.article-card h2 {
  font-size: 1.125rem;
}
@media (max-width: 640px) {
  .article-card h2 {
    font-size: 1rem;
  }
}

/* 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); }
}

/* Voting column - clean divider instead of background */
.post-card .flex > div.flex.flex-col.items-center.bg-muted {
  background: transparent !important;
  border-right: 1px solid hsl(var(--border) / 0.4);
  margin-right: 0;
  padding-right: 0.75rem;
}

/* 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-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(-1px);
  box-shadow: 0 4px 8px -2px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
}
.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;
}

/* Post title */
.post-title {
  font-size: 24px;
}
@media (min-width: 768px) {
  .post-title {
    font-size: 30px;
  }
}

/* Single article content */
.single-article-content p {
  font-size: 15.5px;
}
.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-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(-1px);
  box-shadow: 0 4px 8px -2px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
}
@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));
}
.right-sidebar-widget:nth-child(4) {
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.04), 0 1px 2px -1px rgba(0,0,0,0.06);
}

/* Sort tabs - subtle Naver-style active state */
.sort-tab.bg-primary.text-primary-foreground {
  background-color: hsl(var(--primary) / 0.1) !important;
  color: hsl(var(--primary)) !important;
  font-weight: 600;
}
.sort-tab.text-muted-foreground {
  font-weight: 500;
}

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

/* Section dividers - subtle Naver-style */
.section-divider {
  height: 1px;
  background-color: hsl(var(--border) / 0.5);
  margin: 1.25rem 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));
 }

/* Homepage hero sizing — defined here (not purged Tailwind build) so it survives rebuilds */
.home-hero-logo { height: 42px; width: auto; max-width: 100%; }
@media (min-width: 768px) {
  .home-hero-logo { height: 64px; }
}
.home-hero-wrapper { transform: translateY(-55px); }

/* Hide native browser clear (x) on search inputs — we use a custom clear button */
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
input[type="search"]::-ms-clear { display: none; }
input[type="search"] { -webkit-appearance: none; appearance: none; }

/* Fractional gap/padding/margin utilities — Tailwind v3.4.x fails to generate these via safelist/content */
.gap-0\.5 { gap: 0.125rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3\.5 { gap: 0.875rem; }
.p-1\.5 { padding: 0.375rem; }
.m-1\.5 { margin: 0.375rem; }