/* Temporary CSS for image display */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Add basic styling for blog images */
.blog-image {
  margin: 1rem 0;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Mobile responsiveness fixes */
@media (max-width: 640px) {
  /* Remove side padding on very small screens */
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Ensure full width on mobile */
  body {
    overflow-x: hidden;
  }
  
  /* Adjust header padding for mobile */
  header nav {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Adjust main content padding */
  main {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Adjust footer padding */
  footer > div {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Center main content on mobile */
  .grid {
    justify-items: center;
  }
  
  /* Center tool cards on mobile */
  .grid > a,
  .grid > div {
    margin: 0 auto;
    max-width: 100%;
  }
  
  /* Center text content in cards */
  .grid .p-6 {
    text-align: center;
  }
  
  /* Center icons in cards */
  .grid .w-16.h-16 {
    margin: 0 auto 1rem auto;
  }
  
  /* Center titles and descriptions */
  .grid h3,
  .grid p {
    text-align: center;
  }
  
  /* Center about section content */
  section .text-center {
    text-align: center !important;
  }
  
  /* Center hero section content */
  .hero-section,
  .hero-section > div,
  .hero-section h1,
  .hero-section p {
    text-align: center !important;
  }
  
  /* Center footer content on mobile */
  footer .grid {
    text-align: center;
  }
  
  footer .grid > div {
    text-align: center;
  }
  
  footer .grid h3 {
    text-align: center;
  }
  
  footer .grid ul {
    text-align: center;
  }
  
  footer .grid .flex {
    justify-content: center;
  }
  
  /* Ensure AdSense containers don't overflow */
  .adsbygoogle {
    max-width: 100% !important;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  header nav {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  main {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  footer > div {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  /* Ensure all content remains centered on extra small screens */
  .grid {
    justify-items: center;
  }
  
  .grid > a,
  .grid > div {
    margin: 0 auto;
  }
  
  .grid .p-6 {
    text-align: center;
  }
  
  footer .grid {
    text-align: center;
  }
  
  footer .grid > div {
    text-align: center;
  }
}