/* Global responsive enhancements */
/* Apply top padding only when fixed main navbar is present */
body.has-fixed-navbar { padding-top: 4rem; }

/* Utility classes */
.responsive-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.hide-mobile { display: block; }
.show-mobile { display: none; }
@media (max-width: 640px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
}

/* Ensure images scale within containers */
img { max-width: 100%; height: auto; }

/* Responsive table wrapper (if tables added later) */
.table-wrapper { width: 100%; overflow-x: auto; }
.table-wrapper table { width: 100%; border-collapse: collapse; }

/* Modal responsiveness */
.modal-body { max-height: calc(100vh - 8rem); overflow-y: auto; }

/* Touch target improvements */
.tap-target { min-height: 44px; display: flex; align-items: center; }

/* Form adjustments */
@media (max-width: 640px) {
  form .form-row, form .form-group { width: 100%; display: block; }
  input[type=text], input[type=email], input[type=tel], select, textarea { width: 100%; }
}

/* Prevent horizontal scroll from long words in descriptions */
.break-words { word-break: break-word; overflow-wrap: anywhere; }

/* Container utility if not using Tailwind on some pages */
.container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { .container { max-width: 640px; } }
@media (min-width: 768px) { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }

/* Animation helper for menu transitions */
.fade-in { animation: fade-in 0.2s ease-in-out; }
@keyframes fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }