/* 
 * GRPHARM Website Typography Optimization
 * This CSS file contains rules to optimize text layout and line breaks
 * for Chinese, English, and Japanese content.
 */

/* Global typography improvements */
p, h1, h2, h3, h4, h5, h6, li, a, span, div {
  /* Prevent text from overflowing its container */
  overflow-wrap: break-word;
  /* Improve text rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Chinese typography optimization */
html[lang="zh"] p, 
html[lang="zh"] h1, 
html[lang="zh"] h2, 
html[lang="zh"] h3, 
html[lang="zh"] li,
html[lang="zh"] .vote-intro p,
html[lang="zh"] .vote-item-content p,
html[lang="zh"] .vote-section-title p,
html[lang="zh"] .past-votes-title p,
html[lang="zh"] .coming-soon p,
html[lang="zh"] .about-section p,
html[lang="zh"] .contact-intro p {
  /* Prevent single Chinese characters from being isolated on a new line */
  word-break: keep-all;
  /* Improve text justification for Chinese */
  text-justify: inter-ideograph;
  /* Add appropriate letter spacing for Chinese */
  letter-spacing: 0.05em;
  /* Ensure balanced line height */
  line-height: 1.8;
}

/* English typography optimization */
html[lang="en"] p, 
html[lang="en"] h1, 
html[lang="en"] h2, 
html[lang="en"] h3, 
html[lang="en"] li,
html[lang="en"] .vote-intro p,
html[lang="en"] .vote-item-content p,
html[lang="en"] .vote-section-title p,
html[lang="en"] .past-votes-title p,
html[lang="en"] .coming-soon p,
html[lang="en"] .about-section p,
html[lang="en"] .contact-intro p {
  /* Enable automatic hyphenation for English text */
  hyphens: auto;
  /* Prevent awkward word breaks */
  word-wrap: normal;
  /* Improve text justification for English */
  text-justify: inter-word;
  /* Slightly increase letter spacing for better readability */
  letter-spacing: 0.01em;
  /* Ensure balanced line height */
  line-height: 1.7;
}

/* Japanese typography optimization */
html[lang="ja"] p, 
html[lang="ja"] h1, 
html[lang="ja"] h2, 
html[lang="ja"] h3, 
html[lang="ja"] li,
html[lang="ja"] .vote-intro p,
html[lang="ja"] .vote-item-content p,
html[lang="ja"] .vote-section-title p,
html[lang="ja"] .past-votes-title p,
html[lang="ja"] .coming-soon p,
html[lang="ja"] .about-section p,
html[lang="ja"] .contact-intro p {
  /* Prevent Japanese particles from being isolated on a new line */
  word-break: keep-all;
  /* Improve Japanese line breaking */
  line-break: strict;
  /* Adjust Japanese text justification */
  text-justify: inter-ideograph;
  /* Ensure balanced line height */
  line-height: 1.9;
}

/* Specific optimizations for hero sections */
.vote-hero h1,
.about-hero h1 {
  /* Prevent awkward line breaks in headings */
  display: inline-block;
  /* Ensure headings maintain their visual impact */
  max-width: 100%;
}

/* Specific optimizations for list items in about page */
.mission-list li span {
  /* Keep list item content visually connected to its marker */
  display: inline-block;
}

/* Responsive typography adjustments */
@media screen and (max-width: 767px) {
  /* Adjust line height for better mobile reading */
  p, h1, h2, h3, li {
    line-height: 1.6;
  }
  
  /* Reduce letter spacing on small screens */
  html[lang="zh"] p, html[lang="zh"] li {
    letter-spacing: 0.03em;
  }
  
  html[lang="en"] p, html[lang="en"] li {
    letter-spacing: 0;
  }
  
  /* Ensure text remains readable on small screens */
  .vote-item-content p,
  .vote-section-title p,
  .past-votes-title p,
  .coming-soon p,
  .about-section p,
  .contact-intro p {
    text-align: left;
  }
}

/* Specific fixes for common issues */
.vote-intro p,
.about-section p {
  /* Prevent orphaned words at the end of paragraphs */
  text-wrap: pretty;
}

/* Ensure buttons and interactive elements maintain proper text alignment */
.btn-vote, 
.btn-signup {
  white-space: nowrap;
}

/* Prevent text from being cut off in containers */
.vote-item-content,
.past-vote-content {
  overflow: hidden;
}