/**
 * Typography System
 * 
 * Comprehensive typography implementation for optimal reading experience
 */

/* Responsive Type Scale using clamp() */
:root {
  /* Base type scale (1.333 ratio - perfect fourth) */
  --step-0: clamp(0.9rem, 0.84rem + 0.3vw, 1.125rem);   /* body: 14.4px → 18px */
  --step-1: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);      /* h4: 19.2px → 24px */
  --step-2: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);       /* h3: 25.6px → 32px */
  --step-3: clamp(1.75rem, 1.6rem + 0.8vw, 2.25rem);       /* h2: 33.6px → 44px */
  --step-4: clamp(2.25rem, 2rem + 1.1vw, 3rem);      /* h1: 44.8px → 57.6px */
  
  /* Updated font families */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-secondary: 'Playfair Display', Georgia, serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  
  /* Line heights */
  --line-height-heading: 1.2;
  --line-height-body: 1.6;
  --line-height-tight: 1.25;
  --line-height-relaxed: 1.75;
  
  /* Letter spacing */
  --letter-spacing-heading: -0.02em;
  --letter-spacing-body: 0;
  --letter-spacing-caps: 0.05em;
  
  /* Content width */
  --content-width: 75ch;
  --content-width-narrow: 65ch;
  --content-width-wide: 90ch;
}

/* Base body styles */
body {
  font-family: var(--font-primary);
  font-size: var(--step-0);
  line-height: var(--line-height-body);
  color: #111927;
  background-color: #ffffff;
  font-feature-settings: 'liga' 1, 'calt' 1, 'kern' 1;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  hyphens: auto;
}

/* Content width constraints */
.content-wrapper,
.text-content,
.node__content,
.field--name-body {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

/* Headings with modular scale */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-secondary);
  font-weight: 700;
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: #111927;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  scroll-margin-top: 6rem; /* Account for sticky header */
}

h1, .h1 {
  font-size: var(--step-4);
  margin-top: 0;
}

h2, .h2 {
  font-size: var(--step-3);
}

h3, .h3 {
  font-size: var(--step-2);
}

h4, .h4 {
  font-size: var(--step-1);
}

h5, .h5 {
  font-size: var(--step-0);
  font-weight: 600;
}

h6, .h6 {
  font-size: var(--step-0);
  font-weight: 600;
  color: #6b7280;
}

/* Paragraphs with optimal spacing */
p {
  margin-block: 0 1rem;
  widows: 2;
  orphans: 2;
}

p + p {
  margin-top: 1rem;
}

/* Lead paragraph */
.lead,
.field--name-body > p:first-of-type {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  line-height: var(--line-height-relaxed);
  color: #374151;
  margin-bottom: 1.5rem;
}

/* Links with improved accessibility */
a {
  color: #008c95;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

a:hover,
a:focus {
  color: #006a71;
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid #008c95;
  outline-offset: 2px;
  text-decoration: none;
}

/* Lists with better readability */
ul, ol {
  margin-block: 0.75rem 1.25rem;
  padding-inline-start: 1.1em;
}

ul li,
ol li {
  margin-bottom: 0.5rem;
  text-indent: -0.3em;
  padding-left: 0.3em;
}

/* Ordered lists for membership criteria */
ol.membership-list,
.field--name-body ol {
  list-style-position: inside;
  counter-reset: item;
}

ol.membership-list li,
.field--name-body ol li {
  counter-increment: item;
  list-style: none;
  position: relative;
  padding-left: 2rem;
  text-indent: 0;
}

ol.membership-list li::before,
.field--name-body ol li::before {
  content: counter(item) '.';
  position: absolute;
  left: 0;
  font-weight: 600;
  color: #008c95;
}

/* Blockquotes */
blockquote {
  margin: 2rem 0;
  padding: 1.5rem 2rem;
  border-left: 4px solid #008c95;
  background-color: #f3f4f6;
  font-size: 1.125rem;
  font-style: italic;
}

blockquote cite {
  display: block;
  margin-top: 1rem;
  font-size: 0.875rem;
  font-style: normal;
  color: #6b7280;
}

blockquote cite::before {
  content: '— ';
}

/* Tables with numeric alignment */
table {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Code blocks */
code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background-color: #f3f4f6;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}

pre {
  display: block;
  margin: 1.5rem 0;
  padding: 1.5rem;
  background-color: #1f2937;
  color: #e5e7eb;
  border-radius: 0.5rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.7;
}

pre code {
  padding: 0;
  background-color: transparent;
  color: inherit;
  font-size: inherit;
}

/* Horizontal rules */
hr {
  margin: 3rem 0;
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, #d1d5db, transparent);
}

/* Metadata and small text */
.text-meta,
.submitted,
.node__submitted,
time,
.author {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 400;
}

/* Utility classes */
.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

/* Prevent widows in headings */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}