in for horizontal scroll on
small screens. The wrapper is optional — bare tables still display fine. */
.lesson-section .table-wrap,
.section-content .table-wrap,
.lesson-content-wrapper .table-wrap {
overflow-x: auto;
margin: 20px 0;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(44, 114, 79, 0.10);
}
/* ── Tables ──────────────────────────────────────────────────────────────*/
/* Selectors cover every wrapper class used across lesson pages:
.lesson-section — Type B/C static section cards
.section-content — content areas inside accordion or static cards
.lesson-content-wrapper — outer wrapper used on ITC/VAT/CGT pages */
.lesson-section table,
.section-content table,
.lesson-content-wrapper table {
width: 100%;
border-collapse: collapse;
margin: 18px 0;
font-size: 14px;
}
/* Header row */
.lesson-section table thead tr,
.section-content table thead tr,
.lesson-content-wrapper table thead tr {
background: var(--primary-color);
}
.lesson-section table thead th,
.section-content table thead th,
.lesson-content-wrapper table thead th {
padding: 10px 14px;
font-size: 13px;
font-weight: 600;
text-align: left;
color: var(--white);
border: none;
}
/* Body rows — zebra striping */
.lesson-section table tbody tr:nth-child(even) td,
.section-content table tbody tr:nth-child(even) td,
.lesson-content-wrapper table tbody tr:nth-child(even) td {
background: #f4faf7;
}
.lesson-section table tbody tr:nth-child(odd) td,
.section-content table tbody tr:nth-child(odd) td,
.lesson-content-wrapper table tbody tr:nth-child(odd) td {
background: var(--white);
}
/* Body cells */
.lesson-section table tbody td,
.section-content table tbody td,
.lesson-content-wrapper table tbody td {
padding: 10px 14px;
border-bottom: 1px solid #e5e7eb;
vertical-align: top;
}
/* Row hover */
.lesson-section table tbody tr:hover td,
.section-content table tbody tr:hover td,
.lesson-content-wrapper table tbody tr:hover td {
background: #e9f5ee;
}
/* Tables that live inside .table-wrap — remove their own margin since the
wrapper handles spacing, and remove radius (wrapper clips it instead). */
.table-wrap > table {
margin: 0;
}
/* ── Definition lists ────────────────────────────────────────────────────*/
.lesson-section dl,
.section-content dl {
margin: 16px 0;
}
.lesson-section dt,
.section-content dt {
color: var(--primary-color);
font-weight: 700;
margin-top: 14px;
padding-left: 12px;
border-left: 3px solid var(--primary-color);
}
.lesson-section dd,
.section-content dd {
margin-left: 18px;
margin-top: 4px;
padding: 6px 12px 6px 14px;
background: var(--primary-light);
border-radius: 0 6px 6px 0;
font-size: 0.97rem;
}
/* ── Blockquotes ─────────────────────────────────────────────────────────*/
.lesson-section blockquote,
.section-content blockquote {
border-left: 4px solid var(--primary-color);
background: var(--primary-light);
margin: 18px 0;
padding: 16px 20px;
border-radius: 0 8px 8px 0;
font-style: italic;
color: var(--text-dark);
}
/* ── Paragraph spacing ───────────────────────────────────────────────────*/
.section-content p,
.lesson-section>p {
margin-bottom: 1em;
line-height: 1.85;
}
/* ── Unordered/ordered list styling inside content ───────────────────────*/
.section-content ul,
.section-content ol,
.lesson-section>ul,
.lesson-section>ol {
padding-left: 1.6em;
margin-bottom: 1em;
}
.section-content ul li,
.section-content ol li,
.lesson-section>ul li,
.lesson-section>ol li {
margin-bottom: 0.4em;
}
/* ==========================================================================
8 · SIDEBAR ELEMENTS
========================================================================== */
/* Lesson sections list widget */
.lesson-list li a {
color: var(--text-dark);
display: block;
padding: 5px 0;
transition: color 0.2s ease;
text-decoration: none;
}
.lesson-list li a:hover {
color: var(--primary-color);
}
/* Sidebar lesson number label */
.sidebar-lesson-num {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #2c724f;
margin-bottom: 4px;
line-height: 1;
}
/* Category boxed sidebar links — active/current state
NOTE: .overlay-link has z-index:1 in main.css; .boxed-inner has none (z-index:auto).
Applying background to .current a would paint the overlay-link solid green OVER
the text content. Fix: background only on the container; overlay stays transparent;
boxed-inner raised to z-index 2 so it sits above the overlay. */
.category-boxed.current {
background: var(--primary-color);
border-color: var(--primary-color);
}
/* Keep the overlay-link transparent so it doesn't mask the text */
.category-boxed.current .overlay-link {
background: transparent !important;
}
/* Raise content above the overlay-link (z-index:1) */
.category-boxed.current .boxed-inner {
position: relative;
z-index: 2;
}
/* Make all text elements white against the green background */
.category-boxed.current .boxed-inner h6,
.category-boxed.current .boxed-inner .icon,
.category-boxed.current .boxed-inner .sidebar-lesson-num {
color: #ffffff !important;
}
/* ── Sticky sidebar fix ────────────────────────────────────────────────────
Bootstrap 5 rows use align-items:stretch by default, so sidebar columns
stretch to the full height of the content column. With position:sticky on
the inner .sidebar element this can cause the panel to appear "displaced"
on shorter pages because the sticky container is taller than the sidebar's
own content. Setting align-self:flex-start limits the sidebar column's
height to its own content, allowing sticky to anchor correctly.
Covers two sidebar patterns used across lesson pages:
· ITC / VAT / CGT pages → .sidebar-page-container .sidebar-side
· Debt pages → .section > .container > .row aside.col-lg-3 */
.sidebar-page-container .sidebar-side,
.section > .container > .row > aside.col-lg-3 {
align-self: flex-start;
}
/* Remove all underlines from sidebar links globally */
.sidebar a,
.sidebar a:hover,
.sidebar a:focus,
.sidebar a:active,
.sidebar-widget a,
.sidebar-widget a:hover,
.category-boxed a,
.category-boxed a:hover,
.category-boxed .overlay-link {
text-decoration: none !important;
}
/* ==========================================================================
9 · LESSON PAGE HEADER
Replaces the old .service-title-box (pink) and plain feature-steps-title h2.
Displayed above the feature-steps grid, showing:
lesson number tag · lesson title · short excerpt.
========================================================================== */
.lesson-page-header {
display: block;
background: none;
padding: 0 0 28px;
margin-bottom: 8px;
max-width: 80%;
}
.lesson-page-header .lesson-number {
display: block;
font-size: 0.85rem;
font-weight: 700;
color: var(--primary-color);
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 6px;
}
.lesson-page-header .lesson-name {
display: block;
font-size: 2rem;
font-weight: 800;
color: #1a1a1a;
line-height: 1.15;
margin: 0 0 10px;
}
.lesson-page-header .lesson-excerpt {
display: block;
font-size: 0.92rem;
color: #555;
line-height: 1.6;
margin: 0;
font-weight: 400;
font-style: normal;
}
/* Suppress key-term italic inside the lesson header — the header uses plain
text in ITC/VAT lessons; CGT lessons embed key-term spans which must not
render in italic here to maintain visual consistency. */
.lesson-page-header .key-term {
font-style: normal;
}
/* Responsive: full-width on smaller screens */
@media (max-width: 768px) {
.lesson-page-header {
max-width: 100%;
}
.lesson-page-header .lesson-name {
font-size: 1.5rem;
}
}
/* ==========================================================================
10 · READABILITY HIGHLIGHTS (applied by readability_enhancer.py)
Two inline highlight types to improve scan-ability of lesson content.
.leg-ref — legislative references (section numbers, act names, schedules,
statutory instruments). Green tint matches site primary colour.
.key-term — core Zimbabwean tax concepts / defined terms. Amber/gold tint
matches the site's secondary colour (case-law accents).
========================================================================== */
/* ── Legislative reference (Section 8(1)(a), Finance Act 2025, etc.) ──────── */
.leg-ref {
background: rgba(44, 114, 79, 0.10);
color: #1a5c35;
border-bottom: 2px solid var(--primary-color);
padding: 1px 5px;
border-radius: 3px;
font-weight: 700;
font-size: 0.94em;
display: inline;
cursor: pointer;
transition: background 0.2s ease;
}
.leg-ref:hover {
background: rgba(44, 114, 79, 0.20);
}
/* Invert colours inside dark takeaway panels */
.takeaway-list .leg-ref,
.takeaway-box .leg-ref {
background: rgba(255, 255, 255, 0.18);
color: #b8ffda;
border-bottom-color: var(--secondary-color);
}
/* ── Key defined tax term / concept ───────────────────────────────────────── */
.key-term {
background: none;
color: inherit;
border-bottom: 2px dotted var(--secondary-color);
padding: 0 2px;
border-radius: 0;
font-weight: 700;
font-style: italic;
display: inline;
cursor: default;
}
.key-term:hover {
background: none;
}
/* Invert colours inside dark takeaway panels */
.takeaway-list .key-term,
.takeaway-box .key-term {
color: inherit;
border-bottom-color: var(--secondary-color);
}
/* ── Leg-ref inside a key-term (or vice-versa) — avoid double border ──────── */
.key-term .leg-ref,
.leg-ref .key-term {
border-bottom: none;
padding: 0;
background: transparent;
}
/* ── Quoted text ("direct quotes / scare-quoted terms") ──────────────────── */
.quoted-text {
font-weight: 700;
font-style: italic;
color: #1a3a4f;
border-left: 3px solid var(--primary-color);
padding: 0 5px 0 6px;
background: rgba(44, 114, 79, 0.06);
border-radius: 0 3px 3px 0;
display: inline;
}
/* Inside dark takeaway panels */
.takeaway-list .quoted-text,
.takeaway-box .quoted-text {
color: #cbe8d8;
background: rgba(255, 255, 255, 0.10);
border-left-color: var(--secondary-color);
}
/* ==========================================================================
11 · RESPONSIVE ADJUSTMENTS
========================================================================== */
@media (max-width: 992px) {
.lesson-section>h2,
.lesson-section>h3 {
font-size: 1.1rem;
}
}
@media (max-width: 768px) {
:root {
--header-band-pad: 20px;
}
.lesson-section {
padding: var(--header-band-pad);
}
.lesson-summary {
padding: 15px 20px;
}
.section-content {
padding: 16px 20px 20px 20px;
}
.lesson-summary h2 {
font-size: 1rem;
}
.lesson-section>h2,
.lesson-section>h3 {
font-size: 1rem;
padding: 14px var(--header-band-pad);
}
.takeaway-list,
.takeaway-box {
padding: 20px;
}
.lesson-section table,
.section-content table,
.lesson-content-wrapper table {
font-size: 12px;
}
.applicability-grid {
grid-template-columns: 1fr;
}
}