/* Mobile Navigation & Content Optimizations for Specialization Pages
   Ensures readable text (6-8 words per line) and functional hamburger navigation
   Targets: 375px x 812px and similar mobile viewports */

/* Tablet & Mobile Landscape (768px and below) */
@media (max-width: 768px) {
  .intro-section {
    padding: 40px 16px;
  }
  
  .intro-title {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.2 !important;
  }
  
  .intro-lead {
    font-size: 16px !important;
    padding: 0 8px;
  }
  
  /* Adjust main content wrapper for mobile */
  .main-content > div[style*="max-width"] {
    max-width: 100% !important;
    padding: 0 12px !important;
  }
  
  /* Reduce padding on content boxes for mobile */
  .content-card {
    padding: 20px 16px !important;
  }
  
  /* Opening statement box mobile optimization */
  .main-content > div > div[style*="linear-gradient"] {
    padding: 20px 16px !important;
    margin-bottom: 32px !important;
    border-radius: 12px !important;
  }
  
  .main-content > div > div[style*="linear-gradient"] p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  
  /* Adjust section headings for mobile */
  h2.section-heading {
    font-size: 22px !important;
    gap: 8px !important;
  }
  
  h2.section-heading span {
    font-size: 24px !important;
  }
  
  /* Content text sizing */
  .content-text,
  p[class*="content"] {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  
  /* Grid layouts on mobile - force single column */
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  /* Checklist items - stack vertically */
  div[style*="display: flex"][style*="align-items: start"] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  /* Number badges in lists */
  div[style*="border-radius: 50%"][style*="width: 48px"] {
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
  }
  
  /* Ensure hamburger menu is visible and clickable */
  .page-nav-sidebar {
    touch-action: manipulation !important;
  }
  
  .hamburger-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  
  .hamburger-btn span {
    font-size: 24px !important;
    line-height: 1 !important;
  }
}

/* Small Mobile Devices (480px and below) */
@media (max-width: 480px) {
  .intro-section {
    padding: 32px 12px;
  }
  
  .intro-title {
    font-size: 26px !important;
    margin-bottom: 16px !important;
  }
  
  .intro-lead {
    font-size: 15px !important;
  }
  
  .main-content > div[style*="max-width"] {
    padding: 0 8px !important;
  }
  
  .content-card {
    padding: 16px 12px !important;
  }
  
  .main-content > div > div[style*="linear-gradient"] {
    padding: 16px 12px !important;
    margin-bottom: 24px !important;
  }
  
  .main-content > div > div[style*="linear-gradient"] p {
    font-size: 15px !important;
  }
  
  h2.section-heading {
    font-size: 20px !important;
  }
  
  /* Better spacing for small screens */
  .content-grid {
    margin-top: 32px !important;
  }
  
  /* Hamburger positioning for very small screens */
  .page-nav-sidebar {
    left: 10px !important;
    top: 280px !important;
    width: 48px !important;
    height: 48px !important;
  }
}

/* iPhone SE and similar 375px devices */
@media (max-width: 375px) {
  .intro-title {
    font-size: 24px !important;
  }
  
  .intro-lead {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  
  .main-content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  
  h2.section-heading {
    font-size: 18px !important;
    flex-wrap: wrap !important;
  }
}