/* The 2026 NALC election reader: the framed card on the home page and the
   same reader filling nalc-election-2026.html (Jeff, 2026-09-16; its own
   page and all four documents 2026-09-22). Shared by both pages, so it lives
   here rather than in either one. Read with static/js/nalc-report.js.

   Election-themed frame: a starred blue-to-pink border on the document sheet
   (the star is an inline SVG data URI; CSP img-src allows data:), a strip of
   porch bunting across the top of the card, and a ballot-box eyebrow. */

/* Porch bunting (Jeff, 2026-09-16): pleated fans in the site's pink, white
   and blue -- Jeff's own image, cropped to five fans between rope joins so it
   tiles seamlessly (static/images/bunting.png, transparent background),
   scaled to the strip's height and repeated. */
.prh-bunting {
    height: 82px;
    background-color: #eef2f7;
    background-image: url("../images/bunting.png");
    background-repeat: repeat-x;
    background-position: top center;
    background-size: auto 82px;
    border-top: 1px solid var(--color-prh-line);
}
.prh-doc-viewer {
    height: 24rem;
    overflow-y: auto;
    overflow-x: hidden;
    background: #eef2f7;
    padding: 1.25rem;
}
.prh-doc-layout { display: flex; align-items: flex-start; gap: 1.25rem; max-width: 68rem; margin: 0 auto; }
.prh-doc-main { flex: 1 1 auto; min-width: 0; max-width: 52rem; }
.prh-doc-select-wrap { display: none; }
.prh-doc-pager { display: flex; align-items: center; gap: 1rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-prh-line); font-size: 0.95rem; font-weight: 700; }
.prh-doc-pager-gap { flex: 1 1 auto; }
.prh-doc-pager a { color: var(--color-prh-blue-2); text-decoration: none; }
.prh-doc-pager a:hover { text-decoration: underline; }
.prh-doc-pager .prh-doc-next { text-align: right; }
.prh-doc-pager-doc { display: block; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-prh-mute); }

/* Contents pane: one entry per document, the open document's sections
   listed beneath it -- offices bold, candidates indented under them. */
.prh-doc-nav {
    flex: 0 0 15rem;
    position: sticky;
    top: 0;
    max-height: 21.5rem;          /* the viewer's height less its padding */
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--color-prh-line);
    border-radius: 0.75rem;
    padding: 0.75rem 0.5rem;
    font-size: 0.8rem;
    line-height: 1.3;
}
.prh-doc-nav-title { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-prh-mute); padding: 0 0.5rem 0.5rem; }
.prh-doc-nav ol { list-style: none; margin: 0; padding: 0; }
.prh-doc-nav a { display: block; padding: 0.3rem 0.5rem; border-radius: 0.4rem; color: var(--color-prh-ink); text-decoration: none; }
.prh-doc-nav a:hover { background: var(--color-prh-bg); color: var(--color-prh-blue-2); }
.prh-doc-nav a.is-current { background: var(--color-prh-bg); color: var(--color-prh-blue); font-weight: 700; }
.prh-doc-nav-doc { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--color-prh-line); }
.prh-doc-nav-doc:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prh-doc-nav-doc > a { font-weight: 800; color: var(--color-prh-blue-2); }
.prh-doc-nav-doc > ol { display: none; margin: 0.15rem 0 0.35rem; }
.prh-doc-nav-doc.is-open > ol { display: block; }
.prh-doc-nav-top a { font-weight: 700; margin-top: 0.35rem; padding-left: 1rem; }
.prh-doc-nav-sub a { padding-left: 2rem; color: var(--color-prh-mute); }

@media (max-width: 767px) {
    .prh-doc-nav { display: none; }
    .prh-doc-select-wrap { display: block; margin-bottom: 0.75rem; }
    .prh-doc-select-label { display: block; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-prh-mute); margin-bottom: 0.25rem; }
    .prh-doc-select { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--color-prh-line); border-radius: 0.6rem; background: #ffffff; font: inherit; font-size: 0.95rem; color: var(--color-prh-ink); }
    .prh-doc-viewer { height: 28rem; }
    .prh-doc-pager { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .prh-doc-pager .prh-doc-next { text-align: left; }
}

.prh-doc-sheet {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 2rem 2.25rem;
    min-height: 20rem;
    overflow-wrap: anywhere;
}
.prh-doc-sheet table { display: block; max-width: 100%; overflow-x: auto; }
.prh-doc-sheet h1 { font-size: 1.6rem; font-weight: 800; margin-top: 2.5rem; }
.prh-doc-sheet h1:first-child,
.prh-doc-section > h1:first-child { margin-top: 0; }
.prh-doc-sheet h2 { font-size: 1.25rem; }
.prh-doc-sheet img { display: inline-block; vertical-align: middle; }
.prh-doc-loading { color: var(--color-prh-mute); }
@media (max-width: 640px) {
    .prh-doc-viewer { padding: 0.75rem; }
    .prh-doc-sheet { padding: 1.25rem 1rem; }
}

/* The cover page's three report blocks: name, description and links on the
   left, the QR code on the right; stacked on a phone. */
.prh-cover-reports { margin: 0; }
.prh-cover-report {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin: 1rem 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-prh-line);
    border-radius: 0.75rem;
    background: #f8fafc;
}
.prh-cover-report-text { flex: 1 1 auto; min-width: 0; }
.prh-cover-report-text p { margin: 0 0 0.6rem; }
.prh-cover-report-text p:last-child { margin-bottom: 0; }
.prh-cover-report-name { font-size: 1.1rem; }
.prh-cover-report-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-weight: 700; }
.prh-cover-report-links a { text-decoration: none; }
.prh-cover-report-links a:hover { text-decoration: underline; }
.prh-cover-report-link a { color: var(--color-prh-mute); font-weight: 600; }
.prh-cover-report-qr { flex: 0 0 auto; }
.prh-cover-report-qr img { width: 8rem !important; height: auto; display: block; }
@media (max-width: 640px) {
    .prh-cover-report { flex-direction: column; }
    .prh-cover-report-qr { align-self: center; }
}

/* The starred election frame around the sheet. */
.prh-election-frame {
    padding: 16px;
    border-radius: 1.25rem;
    background-color: #3b82f6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M8.0,2.8 L9.2,6.3 L13.0,6.4 L10.0,8.6 L11.1,12.2 L8.0,10.1 L4.9,12.2 L6.0,8.6 L3.0,6.4 L6.8,6.3Z'/%3E%3C/svg%3E"),
                      linear-gradient(90deg, #60a5fa 0%, #3b82f6 40%, #ec4899 100%);
    background-size: 16px 16px, 100% 100%;
    background-position: 0 0, 0 0;
    box-shadow: 0 2px 4px rgba(15,23,42,0.06), 0 8px 16px rgba(15,23,42,0.08), 0 24px 48px rgba(15,23,42,0.14);
}

/* nalc-election-2026.html: the documents as an ordinary webpage -- no boxed
   viewer, no frame; the page itself scrolls (Jeff, 2026-09-22). The contents
   sidebar sticks below the site's sticky header. */
.prh-doc-page .prh-doc-layout { max-width: none; gap: 2rem; }
.prh-doc-page .prh-doc-nav { flex-basis: 16rem; top: 6rem; max-height: calc(100vh - 7rem); font-size: 0.85rem; }
.prh-doc-page .prh-doc-main { max-width: 52rem; }
.prh-doc-page .prh-doc-sheet { background: transparent; border-radius: 0; padding: 0; min-height: 0; }
.prh-bunting-page { border: 1px solid var(--color-prh-line); border-radius: 1rem; margin-bottom: 2rem; }

/* Beside the vote-by-mail article on the home page (Jeff, 2026-10-14) the
   reader has half the width on a wide screen, so there it takes the phone
   treatment: the contents pane hides and the Jump-to-a-section drop-down
   shows. Below the two-column breakpoint the cards stack full width and
   the rules above apply as before. */
@media (min-width: 768px) {
    .prh-doc-half .prh-doc-nav { display: none; }
    .prh-doc-half .prh-doc-select-wrap { display: block; margin-bottom: 0.75rem; }
    .prh-doc-half .prh-doc-select-label { display: block; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-prh-mute); margin-bottom: 0.25rem; }
    .prh-doc-half .prh-doc-select { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--color-prh-line); border-radius: 0.6rem; background: #ffffff; font: inherit; font-size: 0.95rem; color: var(--color-prh-ink); }
    .prh-doc-half .prh-doc-layout { max-width: none; }
}