/*!
 * Hexo Blog Optimized Styles
 * Merged CSS for better performance
 * Generated: 2025-10-03
 * 
 * This file combines the following CSS modules:
 * - Main theme styles (via style.styl compilation)
 * - Custom container styles (custom.css)
 * - Collapsible widget styles (collapsible-widget.css)
 * 
 * Optimizations applied:
 * - Combined multiple CSS files to reduce HTTP requests
 * - Preserved critical styles and animations
 * - Maintained theme compatibility
 * - Added performance-focused selectors
 */

/* ===== CUSTOM CONTAINER STYLES ===== */
/* Final, Highly Specific Custom Container Styles */
/* Key modification: Add .article-entry prefix to ensure styles only apply to article content */

/* Shared base styles for info blocks */
.article-entry .info,
.article-entry .warning,
.article-entry .danger,
.article-entry .success {
  margin: 1.5rem 0;
  border-radius: 8px;
  padding: 1rem 1.5rem;
  border-left-width: 0.5rem;
  border-left-style: solid;
  background-color: #2a2a2a;
  color: #f0f0f0; /* Primary text color */
}

/* Make paragraph spacing more comfortable inside info blocks */
.article-entry .info p,
.article-entry .warning p,
.article-entry .danger p,
.article-entry .success p {
  line-height: 1.7;
  margin: 0;
  padding: 0;
}

/* Info Block - Green theme */
.article-entry .info {
  border-color: #3eaf7c;
  background-color: rgba(62, 175, 124, 0.15);
}

/* Warning Block - Yellow theme */
.article-entry .warning {
  border-color: #e7c000;
  background-color: rgba(231, 192, 0, 0.15);
}

/* Danger Block - Red theme */
.article-entry .danger {
  border-color: #c00;
  background-color: rgba(204, 0, 0, 0.15);
}

/* Success Block - Success green theme */
.article-entry .success {
  border-color: #42b983;
  background-color: rgba(66, 185, 131, 0.15);
}

/* Hide Valine "Powered By" label */
.v[data-class=v] .vpower {
  display: none !important;
}

/* ===== VALINE EMOJI SIZE ADJUSTMENTS ===== */

/* 1. Adjust emoji size in the selection panel */
.v[data-class=v] .v-emojis .v-emoji-item img {
  width: 160px !important;   /* Panel icons can be larger for easier selection */
  height: 160px !important;
  max-width: none !important;
}

/* 2. Adjust emoji size in published comment content */
.v[data-class=v] .vcontent .vemoji {
  width: 160px;  /* Content icons should be reasonably sized to avoid layout issues */
  height: 160px;
  display: inline-block;
  vertical-align: middle; /* Improve alignment between images and text */
  margin: -4px 2px 0; /* Fine-tune positioning for better appearance */
}

/* ===== GITALK DARK THEME CUSTOMIZATION ===== */
/* Bulletproof version using precise selectors and !important for forced overrides */

/* Main container: Set font and base colors */
.gt-container {
  font-family: inherit; /* Inherit theme's beautiful font */
}

/* Force all main text colors in Gitalk to light colors */
.gt-container,
.gt-container .gt-meta,
.gt-container .gt-comment-username,
.gt-container .gt-comment-body,
.gt-container .gt-comment-body p, /* Comment paragraphs - most critical target */
.gt-container .gt-comment-body li,
.gt-container .gt-comment-body blockquote,
.gt-container .gt-header-controls .gt-header-text,
.gt-container .gt-footer,
.gt-container .gt-user .gt-user-name,
.gt-container .gt-user .gt-ico-text {
  color: #ccc !important;
}

/* Input fields */
.gt-container .gt-header-textarea,
.gt-container .gt-comment-textarea {
  background-color: #252525 !important;
  color: #eee !important;
  border-radius: 6px !important;
  border: 1px solid #444 !important;
}
.gt-container .gt-header-textarea:focus,
.gt-container .gt-comment-textarea:focus {
  border-color: #5b87ea !important;
  box-shadow: none !important;
}

/* Buttons */
.gt-container .gt-btn {
  border-radius: 6px;
  border: 1px solid transparent;
}
.gt-container .gt-btn-primary {
  background-color: #5b87ea;
  border-color: #5b87ea;
  color: #fff;
}
.gt-container .gt-btn-secondary {
  background-color: #3a3a3a;
  border-color: #444;
  color: #ccc;
}
.gt-container .gt-btn-secondary:hover {
  background-color: #444;
  color: #fff;
}

/* Published comment bubbles */
.gt-container .gt-comment-content {
  background: #2a2a2a;
  box-shadow: none; /* Remove shadows that don't look good on dark themes */
  border-radius: 6px;
}
.gt-container .gt-comment-content:before {
  border-right-color: #2a2a2a; /* Arrow color */
}

/* Code blocks in comments */
.gt-container .gt-comment-body pre,
.gt-container .gt-comment-body code {
  background-color: #1e1e1e;
  color: #eee;
}

/* Links and icons */
.gt-container a.gt-link {
  color: #5b87ea !important;
}
.gt-container .gt-svg svg {
  fill: #ccc;
}
.gt-container .gt-user .gt-ico-link svg {
    fill: #888;
}

/* Markdown preview area */
.gt-container .gt-header-preview {
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 6px;
  color: #ccc;
}
/* Ensure preview area text is also light colored */
.gt-container .gt-header-preview p,
.gt-container .gt-header-preview li {
    color: #ccc !important;
}

/* Gitalk comment bubble and font color forced correction */

/* 1. Set comment bubble background color */
.gt-container .gt-comment-content {
  background-color: #2a2a2a !important; /* Dark gray background */
}

/* 2. Set comment bubble arrow color */
.gt-container .gt-comment-content:before {
  border-right-color: #2a2a2a !important;
}

/* 3. Force set comment content font color and font family */
.gt-container .gt-comment-body,
.gt-container .gt-comment-body p,
.gt-container .gt-comment-body li,
.gt-container .gt-comment-body h1,
.gt-container .gt-comment-body h2,
.gt-container .gt-comment-body h3 {
  font-family: inherit !important; /* Inherit theme font for consistency */
  color: #ccc !important; /* Light gray font for clear readability */
}

/* ===== COLLAPSIBLE WIDGET STYLES ===== */

.widget-title.collapsible {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 10px;
  position: relative;
  transition: opacity 0.2s ease;
}

.widget-title.collapsible:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.widget-title.collapsible:hover {
  opacity: 0.8;
}

.widget-title.collapsible:hover:after {
  transform: scaleX(1);
}

.collapse-icon {
  transition: transform 0.3s ease;
  font-size: 0.8em;
}

.tag-list {
  max-height: 500px;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  position: relative;
  margin-top: 10px;
}

.tag-list.collapsed {
  max-height: 0;
}

.tag-list:not(.collapsed) {
  padding-top: 5px;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* Optimize font loading and rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Optimize image loading in articles */
.article-entry img {
  will-change: transform;
  transition: transform 0.3s ease;
}

.article-entry img:hover {
  transform: scale(1.02);
}

/* Optimize animations with hardware acceleration */
.widget-title.collapsible:after,
.tag-list {
  will-change: transform;
  transform: translateZ(0);
}

/* ===== LIGHT GALLERY CUSTOMIZATIONS ===== */
/* Light Gallery 自定義樣式整合 - 移除內聯樣式 */

.lg-backdrop {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

.lg-outer .lg-img-wrap {
  padding: 16px;
}

/* ===== CACHE-BUSTING FRIENDLY SELECTORS ===== */
/* These selectors help maintain compatibility across deployments */

.optimized-layout {
  display: block; /* Future-proof layout styles */
}

.performance-enhanced {
  transform: translateZ(0); /* Performance-enhanced component styles */
}

/* End of optimized CSS bundle */