/* Shared responsive fixes for navbar and global spacing */

html, body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* Ensure nav sits above content on mobile */
.navbar {
  z-index: 60;
}

#mainNav {
  align-items: center;
}

/* show mobile nav when .open is present (important to override other rules) */
#mainNav.open {
  display: flex !important;
}

/* make nav links full-width on small screens */
@media (max-width: 900px) {
  #mainNav { flex-direction: column; gap: 8px; }
  #mainNav a { display: block; padding: 8px 12px; }
  .menu-toggle { display: block; }
  .page-wrapper { padding-top: 78px; }
}

/* slightly reduce base font-size on very small screens */
@media (max-width: 420px) {
  html { font-size: 14px; }
  .navbar .logo img { height: 40px; }
  .menu-toggle { font-size: 18px; padding: 6px 8px; }
}

/* Ensure content doesn't hide behind fixed navbar */
@media (min-width: 901px) {
  .page-wrapper { padding-top: 0; }
}

/* Form width improvements */
@media (max-width: 768px) {
  .form-container { padding: 0 12px; }
  .contact-form { padding: 16px; }
}

/* Hero and slides responsive tweaks */
.hero-right .slides img,
.slides img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

@media (max-width: 900px) {
  .hero { flex-direction: column; gap: 12px; }
  .hero-left, .hero-right { width: 100%; }
  .slides-container { height: 36vh; }
}

/* Footer columns stack on small screens */
.footer-cols {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .footer-cols { flex-direction: column; }
  .footer-col { margin-bottom: 18px; }
}

/* Modal image sizing */
.image-modal .modal-image {
  max-width: 92vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Mobile nav button and link sizing */
@media (max-width: 900px) {
  #mainNav .btn { display: block; width: 100%; text-align: center; padding: 10px 12px; border-radius: 6px; }
  #mainNav a { white-space: normal; }
}

/* Logo sizing safe limits */
.navbar .logo img { max-height: 88px; height: auto; width: auto; }
@media (max-width: 600px) { .navbar .logo img { max-height: 46px; } }

/* Ensure fixed navbar doesn't overlap page content */
.page-wrapper { padding-top: 0; }
@media (max-width: 900px) { .page-wrapper { padding-top: 76px; } }