/* Inkwell Stories - Modern Blog Styling */
body {
    background: linear-gradient(135deg, #2d5a27 0%, #81c784 30%, #ffd54f 100%);
    background-attachment: fixed;
    color: #333333;
    margin-top: 5rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
  }
  
  h1, h2, h3, h4, h5, h6 {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 1rem;
  }
  
  h1 {
    font-size: 2.5rem;
    color: #34495e;
  }
  
  h2 {
    font-size: 1.8rem;
  }
  
  ul {
    margin: 0;
  }
  
  .bg-steel {
    background: linear-gradient(135deg, #d32f2f 0%, #e57373 30%, #ff8a65 70%, #ffa726 100%);
    box-shadow: 0 4px 20px rgba(211, 47, 47, 0.4);
  }
  
  .site-header .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    padding: 0.8rem 1rem !important;
    border-radius: 8px;
    transition: all 0.3s ease;
  }
  
  .site-header .navbar-nav .nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
  }
  
  .site-header .navbar-nav .nav-link.active {
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
  }
  
  .navbar-brand {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .content-section {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 6px 12px 6px 12px !important;
  border: none;
  border-radius: 15px;
  margin-bottom: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.content-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.article-title {
  color: #2c3e50;
  font-weight: 600;
  text-decoration: none;
}

.article-title:hover {
  background: linear-gradient(135deg, #e57373, #ff8a65);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
}

/* Eliminate space between title and content */
.media-body h2 {
    margin-bottom: 0.1rem !important; /* Very small margin after title */
}



.article-content {
  white-space: pre-line;
  margin-top: 0 !important;
}

/* Eliminate margins on content paragraphs and handle whitespace */
.article-content p {
    margin-top: 0 !important;
    margin-bottom: 0 !important; /* No bottom margin */
    line-height: 1.4 !important; /* Tighter line spacing */
    white-space: pre-line; /* Handle line breaks but collapse extra spaces */
}

/* Handle content that comes from linebreaks filter */
.article-content {
    font-size: 14px; /* Slightly smaller font for more compact look */
}

/* Strip extra padding and margins from all elements in post content */
.post-full-display {
    margin: 0 !important;
    padding: 0 !important;
}

/* Target any p tags created by linebreaks filter */
.post-full-display p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

/* Make sure the media element doesn't add extra space */
.media {
    margin-bottom: 0 !important;
}

/* Ensure the article containers are as compact as possible */
article.media.content-section {
    padding: 6px 12px 4px 12px !important;
}

/* Beautiful button styles */
.btn {
    border-radius: 25px;
    font-weight: 500;
    padding: 0.5rem 1.2rem;
    transition: all 0.3s ease;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, #e57373 0%, #ff8a65 100%);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(229, 115, 115, 0.4);
}

.btn-secondary {
    background: linear-gradient(135deg, #ff8a65 0%, #ffa726 100%);
    color: white;
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 138, 101, 0.4);
}

.btn-danger {
    background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%);
    color: white;
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(253, 121, 168, 0.4);
}

.btn-outline-primary, .btn-outline-info, .btn-outline-danger {
    border-radius: 20px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover, .btn-outline-info:hover, .btn-outline-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Beautiful pagination */
.pagination {
    justify-content: center;
    margin: 2rem 0;
}

.page-item .page-link {
    border: none;
    color: #e57373;
    font-weight: 500;
    margin: 0 0.25rem;
    border-radius: 15px;
    padding: 0.6rem 1rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.page-item .page-link:hover {
    background: linear-gradient(135deg, #e57373 0%, #ff8a65 100%);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(229, 115, 115, 0.3);
}

.page-item.active .page-link {
    background: linear-gradient(135deg, #e57373 0%, #ff8a65 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(229, 115, 115, 0.4);
}

/* Read more/less links */
.read-more-link, .read-less-link {
    color: #e57373 !important;
    font-weight: 500;
    text-decoration: none;
    padding: 0.2rem 0.8rem;
    border-radius: 15px;
    background: rgba(229, 115, 115, 0.1);
    transition: all 0.3s ease;
}

.read-more-link:hover, .read-less-link:hover {
    background: linear-gradient(135deg, #e57373 0%, #ff8a65 100%);
    color: white !important;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Sidebar Enhancements */
.category-list .badge {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.badge-politics { background: linear-gradient(135deg, #d32f2f, #b71c1c); }
.badge-religion { background: linear-gradient(135deg, #7b1fa2, #4a148c); }
.badge-history { background: linear-gradient(135deg, #5d4037, #3e2723); }
.badge-technology { background: linear-gradient(135deg, #1976d2, #0d47a1); }
.badge-science { background: linear-gradient(135deg, #00796b, #004d40); }
.badge-culture { background: linear-gradient(135deg, #f57c00, #e65100); }
.badge-sports { background: linear-gradient(135deg, #388e3c, #1b5e20); }
.badge-entertainment { background: linear-gradient(135deg, #c2185b, #880e4f); }
.badge-all { background: linear-gradient(135deg, #e57373, #ff8a65); }

.category-list .badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.quick-actions .btn {
    border-radius: 20px;
    font-weight: 500;
}

.latest-post-item {
    padding: 0.5rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.latest-post-item:hover {
    background: rgba(229, 115, 115, 0.1);
    transform: translateX(5px);
}

.latest-post-title {
    color: #2c3e50;
    font-weight: 500;
    text-decoration: none;
    font-size: 0.9rem;
}

.latest-post-title:hover {
    color: #e57373;
    text-decoration: none;
}

.popular-categories .category-name {
    font-weight: 500;
    color: #2c3e50;
}

.blog-stats .stat-item {
    padding: 0.3rem 0;
    color: #34495e;
}

.blog-stats strong {
    color: #e57373;
    font-size: 1.2rem;
}

/* Category badges in posts */
.badge-primary {
    background: linear-gradient(135deg, #e57373 0%, #ff8a65 100%) !important;
    border: none;
    font-weight: 500;
    padding: 0.3rem 0.6rem;
    border-radius: 12px;
}

.article-img {
  height: 65px;
  width: 65px;
  margin-right: 16px;
  border: 3px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.article-img:hover {
  transform: scale(1.05);
  border-color: rgba(229, 115, 115, 0.8);
}

.article-metadata {
  padding-bottom: 3px;
  margin-bottom: 2px;
  border-bottom: 2px solid rgba(229, 115, 115, 0.1);
}

.article-metadata a {
  color: #e57373;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
}

.article-metadata a:hover {
  color: #ff8a65;
  text-decoration: none;
}
  
  .article-metadata a:hover {
    color: #333;
    text-decoration: none;
  }

  /* Additional rules to make post containers fit content tightly */
  .media.content-section {
    min-height: auto !important; /* Allow container to shrink to content size */
    height: auto !important;
  }

  /* Remove default Bootstrap margins that might cause extra space */
  .media-body {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .article-svg {
    width: 25px;
    height: 25px;
    vertical-align: middle;
  }
  
  .account-img {
    height: 125px;
    width: 125px;
    margin-right: 20px;
    margin-bottom: 16px;
  }
  
  .account-heading {
    font-size: 2.5rem;
  }

  .floating-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background-color: #5f788a;
    color: white;
    border: 2px solid #5f788a;
    border-radius: 8px;
    padding: 10px 16px;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
  }

  .floating-btn:hover {
    background-color: white;
    color: #5f788a;
    border-color: #5f788a;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
  }

  .floating-btn i {
    font-size: 16px;
  }

  .clickable-profile-img:hover {
    opacity: 0.8;
    transform: scale(1.05);
    transition: all 0.3s ease;
  }

  .clickable-profile-img {
    transition: all 0.3s ease;
  }

  /* Dynamic post content styling */
  .article-content {
    white-space: pre-line;
    align-self: flex-start; /* Align content to top instead of center */
    margin-top: 0; /* Remove top margin */
  }

  .post-full-display {
    margin: 0;
    padding: 0;
    line-height: 1.5;
  }

  .post-preview {
    margin: 0;
    padding: 0;
    line-height: 1.5;
  }

  .post-full-content {
    margin: 0;
    padding: 0;
    line-height: 1.5;
  }

  /* Media object adjustments for short content */
  .media {
    display: flex;
    align-items: flex-start; /* Align items to top instead of center */
  }

  .media-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Start from top */
  }

  /* Short content containers - extremely compact */
  .content-section.short-content {
    min-height: auto !important; /* Let container adjust to content */
    padding: 5px 12px 4px 12px !important; /* Very compact padding */
  }

  /* Long content containers */
  .content-section.long-content {
    min-height: auto !important; /* Remove fixed minimum height */
    padding: 8px 14px 6px 14px !important; /* Compact padding for longer posts */
  }

  /* Override default content-section padding for ALL posts */
  .content-section {
    padding: 5px 12px 4px 12px !important;
    margin-bottom: 10px !important;
  }

  /* Read more/less link styling */
  .read-more-link, .read-less-link {
    font-weight: 500;
    transition: color 0.2s ease;
  }

  .read-more-link:hover, .read-less-link:hover {
    color: #0056b3 !important;
    text-decoration: none;
  }

  /* Aggressive spacing fixes with !important */
  .content-section h2 {
    margin-bottom: 2px !important; /* Force minimal spacing after title */
    margin-top: 3px !important; /* Small spacing from metadata */
  }

  .media-body h2 {
    margin-bottom: 2px !important;
    margin-top: 3px !important;
  }

  .article-title {
    margin-bottom: 2px !important;
    margin-top: 3px !important;
  }

  /* Remove excessive paragraph margins with !important */
  .article-content p {
    margin-bottom: 5px !important;
    margin-top: 0 !important;
  }

  .post-full-display {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }

  .post-preview {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }

  .post-full-display p {
    margin-bottom: 5px !important;
    margin-top: 0 !important;
  }

  .post-preview p {
    margin-bottom: 5px !important;
    margin-top: 0 !important;
  }

  /* Compact the entire post container */
  .media.content-section {
    padding-top: 8px;
    padding-bottom: 6px;
  }

  /* Override Bootstrap's default spacing for tight layout */
  .content-section .media-body {
    padding-top: 0;
    margin-top: 0;
  }

  /* Make sure short posts are really compact */
  .short-content .article-content {
    margin-bottom: 0;
  }

  .short-content .media-body {
    min-height: auto;
  }

  /* Adjust image alignment for compact layout */
  .article-img {
    margin-right: 10px !important; /* Reduce image margin */
    align-self: flex-start;
    margin-top: 0 !important; /* Align with text */
  }

  /* Force compact layout for all article elements */
  article.media {
    padding: 5px 12px !important;
    margin-bottom: 10px !important;
  }

  /* Remove default Bootstrap media spacing */
  .media {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .media-body {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Target the specific article metadata */
  .article-metadata {
    margin-bottom: 1px !important;
    padding-bottom: 1px !important;
  }

  /* ===== EXCITING NEW STYLES FOR ENHANCED USER EXPERIENCE ===== */

  /* Animated gradient background for enhanced visual appeal */
  @keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  body {
    background: linear-gradient(-45deg, #1b4332, #2d5a27, #81c784, #ffd54f, #ffab91);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
  }

  /* Enhanced header with subtle glow effect */
  .site-header {
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .bg-steel {
    background: linear-gradient(135deg, #d32f2f 0%, #e57373 30%, #ff8a65 70%, #ffa726 100%);
    box-shadow: 0 4px 30px rgba(211, 47, 47, 0.4);
    position: relative;
  }

  .bg-steel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: shimmer 3s infinite;
  }

  @keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

  /* Enhanced content sections with floating effect */
  .content-section {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.1),
      0 2px 8px rgba(229, 115, 115, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .content-section:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 
      0 20px 60px rgba(0, 0, 0, 0.15),
      0 4px 15px rgba(229, 115, 115, 0.2);
  }

  /* Elegant sidebar enhancements */
  .col-md-4 {
    position: relative;
  }

  .col-md-4 > .content-section {
    background: rgba(255, 255, 255, 0.95);
    border-left: 4px solid transparent;
    border-image: linear-gradient(45deg, #e57373, #ff8a65, #ffd54f) 1;
    transition: all 0.3s ease;
  }

  /* Enhanced navbar brand with glow */
  .navbar-brand {
    position: relative;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
  }

  .navbar-brand:hover {
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
  }

  /* Animated category badges */
  .category-list .badge {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .category-list .badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
  }

  .category-list .badge:hover::before {
    left: 100%;
  }

  /* Enhanced button animations */
  .btn {
    position: relative;
    overflow: hidden;
  }

  .btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
  }

  .btn:hover::before {
    width: 300px;
    height: 300px;
  }

  /* Floating animation for sidebar elements */
  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
  }

  .quick-actions {
    animation: float 6s ease-in-out infinite;
  }

  /* Enhanced pagination with glow effects */
  .page-item .page-link {
    position: relative;
    overflow: hidden;
  }

  .page-item .page-link:hover {
    box-shadow: 0 0 20px rgba(229, 115, 115, 0.5);
  }

  /* Pulsing effect for active elements */
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(229, 115, 115, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(229, 115, 115, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 115, 115, 0); }
  }

  .page-item.active .page-link {
    animation: pulse 2s infinite;
  }

  /* Smooth scroll behavior */
  html {
    scroll-behavior: smooth;
  }

  /* Enhanced article images with border glow */
  .article-img {
    position: relative;
  }

  .article-img::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, #e57373, #ff8a65, #ffd54f, #e57373);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .article-img:hover::after {
    opacity: 1;
  }

  /* Enhanced text selection */
  ::selection {
    background: linear-gradient(45deg, #e57373, #ff8a65);
    color: white;
  }

  ::-moz-selection {
    background: linear-gradient(45deg, #e57373, #ff8a65);
    color: white;
  }

  /* Smooth transitions for all interactive elements */
  * {
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }

  /* Override any Bootstrap blue defaults */
  .btn-info, .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active {
    background: linear-gradient(135deg, #e57373 0%, #ff8a65 100%) !important;
    border-color: transparent !important;
    color: white !important;
  }

  .btn-info:hover, .btn-info:focus, .btn-info:active {
    background: linear-gradient(135deg, #d32f2f 0%, #ff7043 100%) !important;
    border-color: transparent !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(229, 115, 115, 0.4) !important;
  }

  .badge-info {
    background: linear-gradient(135deg, #e57373 0%, #ff8a65 100%) !important;
  }

  /* Force override all Bootstrap blue variants */
  .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active,
  .btn-secondary, .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active,
  .btn-info, .btn-info:hover, .btn-info:focus, .btn-info:active {
    background: linear-gradient(135deg, #e57373 0%, #ff8a65 100%) !important;
    border-color: transparent !important;
    color: white !important;
  }

  /* Make sure all badges use our color scheme */
  .badge, .badge-primary, .badge-secondary, .badge-info {
    background: linear-gradient(135deg, #e57373 0%, #ff8a65 100%) !important;
    color: white !important;
  }

  /* Force header background change */
  .navbar-dark.bg-steel, .navbar.bg-steel, header.site-header .bg-steel {
    background: linear-gradient(135deg, #d32f2f 0%, #e57373 30%, #ff8a65 70%, #ffa726 100%) !important;
  }

  /* ===== STICKY SIDEBAR FUNCTIONALITY ===== */
  
  /* Make the sidebar sticky when scrolling */
  .col-md-4 {
    position: sticky;
    top: 6rem; /* Account for the fixed header height */
    height: fit-content;
    max-height: calc(100vh - 7rem); /* Prevent sidebar from being too tall */
    overflow-y: auto; /* Add scrollbar if sidebar content is too long */
  }

  /* Ensure sidebar content sections stack properly */
  .col-md-4 .content-section {
    margin-bottom: 1.5rem;
  }

  /* Smooth scrolling for sidebar if content overflows */
  .col-md-4::-webkit-scrollbar {
    width: 6px;
  }

  .col-md-4::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
  }

  .col-md-4::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #e57373, #ff8a65);
    border-radius: 10px;
  }

  .col-md-4::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #d32f2f, #ff7043);
  }