/* ================================
   MOBILE OPTIMIZATIONS
   Ultra-compact styles for phones
   ================================ */

/* Force better mobile layout for very small screens */
@media (max-width: 575px) {
  /* Reset Bootstrap gutters for tighter layout */
  .g-4,
  .gx-4 {
    --bs-gutter-x: 0.65rem;
  }

  .g-4,
  .gy-4 {
    --bs-gutter-y: 0.65rem;
  }

  /* Compact containers - but NOT for navbar */
  .container:not(.navbar .container),
  .container-fluid:not(.navbar .container-fluid) {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
  }

  /* Compact rows - but NOT in navbar */
  .row:not(.navbar .row) {
    margin-left: -0.3rem;
    margin-right: -0.3rem;
  }

  .row:not(.navbar .row) > * {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }

  /* Better image handling */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  .img-fluid {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Override inline-styled images */
  img[style] {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
  }

  /* Override divs with inline styles */
  div[style*="max-width: 800px"],
  div[style*="width: 100%"][style*="margin"] {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  div[style*="height: 600px"] {
    height: 300px !important;
  }

  div[style*="height: 600px"] iframe {
    height: 300px !important;
  }

  /* iframes */
  iframe {
    max-width: 100% !important;
  }

  /* Compact margins */
  .mb-3 {
    margin-bottom: 0.75rem !important;
  }

  .mb-4 {
    margin-bottom: 1rem !important;
  }

  .mb-5 {
    margin-bottom: 1.5rem !important;
  }

  .mt-3 {
    margin-top: 0.75rem !important;
  }

  .mt-4 {
    margin-top: 1rem !important;
  }

  .mt-5 {
    margin-top: 1.5rem !important;
  }

  /* Compact padding */
  .p-3 {
    padding: 0.75rem !important;
  }

  .p-4 {
    padding: 1rem !important;
  }

  .p-5 {
    padding: 1.25rem !important;
  }

  /* Typography adjustments */
  .display-1 {
    font-size: 2.5rem !important;
  }

  .display-2 {
    font-size: 2.25rem !important;
  }

  .display-3 {
    font-size: 2rem !important;
  }

  .display-4 {
    font-size: 1.75rem !important;
  }

  .display-5 {
    font-size: 1.5rem !important;
  }

  .display-6 {
    font-size: 1.25rem !important;
  }

  /* Lead text */
  .lead {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  /* Button sizing */
  .btn-lg {
    padding: 0.75rem 1.25rem !important;
    font-size: 1rem !important;
  }

  /* Rounded corners - slightly smaller for mobile */
  .rounded {
    border-radius: 0.375rem !important;
  }

  .rounded-4 {
    border-radius: 0.5rem !important;
  }

  /* Shadow adjustments for mobile */
  .shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
  }

  /* Text alignment helpers */
  .text-center-mobile {
    text-align: center !important;
  }

  /* Reduce whitespace in sections */
  section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Compact lists */
  ul,
  ol {
    padding-left: 1.25rem;
  }

  li {
    margin-bottom: 0.4rem;
  }

  /* Better table responsiveness */
  table {
    font-size: 0.85rem;
  }

  th,
  td {
    padding: 0.5rem !important;
  }

  /* Form elements */
  .form-control,
  .form-select {
    font-size: 1rem;
    padding: 0.65rem 0.85rem;
  }

  /* Card spacing */
  .card {
    margin-bottom: 1rem;
  }

  .card-body {
    padding: 1rem;
  }

  /* Alert boxes */
  .alert {
    padding: 0.85rem;
    font-size: 0.9rem;
  }

  /* Badge sizing */
  .badge {
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
  }

  /* Modal adjustments */
  .modal-dialog {
    margin: 0.5rem;
  }

  .modal-content {
    border-radius: 0.5rem;
  }

  /* Accordion spacing */
  .accordion-button {
    padding: 0.85rem;
    font-size: 0.95rem;
  }

  .accordion-body {
    padding: 0.85rem;
  }

  /* Breadcrumb */
  .breadcrumb {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
  }

  /* Pagination */
  .pagination {
    font-size: 0.875rem;
  }

  .page-link {
    padding: 0.5rem 0.75rem;
  }

  /* Progress bars */
  .progress {
    height: 1.25rem;
  }

  /* Tooltips and popovers */
  .tooltip,
  .popover {
    font-size: 0.85rem;
  }
}

/* Extra small phones (< 375px) */
@media (max-width: 374px) {
  .container,
  .container-fluid {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .display-1,
  .display-2,
  .display-3,
  .display-4 {
    font-size: 1.75rem !important;
  }

  .display-5 {
    font-size: 1.4rem !important;
  }

  .hero-title {
    font-size: 1.6rem !important;
  }

  .section-title {
    font-size: 1.3rem !important;
  }

  .btn {
    font-size: 0.875rem !important;
    padding: 0.6rem 1rem !important;
  }
}

/* Landscape orientation fixes for phones */
@media (max-width: 767px) and (orientation: landscape) {
  .home-hero {
    min-height: auto !important;
    padding: 2rem 1rem !important;
  }

  .navbar {
    min-height: 48px !important;
    padding: 0.35rem 0.65rem !important;
  }

  .navbar img {
    width: 36px !important;
    height: 36px !important;
  }

  section {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}

/* Fix for iOS Safari viewport units */
@supports (-webkit-touch-callout: none) {
  .min-vh-100 {
    min-height: -webkit-fill-available;
  }
}

/* Prevent text from being too small */
@media (max-width: 575px) {
  body {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
}