/**
 * ProRank Design System - Typography
 * 
 * Consistent text styles and hierarchy.
 * All text elements should use these base styles.
 * 
 * @module core/typography
 * @since 3.0.0
 */

/* ============================================
   HEADING HIERARCHY
   Consistent heading styles across all pages
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  color: var(--prorank-text);
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0;
}

h1 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
}

h2 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 12px;
}

h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
}

h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

h5 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

h6 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

/* ============================================
   TEXT COMPONENTS
   Reusable text styles for common patterns
   ============================================ */

.prorank-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--prorank-text);
  margin: 0 0 8px;
}

.prorank-subtitle {
  font-size: 16px;
  color: var(--prorank-text-secondary);
  margin: 0;
}

.prorank-description {
  color: var(--prorank-text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.prorank-caption {
  font-size: 12px;
  color: var(--prorank-text-tertiary);
  line-height: 1.4;
}

.prorank-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--prorank-text);
  margin-bottom: 4px;
  display: block;
}

/* ============================================
   BODY TEXT
   Base paragraph and inline text styles
   ============================================ */

p {
  line-height: 1.6;
  margin: 0 0 16px;
  color: var(--prorank-text);
}

p:last-child {
  margin-bottom: 0;
}

strong, b {
  font-weight: 600;
  color: var(--prorank-text);
}

em, i {
  font-style: italic;
}

small {
  font-size: 0.875em;
  color: var(--prorank-text-secondary);
}

/* ============================================
   LINKS
   Consistent link styling
   ============================================ */

a {
  color: var(--prorank-primary);
  text-decoration: none;
  transition: var(--prorank-transition);
}

a:hover {
  color: var(--prorank-primary-dark);
  text-decoration: underline;
}

a:visited {
  color: var(--prorank-primary);
}

a.prorank-link-external::after {
  content: '↗';
  font-size: 0.75em;
  margin-left: 4px;
}

/* ============================================
   LISTS
   Styled list elements
   ============================================ */

ul, ol {
  margin: 0 0 16px;
  padding-left: 24px;
  color: var(--prorank-text);
}

ul li, ol li {
  line-height: 1.6;
  margin-bottom: 8px;
}

ul li:last-child, ol li:last-child {
  margin-bottom: 0;
}

/* Custom bullet styles */
ul.prorank-list-custom {
  list-style: none;
  padding-left: 0;
}

ul.prorank-list-custom li {
  position: relative;
  padding-left: 24px;
}

ul.prorank-list-custom li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--prorank-primary);
}

/* ============================================
   CODE & PREFORMATTED TEXT
   Styles for code blocks and inline code
   ============================================ */

code {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.875em;
  padding: 2px 6px;
  background: var(--prorank-bg-tertiary);
  border: 1px solid var(--prorank-border);
  border-radius: 4px;
  color: var(--prorank-text);
}

pre {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  background: var(--prorank-bg-tertiary);
  border: 1px solid var(--prorank-border);
  border-radius: 8px;
  padding: 16px;
  overflow-x: auto;
  margin: 0 0 16px;
}

pre code {
  background: transparent;
  border: none;
  padding: 0;
}

/* ============================================
   TEXT UTILITIES
   Helper classes for text styling
   ============================================ */

.prorank-text-center { text-align: center; }
.prorank-text-left { text-align: left; }
.prorank-text-right { text-align: right; }
.prorank-text-justify { text-align: justify; }

.prorank-text-muted { color: var(--prorank-text-secondary) !important; }
.prorank-text-primary { color: var(--prorank-primary) !important; }
.prorank-text-success { color: var(--prorank-success) !important; }
.prorank-text-warning { color: var(--prorank-warning) !important; }
.prorank-text-error { color: var(--prorank-error) !important; }

.prorank-text-uppercase { text-transform: uppercase; }
.prorank-text-lowercase { text-transform: lowercase; }
.prorank-text-capitalize { text-transform: capitalize; }

.prorank-font-normal { font-weight: 400; }
.prorank-font-medium { font-weight: 500; }
.prorank-font-semibold { font-weight: 600; }
.prorank-font-bold { font-weight: 700; }

.prorank-text-xs { font-size: 12px; }
.prorank-text-sm { font-size: 14px; }
.prorank-text-base { font-size: 16px; }
.prorank-text-lg { font-size: 18px; }
.prorank-text-xl { font-size: 20px; }
.prorank-text-2xl { font-size: 24px; }
.prorank-text-3xl { font-size: 30px; }