/* Color design for every section (approved by Justin 2026-10-09; one shared
   file since 2026-10-09, replacing the five per-section copies).
   Loaded after the shared StyleSheet1.css on lesson, chapter and front pages.
   Uses the site's own colors: navy #16243D, teal #0E9AA7. */

/* Headings */
.content h1 { color: #16243D; line-height: 1.25; }
.content h2 { color: #0A7680; text-align: left; border-bottom: 2px solid #cfe8ea; padding-bottom: 6px; margin-top: 40px; }
.content h3 { color: #16243D; }

/* Side menu: current page in a slightly darker gray than the menu (#f0f0f0)
   with a teal bar, instead of a solid navy block. */
.sidenav ul li a.active-nav,
.sidenav ul li a.active-nav:hover {
    background-color: #dcdcdc;
    color: #16243D;
    font-weight: bold;
    border-left: 4px solid #0E9AA7;
    padding-left: 12px;
}

/* Boxes */
.c-box { border-radius: 6px; padding: 10px 16px; margin: 18px 0; }
.c-box p { margin: 6px 0; }
.c-lbl { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }

/* Formula boxes: no label, just the equation, close to the sentence that
   leads into it, so the sentence reads straight on into the equation. */
.c-key { background: #eaf6f7; border-left: 5px solid #0E9AA7; width: fit-content; max-width: 100%;
         padding: 4px 16px; margin: 4px 0 14px; }

/* Examples (gray). The older "example" boxes get the same look. */
.c-ex { background: #f3f4f6; border-left: 5px solid #6b7280; }
.c-ex .c-lbl { color: #4b5563; }
.content .example { background: #f3f4f6; border: 0; border-left: 5px solid #6b7280; border-radius: 6px; padding: 10px 16px; }

/* Remember / watch out (amber) */
.c-note { background: #fff4de; border-left: 5px solid #d48a00; }
.c-note .c-lbl { color: #8a5a00; }

.c-box figure { margin: 10px 0; }
@media screen and (max-width: 768px) { .c-box, .content .example { padding: 8px 12px; } }
@media print { .c-box, .content .example { break-inside: avoid; } }

/* Chapter pages: topic links are teal like the headings, so underline them to
   show they are links (Justin, 2026-10-09). Thicker underline on hover. */
.content .topiclink a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.content .topiclink a:hover { text-decoration-thickness: 2px; }
/* Front pages, where every heading is a topic link: no bar under each linked
   heading, and a little less space above it. */
.content h2.topiclink, .content h3.topiclink { border-bottom: 0; padding-bottom: 0; }
.content h2.topiclink { margin-top: 28px; }