/* Touch Device UX Improvements */
/* Comprehensive fixes for mobile and tablet devices */

/* ===== UNIVERSAL TEXT WRAPPING FIXES ===== */

/* Apply proper text wrapping - move whole words to next line, don't split them */
* {
  word-wrap: normal;
  overflow-wrap: normal;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  hyphens: none;
  word-break: normal;
}

/* Specific text element improvements for better readability */
h1, h2, h3, h4, h5, h6 {
  word-break: normal;
  overflow-wrap: normal;
  line-break: auto;
  hyphens: none;
}

p, li, span, div {
  word-break: normal;
  overflow-wrap: normal;
  line-break: auto;
  hyphens: none;
}

/* Project names and titles - ensure proper text flow without word splitting */
.project-name,
.breadcrumb-current,
.text-bold,
.h1-style-heading,
.h2-style-heading,
.h3-style-heading,
.h4-style-heading,
.h5-style-heading {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* Rich text content - common in project descriptions */
.rich-text-block,
.rich-text-block *,
.w-richtext,
.w-richtext * {
  word-wrap: normal;
  overflow-wrap: normal;
  hyphens: none;
  word-break: normal;
}

/* ===== TOUCH TARGET SIZING ===== */

/* Apply minimum touch target sizes on touch devices */
@media (hover: none) {
  
  /* Buttons - ensure 44px minimum touch target */
  .button {
    min-height: 44px;
    min-width: 44px;
    padding: 14px 20px;
    font-size: 1.1rem;
    line-height: 1.2;
  }
  
  /* Navigation links */
  .nav-link-container {
    min-height: 44px;
    padding: 12px 16px;
  }
  
  .nav-link {
    min-height: 22px;
    line-height: 1.2;
  }
  
  /* Project navigation links */
  .project-nav-link {
    min-height: 44px;
    padding: 12px 16px;
    line-height: 1.3;
  }
  
  /* Footer links */
  .footer-link {
    min-height: 44px;
    padding: 12px 8px;
    line-height: 1.3;
  }
  
  /* Breadcrumb links */
  .breadcrumb-link {
    min-height: 30px;
    padding: 6px 8px;
    line-height: 1.3;
  }
  
  /* Social media icons */
  .social-icon-wrapper {
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
  }
  
  /* Project cards - ensure adequate touch area */
  .featured-project-wrapper {
    min-height: 200px;
  }
  
  /* Menu button */
  .menu-button {
    min-height: 44px;
    min-width: 44px;
    padding: 12px;
  }
}

/* ===== IMPROVED GRID LAYOUTS FOR MOBILE ===== */

/* Project info grid - single column on mobile for better readability */
@media (max-width: 767px) {
  .project-info-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    margin-top: 2rem !important;
  }
  
  /* Additional images grid - single column on small screens */
  .additional-images-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Two-column grid - stack on mobile */
  ._2-column-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* Very small screens - even more conservative layout */
@media (max-width: 479px) {
  .project-info-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-top: 1.5rem !important;
  }
  
  .additional-images-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
}

/* ===== IMPROVED FONT SIZE PROGRESSION ===== */

/* Better mobile typography - less dramatic size jumps */
@media (max-width: 767px) {
  h1 {
    font-size: 3.5rem !important;
    line-height: 1.1 !important;
  }
  
  h2 {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
  }
  
  h3 {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
  }
  
  .h4-style-heading {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  p, .text-medium {
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
  }
}

/* Very small screens - ensure readability */
@media (max-width: 479px) {
  h1 {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
  }
  
  h2 {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
  }
  
  h3 {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
  }
  
  .h4-style-heading {
    font-size: 1.3rem !important;
    line-height: 1.3 !important;
  }
  
  p, .text-medium {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }
  
  .text-small {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
  }
}

/* ===== IMPROVED CONTAINER PADDING AND SPACING ===== */

/* Better spacing on touch devices */
@media (hover: none) {
  
  /* Container padding - more generous on touch devices */
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  
  /* Section spacing - better vertical rhythm */
  .section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  
  .section.header {
    padding-top: 7rem;
    padding-bottom: 3rem;
  }
  
  /* Remove bottom padding from full-width sections */
  .section.full-width {
    padding-bottom: 0 !important;
  }
  
  /* Flex containers - better spacing */
  .flex-vertical-small {
    gap: 1.5rem;
  }
  
  .flex-vertical-medium {
    gap: 2rem;
  }
}

/* Small screens - more conservative spacing */
@media (max-width: 479px) {
  .container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  
  .section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  .section.header {
    padding-top: 5rem !important;
  }
  
  /* Remove bottom padding from full-width sections on contact page */
  .section.full-width {
    padding-bottom: 0 !important;
  }
}

/* ===== PROJECT-SPECIFIC IMPROVEMENTS ===== */

/* Project detail pages - better text layout */
.rich-text-block h3,
.rich-text-block h4 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  word-break: normal;
  hyphens: none;
}

.rich-text-block p {
  margin-bottom: 1.2rem;
  word-break: normal;
  line-height: 1.6;
  hyphens: none;
}

.rich-text-block ul li,
.rich-text-block ol li {
  margin-bottom: 0.8rem;
  word-break: normal;
  line-height: 1.5;
  hyphens: none;
}

/* Next project link - better touch target */
@media (hover: none) {
  .next-project-link {
    min-height: 60px;
    padding: 20px;
    line-height: 1.2;
    word-break: normal;
    hyphens: none;
  }
}

/* Image modal improvements for touch */
@media (hover: none) {
  .image-modal-close {
    min-width: 50px;
    min-height: 50px;
    font-size: 20px;
  }
  
  .image-modal-content {
    padding: 15px;
    max-width: 95vw;
    max-height: 95vh;
  }
}

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

/* Focus indicators for keyboard navigation */
@media (hover: none) {
  .button:focus,
  .nav-link-container:focus,
  .project-nav-link:focus,
  .footer-link:focus {
    outline: 3px solid var(--colors--accent-color);
    outline-offset: 2px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .project-circle-button {
    border: 2px solid currentColor;
  }
  
  .button {
    border: 2px solid currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}