/**
 * Mobile Optimization CSS
 * Fixes button sizes, font sizes, and touch targets for mobile devices
 */

/* ============================================
   MOBILE BUTTON SIZES (Touch-Friendly)
   ============================================ */

/* Ensure all buttons meet minimum touch target size (44px) */
@media (max-width: 768px) {
  button,
  .button,
  .btn,
  a.button,
  a.btn,
  input[type="submit"],
  input[type="button"],
  [role="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
  }

  /* CTA buttons should be even larger */
  .cta,
  .cta-button,
  .primary-button,
  button.primary {
    min-height: 48px !important;
    padding: 14px 24px !important;
    font-size: 18px !important;
  }

  /* Navigation buttons */
  nav button,
  nav a,
  .nav-link {
    min-height: 44px !important;
    padding: 12px 16px !important;
  }

  /* Form buttons */
  form button,
  form input[type="submit"],
  form input[type="button"] {
    min-height: 48px !important;
    width: 100% !important;
    margin-top: 16px !important;
  }
}

/* ============================================
   MOBILE FONT SIZES (Readable)
   ============================================ */

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

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

  /* Headings - scale appropriately */
  h1 {
    font-size: 32px !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
  }

  h2 {
    font-size: 28px !important;
    line-height: 1.3 !important;
    margin-bottom: 16px !important;
  }

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

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

  h5, h6 {
    font-size: 18px !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
  }

  /* Lists */
  ul, ol {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  li {
    margin-bottom: 8px !important;
  }

  /* Links */
  a {
    font-size: inherit !important;
    min-height: 44px !important;
    display: inline-block !important;
    padding: 4px 0 !important;
  }

  /* Form inputs */
  input,
  textarea,
  select {
    font-size: 16px !important;
    min-height: 44px !important;
    padding: 12px !important;
  }

  /* Labels */
  label {
    font-size: 16px !important;
    margin-bottom: 8px !important;
    display: block !important;
  }

  /* Small text - but not too small */
  small,
  .small-text {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}

/* ============================================
   TOUCH TARGET IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Increase spacing between interactive elements */
  button + button,
  .button + .button,
  a + a {
    margin-left: 12px !important;
  }

  /* Accordion/FAQ items */
  .accordion-button,
  .faq-question,
  [data-toggle="collapse"] {
    min-height: 48px !important;
    padding: 14px 16px !important;
    font-size: 16px !important;
  }

  /* Dropdown triggers */
  .dropdown-toggle,
  [data-toggle="dropdown"] {
    min-height: 44px !important;
    padding: 12px 16px !important;
  }

  /* Modal/dialog close buttons */
  .modal-close,
  .dialog-close,
  [aria-label*="close"] {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Checkbox and radio buttons */
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 24px !important;
    min-height: 24px !important;
    margin-right: 12px !important;
  }

  /* Checkbox/radio labels */
  input[type="checkbox"] + label,
  input[type="radio"] + label {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 8px 0 !important;
  }
}

/* ============================================
   PREVENT HORIZONTAL SCROLLING
   ============================================ */

@media (max-width: 768px) {
  body {
    overflow-x: hidden !important;
  }

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

  img,
  video,
  iframe {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Prevent text overflow */
  p, h1, h2, h3, h4, h5, h6, li {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Container max-width */
  .container,
  main,
  article {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ============================================
   FORM OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
  /* Stack form fields vertically */
  form {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Full-width form fields */
  form input,
  form textarea,
  form select {
    width: 100% !important;
    margin-bottom: 16px !important;
  }

  /* Form groups */
  .form-group,
  .input-group {
    margin-bottom: 20px !important;
  }

  /* Error messages */
  .error-message,
  .validation-error {
    font-size: 14px !important;
    margin-top: 4px !important;
    color: #d32f2f !important;
  }
}

/* ============================================
   NAVIGATION OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
  /* Mobile menu items */
  nav ul {
    flex-direction: column !important;
  }

  nav li {
    width: 100% !important;
    margin-bottom: 8px !important;
  }

  nav a {
    display: block !important;
    width: 100% !important;
    padding: 14px 16px !important;
  }

  /* Hamburger menu button */
  .menu-toggle,
  .hamburger {
    min-width: 48px !important;
    min-height: 48px !important;
  }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Focus indicators */
  button:focus,
  a:focus,
  input:focus,
  textarea:focus,
  select:focus {
    outline: 3px solid var(--brand-teal) !important;
    outline-offset: 2px !important;
  }

  /* Skip to content link */
  .skip-link {
    position: absolute !important;
    top: -40px !important;
    left: 0 !important;
    background: var(--brand-teal) !important;
    color: white !important;
    padding: 12px 16px !important;
    text-decoration: none !important;
    z-index: 100 !important;
  }

  .skip-link:focus {
    top: 0 !important;
  }
}

/* ============================================
   SPACING & LAYOUT
   ============================================ */

@media (max-width: 768px) {
  /* Increase spacing for better readability */
  section {
    padding: 32px 16px !important;
  }

  /* Card spacing */
  .card,
  .box,
  .panel {
    margin-bottom: 20px !important;
    padding: 20px !important;
  }

  /* Grid layouts - stack on mobile */
  .grid,
  .row {
    display: flex !important;
    flex-direction: column !important;
  }

  .col,
  .column {
    width: 100% !important;
    margin-bottom: 16px !important;
  }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
  /* Reduce animations on mobile */
  * {
    animation-duration: 0.2s !important;
    transition-duration: 0.2s !important;
  }

  /* Disable hover effects on touch devices */
  @media (hover: none) {
    *:hover {
      transform: none !important;
    }
  }
}