/**
 * content.css - Styles for CNXML-rendered HTML content
 *
 * These styles apply to pre-rendered HTML from the CNXML pipeline.
 * The HTML structure uses semantic elements with specific class names.
 *
 * Based on OpenStax Chemistry 2e styling.
 */

/* ==============================================
   ROOT VARIABLES
   ============================================== */

:root {
  /* OpenStax-inspired colors */
  --os-gray-bg: #ededed;
  --os-gray-border: #dcdcdc;
  --os-text-dark: #333333;
  --os-text-body: #424242;
  --os-link-color: #027eb5;
  --os-green: #4caf50;

  /* Note type color categories (6 categories, shared across all books) */
  --note-blue-bg: #e8f4f8;
  --note-blue-border: #b8d4e3;
  --note-green-bg: #e8f5e9;
  --note-green-border: #a5d6a7;
  --note-yellow-bg: #fff8e6;
  --note-yellow-border: #f0d88e;
  --note-pink-bg: #fce4ec;
  --note-pink-border: #f48fb1;
  --note-orange-bg: #fff3e0;
  --note-orange-border: #ffcc80;
  --note-purple-bg: #f3e5f5;
  --note-purple-border: #ce93d8;

  /* Legacy aliases (keep for backwards compatibility) */
  --note-link-learning-bg: var(--note-blue-bg);
  --note-link-learning-border: var(--note-blue-border);
  --note-everyday-life-bg: var(--note-yellow-bg);
  --note-everyday-life-border: var(--note-yellow-border);
  --note-sciences-bg: var(--note-green-bg);
  --note-sciences-border: var(--note-green-border);
  --note-portrait-bg: var(--note-pink-bg);
  --note-portrait-border: var(--note-pink-border);
}

/* ==============================================
   BASE ARTICLE STYLES
   ============================================== */

article.cnx-module {
  font-family: var(
    --font-family-base,
    "Neue Helvetica W01",
    Helvetica,
    Arial,
    sans-serif
  );
  font-size: var(--font-size-base, 16px);
  line-height: 1.44;
  color: var(--os-text-body);
}

article.cnx-module header h1 {
  font-size: 32px;
  font-weight: 700;
  color: var(--os-text-dark);
  margin: 15px 0 10px;
  line-height: 1.2;
}

/* ==============================================
   LEARNING OBJECTIVES
   ============================================== */

.learning-objectives {
  background-color: var(--os-gray-bg);
  border: 2px solid var(--os-gray-border);
  padding: 15px 20px;
  margin: 20px 0 30px;
}

.learning-objectives h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--os-text-body);
  margin: 0 0 10px;
}

.learning-objectives p {
  margin: 0 0 8px;
}

.learning-objectives ul {
  margin: 0;
  padding-left: 25px;
  list-style-type: disc;
}

.learning-objectives li {
  margin-bottom: 5px;
}

/* ==============================================
   CHAPTER OUTLINE (intro pages)
   ============================================== */

.chapter-outline {
  background-color: var(--os-gray-bg);
  border: 2px solid var(--os-gray-border);
  padding: 15px 20px;
  margin: 20px 0 30px;
}

.chapter-outline h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--os-text-body);
  margin: 0 0 10px;
}

.chapter-outline ul {
  margin: 0;
  padding-left: 25px;
  list-style-type: none;
}

.chapter-outline li {
  margin-bottom: 5px;
}

.chapter-outline a {
  color: var(--os-link);
  text-decoration: none;
  font-weight: 500;
}

.chapter-outline a:hover {
  text-decoration: underline;
}

/* ==============================================
   SECTION HEADINGS
   ============================================== */

article.cnx-module section h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--os-text-dark);
  margin: 15px 0 10px;
  line-height: 1.2;
}

article.cnx-module section h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--os-text-dark);
  margin: 25px 0 12px;
  line-height: 1.2;
}

article.cnx-module section h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--os-text-dark);
  margin: 20px 0 10px;
}

/* ==============================================
   PARAGRAPHS
   ============================================== */

article.cnx-module p {
  margin: 10px 0;
  line-height: 1.44;
}

/* ==============================================
   TERMS (Definitions)
   ============================================== */

article.cnx-module dfn.term {
  font-weight: 700;
  font-style: normal;
}

/* ==============================================
   FIGURES
   ============================================== */

article.cnx-module figure {
  margin: 20px 0;
  text-align: center;
}

article.cnx-module figure img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

article.cnx-module figure figcaption {
  font-size: 14px;
  font-style: italic;
  color: var(--os-text-body);
  margin-top: 10px;
  text-align: center;
  line-height: 1.4;
}

article.cnx-module figure figcaption .figure-label {
  font-weight: 700;
  font-style: normal;
  color: var(--os-link-color);
}

article.cnx-module figure.splash {
  margin: 0 0 30px;
}

/* ==============================================
   NOTES (Feature Boxes)
   ============================================== */

article.cnx-module aside.note {
  background-color: var(--os-gray-bg);
  border: 2px solid var(--os-gray-border);
  margin: 30px 0;
  padding: 0;
}

article.cnx-module aside.note .note-type {
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--os-text-body);
  padding: 15px 15px 10px;
  margin: 0;
  border-bottom: 2px solid var(--os-gray-border);
}

article.cnx-module aside.note h4 {
  font-size: 24px;
  font-weight: 700;
  color: var(--os-text-dark);
  padding: 15px 30px 10px;
  margin: 0;
}

article.cnx-module aside.note p {
  padding: 0 30px 10px;
  margin: 10px 0 0;
}

article.cnx-module aside.note figure {
  padding: 0 30px 15px;
  margin: 0;
}

/* Link to Learning - Blue tint */
article.cnx-module aside.note-link-to-learning,
article.cnx-module aside.note.link-to-learning {
  background-color: var(--note-link-learning-bg);
  border-color: var(--note-link-learning-border);
}

/* Chemistry in Everyday Life - Yellow/Orange tint */
article.cnx-module aside.note-chemistry.note-everyday-life,
article.cnx-module aside.note.note-chemistry.everyday-life {
  background-color: var(--note-everyday-life-bg);
  border-color: var(--note-everyday-life-border);
}

/* Sciences Interconnect - Green tint */
article.cnx-module aside.note-sciences-interconnect,
article.cnx-module aside.note.sciences-interconnect {
  background-color: var(--note-sciences-bg);
  border-color: var(--note-sciences-border);
}

/* Portrait of a Chemist - Pink tint */
article.cnx-module aside.note-chemist-portrait,
article.cnx-module aside.note.chemist-portrait {
  background-color: var(--note-portrait-bg);
  border-color: var(--note-portrait-border);
}

/* Chemistry: Green Chemistry - Green tint */
article.cnx-module aside.note.green-chemistry {
  background-color: var(--note-green-bg);
  border-color: var(--note-green-border);
}

/* Chemistry: Safety Hazard - Orange tint */
article.cnx-module aside.note.safety-hazard {
  background-color: var(--note-orange-bg);
  border-color: var(--note-orange-border);
}

/* Chemistry: Lab Equipment - Orange tint */
article.cnx-module aside.note.lab-equipment {
  background-color: var(--note-orange-bg);
  border-color: var(--note-orange-border);
}

/* Chemistry: Chem Connections - Green tint */
article.cnx-module aside.note.chem-connections {
  background-color: var(--note-green-bg);
  border-color: var(--note-green-border);
}

/* ==============================================
   NOTES — BIOLOGY
   ============================================== */

/* Biology: Visual Connection - Blue tint */
article.cnx-module aside.note.visual-connection {
  background-color: var(--note-blue-bg);
  border-color: var(--note-blue-border);
}

/* Biology: Evolution - Green tint */
article.cnx-module aside.note.evolution {
  background-color: var(--note-green-bg);
  border-color: var(--note-green-border);
}

/* Biology: Career - Pink tint */
article.cnx-module aside.note.career {
  background-color: var(--note-pink-bg);
  border-color: var(--note-pink-border);
}

/* Biology: Interactive - Blue tint */
article.cnx-module aside.note.interactive {
  background-color: var(--note-blue-bg);
  border-color: var(--note-blue-border);
}

/* ==============================================
   NOTES — MICROBIOLOGY
   ============================================== */

/* Microbiology: Check Your Understanding - Purple tint */
article.cnx-module aside.note.check-your-understanding {
  background-color: var(--note-purple-bg);
  border-color: var(--note-purple-border);
}

/* Microbiology: Clinical Focus - Yellow tint */
article.cnx-module aside.note.clinical-focus {
  background-color: var(--note-yellow-bg);
  border-color: var(--note-yellow-border);
}

/* Microbiology: Micro Connection - Green tint */
article.cnx-module aside.note.micro-connection {
  background-color: var(--note-green-bg);
  border-color: var(--note-green-border);
}

/* Microbiology: Disease Profile - Pink tint */
article.cnx-module aside.note.disease-profile {
  background-color: var(--note-pink-bg);
  border-color: var(--note-pink-border);
}

/* Microbiology: Eye on Ethics - Orange tint */
article.cnx-module aside.note.eye-on-ethics {
  background-color: var(--note-orange-bg);
  border-color: var(--note-orange-border);
}

/* Microbiology: Case in Point - Yellow tint */
article.cnx-module aside.note.case-in-point {
  background-color: var(--note-yellow-bg);
  border-color: var(--note-yellow-border);
}

/* ==============================================
   EXAMPLES
   ============================================== */

article.cnx-module aside.example {
  background-color: var(--os-gray-bg);
  border: 2px solid var(--os-gray-border);
  margin: 30px 0;
  padding: 0;
}

article.cnx-module aside.example .example-label {
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--os-text-body);
  padding: 15px 15px 10px;
  margin: 0;
}

article.cnx-module aside.example h4 {
  font-size: 24px;
  font-weight: 700;
  color: var(--os-text-dark);
  padding: 15px 30px 10px;
  margin: 0;
}

article.cnx-module aside.example p {
  padding: 0 30px 10px;
  margin: 10px 0 0;
}

article.cnx-module aside.example .para-title {
  padding: 15px 30px 5px;
  margin: 0;
  font-size: 17px;
}

article.cnx-module aside.example .para-title strong {
  font-weight: 700;
  text-transform: uppercase;
}

/* ==============================================
   EXERCISES (Check Your Learning)
   ============================================== */

article.cnx-module div.exercise {
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-left: 4px solid #027eb5;
  margin: 20px 0;
  padding: 15px;
}

article.cnx-module div.exercise .problem {
  margin-bottom: 10px;
}

article.cnx-module div.exercise .solution {
  border-top: 1px solid #e0e0e0;
  padding-top: 10px;
  margin-top: 10px;
}

/* ==============================================
   EQUATIONS
   ============================================== */

article.cnx-module div.equation {
  margin: 20px 0;
  text-align: center;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.25rem 0;
}

article.cnx-module div.equation .mathjax-display,
article.cnx-module div.equation mjx-container {
  margin: 0;
  padding: 10px 0;
}

/* MathJax SVG inline sizing */
mjx-container[jax="SVG"] {
  direction: ltr;
}

mjx-container[jax="SVG"][display="true"] {
  display: block;
  text-align: center;
  margin: 1em 0;
}

mjx-container[jax="SVG"]:not([display="true"]) {
  display: inline;
}

article.cnx-module div.equation .equation-number {
  float: right;
  color: var(--os-text-body);
  font-size: 14px;
}

article.cnx-module div.equation.unnumbered .equation-number {
  display: none;
}

/* ==============================================
   STANDALONE MEDIA (inline images between paragraphs)
   ============================================== */

.media-inline {
  margin: 16px 0;
  text-align: center;
}

.media-inline img {
  max-width: 100%;
  height: auto;
}

.media-inline.scaled-down img {
  max-width: 60%;
}

/* ==============================================
   TABLES
   ============================================== */

article.cnx-module table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

article.cnx-module table th,
article.cnx-module table td {
  border: 1px solid var(--os-gray-border);
  padding: 8px 16px;
  text-align: left;
  vertical-align: top;
}

article.cnx-module table th {
  font-weight: 700;
}

article.cnx-module table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

article.cnx-module table caption {
  caption-side: bottom;
  font-size: 14px;
  font-style: italic;
  color: var(--os-text-body);
  margin-top: 6px;
  padding: 4px 0;
  text-align: left;
}

article.cnx-module table caption .table-label {
  font-weight: 700;
  font-style: normal;
  color: var(--os-link-color);
}

/* ==============================================
   LISTS
   ============================================== */

article.cnx-module ul {
  margin: 10px 0;
  padding-left: 30px;
  list-style-type: disc;
}

article.cnx-module ol {
  margin: 10px 0;
  padding-left: 30px;
  list-style-type: decimal;
}

article.cnx-module li {
  margin-bottom: 5px;
  line-height: 1.44;
}

/* ==============================================
   LINKS
   ============================================== */

article.cnx-module a {
  color: var(--os-link-color);
  text-decoration: none;
}

article.cnx-module a:hover {
  text-decoration: underline;
}

/* ==============================================
   GLOSSARY
   ============================================== */

article.cnx-module section.glossary {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 2px solid var(--os-gray-border);
}

article.cnx-module section.glossary h2 {
  font-size: 20px;
  margin-bottom: 20px;
}

article.cnx-module section.glossary dl {
  margin: 0;
}

article.cnx-module section.glossary dt {
  font-weight: 700;
  margin-top: 15px;
}

article.cnx-module section.glossary dd {
  margin: 5px 0 0 20px;
}

/* ==============================================
   FOOTNOTES
   ============================================== */

/* Footnote reference (superscript number in text) */
article.cnx-module .footnote-ref {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}

article.cnx-module .footnote-ref a {
  color: var(--os-link-color);
  text-decoration: none;
}

article.cnx-module .footnote-ref a:hover {
  text-decoration: underline;
}

/* Footnotes section at bottom of page */
article.cnx-module section.footnotes {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--os-gray-border);
}

article.cnx-module section.footnotes h2 {
  font-size: 18px;
  margin-bottom: 15px;
}

article.cnx-module .footnotes-list {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  color: var(--os-text-body);
  list-style-type: decimal;
}

article.cnx-module .footnote-item {
  margin-bottom: 10px;
}

article.cnx-module .footnote-item p {
  margin: 0;
  padding: 0;
}

article.cnx-module .footnote-backref {
  margin-left: 5px;
  color: var(--os-link-color);
  text-decoration: none;
}

article.cnx-module .footnote-backref:hover {
  text-decoration: underline;
}

/* ==============================================
   EXERCISES PAGE
   ============================================== */

article.chapter-resource.exercises .exercises-list {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

article.chapter-resource.exercises .exercises-list .exercise {
  display: block;
  position: relative;
  margin-bottom: 20px;
  padding: 15px 15px 15px 3rem;
  background-color: #f9f9f9;
  border-left: 4px solid var(--os-link-color);
}

article.chapter-resource.exercises .exercises-list .exercise .problem p {
  margin: 0 0 10px;
}

article.chapter-resource.exercises
  .exercises-list
  .exercise
  .problem
  p:last-child {
  margin-bottom: 0;
}

article.chapter-resource.exercises .exercises-section h2 {
  font-size: 20px;
  margin: 30px 0 15px;
  color: var(--os-text-dark);
  border-bottom: 1px solid var(--os-gray-border);
  padding-bottom: 10px;
}

article.chapter-resource.exercises .exercises-section h2:first-child {
  margin-top: 0;
}

/* Exercise type groups (multi-type books like Biology/Microbiology) */
article.chapter-resource.exercises .exercise-type-group {
  margin-bottom: 40px;
}

article.chapter-resource.exercises .exercise-type-heading {
  font-size: 22px;
  font-weight: 700;
  margin: 40px 0 20px;
  padding-bottom: 12px;
  color: var(--os-text-dark);
  border-bottom: 2px solid var(--os-link-color);
}

article.chapter-resource.exercises
  .exercise-type-group:first-child
  .exercise-type-heading {
  margin-top: 0;
}

article.chapter-resource.exercises .exercise-type-group .exercises-section h3 {
  font-size: 18px;
  margin: 25px 0 12px;
  color: var(--os-text-dark);
  border-bottom: 1px solid var(--os-gray-border);
  padding-bottom: 8px;
}

/* ==============================================
   ANSWER KEY PAGE
   ============================================== */

article.chapter-resource.answer-key .answers-list {
  margin: 0;
}

article.chapter-resource.answer-key .answer-entry {
  display: block;
  position: relative;
  margin-bottom: 15px;
  padding: 10px 10px 10px 3rem;
  background-color: #f5f5f5;
  border-left: 3px solid var(--os-green);
}

article.chapter-resource.answer-key .answer-entry p {
  margin: 0;
}

article.chapter-resource.answer-key .answers-section h2 {
  font-size: 20px;
  margin: 30px 0 15px;
  color: var(--os-text-dark);
  border-bottom: 1px solid var(--os-gray-border);
  padding-bottom: 10px;
}

article.chapter-resource.answer-key .answers-section h2:first-child {
  margin-top: 0;
}

/* ==============================================
   KEY TERMS PAGE
   ============================================== */

article.chapter-resource.key-terms dl.key-terms-list {
  margin: 0;
}

article.chapter-resource.key-terms .term-entry {
  display: flex;
  margin-bottom: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

article.chapter-resource.key-terms .term-entry dt {
  font-weight: 700;
  color: var(--os-text-dark);
  min-width: 150px;
  flex-shrink: 0;
}

article.chapter-resource.key-terms .term-entry dd {
  flex: 1;
  margin: 0;
  color: var(--os-text-body);
}

/* ==============================================
   EMPHASIS
   ============================================== */

article.cnx-module em {
  font-style: italic;
}

article.cnx-module strong {
  font-weight: 700;
}

/* ==============================================
   RESPONSIVE ADJUSTMENTS
   ============================================== */

@media (max-width: 768px) {
  article.cnx-module header h1 {
    font-size: 24px;
  }

  article.cnx-module section h2 {
    font-size: 20px;
  }

  article.cnx-module section h3 {
    font-size: 18px;
  }

  article.cnx-module aside.note p,
  article.cnx-module aside.example p {
    padding: 0 10px 10px;
  }

  article.cnx-module aside.note .note-type,
  article.cnx-module aside.example .example-label {
    padding: 8px 10px;
  }
}

/* ==============================================
   DARK MODE
   ============================================== */

.dark {
  /* Override OpenStax color variables for dark backgrounds */
  --os-gray-bg: #26262f;
  --os-gray-border: #3a3a46;
  --os-text-dark: #e8e4de;
  --os-text-body: #c8c4be;
  --os-link-color: #5bb8d8;
  --os-green: #66bb6a;

  /* Note type color categories — muted for dark backgrounds */
  --note-blue-bg: rgba(91, 184, 216, 0.12);
  --note-blue-border: rgba(91, 184, 216, 0.3);
  --note-green-bg: rgba(165, 214, 167, 0.12);
  --note-green-border: rgba(165, 214, 167, 0.3);
  --note-yellow-bg: rgba(240, 216, 142, 0.12);
  --note-yellow-border: rgba(240, 216, 142, 0.3);
  --note-pink-bg: rgba(244, 143, 177, 0.12);
  --note-pink-border: rgba(244, 143, 177, 0.3);
  --note-orange-bg: rgba(255, 204, 128, 0.12);
  --note-orange-border: rgba(255, 204, 128, 0.3);
  --note-purple-bg: rgba(206, 147, 216, 0.12);
  --note-purple-border: rgba(206, 147, 216, 0.3);
}

/* Exercise blocks */
.dark article.cnx-module div.exercise {
  background-color: #1e1e26;
  border-color: #3a3a46;
  border-left-color: #5bb8d8;
}

.dark article.cnx-module div.exercise .solution {
  border-top-color: #3a3a46;
}

/* Table alternating rows */
.dark article.cnx-module table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.04);
}

/* Table headers and borders */
.dark article.cnx-module table th {
  background-color: #26262f;
  color: var(--os-text-dark);
}

.dark article.cnx-module table td,
.dark article.cnx-module table th {
  border-color: #3a3a46;
}

/* Exercises page blocks */
.dark article.cnx-module .exercises-section .exercise-item {
  background-color: #1e1e26;
  border-left-color: #5bb8d8;
}

/* Answer key entries */
.dark article.cnx-module .answer-key-entry {
  background-color: #1e1e26;
  border-left-color: var(--os-green);
}

/* Key equations section */
.dark article.cnx-module .key-equations-section .equation-row {
  background-color: rgba(255, 255, 255, 0.04);
}

/* Figure captions */
.dark article.cnx-module figcaption {
  color: var(--os-text-body);
}

/* Key terms entries */
.dark article.chapter-resource.key-terms .term-entry {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Definition blocks */
.dark article.cnx-module dfn {
  color: var(--os-text-dark);
}