/* Responsive overrides for better readability on large screens */

/* Base font size adjustments */
@media (min-width: 1440px) {
  html {
    font-size: 16px !important;
  }
  
  .modern-content {
    max-width: 720px;
  }
}

@media (min-width: 1920px) {
  html {
    font-size: 17px !important;
  }
  
  .modern-content {
    max-width: 760px;
  }
}

@media (min-width: 2560px) {
  html {
    font-size: 18px !important;
  }
  
  .modern-content {
    max-width: 800px;
  }
}

/* Content width constraints for better readability */
@media (min-width: 1440px) {
  .blog-single-page {
    max-width: 720px;
    margin: 0 auto;
  }
  
  .blog-single-page h1 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
  }
  
  .blog-single-page h2 {
    font-size: 2rem;
    margin-top: 4rem;
    padding-top: 4rem;
  }
  
  .blog-single-page h3,
  .blog-single-page h4,
  .blog-single-page h5 {
    font-size: 1.5rem;
    margin-top: 3rem;
    margin-bottom: 2rem;
  }
  
  .blog-single-page p,
  .blog-single-page ol,
  .blog-single-page ul {
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }
  
  section.w-full {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

@media (min-width: 1920px) {
  .blog-single-page {
    max-width: 800px;
  }
  
  .blog-single-page h1 {
    font-size: 2.75rem;
  }
  
  .blog-single-page h2 {
    font-size: 2.25rem;
  }
  
  .blog-single-page h3,
  .blog-single-page h4,
  .blog-single-page h5 {
    font-size: 1.75rem;
  }
  
  .blog-single-page p,
  .blog-single-page ol,
  .blog-single-page ul {
    font-size: 1.25rem;
    line-height: 1.7;
  }
}

@media (min-width: 2560px) {
  .blog-single-page {
    max-width: 900px;
  }
  
  .blog-single-page h1 {
    font-size: 3rem;
  }
  
  .blog-single-page h2 {
    font-size: 2.5rem;
  }
  
  .blog-single-page h3,
  .blog-single-page h4,
  .blog-single-page h5 {
    font-size: 2rem;
  }
  
  .blog-single-page p,
  .blog-single-page ol,
  .blog-single-page ul {
    font-size: 1.375rem;
    line-height: 1.8;
  }
}

/* Fix header scaling on large screens */
@media (min-width: 1440px) {
  .fixed.bg-main-whitebg {
    padding: 1.25rem 2rem;
  }
  
  .w-25 {
    width: 100px;
  }
}