/* ============================================================
   Voxt — Custom Styles
   Teal primary · Pale off-white background · Civic trust
   ============================================================ */

:root {
    --voxt-teal:       #0d9488;
    --voxt-teal-dark:  #0f766e;
    --voxt-teal-light: #14b8a6;
    --voxt-bg:         #fafaf8;
    --voxt-text:       #1c1917;
    --voxt-muted:      #78716c;
    --voxt-border:     #e7e5e4;
}

/* ── Base ── */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--voxt-bg);
    color: var(--voxt-text);
}

h1, h2, h3, h4, h5, h6,
.navbar-brand {
    font-family: 'Public Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
}

a { color: var(--voxt-teal); }
a:hover { color: var(--voxt-teal-dark); }

/* ── Bootstrap overrides ── */

.btn-primary {
    background-color: var(--voxt-teal);
    border-color: var(--voxt-teal);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--voxt-teal-dark);
    border-color: var(--voxt-teal-dark);
}
.btn-outline-primary {
    color: var(--voxt-teal);
    border-color: var(--voxt-teal);
}
.btn-outline-primary:hover {
    background-color: var(--voxt-teal);
    border-color: var(--voxt-teal);
    color: #fff;
}

.bg-primary { background-color: var(--voxt-teal) !important; }
.text-primary { color: var(--voxt-teal) !important; }

.bg-voxt {
    background-color: var(--voxt-teal) !important;
}

.navbar-brand { font-size: 1.4rem; letter-spacing: .02em; }

/* ── Cards ── */

.card {
    border: 1px solid var(--voxt-border);
    border-radius: .5rem;
}

.card-issue { transition: box-shadow .15s ease; }
.card-issue:hover { box-shadow: 0 2px 12px rgba(0,0,0,.08); }

/* ── Badges ── */

.badge { font-weight: 500; font-size: .75rem; }

/* ── Debate columns ── */

.debate-col-for    { border-left: 4px solid #16a34a; }
.debate-col-against { border-left: 4px solid #dc2626; }

.argument-card {
    border-left: 3px solid var(--voxt-border);
    padding: .75rem 1rem;
    margin-bottom: .75rem;
    background: #fff;
    border-radius: .25rem;
}
.argument-card.for    { border-left-color: #16a34a; }
.argument-card.against { border-left-color: #dc2626; }

/* ── Vote / poll bars ── */

.result-bar {
    height: 1.6rem;
    border-radius: .25rem;
    background-color: #e5e7eb;
    overflow: hidden;
    margin-bottom: .5rem;
}
.result-bar .fill {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 .5rem;
    font-size: .75rem;
    color: #fff;
    font-weight: 500;
    transition: width .4s ease;
    min-width: fit-content;
}
.fill-for     { background-color: #16a34a; }
.fill-against { background-color: #dc2626; }
.fill-abstain { background-color: #78716c; }
.fill-option  { background-color: var(--voxt-teal); }

/* ── Share buttons ── */

.share-buttons .btn { padding: .15rem .5rem; font-size: .75rem; }

/* ── Hero section ── */

.hero {
    background: linear-gradient(135deg, var(--voxt-teal) 0%, var(--voxt-teal-dark) 100%);
    color: #fff;
    padding: 3rem 0;
    margin: -1.5rem -12px 2rem -12px;
    border-radius: 0;
}
.hero h1 { font-weight: 700; }

/* ── Scope colours (matching badge colours) ── */

.scope-local    { color: #16a34a; }
.scope-regional { color: #0891b2; }
.scope-nation   { color: #ca8a04; }
.scope-national { color: var(--voxt-teal); }

/* ── Admin sidebar ── */

.admin-sidebar .nav-link {
    color: var(--voxt-text);
    padding: .4rem .75rem;
    border-radius: .25rem;
    font-size: .9rem;
}
.admin-sidebar .nav-link:hover { background: #f5f5f4; }
.admin-sidebar .nav-link.active {
    background: var(--voxt-teal);
    color: #fff;
}

/* ── Misc ── */

.text-muted { color: var(--voxt-muted) !important; }

.breadcrumb { font-size: .875rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--voxt-muted); }

footer { font-size: .9rem; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }

.embed-body { background: #fff; padding: 1rem; }
.embed-body .voxt-link {
    display: block;
    text-align: center;
    margin-top: .75rem;
    font-size: .8rem;
}

/* ── Responsive ── */

@media (max-width: 767.98px) {
    .hero { padding: 2rem 0; }
    .hero h1 { font-size: 1.5rem; }
}