/*
 * Copyright (C) 2026 Worth Considering Ltd
 *
 * This file is part of kibuye.org.
 *
 * kibuye.org is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * kibuye.org is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with kibuye.org. If not, see <https://www.gnu.org/licenses/>.
 *
 * HISTORY:
 *   1.0.0: Initial generation
 */

/* ── Seed: Lake Kivu teal H=178, S=45%, L=38% ── */
:root {
    --seed-h: 178;
    --seed-s: 45%;
    --seed-l: 38%;

    --bg-primary:    hsl(178,  5%, 96%);
    --bg-secondary:  hsl(178,  5%, 92%);
    --bg-tertiary:   hsl(178,  5%, 88%);
    --text-primary:  hsl(  0,  0%, 10%);
    --text-secondary:hsl(  0,  0%, 24%);
    --text-muted:    hsl(  0,  0%, 36%);
    --accent:        hsl(178, 45%, 38%);
    --accent-light:  hsl(178, 45%, 48%);
    --accent-dark:   hsl(178, 45%, 28%);
    --link-color:    hsl(178, 45%, 33%);
    --link-visited:  hsl(238, 45%, 38%);
    --link-hover:    hsl(178, 45%, 23%);
    --color-error:          hsl(  0, 70%, 45%);
    --color-success:        hsl(120, 50%, 35%);
    --color-warning:        hsl( 45, 80%, 40%);

    /* Sharp corners — formal register */
    --radius-default: var(--radius-none);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary:     hsl(178,  8%, 10%);
        --bg-secondary:   hsl(178,  8%, 14%);
        --bg-tertiary:    hsl(178,  8%, 18%);
        --text-primary:   hsl(  0,  0%, 92%);
        --text-secondary: hsl(  0,  0%, 76%);
        --text-muted:     hsl(  0,  0%, 58%);
        --accent:         hsl(178, 40%, 52%);
        --accent-light:   hsl(178, 40%, 62%);
        --accent-dark:    hsl(178, 40%, 42%);
        --link-color:     hsl(178, 40%, 58%);
        --link-visited:   hsl(238, 40%, 62%);
        --link-hover:     hsl(178, 40%, 70%);
        --color-error:          hsl(  0, 40%, 20%);
        --color-success:        hsl(120, 40%, 20%);
        --color-warning:        hsl( 45, 40%, 20%);
    }
}

/* ── Smooth scrolling (CSS; no JS required) ── */
html {
    scroll-behavior: smooth;
}

/* ── Site header: teal bar ── */
header {
    background: var(--accent-dark);
    color: hsl(0, 0%, 96%);
}

header a,
header nav a {
    color: hsl(0, 0%, 96%);
}

header a:hover,
header nav a:hover {
    color: hsl(178, 60%, 85%);
    text-decoration: underline;
}

header a.site-title {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    text-decoration: none;
}

/* Active nav link */
header nav a[aria-current="page"] {
    border-bottom: 2px solid hsl(0, 0%, 96%);
    font-weight: 600;
}

/* ── Footer ── */
footer {
    font-size: var(--font-size-small);
    color: var(--text-muted);
    border-top: 1px solid var(--bg-tertiary);
}

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

footer .footer-licence-note {
    margin-top: var(--space-2);
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ── Breadcrumbs ── */
.breadcrumbs {
    font-size: var(--font-size-small);
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

.breadcrumbs a { color: var(--link-color); }
.breadcrumbs span { margin: 0 0.3em; }

/* ── Download link ── */
.download-link {
    display: inline-block;
    margin: var(--space-3) 0 var(--space-5);
    padding: var(--space-2) var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--bg-tertiary);
    color: var(--link-color);
    text-decoration: none;
    font-size: var(--font-size-small);
}

.download-link:hover {
    background: var(--bg-tertiary);
    text-decoration: underline;
}

/* ── Treaty document nav (sidebar on desktop, inline on mobile) ── */
.treaty-nav {
    font-size: var(--font-size-small);
}

.treaty-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.treaty-nav li { margin-bottom: var(--space-2); }

.treaty-nav a {
    color: var(--link-color);
    text-decoration: none;
}

.treaty-nav a:hover { text-decoration: underline; }

.treaty-nav a[aria-current="page"] {
    font-weight: 600;
    color: var(--text-primary);
}

/* On desktop: treaty layout uses sidebar */
@media (min-width: 900px) {
    .treaty-layout {
        display: grid;
        grid-template-columns: 16rem 1fr;
        gap: var(--space-6);
        align-items: start;
    }

    .treaty-sidebar {
        position: sticky;
        top: var(--space-5);
    }
}

@media (max-width: 899px) {
    .treaty-layout {
        display: block;
    }

    .treaty-sidebar {
        margin-bottom: var(--space-5);
        padding: var(--space-3);
        background: var(--bg-secondary);
        border: 1px solid var(--bg-tertiary);
    }
}

/* ── Draft status notice ── */
.notice-draft {
    padding: var(--space-3) var(--space-4);
    background: var(--bg-secondary);
    border-left: 3px solid var(--color-warning);
    margin-bottom: var(--space-5);
    font-size: var(--font-size-small);
    color: var(--text-secondary);
}

/* ── Data currency notice (members section) ── */
.notice-currency {
    padding: var(--space-3) var(--space-4);
    background: var(--bg-secondary);
    border-left: 3px solid var(--accent);
    margin-bottom: var(--space-5);
    font-size: var(--font-size-small);
    color: var(--text-secondary);
}

/* ── Canonical redirect notice ── */
.notice-canonical {
    padding: var(--space-4) var(--space-5);
    background: var(--bg-secondary);
    border: 1px solid var(--bg-tertiary);
    border-left: 3px solid var(--accent);
    margin: var(--space-6) 0;
    font-size: 1rem;
}

/* ── Country briefing sections ── */
.briefing-section {
    margin-bottom: var(--space-6);
}

.briefing-section h2 {
    border-bottom: 1px solid var(--bg-tertiary);
    padding-bottom: var(--space-2);
}

/* ── Members summary table ── */
.members-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-small);
    margin-bottom: var(--space-6);
}

.members-table th,
.members-table td {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--bg-tertiary);
    text-align: left;
    vertical-align: top;
}

.members-table th {
    background: var(--bg-secondary);
    font-weight: 600;
}

.members-table tr:nth-child(even) td {
    background: var(--bg-secondary);
}

/* ── Start-here navigation panel (home page) ── */
.start-here {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-4);
    margin: var(--space-6) 0;
}

.start-here-item {
    padding: var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--bg-tertiary);
    border-top: 3px solid var(--accent);
}

.start-here-item h2 {
    margin: 0 0 var(--space-2);
    font-size: 1rem;
}

.start-here-item p {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-small);
    color: var(--text-secondary);
}

.start-here-item a {
    font-size: var(--font-size-small);
    font-weight: 600;
}

/* ── Section index lists ── */
.section-index {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6);
}

.section-index li {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--bg-secondary);
}

.section-index li:last-child { border-bottom: none; }

.section-index a {
    font-weight: 500;
}

.section-index .doc-description {
    display: block;
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    margin-top: var(--space-1);
}

/* ── Dual-source pages (organisation): section labels ── */
.source-label {
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
}

/* ── Mobile nav toggle ── */
.nav-toggle {
    display: none;
}

@media (max-width: 600px) {
    .nav-toggle {
        display: inline-block;
    }

    nav.nav-collapsible {
        display: none;
    }

    nav.nav-collapsible.is-open {
        display: block;
    }
}

/* ── SVG map container ── */
.members-map {
    max-width: 480px;
    margin: var(--space-4) 0 var(--space-6);
    border: 1px solid var(--bg-tertiary);
    background: var(--bg-secondary);
    padding: var(--space-2);
}

.members-map img,
.members-map svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Contrast fix: links on bg-secondary surfaces (AA compliance) ──
   Default --link-color (L=33%) passes 4.62:1 on bg-primary but only 4.23:1
   on bg-secondary. L=31% gives 4.67:1, meeting AA on all backgrounds.     */
.notice-draft a,
.notice-currency a,
.notice-canonical a,
.treaty-sidebar a,
.start-here-item a,
.box a, .box-subtle a, .box-prominent a, .box-accent a {
    color: hsl(178, 45%, 31%);
}

@media (prefers-color-scheme: dark) {
    .notice-draft a,
    .notice-currency a,
    .notice-canonical a,
    .treaty-sidebar a,
    .start-here-item a,
    .box a, .box-subtle a, .box-prominent a, .box-accent a {
        color: hsl(178, 40%, 62%);
    }
}

/* ── Print styles ── */
@media print {
    header nav, footer, .treaty-sidebar, .nav-toggle, .download-link { display: none; }
    body { font-size: 11pt; color: #000; background: #fff; }
    a { color: #000; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}