/* printable voter guide summary; see _layouts/ballot-print.html */

@page {
    size: letter landscape;
    margin: 0;
}

html {
    background: #eee;
}

body {
    color: #000;
    font-family: Merriweather, serif;
    /* overridden by fit() in the layout */
    font-size: 10pt;
    line-height: 1.35;
    margin: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

html.sheet .only-duplex, html.duplex .only-sheet {
    display: none;
}

/* a landscape letter sheet holding two portrait half-sheets */

.paper {
    position: relative;
    display: flex;
    width: 11in;
    height: 8.5in;
    margin: 20px auto;
    background: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.half {
    box-sizing: border-box;
    width: 5.5in;
    height: 8.5in;
    padding: 0.5in 0.55in;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* cut line; not a border, so both halves stay exactly symmetric */
html.duplex .paper::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 1px);
    border-left: 2px dashed #ccc;
}

/* header/footer */

header {
    text-align: center;
    border-bottom: 2px solid #ccc;
    padding-bottom: 0.8em;
    margin-bottom: 0.4em;
}

h1 {
    font-size: 1.75em;
    margin: 0;
    line-height: 1.3;
}

.subtitle {
    font-style: italic;
}

footer {
    margin-top: auto;
    border-top: 2px solid #ccc;
    padding-top: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4em;
}

footer .url {
    font-weight: bold;
    font-size: 1.25em;
}

img.qr {
    width: 1in;
    height: 1in;
}

/* the recommendations */

section p {
    font-weight: bold;
    margin: 1em 0 0.4em;
}

section ul {
    list-style: none;
    background: #ddd;
    border-radius: 5px;
    padding: 0.4em 0.8em;
    margin: 0;
}

section li {
    margin: 0.2em 0;
}

section a {
    color: inherit;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.2em;
}

span.endorsement {
    font-weight: bold;
    text-align: right;
}

/* on-screen controls */

.controls {
    font-size: 11pt;
    text-align: center;
    padding: 12px 15px 0;
}

.controls .warning {
    color: #c00;
    font-weight: bold;
}

.controls a {
    color: #777;
    text-decoration: none;
}

.controls label {
    margin-left: 12px;
    text-align: right;
}

@media print {
    html {
        background: none;
    }

    .controls {
        display: none;
    }

    .paper {
        margin: 0;
        box-shadow: none;
        break-after: page;
    }
}