/* --- Google Font Import --- */
/* Add this link to your site/Elementor header to load the font:
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
*/
/* ====================================
1. GLOBAL PRINT STYLES AND PAGE BREAKS
==================================== */
@page {
/* Set A4 size for the document */
size: A4;
/* Global margins for standard content pages (not front matter) */
margin: 30mm 25mm 30mm 25mm;
/* Define the footer region for page numbers */
@bottom-center {
content: "Page " counter(page); /* Shows "Page X" */
font-family: 'Inter', sans-serif;
font-size: 10pt;
color: #4a5568;
}
}
/* Define the page style for front matter (no page numbers) */
@page front-matter {
@bottom-center {
content: none;
}
}
/* Critical CSS for Print Media */
@media print {
/* Ensure the print button is hidden */
.print-button-container {
display: none !important;
}
/* CRITICAL: Force background colors to print for reliable PDF output (may not work on all browsers/apps) */
.cover-page {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* Apply front-matter page type to specific sections */
.cover-page, .copyright-page, .front-matter {
page: front-matter;
}
}
/* Page Break Control */
.page-start { page-break-before: always; }
.module-start { page-break-before: always; padding-top: 0; }
h2, h3, .sqa-assessment-grid, .assessment-table, .next-lesson-prompt { page-break-inside: avoid; }
/* ====================================
2. TYPOGRAPHY AND LAYOUT
==================================== */
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
font-size: 11pt;
color: #1d2b40;
}
h2 {
font-size: 18pt;
font-weight: 600;
color: #1d2b40;
margin-top: 1.2em;
margin-bottom: 0.5em;
border-bottom: 2px solid #4338ca;
padding-bottom: 5px;
}
h3 {
font-size: 14pt;
font-weight: 600;
color: #1d2b40;
margin-top: 1em;
margin-bottom: 0.5em;
}
h4 {
font-size: 12pt;
font-weight: 600;
margin-top: 15pt;
margin-bottom: 5px;
}
p {
margin-top: 0.7em;
margin-bottom: 0.7em;
}
/* --- Cover Page Styling --- */
.cover-page {
height: 297mm; /* Full A4 height */
width: 210mm; /* A4 width */
display: block;
text-align: center;
background-color: #f5f7fa;
}
.cover-content-wrapper {
padding-top: 60mm;
margin: 0 auto;
width: 80%;
}
.main-title {
font-size: 36pt;
font-weight: 800;
color: #4338ca;
margin-bottom: 10pt;
}
.sub-title {
font-size: 16pt;
color: #1d2b40;
margin-bottom: 20pt;
}
.cover-body {
margin-top: 40pt;
}
/* --- Table of Contents (TOC) Specific CSS (Requires CSS Paged Media support) --- */
#toc li {
display: flex;
justify-content: space-between;
padding-bottom: 2px;
line-height: 1.4;
list-style: none; /* Remove default bullets/numbers */
}
#toc a {
text-decoration: none;
color: #1d2b40;
}
/* Generate dotted leader line */
#toc li::after {
content: leader(dotted);
color: #a0aec0;
margin-left: 0.5em;
margin-right: 0.5em;
order: 1;
}
/* Retrieve and display the page number */
#toc .page-number::before {
content: target-counter(attr(href, url), page);
font-weight: 600;
order: 2;
}
#toc ul {
padding-left: 0;
margin-top: 0.5em;
}
.module-title {
margin-top: 20pt;
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
}
/* --- Helper Classes for Layout/Blocks --- */
.module-intro, .next-steps-box {
margin-bottom: 15pt;
}
.module-figure {
margin: 20pt auto;
text-align: center;
}
.module-image {
width: 80%;
max-width: 400px;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.figure-caption {
margin-top: 5px;
}
.next-lesson-prompt {
text-align: center;
margin-top: 30pt;
padding: 10pt;
border: 1px solid #4338ca;
border-radius: 8px;
}
.next-lesson-prompt p {
font-weight: 600;
color: #4338ca;
margin: 0;
}
.resource-section {
border-top: 1px solid #ccc;
padding-top: 15pt;
margin-top: 30pt;
}
.resource-title {
color: #4338ca;
margin-top: 0;
}
.resource-subtitle {
margin-bottom: 5px;
font-size: 10pt;
font-weight: 600;
color: #1d2b40;
}
.downloadable-resources, .core-texts-list {
list-style-type: disc;
margin-top: 5pt;
font-size: 10pt;
color: #4a5568;
padding-left: 20px;
}
.downloadable-resources a {
color: #4338ca;
}
/* --- Conclusion/Next Steps Block --- */
.next-steps-box {
background-color: #f7f9ff;
border: 2px solid #4338ca;
padding: 15px;
margin: 20px 0;
border-radius: 8px;
}
.next-steps-title-box {
font-weight: 600;
color: #1d2b40;
margin-bottom: 10px;
}
.next-steps-link {
margin-top: 0;
color: #4338ca;
border-bottom: none;
padding-bottom: 0;
}
.next-steps-list {
list-style-type: disc;
margin-top: 10px;
font-size: 10pt;
padding-left: 20px;
}
.final-note {
margin-top: 20pt;
text-align: center;
font-style: italic;
}
/* --- SQA ASSESSMENT GRID STYLING (Standard size for tables) --- */
.sqa-assessment-grid {
margin-top: 30px;
margin-bottom: 30px;
padding: 15px;
border: 1px solid #4338ca;
border-radius: 8px;
background-color: #f7f9ff;
page-break-inside: avoid;
}
.sqa-assessment-grid h4 {
color: #4338ca;
border-bottom: 2px solid #a0aec0;
padding-bottom: 5px;
margin-top: 0;
font-size: 14pt;
}
.sqa-table {
width: 100%;
border-collapse: collapse;
font-size: 8pt; /* REDUCED FONT SIZE for table density */
table-layout: fixed;
margin-top: 10px;
}
.sqa-assessment-grid th,
.sqa-assessment-grid td {
border: 1px solid #a0aec0;
padding: 6px 8px; /* REDUCED PADDING */
text-align: left;
vertical-align: top;
}
.sqa-assessment-grid th {
background-color: #e6e8fc;
font-weight: 600;
}
/* SQA BAND COLORS for the Expectations Tables */
.band-excellent { background-color: #e6ffe6; } /* Light Green */
.band-strong { background-color: #fffbe6; } /* Light Yellow */
.band-satisfactory { background-color: #f0f0f0; } /* Light Gray */
.band-limited { background-color: #f7e6e6; } /* Light Red/Pink */
.band-insufficient { background-color: #e6e6f7; } /* Light Blue/Lavender */
/* Reset margins inside SQA tables for clean print presentation */
.list-disc {
padding-left: 20px;
margin-top: 5px;
list-style: disc;
}
.list-disc li {
margin-bottom: 5px;
list-style: disc;
}
.sqa-assessment-grid ul {
padding-left: 15px;
}
.sqa-assessment-grid p {
margin-top: 0;
margin-bottom: 5px;
}