/* Main container for the article page */
#article-section {
  max-width: 680px; /* Standard width for articles */
  margin: 40px auto; /* Default margin for desktop */
  padding: 0 20px; /* Padding on the sides for readability */
  box-sizing: border-box;
  font-family: 'Montserrat', Arial, sans-serif; /* Updated to Montserrat */
  line-height: 1.8; /* Optimal readability */
  color: #fff;
  word-spacing: normal; /* Ensure default word spacing */
  letter-spacing: normal; /* Ensure default letter spacing */
  text-align: left; /* Left-align text for a uniform starting point */
}

/* Article title */
#article-section .page-heading {
  font-family: 'League Spartan', sans-serif;
  font-size: 40px; /* Font size remains larger */
  font-weight: 700; /* Bold for League Spartan */
  color: #fff;
  text-align: left; /* Left-align the title for uniform starting point */
  margin-bottom: 20px;
  line-height: 1.2; /* Reduced line spacing for the title */
}

/* Section heading */
.section-heading {
  font-family: 'League Spartan', sans-serif;
  font-size: 28px; /* Slightly smaller than the main title */
  font-weight: 700; /* Bold for League Spartan */
  text-align: center; /* Center-align the section heading */
  margin: 30px 0; /* Space above and below */
}

/* General paragraph styling */
#article-section p {
  font-size: 20px; /* Reduced font size by 2px */
  margin-bottom: 20px; /* Uniform space between paragraphs */
  text-align: left; /* Left-align the paragraphs for uniform starting point */
  word-spacing: normal; /* Ensure no extra word spacing */
  letter-spacing: normal; /* Ensure no extra letter spacing */
  line-height: 1.8; /* Consistent line height for readability */
  padding: 0;
}

/* Quote styling (center-aligned) */
#article-section .quote {
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-weight: bold;
  color: #fff;
  text-align: center; /* Center-align the quotes */
  margin: 30px 0; /* Consistent vertical space around quotes */
  padding: 0;
  line-height: 1.8; /* Same line height as paragraphs */
}

/* Blockquote styling (center-aligned) */
#article-section blockquote {
  font-style: italic;
  color: #ccc; /* Lighter text color */
  border-left: 4px solid #666;
  padding-left: 15px;
  margin: 20px 0; /* Consistent vertical margin */
  line-height: 1.8; /* Consistent line height */
  text-align: center; /* Center-align blockquotes */
}

/* Image styles */
#article-section img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto; /* Space around images */
  border-radius: 10px; /* Rounded corners */
}

/* Styling for captions under images */
#article-section .image-caption {
  font-size: 16px;
  color: #ddd;
  text-align: center;
  margin-top: 5px; /* Small gap between image and caption */
}

/* Headings within the article content */
#article-section h3 {
  font-family: 'League Spartan', sans-serif;
  font-size: 28px;
  font-weight: 700; /* Bold for League Spartan */
  color: #fff;
  margin-top: 30px;
  margin-bottom: 15px; /* Space below each subheading */
  text-align: left; /* Left-align subheadings */
}

/* List styling within the article */
#article-section ul, #article-section ol {
  margin: 20px 0; /* Space above and below lists */
  padding-left: 40px; /* Indentation for lists */
  text-align: left; /* Left-align list text */
}

#article-section ul li, #article-section ol li {
  margin-bottom: 10px; /* Space between list items */
}

/* Links within articles */
#article-section a {
  color: #1e90ff;
  text-decoration: none;
}

#article-section a:hover {
  text-decoration: underline;
}

/* Interlude styling */
#article-section .interlude-divider {
  border: 0;
  height: 2px;
  background: #FFF;
  margin: 40px auto; /* Centered and spaced interlude divider */
  max-width: 680px; /* Match the article width */
}

#article-section .interlude-text {
  font-weight: 700; /* Bold for emphasis */
  text-align: center;
  line-height: 1.8; /* Consistent line height */
}

/* Share Button */
.share-button {
  display: block;
  margin: 0 auto;
  margin-top: 20px;
  padding: calc(5px + 8px) calc(20px + 8px);
  font-size: calc(16px + 8px);
  font-family: 'League Spartan', sans-serif;
  font-weight: 700; /* Bold for League Spartan */
  background-color: #fff;
  color: #000;
  border: 2px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}

/* Hover effect without enlargement */
.share-button:hover {
  background-color: #000;
  color: #fff;
  border: 2px solid #fff;
}

/* Toggled state */
.share-button.toggled {
  border: 2px solid #fff;
}

.share-button.toggled:hover {
  background-color: #000;
  color: #fff;
  border: 2px solid #fff;
}

/* Divider between article content and share button */
.article-divider {
  border: none;
  border-top: 1px solid #fff; /* Thin white line */
  margin: 20px 0; /* Space around the line */
}

/* Footer styles matching the main footer */
#main-footer {
  background-color: #333;
  color: #fff;
  font-family: 'League Spartan', sans-serif;
  font-weight: 700; /* Bold for League Spartan */
  padding: 15px 20px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  margin-top: auto;
  position: relative;
  left: 0;
  bottom: 0;
}

.footer-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

/* Footer logo styled to match the spinner with reduced gap */
.footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px; /* Reduced gap to bring lines closer to the T */
}

.footer-logo .logo-line {
  width: 40px;
  border: 1px solid #fff;
}

.footer-logo .logo-text {
  font-family: 'League Spartan', sans-serif;
  font-size: 48px;
  font-weight: 700; /* Bold for League Spartan */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-item {
  margin: 0;
  font-size: 19px;
}

.footer-text {
  margin: 0;
  font-size: 19px;
}

.footer-item a {
  color: #fff;
  text-decoration: none;
}

.footer-item a:hover {
  color: #ddd;
}

/* Mobile view adjustments */
@media (max-width: 768px) {
  #mobile-header {
    display: block;
  }
  
  #article-section {
    margin-top: 50px; /* Adjusted margin-top for mobile */
  }

  #main-footer {
    padding: 10px; /* Adjusted padding for mobile view */
  }
}