/* Custom CSS for adding borders to all images and centering them */
.content img {
  border: 2px solid black !important;
  padding: 5px !important;
  margin: 10px auto !important;
  display: block !important;
  text-align: center !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Apply to all figures */
figure {
  text-align: center !important;
  margin: 10px auto !important;
}

figure img {
  border: 2px solid black !important;
  padding: 5px !important;
  margin: 10px auto !important;
  display: block !important;
  text-align: center !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Apply to tables */
table img {
  border: 2px solid black !important;
  padding: 5px !important;
  margin: 10px auto !important;
  display: block !important;
}

/* Hugo Learn theme specific selectors */
#body img {
  border: 2px solid black !important;
  padding: 5px !important;
  margin: 10px auto !important;
  display: block !important;
  text-align: center !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* More specific selectors for Hugo Learn theme */
.page-content img,
main img,
article img {
  border: 2px solid black !important;
  padding: 5px !important;
  margin: 10px auto !important;
  display: block !important;
  text-align: center !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Universal selector as fallback */
img {
  border: 2px solid black !important;
  padding: 5px !important;
  margin: 10px auto !important;
  display: block !important;
  text-align: center !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Image caption styling - for manual captions using em/italic text */
img + em,
em + img + em {
  display: block;
  font-style: italic;
  font-size: 0.9em;
  color: #666;
  text-align: center;
  margin: 5px 0 15px 0;
  padding: 8px 12px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  border-top: 2px solid #007bff;
}

/* Figure caption styling */
figcaption,
.image-caption {
  display: block;
  font-style: italic;
  font-size: 0.9em;
  color: #666;
  text-align: center;
  margin: 5px 0 15px 0;
  padding: 8px 12px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  border-top: 2px solid #007bff;
}

/* Additional centering rules for all contexts */
p img {
  margin: 10px auto !important;
  display: block !important;
}

/* Ensure parent containers allow centering */
.content p {
  text-align: center;
}

/* Fix for inline images that need to be centered */
.content p:has(img) {
  text-align: center !important;
}

/* Alternative approach for browsers that don't support :has() */
.content {
  text-align: center;
}

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6,
.content p:not(:has(img)), .content ul, .content ol, .content blockquote {
  text-align: left;
}

/* Fallback for older browsers */
.content p {
  text-align: left;
}

.content p img {
  margin: 10px auto !important;
  display: block !important;
}