/*
 * Print stylesheet for dcf.cymru cover lesson worksheets and worked examples.
 * Worksheets are plain HTML so a cover teacher can open one and hit Ctrl+P
 * with no download, no account and no software beyond a browser.
 */

:root {
    --ink: #1f1f1f;
    --ink-muted: #595959;
    --link: #0360a6;
    --element: #215b57;
    --band: #efefef;
    --rule: #c9c9c9;
    --brand: #c73333;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
    max-width: 48rem;
    font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
    font-size: 11.5pt;
    line-height: 1.45;
    color: var(--ink);
    background: #fff;
}

a {
    color: var(--link);
}

/* Header ------------------------------------------------------------------ */

.ws-head {
    border-bottom: 3px solid var(--element);
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
}

.ws-kicker {
    margin: 0;
    font-size: 9.5pt;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.ws-head h1 {
    margin: 0.25rem 0 0.4rem;
    font-size: 19pt;
    line-height: 1.15;
    color: var(--element);
}

.ws-dcf {
    margin: 0;
    font-size: 10pt;
    color: var(--ink);
}

.ws-name {
    display: flex;
    gap: 1.5rem;
    margin: 0.85rem 0 0;
    font-size: 10pt;
}

.ws-name span {
    flex: 1;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 0.15rem;
}

/* Sections --------------------------------------------------------------- */

h2 {
    font-size: 12.5pt;
    margin: 1.4rem 0 0.4rem;
    color: var(--element);
}

h3 {
    font-size: 11pt;
    margin: 1rem 0 0.3rem;
}

p,
li {
    margin: 0.4rem 0;
}

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

.ws-box {
    border: 1px solid var(--rule);
    background: var(--band);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
}

.ws-box h2,
.ws-box h3 {
    margin-top: 0;
}

.ws-box--teacher {
    background: #fff;
    border-left: 5px solid var(--brand);
}

.ws-box--teacher .ws-label {
    display: block;
    font-size: 9.5pt;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 0.25rem;
}

.ws-timing {
    font-weight: 700;
    color: var(--ink-muted);
}

/* Writing space ---------------------------------------------------------- */

.ws-lines {
    margin: 0.6rem 0 1.1rem;
}

.ws-lines span {
    display: block;
    border-bottom: 1px solid var(--rule);
    height: 1.7rem;
}

.ws-frame {
    border: 1px solid var(--ink);
    min-height: 6rem;
    padding: 0.5rem;
    margin: 0.6rem 0 1.1rem;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.6rem 0 1.1rem;
    font-size: 10.5pt;
}

th,
td {
    border: 1px solid var(--ink);
    padding: 0.35rem 0.45rem;
    text-align: left;
    vertical-align: top;
}

th {
    background: var(--band);
}

td.ws-blank {
    height: 1.9rem;
}

/* Success criteria ------------------------------------------------------- */

.ws-check {
    list-style: none;
    padding-left: 0;
}

.ws-check li {
    padding-left: 1.9rem;
    position: relative;
}

.ws-check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 1.1rem;
    height: 1.1rem;
    border: 1px solid var(--ink);
}

/* Worked examples -------------------------------------------------------- */

.ws-example {
    border-left: 5px solid var(--element);
    padding: 0.2rem 0 0.2rem 1rem;
    margin: 0.8rem 0;
}

.ws-example p:first-child {
    margin-top: 0;
}

.ws-annotation {
    font-size: 10pt;
    font-style: italic;
    color: var(--element);
    margin: 0.2rem 0 0.9rem;
}

.ws-code {
    font-family: "DejaVu Sans Mono", Consolas, monospace;
    font-size: 10pt;
    background: var(--band);
    border: 1px solid var(--rule);
    padding: 0.6rem 0.75rem;
    white-space: pre-wrap;
    margin: 0.6rem 0 1rem;
}

/* Print ------------------------------------------------------------------ */

@media print {
    @page {
        size: A4;
        margin: 14mm;
    }

    body {
        padding: 0;
        max-width: none;
        font-size: 11pt;
    }

    a {
        color: var(--ink);
        text-decoration: none;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: var(--ink-muted);
    }

    h2 {
        break-after: avoid;
    }

    .ws-box,
    .ws-frame,
    table,
    .ws-example {
        break-inside: avoid;
    }

    .ws-pagebreak {
        break-before: page;
    }
}