/* Mobile-Friendly Enhancements for Blog */

/* Ensure images are responsive */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Improve text readability on mobile */
@media (max-width: 768px) {
  body {
    font-size: 16px;
    line-height: 1.6;
  }
  
  /* Ensure code blocks don't overflow */
  pre, code {
    overflow-x: auto;
    word-wrap: break-word;
    white-space: pre-wrap;
  }
  
  /* Make tables scrollable on mobile */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Improve form input sizing for mobile */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea {
    font-size: 16px; /* Prevents zoom on iOS */
    -webkit-appearance: none;
    border-radius: 4px;
  }
  
  /* Better spacing for post content */
  .post-content {
    padding: 0 10px;
  }
  
  /* Improve link tap targets */
  a {
    display: inline-block;
    padding: 4px 2px;
    min-height: 36px;
    line-height: 1.4;
  }
  
  /* Make navigation more mobile-friendly */
  .site-nav {
    text-align: left;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 16px; /* Keep at 16px minimum to prevent auto-zoom on iOS */
  }
  
  h1 {
    font-size: 1.8em;
  }
  
  h2 {
    font-size: 1.5em;
  }
  
  h3 {
    font-size: 1.3em;
  }
  
  /* Reduce padding on small screens */
  .wrapper {
    padding-right: 15px;
    padding-left: 15px;
  }
}

/* Touch-friendly buttons */
button, .btn, input[type="submit"] {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}

/* Improve horizontal scrolling for code */
pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Ensure embedded content is responsive */
iframe, embed, object, video {
  max-width: 100%;
  height: auto;
}