@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400..700;1,8..60,400..600&display=swap");

/* ============================================================
   ORORO STUDY BOOKS — general page styles
   ------------------------------------------------------------
   This file handles TEXT: fonts, sizes, headings, spacing,
   tables, sidebar, page navigation, the back-link bar.
   Coloured boxes live in custom-blocks.css instead — nothing
   here changes a box colour.

   WHAT CHANGED IN THIS VERSION
   The chapter pages now use the same palette and the same
   display font as the card grids on ororo.world, so walking
   from a subject card into a chapter feels like one site
   rather than two. Body text is set in a serif made for
   screen reading, and section headings carry a marigold tick
   so a long chapter can be scanned at a glance.

   THE FOUR 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
     3. --ororo-font-body   serif or sans for body text
     4. --ororo-accent      the marigold used for ticks/rules
   All four are at the top of the next block.

   IF YOU WANT NO WEBFONTS AT ALL
   Delete the @import line at the very top of this file and set
   both font variables to the system stacks noted beside them.
   Nothing else needs touching; the page will still work.
   ============================================================ */

:root {
  --ororo-text-size:  1.08rem;   /* body text size on desktop   */
  --ororo-measure:    38rem;     /* max width of a line of text */

  /* ONE KNOB FOR ALL SIX HEADINGS.
     Every heading size below is multiplied by this number, so
     you never have to edit six rules and two phone rules to
     make headings a bit smaller. Set it to 0.92 for smaller,
     1.06 for larger. The phone sizes follow automatically. */
  --ororo-heading-scale: 1;

  /* Fonts. The fallbacks after the first name are what shows
     if the webfont is slow or blocked, so the page never sits
     blank on a weak connection.
       system stack for body:    Georgia, "Times New Roman", serif
       system stack for display: system-ui, "Segoe UI", sans-serif  */
  --ororo-font-body:    "Source Serif 4", Georgia, "Noto Serif", serif;
  --ororo-font-display: "Bricolage Grotesque", system-ui, -apple-system,
                        "Segoe UI", Roboto, sans-serif;
  --ororo-font-ui:      system-ui, -apple-system, "Segoe UI", Roboto,
                        "Noto Sans", Arial, sans-serif;

  /* Palette — these are the same values as shell.css, so the
     chapters and the card grids can never drift apart. */
  --ororo-ink:        #16302e;   /* main text colour            */
  --ororo-ink-soft:   #4c625f;   /* captions, secondary text    */
  --ororo-rule:       #dbe5e3;   /* hairlines and borders       */
  --ororo-rule-soft:  #e9f0ef;   /* the faintest divider        */
  --ororo-mist:       #f2f6f5;   /* pale page tint              */
  --ororo-teal:       #0b6e6e;   /* headings, links             */
  --ororo-teal-dark:  #084f4f;   /* hover, active               */
  --ororo-accent:     #e8a33d;   /* marigold ticks and rules    */
  --ororo-link:       #0b6e6e;   /* link colour                 */
  --ororo-link-line:  #a8cccb;   /* the underline under a link  */
}


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

body {
  font-family: var(--ororo-font-body);
  font-size: var(--ororo-text-size);
  line-height: 1.72;
  color: var(--ororo-ink);
}

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

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

/* The opening paragraph of a chapter, set slightly larger.
   It does the job an introduction does in a printed book:
   tells you where you are before the detail starts. */
:is(main.content, main .content) > h1 + p {
  font-size: 1.13em;
  line-height: 1.62;
  color: var(--ororo-ink-soft);
}

a {
  color: var(--ororo-link);
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ororo-link-line);
  text-underline-offset: 3px;
  transition: color 0.12s ease, text-decoration-color 0.12s ease;
}

a:hover {
  color: var(--ororo-teal-dark);
  text-decoration-color: var(--ororo-teal-dark);
}

/* Highlighting a passage to copy it into notes is something
   students do constantly. Make it look deliberate. */
::selection {
  background: #fbeacd;
  color: var(--ororo-ink);
}

:focus-visible {
  outline: 3px solid var(--ororo-accent);
  outline-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.

   All six are set in the display font — the same one as the
   ororo.world wordmark — while the body stays serif. That
   contrast is what stops a page of study material reading as
   an undifferentiated wall.

   SIZES ARE FLUID. Each one is written as clamp(smallest,
   grows-with-screen-width, largest), so a heading shrinks
   smoothly as the screen narrows instead of jumping at one
   breakpoint. There is no separate phone size to keep in step.
   To make every heading smaller everywhere, change
   --ororo-heading-scale at the top of the file — not these.
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ororo-font-display);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ororo-ink);
  margin-top: 2.2rem;
  margin-bottom: 0.8rem;
  scroll-margin-top: 1.5rem;   /* so links to a heading don't
                                  land with it jammed at the
                                  very top edge of the screen */
}

/* --- h1 — chapter title ---
   The grey line under the title is replaced by a short rule
   that runs teal into marigold: the two site colours, in the
   one place on the page where a flourish is earned. */
h1 {
  font-size: calc(clamp(1.38rem, 1rem + 1.75vw, 2.35rem)
                  * var(--ororo-heading-scale));
  line-height: 1.14;
  letter-spacing: -0.025em;
  margin-top: 0;
  margin-bottom: 1.4rem;
  padding-bottom: 0;
  border-bottom: 0;
}

h1::after {
  content: "";
  display: block;
  width: 4rem;
  height: 5px;
  margin-top: 0.85rem;
  border-radius: 999px;
  background: linear-gradient(90deg,
              var(--ororo-teal) 0%,
              var(--ororo-teal) 55%,
              var(--ororo-accent) 55%,
              var(--ororo-accent) 100%);
}

/* --- h2 — major numbered section (1.1)
   A faint full-width hairline breaks the chapter into chunks;
   the short marigold tick above the words is the marker your
   eye actually catches when scrolling fast. */
h2 {
  font-size: calc(clamp(1.13rem, 0.95rem + 0.85vw, 1.48rem)
                  * var(--ororo-heading-scale));
  color: var(--ororo-teal-dark);
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ororo-rule-soft);
  position: relative;
}

h2::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 2.4rem;
  height: 3px;
  border-radius: 999px;
  background: var(--ororo-accent);
}

/* --- h3 and h5 — subsection (1.1.1) and its unnumbered twin --- */
h3,
h5 {
  font-size: calc(clamp(1.04rem, 0.97rem + 0.32vw, 1.2rem)
                  * var(--ororo-heading-scale));
  margin-top: 2.1rem;
}

/* --- h4 and h6 — deeper subsection (1.4.1.1) and its twin --- */
h4,
h6 {
  font-size: calc(clamp(0.97rem, 0.94rem + 0.14vw, 1.04rem)
                  * var(--ororo-heading-scale));
  font-weight: 600;
  color: var(--ororo-ink-soft);
  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. */
:is(main.content, main .content) > h2:first-of-type {
  margin-top: 1.9rem;
}


/* ============================================================
   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, FIGURES
   ============================================================ */

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

li {
  margin-bottom: 0.4rem;
}

/* Bullets and numbers in teal — a small thing that ties every
   list on the site back to the same palette. */
li::marker {
  color: var(--ororo-teal);
  font-weight: 600;
}

/* --- ordinary tables in the chapter body ---
   Tables inside [Table:] and [Compare Table:] boxes are styled
   in custom-blocks.css and are deliberately left alone here;
   that is what :not(.callout *) is doing.

   These are the plain ones: match-the-columns questions, data
   tables. Vertical grid lines are dropped, because rows are
   what you read across, and the outer frame is rounded to
   match the boxes. */
main table:not(.callout *) {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 1.6rem 0;
  font-family: var(--ororo-font-ui);
  font-size: 0.93rem;
  line-height: 1.55;
  border: 1px solid var(--ororo-rule);
  border-radius: 12px;
  overflow: hidden;
}

main table:not(.callout *) th,
main table:not(.callout *) td {
  border: 0;
  border-bottom: 1px solid var(--ororo-rule-soft);
  padding: 0.6rem 0.8rem;
  text-align: left;
  vertical-align: top;
}

main table:not(.callout *) thead th,
main table:not(.callout *) tr:first-child th {
  background: var(--ororo-mist);
  color: var(--ororo-teal-dark);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ororo-rule);
  vertical-align: middle;
}

main table:not(.callout *) tbody tr:last-child td {
  border-bottom: 0;
}

main table:not(.callout *) tbody tr:hover td {
  background: #f7fbfa;
}

/* Belt and braces: if a box table ever slips past the rule
   above, this puts it straight back to the custom-blocks look
   instead of showing doubled borders. */
.callout[class*="box-"] table {
  border-collapse: collapse;
  border-radius: 0;
  border: 0;
}

/* --- quotes --- */
blockquote {
  border-left: 3px solid var(--ororo-accent);
  border-radius: 0 10px 10px 0;
  background: var(--ororo-mist);
  padding: 0.9rem 1.1rem;
  color: var(--ororo-ink-soft);
  margin: 1.5rem 0;
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* --- images and captions --- */
/* Diagrams sit at 70% of the reading column rather than filling
   it. A full-width diagram beside body text at the same width
   reads as heavier than the prose around it; pulling it in a
   little settles the page. Block + auto margins are what centre
   it - width alone would leave the gap stacked on one side. */
:is(main.content, main .content) img {
  display: block;
  width: 70%;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
}

figure {
  margin: 1.7rem 0;
}

figcaption,
.figure-caption {
  font-family: var(--ororo-font-ui);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ororo-ink-soft);
  margin-top: 0.6rem;
}

/* --- code, for the computer-science books --- */
code {
  font-family: "Cascadia Mono", ui-monospace, SFMono-Regular, Menlo,
               Consolas, monospace;
  font-size: 0.88em;
}

:not(pre) > code {
  background: var(--ororo-mist);
  border: 1px solid var(--ororo-rule-soft);
  border-radius: 5px;
  padding: 0.08em 0.35em;
  color: var(--ororo-teal-dark);
}

pre {
  background: var(--ororo-mist);
  border: 1px solid var(--ororo-rule);
  border-left: 4px solid var(--ororo-teal);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  overflow-x: auto;
  line-height: 1.55;
  margin: 1.5rem 0;
}


/* ============================================================
   5. SIDEBAR / CONTENTS
   ------------------------------------------------------------
   The left sidebar is the list of chapters; the right one is
   the list of sections on the page you're reading. Both used
   to be plain blue links. Now the chapter you're in sits in a
   pale pill, so you can always see where you are in the book.
   ============================================================ */

#quarto-sidebar {
  font-family: var(--ororo-font-ui);
  font-size: 0.92rem;
  background: var(--ororo-mist);
  border-right: 1px solid var(--ororo-rule);
}

#quarto-sidebar .sidebar-item-text {
  line-height: 1.45;
  color: var(--ororo-ink-soft);
  text-decoration: none;
  padding: 0.3rem 0.55rem;
  border-radius: 8px;
}

#quarto-sidebar .sidebar-item {
  margin: 1px 0;
}

#quarto-sidebar .sidebar-item-container {
  border-radius: 8px;
}

#quarto-sidebar .sidebar-item-container:hover {
  background: #e6efee;
}

/* the chapter you are reading */
#quarto-sidebar .sidebar-item-text.active,
#quarto-sidebar .sidebar-link.active,
#quarto-sidebar a.active {
  color: var(--ororo-teal-dark) !important;
  font-weight: 700;
  background: #dfeceb;
  border-radius: 8px;
}

/* the book title at the top of the sidebar */
#quarto-sidebar .sidebar-title,
#quarto-sidebar .sidebar-title a {
  font-family: var(--ororo-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ororo-teal) !important;
  text-decoration: none;
}

/* --- right-hand "On this page" list --- */
#TOC,
nav[role="doc-toc"] {
  font-family: var(--ororo-font-ui);
  font-size: 0.85rem;
}

nav[role="doc-toc"] > h2,
#toc-title {
  font-family: var(--ororo-font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ororo-ink-soft);
  border: 0;
  padding: 0;
  margin-bottom: 0.7rem;
}

nav[role="doc-toc"] ul > li > a {
  color: var(--ororo-ink-soft);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 0.7rem;
}

nav[role="doc-toc"] ul > li > a:hover {
  color: var(--ororo-teal-dark);
}

nav[role="doc-toc"] ul > li > a.active {
  color: var(--ororo-teal-dark) !important;
  font-weight: 700;
  border-left-color: var(--ororo-accent) !important;
}


/* ============================================================
   6. PREVIOUS / NEXT AT THE FOOT OF A CHAPTER
   ------------------------------------------------------------
   Two bare blue links used to sit here. They are now proper
   buttons, because on a phone this is how most students turn
   the page.
   ============================================================ */

.nav-page {
  font-family: var(--ororo-font-ui);
  font-size: 0.9rem;
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--ororo-rule-soft);
}

.nav-page a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--ororo-rule);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ororo-teal-dark);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.nav-page a:hover,
.nav-page a:focus-visible {
  background: var(--ororo-mist);
  border-color: var(--ororo-teal);
}


/* ============================================================
   7. BACK-LINK BAR
   ------------------------------------------------------------
   Shown at the very top of every chapter page (back-link.html,
   inserted by convert-book.ps1). Takes the student back to the
   subject's card grid, and carries the ororo.world wordmark in
   the same style as the site shell (shell.css .wordmark) so it
   reads as the same site, not a different skin.

   NOTE: this section replaces backbar-addition.css. If that
   file is listed in the css: block of a _quarto.yml, take the
   line out — otherwise the two sets of rules fight and which
   one wins depends on load order.
   ============================================================ */

.ororo-backbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  margin: -1.5rem -1.5rem 2rem -1.5rem;
  font-family: var(--ororo-font-ui);
  font-size: 0.9rem;
  background: linear-gradient(180deg, var(--ororo-mist) 0%, #ffffff 100%);
  border-bottom: 1px solid var(--ororo-rule);
}

.ororo-backbar a:not(.ororo-backbar-mark) {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ororo-ink);
  font-weight: 600;
  text-decoration: none;
}

/* The arrow is drawn by the stylesheet rather than typed into
   back-link.html, so the converter never has to emit a
   non-ASCII character. */
.ororo-backbar a:not(.ororo-backbar-mark)::before {
  content: "\2190";
  color: var(--ororo-teal);
  font-size: 1.05em;
  transition: transform 0.12s ease;
}

.ororo-backbar a:not(.ororo-backbar-mark):hover {
  color: var(--ororo-teal-dark);
}

.ororo-backbar a:not(.ororo-backbar-mark):hover::before {
  transform: translateX(-2px);
}

/* the wordmark itself — same font, same teal/marigold split as
   the site shell's header logo */
.ororo-backbar-mark {
  font-family: var(--ororo-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--ororo-teal);
  text-decoration: none;
  white-space: nowrap;
}
.ororo-backbar-mark span { color: var(--ororo-accent); }
.ororo-backbar-mark:hover { text-decoration: none; }


/* ============================================================
   8. 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: 1.02rem;
    line-height: 1.68;
  }

  /* Sizes are handled by the fluid rules in section 2 and need
     no phone override. What still has to change on a narrow
     screen is SPACING: the same gaps that look generous on a
     laptop eat half a phone screen. */
  h1 { margin-bottom: 1.1rem; }
  h1::after { width: 3rem; height: 4px; margin-top: 0.7rem; }

  h2 { margin-top: 2.3rem; padding-top: 1.15rem; }
  h2::before { width: 2rem; }

  h3, h5 { margin-top: 1.7rem; }
  h4, h6 { margin-top: 1.4rem; }

  :is(main.content, 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;
  }

  /* Diagrams go back to full width on a phone. Part labels are
     drawn inside the image, so at 70% of an already narrow
     screen they stop being readable. */
  :is(main.content, main .content) img {
    width: 100%;
  }

  /* A wide data table scrolls inside itself instead of pushing
     the whole page sideways. */
  main table:not(.callout *) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ororo-backbar {
    margin: -0.9rem -0.9rem 1.5rem -0.9rem;
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
  }
  .ororo-backbar-mark { font-size: 0.95rem; }

  .nav-page a { padding: 0.5rem 0.85rem; }
}


/* ============================================================
   9. DARK MODE
   ------------------------------------------------------------
   Only applies if your Quarto theme has a dark toggle. Every
   rule above reads its colours from the variables, so the whole
   chapter re-themes from the eleven values below.
   ============================================================ */

[data-bs-theme="dark"],
body.quarto-dark {
  --ororo-ink:        #e6edec;
  --ororo-ink-soft:   #a9bdba;
  --ororo-rule:       rgba(255, 255, 255, 0.14);
  --ororo-rule-soft:  rgba(255, 255, 255, 0.07);
  --ororo-mist:       rgba(255, 255, 255, 0.05);
  --ororo-teal:       #4fc3bd;
  --ororo-teal-dark:  #7fd6d1;
  --ororo-accent:     #f0b45c;
  --ororo-link:       #4fc3bd;
  --ororo-link-line:  rgba(79, 195, 189, 0.5);
}

[data-bs-theme="dark"] ::selection,
body.quarto-dark ::selection {
  background: rgba(240, 180, 92, 0.3);
  color: inherit;
}

[data-bs-theme="dark"] .nav-page a,
body.quarto-dark .nav-page a {
  background: rgba(255, 255, 255, 0.04);
}

[data-bs-theme="dark"] .ororo-backbar,
body.quarto-dark .ororo-backbar {
  background: rgba(255, 255, 255, 0.04);
}

[data-bs-theme="dark"] main table:not(.callout *) tbody tr:hover td,
body.quarto-dark main table:not(.callout *) tbody tr:hover td {
  background: rgba(255, 255, 255, 0.04);
}

@media (prefers-reduced-motion: reduce) {
  a,
  .nav-page a,
  .ororo-backbar a::before {
    transition: none;
  }
}


/* ============================================================
   10. 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,
  .ororo-backbar,
  footer {
    display: none !important;
  }

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

  h1::after,
  h2::before {
    display: none;
  }

  main table:not(.callout *) {
    border: 1px solid #999999;
  }

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

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