/* Blog-specific styles matching the main website theme */
/* Inherits base styles from main style.css */

/* Blog Container */
.blog-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* Blog Header */
.blog-header {
  text-align: center;
  padding: 4rem 2rem 2rem;
  background: var(--section-bg);
  border-radius: 8px;
  margin-bottom: 3rem;
}

.blog-header h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 3rem;
  color: var(--accent);
  margin-bottom: 1rem;
}

.blog-header p {
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

/* Blog Grid */
.blog-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

/* Blog Card */
.blog-card {
  background: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 170, 255, 0.3);
}

.blog-card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: linear-gradient(135deg, var(--section-bg), var(--card-bg));
}

.blog-card-content {
  padding: 1.5rem;
}

.blog-card-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.blog-card-date {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.blog-card-category {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  background: rgba(0, 170, 255, 0.2);
  color: var(--accent);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.blog-card h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.5rem;
  color: var(--fg);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.blog-card h2 a {
  color: var(--fg);
  transition: color 0.3s ease;
}

.blog-card h2 a:hover {
  color: var(--accent);
}

.blog-card-excerpt {
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.blog-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.blog-tag {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  border-radius: 4px;
  font-size: 0.75rem;
  transition: all 0.3s ease;
}

.blog-tag:hover {
  background: var(--accent);
  color: var(--dark-bg);
}

.read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  font-weight: 600;
  transition: gap 0.3s ease;
}

.read-more:hover {
  gap: 0.75rem;
}

/* Blog Post Single */
.blog-post-header {
  text-align: center;
  padding: 3rem 2rem;
  background: var(--section-bg);
  border-radius: 8px;
  margin-bottom: 2rem;
}

.blog-post-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 2.5rem;
  color: var(--fg);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.blog-post-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  color: var(--muted);
  font-size: 0.95rem;
  flex-wrap: wrap;
}

.blog-post-meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.blog-post-content {
  background: var(--card-bg);
  border-radius: 8px;
  padding: 3rem;
  margin-bottom: 2rem;
  line-height: 1.8;
}

.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4 {
  font-family: 'Orbitron', sans-serif;
  color: var(--fg);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.blog-post-content h2 {
  font-size: 2rem;
  color: var(--accent);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(0, 170, 255, 0.3);
}

.blog-post-content h3 {
  font-size: 1.5rem;
}

.blog-post-content h4 {
  font-size: 1.2rem;
}

.blog-post-content p {
  margin-bottom: 1.5rem;
  color: var(--fg);
}

.blog-post-content ul,
.blog-post-content ol {
  margin: 1.5rem 0 1.5rem 2rem;
  color: var(--fg);
}

.blog-post-content li {
  margin-bottom: 0.75rem;
}

.blog-post-content a {
  color: var(--accent);
  text-decoration: underline;
  transition: opacity 0.3s ease;
}

.blog-post-content a:hover {
  opacity: 0.8;
}

.blog-post-content code {
  background: rgba(0, 0, 0, 0.3);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  color: var(--accent);
}

.blog-post-content pre {
  background: #000;
  padding: 1.5rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid rgba(0, 170, 255, 0.2);
}

.blog-post-content pre code {
  background: none;
  padding: 0;
  color: var(--fg);
  font-size: 0.9rem;
}

.blog-post-content blockquote {
  border-left: 4px solid var(--accent);
  padding-left: 1.5rem;
  margin: 1.5rem 0;
  color: var(--muted);
  font-style: italic;
}

.blog-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 2rem 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.blog-post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.blog-post-content th,
.blog-post-content td {
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.75rem;
  text-align: left;
}

.blog-post-content th {
  background: rgba(0, 170, 255, 0.2);
  color: var(--fg);
  font-weight: 600;
}

/* Table of Contents */
.toc-container {
  background: var(--section-bg);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid rgba(0, 170, 255, 0.2);
}

.toc-container h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.2rem;
  color: var(--accent);
  margin-bottom: 1rem;
  margin-top: 0;
}

.toc-container ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.toc-container li {
  margin-bottom: 0.5rem;
}

.toc-container li a {
  color: var(--fg);
  text-decoration: none;
  transition: color 0.3s ease;
}

.toc-container li a:hover {
  color: var(--accent);
}

.toc-container li ul {
  margin-left: 1.5rem;
  margin-top: 0.5rem;
}

/* Sidebar */
.blog-layout-with-sidebar {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

.blog-sidebar {
  position: sticky;
  top: 100px;
  height: fit-content;
}

.sidebar-widget {
  background: var(--card-bg);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.sidebar-widget h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.2rem;
  color: var(--accent);
  margin-bottom: 1rem;
}

.sidebar-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-widget li {
  margin-bottom: 0.75rem;
}

.sidebar-widget li a {
  color: var(--fg);
  text-decoration: none;
  transition: color 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar-widget li a:hover {
  color: var(--accent);
}

.post-count {
  background: rgba(0, 170, 255, 0.2);
  color: var(--accent);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Recent Posts Widget */
.recent-posts-list li a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.recent-post-title {
  color: var(--fg);
  font-weight: 500;
  line-height: 1.3;
}

.recent-post-date {
  color: var(--muted);
  font-size: 0.8rem;
}

/* Tag Cloud */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-cloud-item {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  background: rgba(0, 170, 255, 0.1);
  color: var(--fg);
  border-radius: 4px;
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 170, 255, 0.2);
}

.tag-cloud-item:hover {
  background: var(--accent);
  color: var(--dark-bg);
  border-color: var(--accent);
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 3rem 0;
}

.pagination a,
.pagination span {
  padding: 0.6rem 1rem;
  background: var(--card-bg);
  border-radius: 4px;
  color: var(--fg);
  text-decoration: none;
  transition: all 0.3s ease;
}

.pagination a:hover {
  background: var(--accent);
  color: var(--dark-bg);
}

.pagination .current {
  background: var(--accent);
  color: var(--dark-bg);
  font-weight: 600;
}

.pagination .disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Back to Blog Link */
.back-to-blog {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 2rem;
  transition: gap 0.3s ease;
}

.back-to-blog:hover {
  gap: 0.75rem;
}

/* Responsive */
@media (max-width: 1024px) {
  .blog-layout-with-sidebar {
    grid-template-columns: 1fr;
  }

  .blog-sidebar {
    position: static;
  }
}

@media (max-width: 768px) {
  .blog-header h1 {
    font-size: 2rem;
  }

  .blog-posts-grid {
    grid-template-columns: 1fr;
  }

  .blog-post-title {
    font-size: 1.8rem;
  }

  .blog-post-content {
    padding: 1.5rem;
  }

  .blog-post-meta {
    gap: 1rem;
  }
}

/* Syntax Highlighting (Rouge) */
.highlight {
  background: #000;
  border-radius: 8px;
  margin: 1.5rem 0;
}

.highlight .c { color: #75715e; } /* Comment */
.highlight .err { color: #960050; background-color: #1e0010; } /* Error */
.highlight .k { color: #66d9ef; } /* Keyword */
.highlight .l { color: #ae81ff; } /* Literal */
.highlight .n { color: #f8f8f2; } /* Name */
.highlight .o { color: #f92672; } /* Operator */
.highlight .p { color: #f8f8f2; } /* Punctuation */
.highlight .cm { color: #75715e; } /* Comment.Multiline */
.highlight .cp { color: #75715e; } /* Comment.Preproc */
.highlight .c1 { color: #75715e; } /* Comment.Single */
.highlight .cs { color: #75715e; } /* Comment.Special */
.highlight .ge { font-style: italic; } /* Generic.Emph */
.highlight .gs { font-weight: bold; } /* Generic.Strong */
.highlight .kc { color: #66d9ef; } /* Keyword.Constant */
.highlight .kd { color: #66d9ef; } /* Keyword.Declaration */
.highlight .kn { color: #f92672; } /* Keyword.Namespace */
.highlight .kp { color: #66d9ef; } /* Keyword.Pseudo */
.highlight .kr { color: #66d9ef; } /* Keyword.Reserved */
.highlight .kt { color: #66d9ef; } /* Keyword.Type */
.highlight .ld { color: #e6db74; } /* Literal.Date */
.highlight .m { color: #ae81ff; } /* Literal.Number */
.highlight .s { color: #e6db74; } /* Literal.String */
.highlight .na { color: #a6e22e; } /* Name.Attribute */
.highlight .nb { color: #f8f8f2; } /* Name.Builtin */
.highlight .nc { color: #a6e22e; } /* Name.Class */
.highlight .no { color: #66d9ef; } /* Name.Constant */
.highlight .nd { color: #a6e22e; } /* Name.Decorator */
.highlight .ni { color: #f8f8f2; } /* Name.Entity */
.highlight .ne { color: #a6e22e; } /* Name.Exception */
.highlight .nf { color: #a6e22e; } /* Name.Function */
.highlight .nl { color: #f8f8f2; } /* Name.Label */
.highlight .nn { color: #f8f8f2; } /* Name.Namespace */
.highlight .nx { color: #a6e22e; } /* Name.Other */
.highlight .py { color: #f8f8f2; } /* Name.Property */
.highlight .nt { color: #f92672; } /* Name.Tag */
.highlight .nv { color: #f8f8f2; } /* Name.Variable */
.highlight .ow { color: #f92672; } /* Operator.Word */
.highlight .w { color: #f8f8f2; } /* Text.Whitespace */
.highlight .mf { color: #ae81ff; } /* Literal.Number.Float */
.highlight .mh { color: #ae81ff; } /* Literal.Number.Hex */
.highlight .mi { color: #ae81ff; } /* Literal.Number.Integer */
.highlight .mo { color: #ae81ff; } /* Literal.Number.Oct */
.highlight .sb { color: #e6db74; } /* Literal.String.Backtick */
.highlight .sc { color: #e6db74; } /* Literal.String.Char */
.highlight .sd { color: #e6db74; } /* Literal.String.Doc */
.highlight .s2 { color: #e6db74; } /* Literal.String.Double */
.highlight .se { color: #ae81ff; } /* Literal.String.Escape */
.highlight .sh { color: #e6db74; } /* Literal.String.Heredoc */
.highlight .si { color: #e6db74; } /* Literal.String.Interpol */
.highlight .sx { color: #e6db74; } /* Literal.String.Other */
.highlight .sr { color: #e6db74; } /* Literal.String.Regex */
.highlight .s1 { color: #e6db74; } /* Literal.String.Single */
.highlight .ss { color: #e6db74; } /* Literal.String.Symbol */
.highlight .bp { color: #f8f8f2; } /* Name.Builtin.Pseudo */
.highlight .vc { color: #f8f8f2; } /* Name.Variable.Class */
.highlight .vg { color: #f8f8f2; } /* Name.Variable.Global */
.highlight .vi { color: #f8f8f2; } /* Name.Variable.Instance */
.highlight .il { color: #ae81ff; } /* Literal.Number.Integer.Long */