/* Custom color styling for FontAwesome icons in sidebar */

/* Navigation icons - different colors for each type */
#sidebar .nav-link i.fa-home {
  color: #3b82f6; /* Blue for home */
}

#sidebar .nav-link i.fa-stream {
  color: #8b5cf6; /* Purple for categories */
}

#sidebar .nav-link i.fa-tags {
  color: #10b981; /* Green for tags */
}

#sidebar .nav-link i.fa-archive {
  color: #f59e0b; /* Orange for archives */
}

#sidebar .nav-link i.fa-info-circle {
  color: #ef4444; /* Red for about */
}

/* Contact/social icons in sidebar bottom */
#sidebar .sidebar-bottom i.fab {
  transition: color 0.3s ease;
}

#sidebar .sidebar-bottom i.fa-github {
  color: #333333;
}

#sidebar .sidebar-bottom i.fa-twitter,
#sidebar .sidebar-bottom i.fa-x-twitter {
  color: #1da1f2;
}

#sidebar .sidebar-bottom i.fa-envelope {
  color: #ea4335;
}

#sidebar .sidebar-bottom i.fa-rss {
  color: #ff6600;
}

#sidebar .sidebar-bottom i.fa-mastodon {
  color: #6364ff;
}

#sidebar .sidebar-bottom i.fa-linkedin {
  color: #0077b5;
}

#sidebar .sidebar-bottom i.fa-stack-overflow {
  color: #f48024;
}

#sidebar .sidebar-bottom i.fa-bluesky {
  color: #00bcd4;
}

#sidebar .sidebar-bottom i.fa-reddit {
  color: #ff4500;
}

#sidebar .sidebar-bottom i.fa-threads {
  color: #000000;
}

/* Theme toggle icon */
#sidebar #mode-toggle i.fa-adjust {
  color: #6c757d;
}

/* Hover effects for better interactivity */
#sidebar .nav-link:hover i,
#sidebar .sidebar-bottom a:hover i {
  transform: scale(1.1);
  transition: all 0.3s ease;
}

/* Dark mode adjustments */
[data-mode="dark"] #sidebar .sidebar-bottom i.fa-github {
  color: #f0f6fc;
}

[data-mode="dark"] #sidebar .sidebar-bottom i.fa-threads {
  color: #ffffff;
}

[data-mode="dark"] #sidebar #mode-toggle i.fa-adjust {
  color: #adb5bd;
}

/* Bold styling for h1 elements */
h1 {
  font-weight: bold !important;
}

/* Full-width layout optimization after removing TOC */
main[aria-label="Main Content"] {
  max-width: none !important;
}

/* Improve readability of expanded content */
article .content {
  /* Optimal reading width for better readability */
  max-width: none;
  line-height: 1.7;
}

/* Add responsive margins for better reading experience on larger screens */
@media (min-width: 768px) {
  #main-wrapper main[aria-label="Main Content"] {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}

@media (min-width: 1024px) {
  #main-wrapper main[aria-label="Main Content"] {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
  }
}

@media (min-width: 1200px) {
  #main-wrapper main[aria-label="Main Content"] {
    padding-left: 8rem !important;
    padding-right: 8rem !important;
  }
}

@media (min-width: 1400px) {
  #main-wrapper main[aria-label="Main Content"] {
    padding-left: 12rem !important;
    padding-right: 12rem !important;
  }
}

/* Ensure article content doesn't get too wide for readability */
article {
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 1600px) {
  article {
    max-width: 900px;
  }
}

/* Apply same padding to tail wrapper for consistency */
@media (min-width: 768px) {
  #main-wrapper #tail-wrapper {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}

@media (min-width: 1024px) {
  #main-wrapper #tail-wrapper {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
  }
}

@media (min-width: 1200px) {
  #main-wrapper #tail-wrapper {
    padding-left: 8rem !important;
    padding-right: 8rem !important;
  }
}

@media (min-width: 1400px) {
  #main-wrapper #tail-wrapper {
    padding-left: 12rem !important;
    padding-right: 12rem !important;
  }
}

/* Center tail content with max width */
#tail-wrapper > * {
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 1600px) {
  #tail-wrapper > * {
    max-width: 900px;
  }
}

/* Adjust container padding for better content utilization */
.container {
  max-width: none !important;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 992px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1200px) {
  .container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

/* Override Bootstrap padding with custom spacing */
@media (min-width: 768px) {
  .container .row main.col-12.px-md-4,
  .container .row #tail-wrapper.col-12.px-md-4 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}

@media (min-width: 1024px) {
  .container .row main.col-12.px-md-4,
  .container .row #tail-wrapper.col-12.px-md-4 {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
  }
}

@media (min-width: 1200px) {
  .container .row main.col-12.px-md-4,
  .container .row #tail-wrapper.col-12.px-md-4 {
    padding-left: 8rem !important;
    padding-right: 8rem !important;
  }
}

@media (min-width: 1400px) {
  .container .row main.col-12.px-md-4,
  .container .row #tail-wrapper.col-12.px-md-4 {
    padding-left: 12rem !important;
    padding-right: 12rem !important;
  }
}