/* Themed Elements Styling
 * This file provides styling for headings, flash messages, and hyperlinks to match the selected color theme
 */

/* Headings */
h1, h2, h3, h4, h5, h6,
.social1-header h2,
.card-header,
.social1-card-header {
  color: var(--text-dark);
}

/* Focus headings - like the "Trending" tab in the screenshot */
.nav-link.active,
.social1-tab.active,
.nav-tabs .nav-link.active {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.nav-tabs .nav-link.active:after,
.social1-tab.active:after {
  background-color: var(--primary-color) !important;
}

/* Hyperlinks */
a:not(.btn):not(.nav-link):not(.social1-nav-item):not(.social1-profile-section):not(.social1-post-action) {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:not(.btn):not(.nav-link):not(.social1-nav-item):not(.social1-profile-section):not(.social1-post-action):hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

/* Flash messages */
.alert-primary {
  background-color: var(--primary-light);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.alert-success {
  background-color: rgba(var(--accent-success-rgb, 46, 204, 113), 0.1);
  border-color: var(--accent-success);
  color: var(--accent-success);
}

.alert-warning {
  background-color: rgba(var(--accent-warning-rgb, 243, 156, 18), 0.1);
  border-color: var(--accent-warning);
  color: var(--accent-warning);
}

.alert-danger {
  background-color: rgba(var(--accent-danger-rgb, 231, 76, 60), 0.1);
  border-color: var(--accent-danger);
  color: var(--accent-danger);
}

.alert-info {
  background-color: rgba(var(--accent-info-rgb, 155, 89, 182), 0.1);
  border-color: var(--accent-info);
  color: var(--accent-info);
}

/* Section headings like "Popular Categories" and "Popular Users" */
.section-heading,
.popular-section h3,
.sidebar-section h3 {
  color: var(--text-dark);
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  display: inline-block;
}

/* Specific styling for the tabs in the screenshot */
.nav-tabs {
  border-bottom-color: var(--border-color);
}

.nav-tabs .nav-link {
  color: var(--text-medium);
  border: none;
  padding: 0.75rem 1rem;
  position: relative;
  transition: color 0.2s ease;
}

.nav-tabs .nav-link:hover {
  color: var(--primary-hover);
  border: none;
  background: transparent;
}

.nav-tabs .nav-link.active {
  color: var(--primary-color);
  background: transparent;
  border: none;
  font-weight: 600;
}

.nav-tabs .nav-link.active:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--primary-color);
}

/* Dark mode adjustments */
.dark-mode h1, .dark-mode h2, .dark-mode h3, 
.dark-mode h4, .dark-mode h5, .dark-mode h6,
.dark-mode .social1-header h2,
.dark-mode .card-header,
.dark-mode .social1-card-header,
.dark-mode .section-heading,
.dark-mode .popular-section h3,
.dark-mode .sidebar-section h3 {
  color: var(--dark-text-primary);
}

.dark-mode a:not(.btn):not(.nav-link):not(.social1-nav-item):not(.social1-profile-section):not(.social1-post-action) {
  color: var(--primary-color);
}

.dark-mode a:not(.btn):not(.nav-link):not(.social1-nav-item):not(.social1-profile-section):not(.social1-post-action):hover {
  color: var(--primary-hover);
}

.dark-mode .nav-tabs {
  border-bottom-color: var(--dark-border);
}

.dark-mode .nav-tabs .nav-link {
  color: var(--dark-text-secondary);
}

.dark-mode .nav-tabs .nav-link:hover {
  color: var(--primary-hover);
}

/* Theme-specific RGB values for alert backgrounds */
:root {
  --accent-success-rgb: 46, 204, 113;
  --accent-warning-rgb: 243, 156, 18;
  --accent-danger-rgb: 231, 76, 60;
  --accent-info-rgb: 155, 89, 182;
}

.theme-purple {
  --accent-success-rgb: 0, 184, 148;
  --accent-warning-rgb: 253, 203, 110;
  --accent-danger-rgb: 214, 48, 49;
  --accent-info-rgb: 9, 132, 227;
}

.theme-green {
  --accent-success-rgb: 0, 184, 148;
  --accent-warning-rgb: 243, 156, 18;
  --accent-danger-rgb: 231, 76, 60;
  --accent-info-rgb: 52, 152, 219;
}

.theme-coral {
  --accent-success-rgb: 85, 239, 196;
  --accent-warning-rgb: 255, 234, 167;
  --accent-danger-rgb: 214, 48, 49;
  --accent-info-rgb: 116, 185, 255;
}

.theme-teal {
  --accent-success-rgb: 76, 175, 80;
  --accent-warning-rgb: 255, 193, 7;
  --accent-danger-rgb: 244, 67, 54;
  --accent-info-rgb: 63, 81, 181;
}

.theme-amber {
  --accent-success-rgb: 139, 195, 74;
  --accent-warning-rgb: 255, 235, 59;
  --accent-danger-rgb: 244, 67, 54;
  --accent-info-rgb: 33, 150, 243;
}

/* Specific styling for the Popular Categories and Popular Users sections */
.popular-section {
  background-color: var(--card-background);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.popular-section h3 {
  font-size: 1.2rem;
  margin-top: 0;
}

.dark-mode .popular-section {
  background-color: var(--dark-card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Styling for "No trending posts found" message */
.info-message,
.alert-info:not(.alert-primary):not(.alert-success):not(.alert-warning):not(.alert-danger),
div[class^="alert-"] {
  background-color: rgba(var(--primary-rgb), 0.1);
  border-radius: 8px;
  padding: 1rem;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.dark-mode .info-message,
.dark-mode .alert-info:not(.alert-primary):not(.alert-success):not(.alert-warning):not(.alert-danger),
.dark-mode div[class^="alert-"] {
  background-color: rgba(var(--primary-rgb), 0.05);
  color: var(--primary-color);
  border-color: var(--primary-color);
}