/* Mobile Typography Optimizations */

/* Base Typography for Mobile */
@media (max-width: 768px) {
  /* Ensure minimum readable font sizes */
  body {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  /* Headings - Mobile Optimized */
  h1 {
    font-size: 28px !important;
    line-height: 1.3 !important;
    margin-bottom: 16px !important;
  }

  h2 {
    font-size: 24px !important;
    line-height: 1.4 !important;
    margin-bottom: 14px !important;
  }

  h3 {
    font-size: 20px !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
  }

  h4 {
    font-size: 18px !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
  }

  h5, h6 {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-bottom: 8px !important;
  }

  /* Paragraph and Text */
  p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
  }

  /* Small text should still be readable */
  small, .text-sm {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* Extra small text minimum */
  .text-xs {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  /* Navigation Links */
  nav a {
    font-size: 16px !important;
    line-height: 1.5 !important;
    padding: 12px 16px !important;
  }

  /* Button Text */
  button, .btn, a[role="button"] {
    font-size: 16px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
  }

  /* Form Labels and Inputs */
  label {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-bottom: 8px !important;
    display: block !important;
  }

  input, textarea, select {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  /* Card Titles */
  .card-title, .service-title {
    font-size: 18px !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }

  /* Card Text */
  .card-text, .service-description {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  /* Price Text */
  .price, .pricing {
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
  }

  /* Testimonial Text */
  .testimonial-text {
    font-size: 16px !important;
    line-height: 1.6 !important;
    font-style: italic !important;
  }

  .testimonial-author {
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
  }

  /* Footer Text */
  footer {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  footer h3, footer h4 {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }

  /* Breadcrumb */
  .breadcrumb {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  /* Table Text */
  table {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  th {
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  td {
    font-size: 14px !important;
  }

  /* List Items */
  li {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 8px !important;
  }

  /* Ensure text contrast and readability */
  * {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
  }

  /* Prevent text from being too wide on mobile */
  .container, .max-w-7xl, .max-w-6xl {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Improve text spacing in cards */
  .card, .service-card {
    padding: 20px !important;
  }

  .card p:last-child {
    margin-bottom: 0 !important;
  }
}

/* iPhone SE and smaller screens */
@media (max-width: 375px) {
  h1 {
    font-size: 24px !important;
  }

  h2 {
    font-size: 20px !important;
  }

  h3 {
    font-size: 18px !important;
  }

  .container, .max-w-7xl, .max-w-6xl {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Improve readability for dark text on light backgrounds */
@media (max-width: 768px) {
  .text-gray-600, .text-gray-700, .text-gray-800 {
    color: #374151 !important;
  }

  .text-gray-500 {
    color: #6B7280 !important;
  }

  /* Remove problematic link styling that overrides design */
  /* Links will use their existing design styles instead */
}