/* =============================================
   ACCORDION TYPOGRAPHY - TEXT ONLY
   Fonts, sizes, weights, line-heights, spacing
   NO colors, NO backgrounds, NO borders
   ============================================= */

/* ===== ARTICLE TITLE (Closed Tile) ===== */
.article-title {
  font-family: var(--font-ui);
  font-size: 22px; /* Bigger: 20px → 22px */
  font-weight: 600; /* Semibold */
  line-height: 1.3;
  margin-top: 16px; /* More space from ribbons */
  margin-bottom: 16px; /* More space to EEAT */
}

/* ===== METADATA (Source, Author, Reviewer) ===== */
.eeat-container,
.eeat-container * {
  font-family: var(--font-ui);
  font-size: 12px; /* Smaller: 14px → 12px */
  font-weight: 400; /* Regular */
  line-height: 1.5;
  margin-bottom: 12px; /* Add spacing after EEAT */
}

/* ===== HASHTAGS ===== */
.tags {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500; /* Medium */
  line-height: 1.4;
}

/* ===== PUBLISH DATE ===== */
.article-date {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400; /* Regular */
  line-height: 1.4;
}

/* ===== PRELUDE SECTION ===== */
.prelude-title {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600; /* Semibold */
  line-height: 1.4;
  margin-top: 20px; /* More space above prelude */
  margin-bottom: 6px;
}

.prelude-body {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400; /* Regular */
  line-height: 1.6;
  margin-bottom: 20px; /* More space below prelude */
}

/* ===== QUESTIONS (Accordion Closed → Open) ===== */
/* Higher specificity to override .highlight-zone p from style.css */
.highlight-zone .question,
.content-area .question,
span.question {
  font-family: var(--font-reading-en) !important;
  font-size: 20px !important;
  font-weight: 600 !important; /* Semibold - stands out */
  line-height: 1.3 !important; /* Tight, questions are short */
  margin-top: 32px !important; /* BIG gap from previous answer */
  margin-bottom: 12px !important; /* SMALL gap to its answer */
}

/* First question in tile - no top margin */
.content-area .question:first-child {
  margin-top: 0 !important;
}

/* ===== ANSWERS (Reading Content) ===== */
/* Higher specificity to override .highlight-zone p from style.css */
.highlight-zone p.answer,
.highlight-zone .answer,
.content-area .answer,
p.answer {
  font-family: var(--font-reading-en) !important;
  font-size: 18px !important;
  font-weight: 400 !important; /* Regular - comfortable reading */
  line-height: 1.7 !important; /* Generous for long text */
  margin-bottom: 32px !important; /* Space before next question */
}

/* Last answer in tile - no bottom margin */
.content-area .answer:last-of-type {
  margin-bottom: 0;
}

/* ===== HINDI CONTENT (Language-specific) ===== */
.question[data-language="hi"],
.answer[data-language="hi"] {
  font-family: var(--font-reading-hi);
}

/* ===== PRELIMS Q&A (Overlay) ===== */
.prelims-qa-question {
  font-family: var(--font-reading-en);
  font-size: 17px;
  font-weight: 600; /* Semibold */
  line-height: 1.4;
  margin-bottom: 8px;
}

.prelims-qa-answer {
  font-family: var(--font-reading-en);
  font-size: 16px;
  font-weight: 400; /* Regular */
  line-height: 1.6;
  margin-bottom: 24px;
}

/* Prelims Hindi */
.prelims-qa-question[data-language="hi"],
.prelims-qa-answer[data-language="hi"] {
  font-family: var(--font-reading-hi);
}

/* ===== IMAGE CAPTIONS ===== */
.image-caption {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400; /* Regular */
  line-height: 1.5;
  margin-top: 8px;
  text-align: center;
}

/* ===== RIBBONS (Source, Secondary) ===== */
.source-ribbon,
.usability-ribbon {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600; /* Semibold */
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===== END RIBBONS (Mindmap, Prelims) ===== */
.end-content-ribbon-item {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600; /* Semibold */
  line-height: 1.3;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
  .article-title {
    font-size: 18px;
  }

  .question {
    font-size: 18px;
    margin-top: 24px; /* Smaller gap on mobile */
  }

  .answer {
    font-size: 17px;
    margin-bottom: 24px;
  }

  .prelims-qa-question {
    font-size: 16px;
  }

  .prelims-qa-answer {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .article-title {
    font-size: 17px;
  }

  .question {
    font-size: 17px;
    margin-top: 20px;
  }

  .answer {
    font-size: 16px;
    margin-bottom: 20px;
  }
}