/* ════════════════════════════════════════════════════════════════
   FlexPoint Course Catalog — Paged.js Print Stylesheet
   ════════════════════════════════════════════════════════════════ */

.site-header,
footer.site-footer,
.jump-links,
.page-title-block,
.page-title-block__wave,
.jump-links__wave,
.hide-on-details,
.no-jumplink {
    display: none !important;
}


/* ── Page setup with margin boxes ─────────────────────────────── */
@page {
    size: letter portrait;
    margin: 25mm 12mm 20mm 12mm;

    @top-left {
        content: element(pageHeaderTitle);
        vertical-align: bottom;
        padding-bottom: 3mm;
        border-bottom: 1.5pt solid #003865;
    }

    @top-center {
        content: "";
        border-bottom: 1.5pt solid #003865;
    }

    @top-right {
        content: element(pageHeaderLogo);
        vertical-align: bottom;
        padding-bottom: 3mm;
        border-bottom: 1.5pt solid #003865;
    }

    @bottom-left {
        content: element(pageFooterLeft);
        vertical-align: top;
        padding-top: 3mm;
        border-top: 1pt solid #003865;
    }

    @bottom-center {
        content: element(pageFooterCenter);
        vertical-align: top;
        padding-top: 3mm;
        border-top: 1pt solid #003865;
    }

    @bottom-right {
        content: element(pageFooterRight);
        vertical-align: top;
        padding-top: 3mm;
        border-top: 1pt solid #003865;
    }
}




/* ── Running element: full-width header (title + logo) ───────── */
.print-header-title {
    position: running(pageHeaderTitle);
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    font-weight: 700;
    color: #003865;
    white-space: nowrap;
}

.print-header-logo {
    position: running(pageHeaderLogo);
    text-align: right;
}

    .print-header-logo img {
        height: 12mm;
        width: auto;
        display: inline-block;
    }


/* ── Running elements: three footer sections ────────────────── */
.print-footer-left {
    position: running(pageFooterLeft);
    text-align: left !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 6pt !important;
    color: #555555 !important;
}

.print-footer-center {
    position: running(pageFooterCenter);
    text-align: center !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 6pt !important;
    color: #555555 !important;
}

.print-footer-right {
    position: running(pageFooterRight);
    text-align: right !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 6pt !important;
    color: #555555 !important;
}


/* ── Global body styling ─────────────────────────────────────── */
body {
    background: #ffffff !important;
    color: #000000 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 7pt !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}


/* ══════════════════════════════════════════════════════════════
   main is the single 3-column multicol container for EVERYTHING
   ══════════════════════════════════════════════════════════════ */
main#main {
    display: block !important;
    columns: 3 !important;
    column-gap: 12pt !important;
    column-fill: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}


/* ── Legend (N / H key) ──────────────────────────────────────── */
.print-legend {
    column-span: all !important;
    display: flex !important;
    gap: 10pt !important;
    align-items: center !important;
    margin: 0 0 4pt !important;
    padding: 2pt 0 !important;
    font-size: 6pt !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

    .print-legend .legend-item {
        display: inline-flex !important;
        align-items: center !important;
        gap: 2pt !important;
    }


/* ══════════════════════════════════════════════════════════════
   Grade-level heading (h2) — spans all 3 columns by default
   Override with `body.compact h2.grade-heading { column-span: none }`
   on specific pages to get continuous flow.
   ══════════════════════════════════════════════════════════════ */
h2.grade-heading {
    column-span: all !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 9pt !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: #003865 !important;
    background-color: #003865 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6pt !important;
    padding: 3pt 5pt !important;
    margin: 6pt 0 3pt !important;
    display: block !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    break-after: avoid !important;
}

main#main > h2.grade-heading:first-of-type {
    margin-top: 0 !important;
}


/* ── Category heading (h3) — flows inline ────────────────────── */
h3.category-heading {
    display: block !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 7pt !important;
    font-weight: 700 !important;
    color: #00837A !important;
    background: transparent !important;
    text-transform: uppercase !important;
    letter-spacing: 0.7pt !important;
    border-bottom: 0.5pt solid #00837A !important;
    padding-bottom: 1pt !important;
    margin: 5pt 0 2pt !important;
    break-after: avoid !important;
    break-inside: avoid !important;
}


/* ── Subject heading (h4) — flows inline ─────────────────────── */
h4.subject-heading {
    display: block !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 6.5pt !important;
    font-weight: 700 !important;
    color: #003865 !important;
    background: transparent !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2pt !important;
    margin: 3pt 0 1pt !important;
    padding: 0 0 1pt !important;
    border-bottom: 0.25pt solid #cccccc !important;
    break-after: avoid !important;
    break-inside: avoid !important;
}


/* ── Course row — flat div with name (left) and tags (right) ── */
.course {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 3pt !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 6pt !important;
    line-height: 1.4 !important;
    color: #111111 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    break-inside: avoid !important;
}

    .course .course-name {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        text-decoration: none !important;
        color: #111111 !important;
        font-size: 6pt !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }


    /* ── N / H badge tags ─────────────────────────────────────────── */
    .course .course-tags {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        gap: 1.5pt !important;
        white-space: nowrap !important;
        padding: 0 !important;
        margin: 0 !important;
    }

.course-tag {
    display: inline-block !important;
    font-size: 5pt !important;
    font-weight: 700 !important;
    padding: 0 1.5pt !important;
    border-radius: 1pt !important;
    line-height: 1.2 !important;
}

.course-tag--yellow {
    background: #FFF3CD !important;
    background-color: #FFF3CD !important;
    color: #7A5200 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.course-tag--accent {
    background: #D1ECE9 !important;
    background-color: #D1ECE9 !important;
    color: #0A4F4A !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}


/* ── Paged.js on-screen preview styling ──────────────────────── */
@media screen {
    body {
        background: #e8e8e8 !important;
    }

    .pagedjs_pages {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 20px 0;
    }

    .pagedjs_page {
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
}