/* Custom styling to improve homepage layout */
/* Using high specificity to override theme styles */
/* Performance optimizations included */

/* Preload important fonts */
@font-face {
  font-family: 'Inter';
  font-display: swap;
}

/* Optimize images */
img {
  max-width: 100%;
  height: auto;
  loading: lazy;
}

/* Override the default container styling - make it left-aligned */
.container {
  text-align: left !important;
}

/* Override the content div that contains everything */
.container .content {
  align-items: flex-start !important;
  text-align: left !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  padding: 20px !important;
}

/* Style the main element */
.container .content main {
  width: 100% !important;
  max-width: 680px !important;
  text-align: left !important;
}

/* Content wrapper - specific to our custom template */
.container .content main .content-wrapper {
  max-width: 100% !important;
  text-align: left !important;
  padding: 0 !important;
}

/* Fix heading alignment but keep main title centered */
.container .content main > div > h1 {
  text-align: center !important;
  margin-bottom: 1em !important;
}

/* Keep social icons centered */
.container .content main > div > div:not(.content-wrapper) {
  text-align: center !important;
  margin-bottom: 2em !important;
}

/* Left-align all content inside content-wrapper */
.container .content main .content-wrapper h1,
.container .content main .content-wrapper h2,
.container .content main .content-wrapper h3,
.container .content main .content-wrapper h4,
.container .content main .content-wrapper h5,
.container .content main .content-wrapper h6 {
  text-align: left !important;
  margin-top: 1.5em !important;
  margin-bottom: 0.5em !important;
  display: block !important;
}

/* First heading doesn't need top margin */
.container .content main .content-wrapper h1:first-child,
.container .content main .content-wrapper h2:first-child,
.container .content main .content-wrapper h3:first-child {
  margin-top: 0 !important;
}

/* Left-align paragraphs */
.container .content main .content-wrapper p {
  text-align: left !important;
  margin-bottom: 1em !important;
}

/* Left-align lists */
.container .content main .content-wrapper ul,
.container .content main .content-wrapper ol {
  text-align: left !important;
  margin-left: 20px !important;
  padding-left: 0 !important;
}

/* Style links nicely */
.container .content main .content-wrapper a {
  color: #3eb0ef !important;
  text-decoration: none !important;
}

.container .content main .content-wrapper a:hover {
  text-decoration: underline !important;
}

/* Add some spacing between sections */
.container .content main .content-wrapper hr {
  margin: 2em 0 !important;
}

/* Mobile responsiveness */
@media (max-width: 684px) {
  .container .content {
    padding: 15px !important;
    max-width: 100% !important;
  }
  
  .container .content main .content-wrapper ul,
  .container .content main .content-wrapper ol {
    margin-left: 15px !important;
  }
}