/*
 * SEO-Friendly and Themed CSS for Joomla Blog Articles
 *
 * This stylesheet is designed to improve the readability and aesthetic
 * of your Joomla blog articles. It uses a modern, clean color palette
 * and typographic principles to create an SEO-friendly content structure.
 *
 * To use this, copy and paste the code into your Joomla template's
 * custom CSS file.
 */

/* ========================================= */
/* 1. General Article Readability & Layout   */
/* ========================================= */
/* Applies styles to the main article container */
.item-page {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  color: #2c3e50; /* Dark charcoal for main text, a professional and readable color */
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto; /* Center the article content on the page */
  padding: 2rem 1rem;
}

/* Paragraph spacing for better readability */
.item-page p {
  margin-bottom: 1.5rem;
}

/* ========================================= */
/* 2. Heading Styles (SEO Hierarchy)         */
/* ========================================= */
/*
 * H1 is the main title of your article. There should only be one per page.
 * We'll style it to be prominent.
 */
.item-page h1.article-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 1rem;
  line-height: 1.2;
}

/* H2 and H3 for subheadings, creating a clear content hierarchy */
.item-page h2,
.item-page h3 {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  color: #2c3e50;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.item-page h2 {
  font-size: 1.8rem;
  border-bottom: 2px solid #ecf0f1; /* Light gray line for visual separation */
  padding-bottom: 0.5rem;
}

.item-page h3 {
  font-size: 1.5rem;
  color: #3498db; /* A vibrant blue for sub-subheadings as an accent */
}

/* ========================================= */
/* 3. Links and Interactive Elements         */
/* ========================================= */
.item-page a {
  color: #3498db; /* A vibrant blue for links, matching the website's accent color */
  text-decoration: none; /* Remove underline by default */
  transition: color 0.3s ease-in-out;
}

.item-page a:hover {
  color: #2980b9; /* Slightly darker blue on hover for a subtle effect */
  text-decoration: underline;
}

/* ========================================= */
/* 4. Other Content Elements                 */
/* ========================================= */
/* Blockquotes for pull quotes or citations */
.item-page blockquote {
  border-left: 4px solid #3498db;
  padding-left: 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: #7f8c8d; /* Muted color for the quote text */
}

/* Styling for lists */
.item-page ul,
.item-page ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

/* Responsive images */
.item-page img {
  max-width: 100%;
  height: auto;
  border-radius: 8px; /* Rounded corners for a modern look */
  margin: 1.5rem auto; /* Center the image and add space */
  display: block;
}

/* Code blocks (for programmers' blogs) */
.item-page pre {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 5px;
  overflow-x: auto;
}

.item-page code {
  font-family: Consolas, Monaco, 'Courier New', monospace;
  background-color: #f9f9f9;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
}