/* BC Election Voter Guide — shared stylesheet */
/* Independent, non-partisan reference. No JS, no external assets, no tracking. */

:root {
    color-scheme: light dark;
    --paper: #f7f5f0;
    --ink: #272824;
    --secondary: #4a4c46;
    --rule: #c9cac2;
    --highlight: #e8e6df;
    --accent: #4a5568;
    --body-size: 1.0625rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #1b1a17;
        --ink: #e0ddd6;
        --secondary: #a6a39b;
        --rule: #4a4843;
        --highlight: #2a2824;
        --accent: #8b9bb0;
    }
}

* { box-sizing: border-box; }

html { font-size: var(--body-size); }

body {
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page {
    max-width: 52rem;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Header --- */
header {
    border-top: 3px solid var(--accent);
    padding-top: 1.25rem;
    margin-bottom: 1.5rem;
}
.site-name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.site-name a { color: var(--accent); text-decoration: none; }
.site-name a:hover { text-decoration: underline; }
.descriptor { margin: .25rem 0 0; color: var(--secondary); font-size: .9375rem; }
.breadcrumbs { margin: 0; font-size: .875rem; color: var(--secondary); padding: .75rem 0; }
.breadcrumbs a { color: var(--secondary); }

/* --- Typography --- */
h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -.035em;
    line-height: 1.08;
    margin: 0 0 .5rem;
}
h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.293rem;
    font-weight: 400;
    margin: 2rem 0 .5rem;
}
.aside { color: var(--secondary); font-size: .9375rem; margin: 0 0 .75rem; }
.meta-line { color: var(--secondary); font-size: .9375rem; margin: .5rem 0; }
.meta-line--spaced { margin-top: 1.5rem; }
.source-note { font-size: .875rem; color: var(--secondary); margin: .5rem 0; }

/* --- Tables --- */
table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
th { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--rule); font-weight: 600; color: var(--ink); }
td { padding: .5rem .75rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
tr:hover { background: var(--highlight); }

/* --- Candidate cards --- */
.candidate-card { padding: .75rem 0; border-bottom: 1px solid var(--rule); }
.candidate-card:first-of-type { border-bottom: none; }
.candidate-card .name { font-size: 1.125rem; font-weight: 500; }
.candidate-card .name a { color: var(--ink); text-decoration: none; }
.candidate-card .name a:hover { text-decoration: underline; }
.candidate-card .meta { font-size: .875rem; color: var(--secondary); }

/* --- Finance box --- */
.finance-box { background: var(--highlight); border-radius: 4px; padding: .75rem 1rem; margin: .5rem 0; font-size: .9375rem; }
.finance-box strong { font-weight: 600; }
.finance-box .label { color: var(--secondary); display: inline-block; min-width: 7rem; }

/* --- Deep-dive sections --- */
.dive-section { padding-top: .25rem; }
.dive-section h2 { margin-top: 1rem; }
.dive-section p { margin: .25rem 0 .75rem; }
.dive-section .empty-state { color: var(--secondary); font-style: italic; }

/* --- Riding list grid --- */
.riding-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .25rem; padding: 0; }
.riding-list li { list-style: none; padding: .35rem .5rem; font-size: .9375rem; border-bottom: 1px solid var(--rule); }
.riding-list li a { color: var(--ink); text-decoration: none; display: block; }
.riding-list li a:hover { text-decoration: underline; }
.riding-list .count { color: var(--secondary); font-size: .8125rem; }

/* --- Sponsor list --- */
.sponsor-list { columns: 20rem 2; column-gap: 2rem; padding: 0; margin: .5rem 0; }
.sponsor-list li { list-style: none; padding: .2rem 0; font-size: .9375rem; break-inside: avoid; }
.sponsor-count { font-size: .9375rem; color: var(--secondary); }
.guardrail { background: var(--highlight); border-radius: 4px; padding: 1rem; margin: 1rem 0; font-size: .9375rem; }
.guardrail p { margin: 0; }

/* --- Links --- */
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .25em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }

/* --- Footer --- */
footer { border-top: 1px solid var(--rule); padding-top: 1.5rem; margin-top: 2rem; font-size: .875rem; color: var(--secondary); max-width: 42rem; }
footer p { margin: 0; }

/* --- Responsive breakpoints --- */
@media (max-width: 48rem) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.125rem; }
    .riding-list { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
    .sponsor-list { columns: 1; }
}

@media (max-width: 38rem) {
    h1 { font-size: 1.45rem; }
    h2 { font-size: 1.0625rem; }
    .riding-list { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
}

@media (max-width: 30rem) {
    h1 { font-size: 1.35rem; }
    h2 { font-size: 1rem; }
    .riding-list { grid-template-columns: 1fr; }
    .page { padding: 0 16px; }
    .site-name { font-size: 1rem; gap: .5rem; }
    .candidate-card .name { font-size: 1rem; }
    table { font-size: .8125rem; }
    th, td { padding: .4rem .5rem; }
}

/* --- Print --- */
@media print {
    body { background: white; color: black; }
}