/* ===== MOBILE ENHANCEMENTS ONLY ===== */

/* Responsive images */
#main img {
  max-width: 100%;
  height: auto;
}
.responsive-img {
  width: 50%;
  max-width: 100%;
  height: auto;
}

/* Make tables scrollable */
table {
  width: 100%;
}

.table-wrapper {
  overflow-x: auto;
}

/* Improve spacing on small screens */
@media (max-width: 768px) {

  #nav ul {
    flex-direction: column;
  }

  #nav ul li {
    margin: 10px 0;
  }

  .container {
    padding: 20px;
  }

}
@media screen and (max-width: 736px) {

  #main {
    padding: 1.5em;   }

  #main h2 {
    font-size: 1.4em;   }

  #main h3 {
    font-size: 1.1em;   }
  table {
    display: block;
    overflow-x: auto;   }
}

/* ===== Content + image sizing helpers (additive) ===== */

#main h2 { margin: 0 0 0.6em 0; }
#main h3 { margin: 1.2em 0 0.4em 0; }
#main h4 { margin: 1.0em 0 0.4em 0; }

.section-gap { margin: 2em 0; }

.img-center { display: block; margin: 1em auto; }

.img-hero { width: 100%; max-width: 700px; }
.img-feature { width: 100%; max-width: 500px; }
.img-small { width: 100%; max-width: 240px; }

.cta {
  display: inline-block;
  margin: 0.6em 0;
  padding: 0.65em 1em;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.15);
}

@media screen and (max-width: 736px) {
  .img-hero, .img-feature, .img-small { max-width: 100%; }
  .section-gap { margin: 1.2em 0; }
}