/* ======================================================
   NETWORK+ CONTENT ONLY
   Shared by all 70 chapters
   Wrap lesson content inside: <div class="np-content">
====================================================== */

.np-content{
  font-family: Arial, Helvetica, sans-serif;
  font-size:17px;
  line-height:1.75;
  color:#1f2937;
  width:100%;
  min-width:0;
}

/* =========================
   A- / A+ FONT CONTROL
========================= */

body.font-small .np-content{
  font-size:14px;
}

body.font-large .np-content{
  font-size:20px;
}

body.font-xlarge .np-content{
  font-size:23px;
}

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

.np-content h1{
  font-size: 2rem;
  line-height: 1.25;
  margin: 0 0 22px;
}

.np-content h2{
  font-size: 1.55rem;
  line-height: 1.3;
  margin: 34px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

.np-content h3{
  font-size: 1.2rem;
  line-height: 1.4;
  margin: 24px 0 10px;
}

.np-content h4{
  font-size: 1.05rem;
  margin: 18px 0 8px;
}


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

.np-content p{
  margin: 0 0 16px;
}


/* =========================
   CHAPTER SECTIONS
========================= */

.np-content .np-section{
  margin-bottom: 42px;
  scroll-margin-top: 90px;
}


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

.np-content ul,
.np-content ol{
  margin: 12px 0 20px 28px;
  padding: 0;
}

.np-content li{
  margin-bottom: 8px;
}


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

.np-content strong{
  font-weight: 700;
}


/* =========================
   QUOTES / IMPORTANT NOTES
========================= */

.np-content blockquote{
  margin: 18px 0;
  padding: 14px 18px;
  border-left: 4px solid #2563eb;
  background: #f8fafc;
  border-radius: 6px;
}


/* =========================
   CODE / NETWORK DIAGRAMS
========================= */

.np-content pre{
  margin: 18px 0 24px;
  padding: 18px;
  background: #111827;
  color: #f9fafb;
  border-radius: 10px;
  overflow-x: auto;
  white-space: pre;
  line-height: 1.55;
}

.np-content pre code{
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 0.92rem;
  color: inherit;
  background: none;
  padding: 0;
}

.np-content code{
  font-family: Consolas, Monaco, "Courier New", monospace;
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
}


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

.np-content .np-table-wrap{
  width: 100%;
  overflow-x: auto;
  margin: 22px 0;
}

.np-content table{
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}

.np-content th,
.np-content td{
  padding: 12px 14px;
  border: 1px solid #d1d5db;
  text-align: left;
  vertical-align: top;
}

.np-content th{
  background: #f3f4f6;
  font-weight: 700;
}


/* =========================
   EXAM / IMPORTANT BOX
========================= */

.np-content .np-exam{
  margin: 20px 0;
  padding: 16px 18px;
  border-left: 4px solid #16a34a;
  background: #f0fdf4;
  border-radius: 7px;
}

.np-content .np-note{
  margin: 20px 0;
  padding: 16px 18px;
  border-left: 4px solid #f59e0b;
  background: #fffbeb;
  border-radius: 7px;
}


/* =========================
   QUESTIONS
========================= */

.np-content .np-question{
  margin: 26px 0;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
}

.np-content .np-question h3{
  margin-top: 0;
}


/* =========================
   ANSWERS
========================= */

.np-content .np-answer{
  margin: 16px 0;
  padding: 14px 16px;
  background: #f0fdf4;
  border-left: 4px solid #16a34a;
  border-radius: 6px;
}


/* =========================
   MEMORY SHEET
========================= */

.np-content .np-memory{
  margin-top: 35px;
  padding: 22px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}


/* =========================
   DIVIDERS
========================= */

.np-content .np-divider{
  border: 0;
  border-top: 1px solid #e5e7eb;
  margin: 38px 0;
}




/*
Note:
rem does not increase when .np-content increases. So A+ will enlarge paragraphs and lists, but headings will stay approximately the same.

If you want the entire lesson, including headings, code, tables, questions, and answers to increase/decrease together, I recommend changing those heading sizes from rem to em. That will make the A−/A+ feature work much more naturally.
*/

/* =========================
   MOBILE
========================= */

@media (max-width: 768px){

    .np-content{
    font-size:16px;
    line-height:1.7;
  }

  body.font-small .np-content{
    font-size:13px;
  }

  body.font-large .np-content{
    font-size:19px;
  }

  body.font-xlarge .np-content{
    font-size:22px;
  }


  .np-content h1{
    font-size: 1.7rem;
  }

  .np-content h2{
    font-size: 1.35rem;
  }

  .np-content h3{
    font-size: 1.1rem;
  }

  .np-content pre{
    padding: 14px;
    font-size: 0.88rem;
  }

  .np-content .np-question{
    padding: 16px;
  }

  .np-content .np-memory{
    padding: 16px;
  }
}