/* ==========================================================================
   Ayiti Sitwayen — Unified design system layer (theme.css)
   Loaded AFTER styles.css and after any per-page <style> block, so these
   rules win at equal specificity. One token set, one visual language:
   black & white editorial, hairline borders, square corners, Inter with
   real light weights, and a single signature accent — the Haitian flag
   blue→red gradient thread.
   ========================================================================== */

:root {
    color-scheme: light;

    /* Accent (flag thread) */
    --accent-blue: #1e40af;
    --accent-red: #dc2626;
    --accent-gradient: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-red) 100%);

    /* Semantic feedback */
    --ok-bg: #f0fdf4;
    --ok-border: #16a34a;
    --ok-ink: #14532d;
    --bad-bg: #fef2f2;
    --bad-border: #dc2626;
    --bad-ink: #7f1d1d;
    --warn-bg: #fffbeb;
    --warn-border: #d97706;
    --warn-ink: #78350f;

    /* Layout */
    --nav-h: 76px;
    --measure: 70ch;

    /* Motion */
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --dur-1: 160ms;
    --dur-2: 240ms;
}

/* --------------------------------------------------------------------------
   Motion discipline: smooth scroll only when the user allows motion,
   and a global kill switch for reduced motion.
   -------------------------------------------------------------------------- */
html {
    scroll-behavior: auto;
    scroll-padding-top: calc(var(--nav-h) + 16px);
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

[id] {
    scroll-margin-top: calc(var(--nav-h) + 16px);
}

::selection {
    background: var(--accent-blue);
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   Focus: one visible, high-contrast keyboard focus ring everywhere.
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

.footer :focus-visible,
.research-highlight :focus-visible,
.period-separator :focus-visible {
    outline-color: #ffffff;
}

.contact-form input:focus,
.contact-form textarea:focus,
.search-box:focus {
    outline: none;
    border-color: var(--black);
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.search-box:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Skip link — first tabbable element on every page */
.skip-link {
    position: absolute;
    left: 16px;
    top: 12px;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: var(--black);
    color: var(--white);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    transform: translateY(-200%);
}

.skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid var(--white);
    outline-offset: -6px;
}

/* --------------------------------------------------------------------------
   Typography: real light weights (variable Inter is now loaded),
   balanced headings, tabular numbers, comfortable measure.
   -------------------------------------------------------------------------- */
body {
    line-height: 1.65;
    font-optical-sizing: auto;
}

h1, h2, h3, h4 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

.hero-title {
    font-weight: 275;
    font-size: clamp(2.875rem, 7vw, 4.5rem);
    letter-spacing: -0.035em;
}

.stat-number {
    font-variant-numeric: tabular-nums;
}

.hero .stat-number {
    font-weight: 200;
}

.page-title {
    font-weight: 300;
    font-size: clamp(2.25rem, 5.5vw, 3rem);
}

.section-title {
    font-weight: 300;
}

/* Comfortable reading measure on long-form prose */
.legal-content,
.about-text,
.research-text,
.ref-section p,
.ref-section li,
.accordion-body,
.step-box p,
.note-box,
.finding-box {
    max-width: var(--measure);
}

/* Tables read as data */
.results-table,
.ref-table {
    font-variant-numeric: tabular-nums;
}

.results-table th,
.results-table td,
.ref-table th,
.ref-table td {
    vertical-align: top;
}

/* --------------------------------------------------------------------------
   Navbar: slimmer, calmer, consistent height for scroll offsets.
   -------------------------------------------------------------------------- */
.navbar {
    padding: 0.875rem 0;
    min-height: var(--nav-h);
    display: flex;
    align-items: center;
}

.navbar .container {
    width: 100%;
}

.nav-brand .logo {
    height: 44px;
}

.nav-links a {
    padding: 0.625rem 0.125rem;
    transition: color var(--dur-1) var(--ease);
}

.nav-links a.active {
    color: var(--black);
}

.lang-switch {
    min-height: 36px;
    min-width: 44px;
    padding: 0.4rem 0.9rem;
    transition: background-color var(--dur-1) var(--ease);
}

.nav-toggle {
    min-width: 44px;
    min-height: 44px;
    display: none;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    .nav-links {
        top: 100%;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    }

    .nav-links a {
        width: 100%;
        padding: 0.625rem 0;
    }
}

/* --------------------------------------------------------------------------
   Buttons & links: explicit transitions (no transition: all), honest
   hover/active states, minimum target sizes.
   -------------------------------------------------------------------------- */
.cta-button,
.submit-button,
.social-links a {
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.education-card {
    position: relative;
    transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}

.education-card a {
    transition: opacity var(--dur-1) var(--ease);
    padding: 0.25rem 0;
}

/* Whole card is the tap target; the "Li plis" link stretches over it */
.education-card a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.mission-card {
    transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}

.footer-section ul li a {
    display: inline-block;
    padding: 0.125rem 0;
    transition: color var(--dur-1) var(--ease);
}

/* Footer contrast (WCAG 1.4.3 on the near-black footer) */
.footer-bottom {
    color: #a3a3a3;
}

/* Homepage: former inline styles */
.about-media {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background-color: var(--gray-100);
}

.about-media img {
    max-width: 260px;
    width: 100%;
    height: auto;
}

.team-intro {
    text-align: center;
    font-size: 1.125rem;
    color: var(--gray-600);
    margin: 0 auto 3rem auto;
    max-width: 720px;
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Contact form: visible labels above fields, calm errors.
   -------------------------------------------------------------------------- */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-field label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-600);
}

.contact-form input:user-invalid,
.contact-form textarea:user-invalid {
    border-color: var(--bad-border);
}

/* ==========================================================================
   LEARNING PAGES — unify the interactive template with the site identity.
   Square corners, hairline borders, no drop-shadow chrome, flag-gradient
   progress. Overrides the per-page <style> blocks.
   ========================================================================== */

.learning-page {
    background: var(--white);
    padding: 0 0 4rem 0;
}

/* Progress bar sits below the sticky navbar and shows the flag thread */
.progress-bar-container {
    top: var(--nav-h);
    box-shadow: none;
    border-bottom: 1px solid var(--gray-200);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.progress-bar {
    height: 4px;
    border-radius: 0;
    background: var(--gray-200);
}

.progress-fill {
    background: var(--accent-gradient);
    transition: width var(--dur-2) var(--ease);
}

.progress-text {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-600);
}

/* Learning hero — same editorial voice as the homepage hero */
.learning-hero {
    background: var(--white);
    border: none;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 0;
    padding: 4rem 1rem 3.5rem 1rem;
    margin-bottom: 3rem;
}

.learning-hero h1 {
    font-weight: 300;
    font-size: clamp(2.25rem, 5.5vw, 3.25rem);
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.learning-hero h1::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: var(--accent-gradient);
    margin: 1.5rem auto 0 auto;
}

.learning-hero .subtitle {
    font-size: 1.25rem;
    color: var(--gray-600);
    opacity: 1;
    margin-bottom: 1rem;
}

.learning-hero .question {
    font-size: 1.0625rem;
    font-style: normal;
    color: var(--gray-500);
    opacity: 1;
}

/* Accordions — hairline cards, real disclosure affordance */
.accordion-item {
    border: 1px solid var(--gray-300);
    border-radius: 0;
    box-shadow: none;
    transition: border-color var(--dur-1) var(--ease);
}

.accordion-item:hover {
    box-shadow: none;
    border-color: var(--black);
}

.accordion-header {
    font-size: 1.125rem;
    font-weight: 600;
    transition: background-color var(--dur-1) var(--ease);
    gap: 1rem;
}

.accordion-header:hover,
.accordion-header.active {
    background: var(--gray-50);
}

.accordion-icon {
    font-size: 0.875rem;
    color: var(--gray-500);
    transition: transform var(--dur-2) var(--ease);
}

.accordion-content {
    transition: max-height var(--dur-2) var(--ease);
}

.accordion-body {
    padding: 0.25rem 1.5rem 1.75rem 1.5rem;
    line-height: 1.7;
    color: var(--gray-700);
}

/* Cards inside learning pages */
.rights-card,
.info-card,
.challenge-card,
.comparison-item,
.action-card,
.principle-card,
.branch,
.timeline-content {
    border-radius: 0;
    box-shadow: none;
    border: 1px solid var(--gray-300);
    transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}

.rights-card {
    border-top: 3px solid var(--black);
}

.rights-card:hover,
.info-card:hover,
.action-card:hover,
.principle-card:hover,
.branch:hover,
.timeline-content:hover {
    box-shadow: none;
    border-color: var(--black);
    transform: translateY(-2px);
}

.challenge-card {
    border-left: 3px solid var(--gray-500);
}

.comparison-item.passive {
    border-left: 3px solid var(--gray-500);
}

.comparison-item.active {
    border-left: 3px solid var(--accent-blue);
}

.highlight-box {
    border-radius: 0;
    box-shadow: none;
}

/* Quiz — bordered, keyboard-friendly, feedback never color-only */
.quiz-container,
.quiz {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-left: 3px solid var(--accent-blue);
    border-radius: 0;
    box-shadow: none;
}

.quiz-option {
    border-radius: 0;
    border: 1px solid var(--gray-300);
    background: var(--white);
    transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
    font: inherit;
    color: inherit;
    text-align: left;
    width: 100%;
    display: block;
    line-height: 1.6;
}

.quiz-option:hover {
    border-color: var(--black);
    background: var(--gray-50);
}

.quiz-option.correct {
    border-color: var(--ok-border);
    background: var(--ok-bg);
    color: var(--ok-ink);
}

.quiz-option.incorrect {
    border-color: var(--bad-border);
    background: var(--bad-bg);
    color: var(--bad-ink);
}

.quiz-option:disabled {
    cursor: default;
    opacity: 1;
}

.quiz-option:disabled:not(.correct):not(.incorrect) {
    color: var(--gray-500);
}

.quiz-feedback {
    border-radius: 0;
    font-weight: 500;
    margin-top: 1rem;
    padding: 1rem;
}

.quiz-feedback.correct {
    background: var(--ok-bg);
    color: var(--ok-ink);
    border: 1px solid var(--ok-border);
}

.quiz-feedback.incorrect {
    background: var(--bad-bg);
    color: var(--bad-ink);
    border: 1px solid var(--bad-border);
}

.quiz-submit {
    border-radius: 2px;
    background: var(--black);
    border: 1px solid var(--black);
    min-height: 44px;
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.quiz-submit:hover {
    background: var(--gray-800);
    transform: none;
    box-shadow: none;
}

.quiz-submit:disabled {
    background: var(--gray-300);
    border-color: var(--gray-300);
    color: var(--gray-600);
    cursor: default;
}

/* Reflection + completion */
.reflection-box textarea {
    border-radius: 0;
    border: 1px solid var(--gray-300);
    font-family: inherit;
}

.completion-badge {
    border-radius: 0;
    background: var(--gray-50);
    border: 1px solid var(--black);
}

/* Prev/next lesson buttons */
.nav-buttons {
    flex-wrap: wrap;
}

.nav-button {
    border-radius: 2px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.nav-button.primary {
    background: var(--black);
    border: 1px solid var(--black);
}

.nav-button.primary:hover {
    background: var(--gray-800);
    transform: none;
}

.nav-button.secondary {
    background: var(--white);
    color: var(--black);
    border: 1px solid var(--gray-400);
}

.nav-button.secondary:hover {
    background: var(--gray-50);
    border-color: var(--black);
    transform: none;
}

/* ==========================================================================
   GLOSSARY — same system; buttons are real buttons.
   ========================================================================== */
.search-box {
    border: 1px solid var(--gray-300);
    transition: border-color var(--dur-1) var(--ease);
}

.filter-btn,
.alphabet-btn {
    min-height: 40px;
    border-radius: 0;
    transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.filter-btn {
    min-height: 44px;
    padding: 0.5rem 1.125rem;
}

.alphabet-btn {
    min-width: 40px;
}

.glossary-heading {
    margin: 0;
}

.glossary-term-name {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 0.25rem;
}

.glossary-header-item {
    font: inherit;
    color: inherit;
    text-align: left;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease);
}

.glossary-icon {
    font-size: 0.875rem;
    color: var(--gray-500);
    transition: transform var(--dur-2) var(--ease);
}

.glossary-item.active .glossary-icon {
    transform: rotate(180deg);
}

.related-link {
    font: inherit;
    background: var(--white);
    border: 1px solid var(--gray-300);
    padding: 0.375rem 0.75rem;
    min-height: 32px;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}

.related-link:hover {
    border-color: var(--black);
    background: var(--gray-50);
}

/* ==========================================================================
   ELECTION HISTORY — keyboard-accessible timeline.
   ========================================================================== */
.election-header {
    transition: background-color var(--dur-1) var(--ease);
}

.election-header:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: -2px;
}

.election-card {
    transition: border-color var(--dur-1) var(--ease);
}

.election-card:hover {
    border-color: var(--gray-500);
}

.election-card::before {
    box-shadow: 0 0 0 2px var(--gray-300);
}

.election-card.cancelled::before {
    background: var(--accent-red);
}

.election-card.fraudulent::before {
    background: var(--warn-border);
}

.expand-icon {
    font-size: 0.875rem;
    transition: transform var(--dur-2) var(--ease);
}

.election-details {
    transition: max-height var(--dur-2) var(--ease);
}

.controversy-box {
    background: var(--warn-bg);
    border-left: 3px solid var(--warn-border);
}

.controversy-box h4,
.controversy-box p,
.controversy-box ul {
    color: var(--warn-ink);
}

.violence-box {
    background: var(--bad-bg);
    border-left: 3px solid var(--bad-border);
}

.violence-box h4,
.violence-box p,
.violence-box ul {
    color: var(--bad-ink);
}

/* Sources: links must look like links */
.sources a {
    color: var(--gray-700);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--dur-1) var(--ease);
}

.sources a:hover {
    color: var(--black);
    opacity: 1;
}

/* Research notes */
.finding-box {
    border-left: 3px solid var(--accent-blue);
    background: var(--gray-50);
}

.chart-img {
    border: 1px solid var(--gray-200);
}

/* --------------------------------------------------------------------------
   Breadcrumbs (with BreadcrumbList structured data)
   -------------------------------------------------------------------------- */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--gray-500);
    margin: 1.25rem 0 1.75rem 0;
}

.breadcrumb a {
    color: var(--gray-600);
    text-decoration: none;
    padding: 0.25rem 0;
    border-bottom: 1px solid transparent;
    transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.breadcrumb a:hover {
    color: var(--black);
    border-bottom-color: var(--black);
}

.breadcrumb [aria-current="page"] {
    color: var(--black);
    font-weight: 500;
}

.crumb-sep {
    color: var(--gray-400);
}

/* ==========================================================================
   Print: civic guides are meant to be printed and shared.
   ========================================================================== */
@media print {
    .navbar,
    .skip-link,
    .progress-bar-container,
    .nav-buttons,
    .footer,
    .lang-switch,
    .filter-bar,
    .filter-container,
    .alphabet-nav,
    .search-container,
    .breadcrumb,
    .cta-button {
        display: none !important;
    }

    body {
        color: #000;
    }

    .accordion-content,
    .election-details {
        max-height: none !important;
        overflow: visible !important;
    }

    .accordion-item,
    .election-card,
    .step-box,
    .note-box {
        break-inside: avoid;
        border: 1px solid #999;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.75em;
        color: #555;
    }
}

/* ==========================================================================
   Small screens: compact paddings, no horizontal scroll at 320px.
   ========================================================================== */
@media (max-width: 480px) {
    .hero {
        padding: 4.5rem 0 3.5rem 0;
    }

    .hero-stats {
        gap: 1.75rem;
    }

    section {
        padding: 3.5rem 0;
    }

    .learning-hero {
        padding: 2.75rem 1rem 2.5rem 1rem;
    }

    .accordion-header {
        padding: 1.125rem 1.25rem;
    }

    .accordion-body {
        padding: 0.25rem 1.25rem 1.5rem 1.25rem;
    }

    .nav-buttons {
        flex-direction: column;
    }

    .nav-button {
        text-align: center;
        justify-content: center;
    }
}