/* Blog Styles - Inherits from main site */

/* Blog Container */
.blog-container {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-lg);
  min-height: 100vh;
}

/* Blog Header */
.blog-header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
  padding-top: 80px;
}

.blog-header h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-light);
  margin-bottom: var(--spacing-md);
}

.blog-header p {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
}

.posts-count {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-style: italic;
  margin-top: var(--spacing-sm);
}

/* Back to Home Link */
.back-link {
  display: inline-block;
  margin-bottom: var(--spacing-xl);
  color: var(--accent);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-fast);
}

.back-link:hover {
  color: var(--accent-secondary);
  transform: translateX(-4px);
}

.back-link::before {
  content: '← ';
  margin-right: var(--spacing-xs);
}

/* Language Switcher */
.language-switcher {
  text-align: right;
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.lang-switcher-current {
  font-weight: var(--font-weight-bold);
  color: var(--accent);
}

.lang-switcher-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.lang-switcher-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Posts Grid */
.posts-grid {
  display: grid;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
}

/* Post Card */
.post-card {
  background-color: var(--bg-secondary);
  padding: var(--spacing-xl);
  transition: all var(--transition-normal);
  border-left: 4px solid var(--accent);
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-left-color: var(--accent-secondary);
}

.post-card h2 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-sm);
}

.post-card h2 a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

.post-meta {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.post-date {
  font-style: italic;
}

.post-category {
  padding: 0.25rem 0.75rem;
  background-color: var(--accent-secondary);
  color: var(--white);
  font-size: var(--font-size-xs);
  border-radius: 2px;
  font-weight: var(--font-weight-medium);
}

.post-category a {
  color: var(--white);
  text-decoration: none;
}

.post-category a:hover {
  text-decoration: underline;
}

.post-tags {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.post-tag {
  padding: 0.25rem 0.75rem;
  background-color: var(--accent);
  color: var(--white);
  font-size: var(--font-size-xs);
  border-radius: 2px;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.post-tag:hover {
  background-color: var(--accent-secondary);
}

.post-excerpt {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
}

.read-more {
  display: inline-block;
  color: var(--accent);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-fast);
}

.read-more:hover {
  color: var(--accent-secondary);
  transform: translateX(4px);
}

.read-more::after {
  content: ' →';
}

/* Single Post */
.post-content {
  background-color: var(--bg-secondary);
  padding: var(--spacing-2xl);
  margin-bottom: var(--spacing-2xl);
}

.post-header {
  margin-bottom: var(--spacing-2xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 2px solid var(--accent);
}

.post-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-md);
  line-height: 1.2;
}

/* Markdown Content Styling */
.markdown-content {
  font-size: var(--font-size-lg);
  line-height: 1.8;
  color: var(--text-primary);
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  line-height: 1.3;
}

.markdown-content h1 {
  font-size: var(--font-size-3xl);
  border-bottom: 2px solid var(--accent);
  padding-bottom: var(--spacing-sm);
}

.markdown-content h2 {
  font-size: var(--font-size-2xl);
}

.markdown-content h3 {
  font-size: var(--font-size-xl);
}

.markdown-content p {
  margin-bottom: var(--spacing-md);
  color: var(--text-secondary);
}

.markdown-content a {
  color: var(--accent);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.markdown-content a:hover {
  color: var(--accent-secondary);
}

.markdown-content ul,
.markdown-content ol {
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-xl);
  color: var(--text-secondary);
}

.markdown-content li {
  margin-bottom: var(--spacing-xs);
}

.markdown-content code {
  background-color: var(--bg-primary);
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  color: var(--accent);
}

.markdown-content pre {
  background-color: var(--bg-primary);
  padding: var(--spacing-md);
  border-radius: 4px;
  overflow-x: auto;
  margin-bottom: var(--spacing-md);
  border-left: 4px solid var(--accent);
}

.markdown-content pre code {
  background-color: transparent;
  padding: 0;
  color: var(--text-primary);
}

.markdown-content blockquote {
  border-left: 4px solid var(--accent);
  padding-left: var(--spacing-md);
  margin: var(--spacing-md) 0;
  font-style: italic;
  color: var(--text-secondary);
}

.markdown-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: var(--spacing-lg) auto;
  border-radius: 4px;
}

.markdown-content hr {
  border: none;
  border-top: 2px solid var(--accent);
  margin: var(--spacing-xl) 0;
}

.markdown-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-md);
}

.markdown-content th,
.markdown-content td {
  padding: var(--spacing-sm);
  border: 1px solid var(--gray-medium);
  text-align: left;
}

.markdown-content th {
  background-color: var(--bg-primary);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

/* Responsive Design */
@media (max-width: 768px) {
  .blog-container {
    padding: var(--spacing-xl) var(--spacing-md);
  }

  .blog-header {
    padding-top: 60px;
  }

  .blog-header h1 {
    font-size: var(--font-size-3xl);
  }

  .post-card {
    padding: var(--spacing-md);
  }

  .post-content {
    padding: var(--spacing-md);
  }

  .post-title {
    font-size: var(--font-size-2xl);
  }

  .markdown-content {
    font-size: var(--font-size-base);
  }

  .markdown-content h1 {
    font-size: var(--font-size-2xl);
  }

  .markdown-content h2 {
    font-size: var(--font-size-xl);
  }

  .markdown-content h3 {
    font-size: var(--font-size-lg);
  }
}

/* Language Suggestion Banner */
.language-suggestion-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%);
  color: var(--white);
  padding: var(--spacing-md) var(--spacing-lg);
  box-shadow: var(--shadow-lg);
  z-index: 10000;
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
}

.language-suggestion-banner.visible {
  transform: translateY(0);
}

.language-banner-content {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.language-banner-message {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  flex: 1 1 auto;
}

.language-banner-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.lang-banner-btn {
  padding: 0.5rem 1rem;
  border: 2px solid var(--white);
  background: transparent;
  color: var(--white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  border-radius: 4px;
  white-space: nowrap;
}

.lang-banner-btn:hover {
  transform: translateY(-2px);
}

.lang-banner-primary {
  background: var(--white);
  color: var(--accent);
}

.lang-banner-primary:hover {
  background: var(--bg-primary);
  color: var(--accent-secondary);
}

.lang-banner-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

.language-banner-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: opacity var(--transition-fast);
  opacity: 0.8;
}

.language-banner-close:hover {
  opacity: 1;
}

/* Adjust body padding when banner is visible */
body:has(.language-suggestion-banner.visible) {
  padding-top: 80px;
}

@media (max-width: 768px) {
  .language-suggestion-banner {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .language-banner-content {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
  }

  .language-banner-message {
    font-size: var(--font-size-sm);
    padding-right: var(--spacing-lg);
  }

  .language-banner-actions {
    width: 100%;
  }

  .lang-banner-btn {
    flex: 1;
    text-align: center;
  }

  body:has(.language-suggestion-banner.visible) {
    padding-top: 120px;
  }
}

/* ============================================================================
   Syntax Highlighting - Prism.js Custom Theme
   ============================================================================ */

/* Code blocks container */
.markdown-content pre[class*="language-"] {
  position: relative; /* Fix for ::before positioning */
  background: var(--bg-primary);
  border: 1px solid var(--accent);
  border-left: 4px solid var(--accent);
  border-radius: 4px;
  padding: var(--spacing-md);
  margin: var(--spacing-lg) 0;
  overflow-x: auto;
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  box-shadow: var(--shadow-md);
}

/* Inline code */
.markdown-content code:not([class*="language-"]) {
  background: rgba(139, 69, 19, 0.1);
  color: var(--accent-secondary);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
}

/* Code block code element */
.markdown-content pre[class*="language-"] > code {
  background: transparent;
  color: var(--text-primary);
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* Token highlighting - Custom brown/green theme */

/* Comments */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #6a737d;
  font-style: italic;
}

/* HTL Comments */
.token.htl-comment {
  color: #6a737d;
  font-style: italic;
  background: rgba(106, 115, 125, 0.05);
}

/* Strings */
.token.string,
.token.attr-value {
  color: #22863a;
}

/* Numbers and booleans */
.token.number,
.token.boolean {
  color: #005cc5;
}

/* Keywords */
.token.keyword,
.token.operator {
  color: var(--accent-secondary);
  font-weight: bold;
}

/* Functions and method names */
.token.function,
.token.method {
  color: var(--accent);
  font-weight: 500;
}

/* Class names */
.token.class-name {
  color: #6f42c1;
  font-weight: 500;
}

/* Properties and variables */
.token.property,
.token.variable {
  color: #e36209;
}

/* Annotations (Java) */
.token.annotation,
.token.punctuation.definition.annotation {
  color: #6f42c1;
  font-weight: bold;
}

/* Tags (HTML/XML) */
.token.tag {
  color: var(--accent);
}

.token.tag .token.tag-name {
  color: var(--accent);
  font-weight: bold;
}

.token.tag .token.punctuation {
  color: #6a737d;
}

/* Attribute names */
.token.attr-name {
  color: #e36209;
  font-style: italic;
}

/* HTL-specific tokens */

/* HTL Expressions ${...} */
.token.htl-expression {
  background: rgba(34, 134, 58, 0.05);
  padding: 0 2px;
  border-radius: 2px;
}

.token.htl-expression .token.expression-delimiter {
  color: var(--accent);
  font-weight: bold;
}

/* HTL Block Statements (data-sly-*) */
.token.htl-attribute .token.namespace {
  color: #6f42c1;
  font-weight: bold;
}

.token.htl-attribute .token.block-statement {
  color: var(--accent);
  font-weight: bold;
}

.token.htl-attribute .token.identifier {
  color: #e36209;
  font-style: italic;
}

/* HTL Expression Options (@context, @format, etc) */
.token.options .token.attr-name {
  color: #005cc5;
  font-weight: bold;
}

/* <sly> element */
.token.sly-element .token.tag-name {
  color: #6f42c1;
  font-weight: bold;
  font-style: italic;
}

/* Punctuation */
.token.punctuation {
  color: #6a737d;
}

/* Selection highlight */
.markdown-content pre[class*="language-"]::selection,
.markdown-content pre[class*="language-"] ::selection {
  background: rgba(139, 69, 19, 0.2);
}

/* Scrollbar styling for code blocks */
.markdown-content pre[class*="language-"]::-webkit-scrollbar {
  height: 8px;
}

.markdown-content pre[class*="language-"]::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 4px;
}

.markdown-content pre[class*="language-"]::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

.markdown-content pre[class*="language-"]::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
}

/* Language label (optional enhancement) */
.markdown-content pre[class*="language-"]::before {
  content: attr(class);
  content: attr(class) / "";
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.2em 0.5em;
  font-size: 0.75em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: rgba(139, 69, 19, 0.1);
  border-bottom-left-radius: 4px;
  opacity: 0.7;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .markdown-content pre[class*="language-"] {
    padding: var(--spacing-sm);
    font-size: 0.85em;
    margin: var(--spacing-md) calc(var(--spacing-md) * -1);
    border-radius: 0;
    border-left-width: 3px;
  }
}