/* Optimized for iPhone and smaller mobile screens */
.grid-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 10px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.grid-item:empty,
.grid-container > div:empty {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

div[class*="control"],
div[class*="nav"],
div[class*="slide"],
.nav-controls,
.slideshow-controls {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 9999 !important;
}

.grid-item {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.grid-item img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

.grid-item h3 {
  display: block !important;
  width: 100% !important;
  margin: -20px 0 0 0 !important;
  text-align: justify !important;
  font-size: 1rem !important;
  line-height: 1.3 !important;
}

/* =========================================================
   FIX MOBILE 400PX OVERFLOW (Index Page Image)
   ========================================================= */
   
   
   
p:has(> img), div:has(> img), figure:has(> img), .wp-block-image {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

p img, div img, figure img, .wp-block-image img {
  display: inline-block !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#subtitle {
  display: inline-block !important;
  width: auto !important;
  font-size: 0.85rem !important;
  color: #A30808 !important;
  margin-top: 4px !important;
  margin-bottom: 12px !important;
  white-space: nowrap !important;
  font-style: italic !important;
  text-align: right !important;
}




/* 1. Keep the wrapper full-width to hold the image container */
#mainContent .image-wrapper {
  width: 100%;
  box-sizing: border-box;
}

/* 2. Target ONLY your small image, shrinking it to 75% */
#mainContent img.small-image,
main #mainContent img.small-image {
  width: 75% !important;
  max-width: 75% !important;
  height: auto !important;
  display: block;
  margin: 40px auto 0 auto !important; /* Adds 20px of space at the top */
  box-sizing: border-box;
}



#mainContent, #mainWrapper, .grid-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* For Chrome, Edge, and Safari */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #222; /* Matches a darker theme; change as needed */
}

::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #777;
}

/* For Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #D65A5A;
}

#mainContent p, 
#mainContent .text-column {
  max-width: 85% !important; /* Reduces the width slightly from the full container */
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Restores spacing and line height for Markdown paragraphs on mobile */
#mainContent p, 
.markdown-content p, 
main p {
  margin-bottom: 1.2rem !important;
  line-height: 1.6 !important;
}

/* Hide desktop scrollbar buttons on mobile index page */
button.scrollbar-arrow-btn,
.scrollbar-top-btn {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}