/* Article Page Specific Styles */

/* Main Article Container */
.article-container {
     display: grid;
     grid-template-columns: 7fr 3fr;
     gap: 2.5rem;
     max-width: 1200px;
     margin: 0 auto;
     padding: 7rem 5% 3rem;
   }
   
   /* Article Content Area */
   .article-content {
     background: var(--card-bg);
     border-radius: 1rem;
     box-shadow: var(--shadow);
     overflow: hidden;
   }
   
   /* Article Header Section */
   .article-header {
     padding: 2rem;
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   }
   
   .article-title {
     font-size: 2.5rem;
     margin: 1rem 0 1.5rem;
     line-height: 1.3;
     color: var(--text-color);
   }
   
   .article-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
     margin: 1.5rem 0;
   }
   
   .article-tags .tag {
     background: var(--primary-color);
     color: white;
     padding: 0.35rem 1rem;
     border-radius: 2rem;
     font-size: 0.85rem;
     text-decoration: none;
     transition: var(--transition);
   }
   
   .article-tags .tag:hover {
     background: var(--secondary-color);
     transform: translateY(-2px);
   }
   
   .article-featured-image {
     width: 100%;
     max-height: 500px;
     object-fit: cover;
     border-radius: 0.75rem;
   }
   
   /* Article Body Content */
   .article-body {
     padding: 2.5rem 2rem;
     color: var(--text-color);
     line-height: 1.8;
   }
   
   .article-body h2 {
     font-size: 1.8rem;
     margin: 2.5rem 0 1.2rem;
     color: var(--text-color);
     scroll-margin-top: 100px; /* For smooth scrolling */
   }
   
   .article-body h3 {
     font-size: 1.4rem;
     margin: 2rem 0 1rem;
     color: var(--text-color);
     scroll-margin-top: 100px; /* For smooth scrolling */
   }
   
   .article-body p {
     margin-bottom: 1.5rem;
   }
   
   .article-body ul, 
   .article-body ol {
     margin-bottom: 1.5rem;
     padding-left: 1.5rem;
   }
   
   .article-body li {
     margin-bottom: 0.5rem;
   }
   
   .article-body a {
     color: var(--primary-color);
     text-decoration: none;
     transition: var(--transition);
   }
   
   .article-body a:hover {
     color: var(--secondary-color);
     text-decoration: underline;
   }
   
   /* Code Blocks */
   .code-block {
     background: #222;
     border-radius: 0.5rem;
     margin: 1.5rem 0;
     overflow: hidden;
   }
   
   .code-block pre {
     padding: 1.5rem;
     overflow-x: auto;
     margin: 0;
   }
   
   .code-block code {
     color: #f8f8f2;
     font-family: 'Fira Code', 'Courier New', Courier, monospace;
     font-size: 0.95rem;
     line-height: 1.6;
   }
   
   /* Inline code */
   :not(pre) > code {
     background: rgba(99, 102, 241, 0.1);
     color: var(--primary-color);
     padding: 0.15rem 0.4rem;
     border-radius: 0.25rem;
     font-family: 'Courier New', Courier, monospace;
     font-size: 0.95em;
   }
   
   /* Resources Section */
   .article-resources {
     margin-top: 3rem;
     padding-top: 2rem;
     border-top: 1px solid rgba(0, 0, 0, 0.1);
   }
   
   .article-resources h3 {
     font-size: 1.3rem;
     margin-bottom: 1rem;
   }
   
   .article-resources ul {
     padding-left: 1.25rem;
   }
   
   .article-resources li {
     margin-bottom: 0.75rem;
   }
   
   /* Author Information */
   .article-author {
     display: flex;
     gap: 1.5rem;
     padding: 2rem;
     background: rgba(99, 102, 241, 0.05);
     border-radius: 0.75rem;
     margin-top: 3rem;
   }
   
   .author-image {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     object-fit: cover;
   }
   
   .author-info {
     flex: 1;
   }
   
   .author-info h3 {
     margin-bottom: 0.75rem;
   }
   
   .author-social {
     margin-top: 1rem;
     display: flex;
     gap: 0.75rem;
   }
   
   .author-social a {
     color: var(--gray-color);
     font-size: 1.25rem;
     transition: var(--transition);
   }
   
   .author-social a:hover {
     color: var(--primary-color);
     transform: translateY(-3px);
   }
   
   /* Article Navigation (Prev/Next) */
   .article-navigation {
     display: flex;
     justify-content: space-between;
     margin-top: 3rem;
   }
   
   .prev-article,
   .next-article {
     display: flex;
     flex-direction: column;
     max-width: 45%;
     color: var(--text-color);
     text-decoration: none;
     padding: 1rem;
     border-radius: 0.5rem;
     transition: var(--transition);
   }
   
   .prev-article:hover,
   .next-article:hover {
     background: rgba(99, 102, 241, 0.05);
   }
   
   .prev-article span:first-child,
   .next-article span:first-child {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     font-size: 0.9rem;
     color: var(--primary-color);
     margin-bottom: 0.5rem;
   }
   
   .prev-article span:last-child,
   .next-article span:last-child {
     font-weight: 500;
   }
   
   .next-article {
     text-align: right;
   }
   
   /* Related Articles */
   .related-articles {
     margin-top: 3rem;
   }
   
   .related-articles h3 {
     margin-bottom: 1.5rem;
     font-size: 1.4rem;
   }
   
   .related-articles-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.5rem;
   }
   
   .related-article-card {
     background: var(--card-bg);
     border-radius: 0.75rem;
     overflow: hidden;
     box-shadow: var(--shadow);
     transition: var(--transition);
   }
   
   .related-article-card:hover {
     transform: translateY(-5px);
   }
   
   .related-article-card img {
     width: 100%;
     height: 140px;
     object-fit: cover;
   }
   
   .related-article-card h4 {
     padding: 1rem 1rem 0.5rem;
   }
   
   .related-article-card h4 a {
     color: var(--text-color);
     text-decoration: none;
     transition: var(--transition);
     font-size: 1.1rem;
   }
   
   .related-article-card h4 a:hover {
     color: var(--primary-color);
   }
   
   .related-article-date {
     padding: 0 1rem 1rem;
     font-size: 0.85rem;
     color: var(--gray-color);
   }
   
   /* Comments Section */
   .article-comments {
     margin-top: 3rem;
     padding-top: 2rem;
     border-top: 1px solid rgba(0, 0, 0, 0.1);
   }
   
   .article-comments h3 {
     margin-bottom: 2rem;
     font-size: 1.4rem;
   }
   
   .comment-form {
     background: var(--card-bg);
     padding: 1.5rem;
     border-radius: 0.75rem;
     box-shadow: var(--shadow);
   }
   
   .comment-form h4 {
     margin-bottom: 1.5rem;
   }
   
   .form-group {
     margin-bottom: 1.5rem;
   }
   
   .form-group label {
     display: block;
     margin-bottom: 0.5rem;
     font-weight: 500;
   }
   
   .form-group input,
   .form-group textarea {
     width: 100%;
     padding: 0.75rem 1rem;
     border: 1px solid #e2e8f0;
     border-radius: 0.5rem;
     font-family: inherit;
     background: var(--bg-color);
     transition: var(--transition);
   }
   
   .form-group input:focus,
   .form-group textarea:focus {
     border-color: var(--primary-color);
     outline: none;
     box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
   }
   
   .btn-primary {
     background: var(--primary-color);
     color: white;
     border: none;
     padding: 0.75rem 1.5rem;
     border-radius: 0.5rem;
     font-weight: 500;
     cursor: pointer;
     transition: var(--transition);
   }
   
   .btn-primary:hover {
     background: var(--secondary-color);
     transform: translateY(-3px);
   }
   
   /* Comments styling */
   .comment {
     background-color: var(--bg-color);
     border-radius: 8px;
     padding: 1rem;
     margin-bottom: 1.5rem;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   }
   
   .comment-header {
     display: flex;
     align-items: center;
     margin-bottom: 0.5rem;
     font-size: 0.95rem;
   }
   
   .comment-header strong {
     margin-right: 0.5rem;
   }
   
   .comment-header a {
     color: var(--primary-color);
     margin-right: 0.5rem;
     text-decoration: none;
   }
   
   .comment-date {
     color: var(--gray-color);
     font-size: 0.85rem;
     margin-left: auto;
   }
   
   .comment-content p {
     margin: 0;
     line-height: 1.5;
   }
   
   /* Dark mode adjustments */
   [data-theme="dark"] .comment {
     background-color: #1e293b;
     border: 1px solid #334155;
   }
   
   /* Sidebar Styles */
   .article-sidebar {
     position: sticky;
     top: 6rem;
     height: fit-content;
   }
   
   .sidebar-widget {
     background: var(--card-bg);
     border-radius: 1rem;
     padding: 1.5rem;
     margin-bottom: 2rem;
     box-shadow: var(--shadow);
   }
   
   .sidebar-title {
     font-size: 1.3rem;
     margin-bottom: 1.5rem;
     padding-bottom: 0.75rem;
     border-bottom: 2px solid var(--primary-color);
     color: var(--text-color);
   }
   
   /* Table of Contents */
   .toc-list {
     list-style: none;
     padding-left: 0;
   }
   
   .toc-list li {
     margin-bottom: 0.75rem;
   }
   
   .toc-list a {
     color: var(--text-color);
     text-decoration: none;
     display: block;
     padding: 0.3rem 0;
     transition: var(--transition);
     border-left: 2px solid transparent;
     padding-left: 0.75rem;
   }
   
   .toc-list a:hover {
     color: var(--primary-color);
     border-left-color: var(--primary-color);
     padding-left: 1rem;
   }
   
   .toc-list ul {
     list-style: none;
     padding-left: 1rem;
     margin-top: 0.5rem;
   }
   
   /* Active TOC item */
   .toc-list a.active {
     color: var(--primary-color);
     border-left: 2px solid var(--primary-color);
     font-weight: 500;
     padding-left: 1rem;
   }

   [data-theme="dark"] .toc-list a.active {
     color: #818cf8;
     border-left-color: #818cf8;
   }

   /* Social Share Section */
   .social-share {
     display: flex;
     justify-content: center;
     gap: 1rem;
   }
   
   .social-share-btn {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     transition: var(--transition);
     color: white;
   }
   
   .social-share-btn:hover {
     transform: translateY(-3px);
   }
   
   .twitter {
     background: #1DA1F2;
   }
   
   .facebook {
     background: #4267B2;
   }
   
   .linkedin {
     background: #0077B5;
   }
   
   .reddit {
     background: #FF4500;
   }
   
   .email {
     background: #738ADB;
   }
   
   /* Newsletter Form */
   .newsletter-form {
     display: flex;
     flex-direction: column;
     gap: 1rem;
   }
   
   .newsletter-form input {
     padding: 0.75rem 1rem;
     border: 1px solid #e2e8f0;
     border-radius: 0.5rem;
     font-family: inherit;
   }
   
   .newsletter-form input:focus {
     border-color: var(--primary-color);
     outline: none;
   }
   
   /* Dark Mode Adjustments */
   [data-theme="dark"] .article-content,
   [data-theme="dark"] .sidebar-widget,
   [data-theme="dark"] .related-article-card,
   [data-theme="dark"] .comment-form {
     background: #1e293b;
     border: 1px solid #334155;
   }
   
   [data-theme="dark"] .article-body h2,
   [data-theme="dark"] .article-body h3,
   [data-theme="dark"] .article-title,
   [data-theme="dark"] .sidebar-title {
     color: var(--light-color);
   }
   
   [data-theme="dark"] .article-body {
     color: #e2e8f0;
   }
   
   [data-theme="dark"] .article-tags .tag {
     background: #4f46e5;
   }
   
   [data-theme="dark"] .article-header {
     border-bottom-color: #334155;
   }
   
   [data-theme="dark"] .article-resources,
   [data-theme="dark"] .article-comments {
     border-top-color: #334155;
   }
   
   [data-theme="dark"] .article-author {
     background: rgba(99, 102, 241, 0.1);
   }
   
   [data-theme="dark"] .form-group input,
   [data-theme="dark"] .form-group textarea,
   [data-theme="dark"] .newsletter-form input {
     background: #0f172a;
     border-color: #334155;
     color: var(--light-color);
   }
   
   [data-theme="dark"] .prev-article:hover,
   [data-theme="dark"] .next-article:hover {
     background: rgba(99, 102, 241, 0.1);
   }
   
   [data-theme="dark"] .toc-list a:hover {
     color: #818cf8;
     border-left-color: #818cf8;
   }
   
   [data-theme="dark"] .related-article-card h4 a {
     color: var(--light-color);
   }
   
   [data-theme="dark"] .related-article-card h4 a:hover {
     color: #818cf8;
   }
   
   /* Responsive Styles */
   @media (max-width: 992px) {
     .article-container {
       grid-template-columns: 1fr;
     }
     
     .article-sidebar {
       position: static;
       margin-top: 3rem;
     }
     
     .related-articles-grid {
       grid-template-columns: repeat(2, 1fr);
     }
     
     .article-title {
       font-size: 2.2rem;
     }
   }
   
   @media (max-width: 768px) {
     .article-author {
       flex-direction: column;
       align-items: center;
       text-align: center;
     }
     
     .related-articles-grid {
       grid-template-columns: 1fr;
     }
     
     .article-navigation {
       flex-direction: column;
       gap: 1.5rem;
     }
     
     .prev-article,
     .next-article {
       max-width: 100%;
     }
     
     .article-title {
       font-size: 1.8rem;
     }
     
     .article-body h2 {
       font-size: 1.5rem;
     }
     
     .article-body h3 {
       font-size: 1.2rem;
     }
   }
   
   @media (max-width: 480px) {
     .article-meta {
       flex-direction: column;
       align-items: flex-start;
       gap: 0.5rem;
     }
     
     .article-tags {
       margin-top: 1rem;
     }
     
     .social-share {
       flex-wrap: wrap;
     }
     
     .article-header {
       padding: 1.5rem;
     }
     
     .article-body {
       padding: 1.5rem;
     }
   }
   
   /* Print styles */
   @media print {
     .header, 
     .article-sidebar, 
     .article-navigation,
     .related-articles, 
     .article-comments,
     .footer,
     .scroll-top {
       display: none !important;
     }
     
     .article-container {
       display: block;
       padding: 0;
     }
     
     .article-body {
       font-size: 12pt;
       line-height: 1.6;
     }
     
     .article-title {
       font-size: 24pt;
     }
     
     a {
       text-decoration: none !important;
       color: #000 !important;
     }
     
     .article-author {
       border-top: 1px solid #ccc;
       padding-top: 1rem;
     }
     
     .code-block {
       border: 1px solid #ccc;
       page-break-inside: avoid;
     }
   }

.scroll-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: #6366f1;
  color: white;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 100;
}

.scroll-top.visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-top:hover {
  background: #4f46e5;
}

/* Improved footer social links spacing */
.footer-social .social-links {
  display: flex;
  gap: 1rem;
}

.footer-social .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.1);
  transition: background-color 0.3s;
}

.footer-social .social-links a:hover {
  background-color: rgba(255,255,255,0.2);
}

/* Responsive footer adjustments */
@media screen and (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
  }
  
  .footer-nav {
    margin: 2rem 0;
  }
  
  .footer-social .social-links {
    justify-content: center;
  }
}