/**
 * Foundation: Typography System
 * Usage: Font definitions, text styles, heading hierarchy
 * Dependencies: variables.css
 * Last Updated: 2025-06-25
 * 
 * Consolidated typography system from the previous scattered font rules.
 * Provides consistent text styling across all components.
 */

/*============================================================================
  BASE TYPOGRAPHY
============================================================================*/

body {
  font-family: var(--font-family-base);
  color: var(--text-primary);
  line-height: 1.6;
}

/*============================================================================
  HEADINGS HIERARCHY
============================================================================*/

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-bold);
  color: var(--text-primary);
  line-height: 1.3;
  margin: 0 0 1rem 0;
}

h1.entry-title,
.search-results h1.page-title.ast-archive-title {
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border-dark);
  margin-bottom: 15px;
  color: var(--secondary-color) !important;
  font-size: 30px !important;
}

.ast-single-post .entry-title,
.page-title {
  font-size: 2rem;
}

.entry-content h3.top-3-title {
  padding-bottom: 8px;
  margin-bottom: 35px;
  border-bottom: 2px solid var(--border-dark);
  font-size: 32px;
}

/*============================================================================
  TEXT ELEMENTS
============================================================================*/

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

a:hover {
  color: var(--primary-color);
}

a:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/*============================================================================
  BLOG & ARCHIVE TEXT STYLING
============================================================================*/

.post-content .entry-title {
  text-transform: uppercase;
  font-family: var(--font-family-bold);
  font-size: 20px;
}

.blog .post-content .entry-meta a,
.blog .post-content .entry-meta span,
.entry-meta,
.entry-meta a,
.entry-meta span {
  color: #979797 !important;
}

.blog .post-content .entry-meta span:hover,
.entry-meta:hover {
  color: var(--primary-color);
}

.page-links .page-link,
.single .post-navigation a,
.ast-pagination a {
  color: #979797 !important;
  text-decoration: underline;
}

.page-links .page-link:hover,
.single .post-navigation a:hover,
.ast-pagination a:hover {
  color: var(--primary-color) !important;
}

.blog .read-more a,
.archive .read-more a,
.search-results .read-more a {
  font-family: var(--font-family-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/*============================================================================
  FORM TEXT ELEMENTS
============================================================================*/

input, textarea, select {
  font-family: var(--font-family-base);
  color: var(--text-primary);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

/*============================================================================
  RESPONSIVE TYPOGRAPHY
============================================================================*/

@media (max-width: 768px) {
  h1.entry-title,
  .search-results h1.page-title.ast-archive-title {
    font-size: 24px !important;
  }

  .entry-content h3.top-3-title {
    font-size: 28px;
  }

  .ast-single-post .entry-title,
  .page-title {
    font-size: 1.5rem;
  }

  .post-content .entry-title {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  h1.entry-title,
  .search-results h1.page-title.ast-archive-title {
    font-size: 20px !important;
  }

  .entry-content h3.top-3-title {
    font-size: 24px;
  }

  .ast-single-post .entry-title,
  .page-title {
    font-size: 1.25rem;
  }
}