/* Dark Mode Override for Minima Theme */

/* Global dark mode styles */
body {
  background-color: #1a1a1a !important;
  color: #e0e0e0 !important;
}

/* Header and navigation */
.site-header {
  background-color: #1a1a1a !important;
  border-top: 3px solid #4a9eff !important;
  border-bottom: 1px solid #333333 !important;
  padding: 1rem 0 !important;
}

.site-title, .site-title:visited {
  color: #e0e0e0 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.site-title:hover {
  color: #4a9eff !important;
  text-decoration: none !important;
}

.site-nav {
  background-color: transparent !important;
}

.site-nav .page-link {
  color: #b0b0b0 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  padding: 0.5rem 1rem !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
}

.site-nav .page-link:hover {
  color: #4a9eff !important;
  background-color: #2d2d2d !important;
  text-decoration: none !important;
}

/* Main content area */
.wrapper {
  background-color: #1a1a1a !important;
}

.post-content {
  color: #e0e0e0 !important;
}

/* Headings */
h2, h3, h4, h5, h6 
h1:not(:first-of-type) {
  color: #e0e0e0 !important;
  margin-bottom: 0.5rem !important;
  margin-top: 1.5rem !important;
}

h2, h3, h4, h5, h6,
h1:not(:first-of-type) {
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 1px solid #404040 !important;
  position: relative !important;
}

h2::after {
  content: '' !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background-color: #404040 !important;
}

/* Links */
a {
  color: #4a9eff !important;
}

a:visited {
  color: #6bb6ff !important;
}

a:hover {
  color: #6bb6ff !important;
}

/* Code blocks */
pre, code {
  background-color: #2d2d2d !important;
  color: #e0e0e0 !important;
  border: 1px solid #404040 !important;
}

.highlight {
  background-color: #2d2d2d !important;
  border: 1px solid #404040 !important;
}

/* Blockquotes */
blockquote {
  border-left: 4px solid #4a9eff !important;
  background-color: #2d2d2d !important;
  color: #b0b0b0 !important;
}

/* Tables */
table {
  background-color: #1a1a1a !important;
  border: 1px solid #404040 !important;
  border-collapse: collapse !important;
}

th, td {
  border: 1px solid #404040 !important;
  color: #e0e0e0 !important;
  padding: 0.75rem !important;
}

th {
  background-color: #2d2d2d !important;
  font-weight: 600 !important;
}

/* Alternating row colors - dark charcoal and dark grey */
tbody tr:nth-child(odd) {
  background-color: #1a1a1a !important;
}

tbody tr:nth-child(even) {
  background-color: #2d2d2d !important;
}

/* Hover effect for table rows */
tbody tr:hover {
  background-color: #333333 !important;
}

/* Horizontal rules */
hr {
  margin-top: 0.5rem !important;
  margin-bottom: 1.5rem !important;
  border-color: #404040 !important;
  background-color: #404040 !important;
}

/* Post navigation links */
.post_navi {
  display: flex;
  background-color: #2d2d2d !important;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
  border: 1px solid #404040 !important;
}

.post_navi-label {
  font-size: 0.8em;
  opacity: 0.7;
  color: #b0b0b0 !important;
}

.post_navi .post_navi-item {
  padding: 0 2.2em;
  width: 50%;
  position: relative;
  color: #e0e0e0 !important;
  transition: color 0.2s ease;
}

.post_navi .post_navi-item:hover {
  color: #4a9eff !important;
}

.post_navi .nav_prev {
  text-align: left;
}

.post_navi .nav_next {
  text-align: right;
}

.post_navi .nav_prev .post_navi-arrow {
  left: 0;
}

.post_navi .nav_next .post_navi-arrow {
  right: 0;
}

.post_navi .post_navi-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.5em;
  opacity: 0.5;
  color: #4a9eff !important;
  transition: opacity 0.2s ease;
}

.post_navi .post_navi-item:hover .post_navi-arrow {
  opacity: 0.8;
}

/* Footer */
.site-footer {
  background-color: #1a1a1a !important;
  border-top: 1px solid #333333 !important;
  color: #b0b0b0 !important;
  padding: 2rem 0 !important;
  margin-top: 3rem !important;
}

.footer-col-wrapper {
  color: #b0b0b0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2rem !important;
}

.footer-col {
  flex: 1 !important;
  min-width: 200px !important;
}

.footer-col h2 {
  color: #e0e0e0 !important;
  font-size: 1.1rem !important;
  margin-bottom: 1rem !important;
  font-weight: 600 !important;
}

.footer-col p {
  color: #b0b0b0 !important;
  line-height: 1.6 !important;
  margin-bottom: 0.5rem !important;
}

.footer-col .social-media-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-col .social-media-list li {
  margin-bottom: 0.5rem !important;
}

.footer-col .social-media-list a {
  color: #b0b0b0 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: color 0.2s ease !important;
}

.footer-col .social-media-list a:hover {
  color: #4a9eff !important;
}

/* RSS feed icon */
.feed-subscribe svg {
  fill: #4a9eff !important;
  width: 16px !important;
  height: 16px !important;
}

/* Post meta information */
.post-meta {
  color: #b0b0b0 !important;
  font-size: 0.9rem !important;
  margin-bottom: 1.5rem !important;
}

/* Post header styling */
.post-header {
  margin-bottom: 2rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid #333333 !important;
}

.post-title {
  color: #e0e0e0 !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.2 !important;
}

/* Archive page styling */
.archive {
  background-color: #1a1a1a !important;
}

.archive h1 {
  color: #e0e0e0 !important;
  margin-bottom: 2rem !important;
  font-weight: 600 !important;
}

/* Video responsiveness */
video {
  max-width: 100% !important;
  height: auto !important;
  width: 100% !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Make videos wider on larger screens */
@media (min-width: 768px) {
  video {
    max-width: 90% !important;
  }
}

@media (min-width: 1024px) {
  video {
    max-width: 80% !important;
  }
}

/* Override Jekyll wrapper constraints for videos */
.post-content video {
  max-width: 100% !important;
  width: 100% !important;
}

/* Pagination */
.pagination {
  background-color: #2d2d2d !important;
  border: 1px solid #404040 !important;
}

.pagination a, .pagination span {
  color: #e0e0e0 !important;
  border: 1px solid #404040 !important;
}

.pagination a:hover {
  background-color: #404040 !important;
  color: #4a9eff !important;
}