/* ==========================================================================
   MOBILE RESPONSIVENESS FIXES
   ========================================================================== */
/* Fix for Utterances Comments Widget on Mobile */
@media (max-width: 767px) {
  .utterances-container {
    margin-left: 0; /* Remove fixed left margin on mobile */
    max-width: 100%; /* Make it full width */
    box-shadow: none; /* Remove shadow on mobile */
  }
  /* Comments widget iframe adjustment */
  .utterances {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Adjust heading sizes on mobile */
  h1, .page__title {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }
  h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  h3 {
    font-size: 1.3rem !important;
  }
  /* Improve page hero text readability on mobile */
  .page__hero--overlay {
    height: auto !important;
    min-height: 250px !important;
  }
  .page__hero--overlay .page__title {
    font-size: 2rem !important;
    margin-top: 0.5em !important;
    margin-bottom: 0.5em !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .page__hero--overlay .page__excerpt, .page__hero--overlay .page__lead {
    font-size: 1rem !important;
    max-width: 100% !important;
  }
  /* Fix for JOIN THE DISCUSSION button on mobile */
  .page__comments-form {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* Tablet specific fixes */
@media (min-width: 768px) and (max-width: 1024px) {
  .utterances-container {
    margin-left: 0;
    max-width: 100%;
  }
  /* Adjust heading sizes on tablet */
  .page__hero--overlay .page__title {
    font-size: 2.8rem !important;
  }
}
/* ==========================================================================
   RESPONSIVE TITLE STYLING FOR ALL DEVICE SIZES
   ========================================================================== */
/* Base styles for the blog title */
.blog-title, .page__title, .site-title {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* No-break utility classes */
.nowrap,
.no-break,
.no-break-hyphen {
  white-space: nowrap;
}

/* Mobile Phones (up to 480px) */
@media (max-width: 480px) {
  .blog-title, .page__title, .site-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.2em;
    line-height: 1.2;
    padding: 0.4em 0.8em;
    font-size: 1.5rem !important;
  }
  .page__hero--overlay .page__title {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
  }
}
/* Large Phones and Small Tablets (481px to 767px) */
@media (min-width: 481px) and (max-width: 767px) {
  .blog-title, .page__title, .site-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.3em;
    line-height: 1.3;
    padding: 0.5em 1em;
    font-size: 1.8rem !important;
  }
  .page__hero--overlay .page__title {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  .blog-title .nowrap,
  .blog-title .no-break,
  .blog-title .no-break-hyphen,
  .page__title .nowrap,
  .page__title .no-break,
  .page__title .no-break-hyphen {
    white-space: nowrap;
    overflow-wrap: break-word;
    max-width: 100%;
    font-size: 1em !important;
  }
}
/* Tablets and Small Laptops (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .blog-title, .page__title, .site-title {
    text-align: center;
    line-height: 1.4;
    padding: 0.5em 1em;
    font-size: 2.2rem !important;
  }
  .page__hero--overlay .page__title {
    font-size: 2.5rem !important;
    line-height: 1.3 !important;
  }
  .blog-title .nowrap,
  .blog-title .no-break,
  .blog-title .no-break-hyphen,
  .page__title .nowrap,
  .page__title .no-break,
  .page__title .no-break-hyphen {
    white-space: nowrap;
    font-size: inherit !important;
  }
}
/* Larger Screens (above 1024px) */
@media (min-width: 1025px) {
  .blog-title, .page__title, .site-title {
    line-height: 1.5;
  }
  .blog-title .nowrap,
  .blog-title .no-break,
  .blog-title .no-break-hyphen,
  .page__title .nowrap,
  .page__title .no-break,
  .page__title .no-break-hyphen {
    white-space: nowrap;
  }
}
/* Fix for nested selectors in the original CSS that might cause issues */
.page__hero--overlay .page__title span,
.page__hero--overlay .page__title .no-break {
  font-size: inherit !important;
}

/* Fix to ensure titles don't overflow their containers on any device */
@media (max-width: 1024px) {
  h1, .h1, .blog-title, .page__title, .site-title {
    max-width: 100%;
    overflow-wrap: break-word;
  }
}

/*# sourceMappingURL=main-mobiles.css.map */