/* blogs.css */

/* Global */
* { box-sizing: border-box; }

html, body {
  font-family: 'Helvetica', Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #ffffff;
}

/* Page wrapper */
.blog-page {
  min-height: 100vh; /* keep if you want footer to stick to bottom */
}

/* Heading + tagline at the top of the page */
main h1 {
  text-align: center;
  font-size: 2em;
  margin: 0 0 6px;
}

.tagline {
  font-size: 1em;
  color: #555;
  text-align: center;
  margin: 0 0 16px;
}

/* Content container */
.blog-container {
  width: 90%;
  max-width: 860px;             /* a bit wider for comfortable line length */
  margin: 30px auto;
  position: relative;
  background: #ffffff;
  box-shadow: 0 4px 8px rgba(0,0,0,.07);
  border-radius: 10px;
  padding: 24px;                /* slightly more breathing room */
  overflow: hidden;
}

.blog-content {
  display: flex;
  flex-direction: column;
  gap: 16px;                    /* space between content blocks */
}

/* Article text area */
.blog {
  font-size: 1rem;
  line-height: 1.75;            /* <-- main fix: comfy line spacing */
  text-align: left;
  /* removed: min-height: 100vh; (causes awkward whitespace) */
}

/* Headings inside the blog */
.blog h1,
.blog h2,
.blog h3,
.blog h4 {
  line-height: 1.25;
  margin: 1.25rem 0 .5rem;      /* vertical rhythm around headings */
  color: #222;
}

.blog h1 { font-size: 1.75rem; }
.blog h2 { font-size: 1.35rem; }
.blog h3 { font-size: 1.15rem; }
.blog h4 { font-size: 1.05rem; }

/* Paragraphs */
.blog p {
  margin: 0 0 1.5rem;             /* gap between paragraphs */
}

/* Lists */
.blog ul,
.blog ol {
  margin: 0 0 1rem 1.25rem;     /* bottom space + indent */
  padding: 0;
}

.blog li {
  margin: .4rem 0;              /* space between list items */
  line-height: 1.6;
}

/* Images / media boxes used in posts */
.blog .box {
  margin: 1rem 0;               /* space around each media box */
  padding: .5rem 0;
}

.blog img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: .5rem 0;
  border-radius: 6px;           /* optional: softer look */
}

/* Tables */
.blog table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.blog th,
.blog td {
  padding: .6rem .75rem;
  line-height: 1.5;
  vertical-align: top;
}

.blog thead th {
  border-bottom: 1px solid #ddd;
}

.blog tbody tr + tr td {
  border-top: 1px solid #f0f0f0;
}

/* Links */
.blog a {
  text-underline-offset: 2px;
}

/* Section heading used elsewhere on the page */
.blog-page h3 {
  font-weight: bold;
  text-align: center;
  font-size: 1.4rem;
  color: #333;
  margin: 30px 0 15px;
  line-height: 2;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .blog-container { padding: 18px; }
  .blog { font-size: .96rem; line-height: 1.7; }
  .blog h1 { font-size: 1.5rem; }
  .blog h2 { font-size: 1.2rem; }
  .blog h3 { font-size: 1.05rem; }
  .blog h4 { font-size: 1rem; }
}