/* ============================================================
   ORORO STUDY BOOKS — general page styles
   ------------------------------------------------------------
   This file handles TEXT: fonts, sizes, headings, spacing.
   Coloured boxes live in custom-blocks.css instead.

   THE TWO THINGS YOU'RE MOST LIKELY TO CHANGE:
     1. --ororo-text-size   (how big the body text is)
     2. --ororo-measure     (how wide a line of text runs)
   Both are at the top of the next block.
   ============================================================ */

:root {
  --ororo-text-size:  1.05rem;   /* body text size on desktop   */
  --ororo-measure:    42rem;     /* max width of a line of text */
  --ororo-ink:        #212529;   /* main text colour            */
  --ororo-ink-soft:   #495057;   /* captions, secondary text    */
  --ororo-rule:       #dee2e6;   /* hairlines and borders       */
  --ororo-link:       #1c7ed6;   /* link colour                 */
}


/* ============================================================
   1. BODY TEXT
   ============================================================ */

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto,
               "Noto Sans", Arial, sans-serif;
  font-size: var(--ororo-text-size);
  line-height: 1.75;
  color: var(--ororo-ink);
}

/* Paragraphs get real breathing room — this is study material,
   not a news article. */
p {
  margin-bottom: 1.1rem;
}

/* Stop long lines running the full width of a wide monitor.
   Anything past ~90 characters is tiring to read. */
main .content > p,
main .content > ul,
main .content > ol,
main .content > blockquote {
  max-width: var(--ororo-measure);
}

a {
  color: var(--ororo-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}


/* ============================================================
   2. HEADINGS
   ------------------------------------------------------------
   SIX STYLES, and only four depths. The last two are the
   unnumbered versions of the two above them:

     h1  Chapter 1 — Units and Measurement
     h2  1.1  Introduction                    numbered
     h3  1.1.1  Subsection                    numbered
     h4  1.4.1.1  Deeper subsection           numbered
     h5  Volume expansion        UNNUMBERED — looks like h3
     h6  Looking ahead           UNNUMBERED — looks like h4

   h5 is deliberately identical to h3, and h6 identical to h4.
   The only difference is that h5 and h6 carry no number and
   are kept out of the contents sidebar.

   So: to change how a subsection looks, edit the h3/h5 rule
   and both stay in step automatically.
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
  color: var(--ororo-ink);
  margin-top: 2.2rem;
  margin-bottom: 0.8rem;
}

/* --- h1 — chapter title --- */
h1 {
  font-size: 2.05rem;
  margin-top: 0;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--ororo-rule);
  letter-spacing: -0.01em;
}

/* --- h2 — major numbered section (1.1)
   The rule above it breaks long chapters into clear chunks. */
h2 {
  font-size: 1.55rem;
  margin-top: 2.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--ororo-rule);
}

/* --- h3 and h5 — subsection (1.1.1) and its unnumbered twin --- */
h3,
h5 {
  font-size: 1.25rem;
  margin-top: 2rem;
}

/* --- h4 and h6 — deeper subsection (1.4.1.1) and its twin --- */
h4,
h6 {
  font-size: 1.08rem;
  margin-top: 1.7rem;
  text-transform: none;      /* cancel any theme default */
  letter-spacing: normal;
}

/* The first section heading in a chapter shouldn't have a
   big gap above it. */
main .content > h2:first-of-type {
  margin-top: 1.8rem;
}


/* ============================================================
   3. MATHS
   ------------------------------------------------------------
   Long display equations are the single most common way a
   physics page breaks on a phone — they push the whole layout
   sideways. This lets a wide equation scroll on its own
   instead of dragging the page with it.
   ============================================================ */

.math.display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.4rem 0;
  max-width: 100%;
}

.math.inline {
  overflow-wrap: break-word;
}


/* ============================================================
   4. LISTS, TABLES, QUOTES
   ============================================================ */

ul, ol {
  padding-left: 1.4rem;
  margin-bottom: 1.1rem;
}

li {
  margin-bottom: 0.4rem;
}

table {
  border-collapse: collapse;
  margin: 1.5rem 0;
  width: 100%;
  font-size: 0.95rem;
}

table th,
table td {
  border: 1px solid var(--ororo-rule);
  padding: 0.5rem 0.7rem;
  text-align: left;
}

table th {
  background: #f8f9fa;
  font-weight: 700;
}

blockquote {
  border-left: 3px solid var(--ororo-rule);
  padding-left: 1rem;
  color: var(--ororo-ink-soft);
  margin: 1.4rem 0;
}


/* ============================================================
   5. SIDEBAR / CONTENTS
   ============================================================ */

#quarto-sidebar,
#TOC {
  font-size: 0.92rem;
}

#quarto-sidebar .sidebar-item-text {
  line-height: 1.45;
}


/* ============================================================
   6. PHONES
   ------------------------------------------------------------
   Most of your students will read on a phone, so this is the
   part that matters most. Note that h3/h5 and h4/h6 stay
   paired here too.
   ============================================================ */

@media (max-width: 768px) {

  body {
    font-size: 1rem;
    line-height: 1.7;
  }

  h1       { font-size: 1.65rem; }
  h2       { font-size: 1.32rem; margin-top: 2.2rem; }
  h3, h5   { font-size: 1.15rem; }
  h4, h6   { font-size: 1.03rem; }

  main .content {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  /* Boxes stretch closer to the edges so they don't waste
     horizontal space on a narrow screen. */
  .callout[class*="box-"] {
    margin-left: -0.3rem;
    margin-right: -0.3rem;
  }
}


/* ============================================================
   7. PRINTING
   ------------------------------------------------------------
   Some students will print chapters. This drops the navigation
   and keeps boxes from splitting across a page break.
   ============================================================ */

@media print {
  #quarto-sidebar,
  #quarto-margin-sidebar,
  .nav-page,
  footer {
    display: none !important;
  }

  body {
    font-size: 11pt;
    line-height: 1.5;
  }

  .callout[class*="box-"],
  .figure-placeholder {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  h1, h2, h3, h5 {
    break-after: avoid;
    page-break-after: avoid;
  }
}