/* ==========================================================================
   Accessibility & Readability Improvements
   Applied to all project pages for better reading experience
   ========================================================================== */

/* ---- Improved Body Text ---- */
.text-body {
  font-size: 1.125rem;        /* 18px instead of 16px */
  line-height: 1.5;           /* Tighter line height for refined layout */
  color: var(--color-ink);    /* Darker for better contrast */
  max-width: 680px;           /* Comfortable line length (65-75 characters) */
}

/* ---- Improved Section Spacing ---- */
.section {
  margin-top: var(--space-12); /* 48px instead of 64px - less spaced out */
}

/* First section shouldn't have top margin */
.page .section:first-child {
  margin-top: 0;
}

/* ---- Improved Labels ---- */
.label {
  font-size: var(--text-sm);   /* 12px instead of 10px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;       /* Slightly tighter */
  color: var(--color-primary);
  margin-bottom: var(--space-4); /* More space below label */
  display: block;
}

/* ---- Improved Headings ---- */
h2.label {
  font-size: var(--text-sm);    /* Keep labels distinct from h2 */
  font-family: var(--font-body);
}

h3 {
  font-size: var(--text-xl);     /* 22px */
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

h4 {
  font-size: var(--text-lg);     /* 18px */
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}

/* ---- Improved Intro Text ---- */
.text-intro {
  font-family: var(--font-body);  /* Inter for better readability */
  font-size: var(--text-2xl);    /* 28px - larger, more impactful */
  font-weight: 700;
  line-height: 1.3;               /* Slightly tighter */
  color: var(--color-ink);
  max-width: 720px;               /* Wider for better flow */
}

/* ---- Improved Lists ---- */
ul, ol {
  font-size: 1.125rem;            /* Match body text */
  line-height: 1.5;               /* Match body text line height */
  color: var(--color-ink);
  max-width: 680px;
}

li {
  margin-bottom: var(--space-3);  /* Refined spacing between list items */
}

/* ---- Improved Figcaptions ---- */
figcaption {
  font-size: var(--text-sm);      /* 12px */
  line-height: 1.5;
  color: var(--color-ink-mid);
  margin-top: var(--space-3);
}

/* ---- Improved Card Backgrounds ---- */
.grid-2 > div,
.grid-3 > div {
  padding: var(--space-6);
  background: var(--color-cream-light);
  border-radius: var(--radius-lg);
}

.grid-2 > div p,
.grid-3 > div p {
  font-size: 1rem;                /* 16px for card text - slightly smaller than body */
  line-height: 1.5;               /* Tighter for refined layout */
  color: var(--color-ink);
}

/* ---- Improved Paragraph Spacing ---- */
p + p {
  margin-top: var(--space-4);     /* Tighter space between paragraphs */
}

/* ---- Case Study Header ---- */
.case-study-header {
  margin-bottom: var(--space-12); /* Less space before hero */
}

.case-study-meta {
  font-size: var(--text-sm);      /* 12px */
  color: var(--color-ink-mid);
  margin-bottom: var(--space-4);
}

/* ---- Improved Focus States (keyboard accessibility) ---- */
a:focus,
button:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---- Improved Link Contrast ---- */
a {
  color: var(--color-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* ---- Better Tag Spacing ---- */
.tag {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);      /* 12px */
  background: var(--color-cream);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  display: inline-block;
}

/* ---- Responsive Improvements ---- */
@media (max-width: 768px) {
  .text-body {
    font-size: 1rem;              /* 16px on mobile */
    line-height: 1.5;             /* Match desktop line height */
  }

  .text-intro {
    font-size: var(--text-xl);    /* 22px on mobile */
  }

  .section {
    margin-top: var(--space-10);  /* Less spacing on mobile */
  }

  ul, ol {
    font-size: 1rem;
  }
}