/* ---------------------------------------------------------------------------
 * config.css - shared design tokens + site-wide base rules.
 *
 * Loaded by BOTH base templates (config/templates/base.html and
 * content/templates/content/base.html). Until now every template carried its
 * own inline <style> and the :root tokens lived only inside content/base.html,
 * so the home-side templates (home, about, library, explainer, search) could
 * not use them and hardcoded the hex literals instead. Centralising the tokens
 * here lets every page share one palette; new work should reference
 * var(--token) rather than re-typing the hex.
 *
 * Token names mirror the set that content/base.html already established, so its
 * existing rules keep working unchanged.
 * ------------------------------------------------------------------------- */

:root {
    /* surfaces */
    --sand: #e8dcc8;
    --sand-light: #f6f0e6;
    --card-bg: #fff;

    /* brand */
    --terracotta: #c1684a;
    --terracotta-dark: #9c4f37;
    --crater-blue: #2b5d6e;
    --olive: #6b7a4f;
    --gold: #d9a441;

    /* ink */
    --ink: #2e2a24;
    --ink-soft: #57514a;

    /* depth */
    --shadow: 0 4px 18px rgba(46, 42, 36, 0.08);
    --shadow-lg: 0 10px 34px rgba(46, 42, 36, 0.16);

    /* type */
    --font: "Heebo", "Assistant", "Segoe UI", Arial, sans-serif;

    /* focus ring (brand-coloured, replaces the default browser blue) */
    --focus-ring: 3px solid var(--crater-blue);
    --focus-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Keyboard focus - visible on every interactive element.
 *
 * The tiles are <button border:none> and the nav/CTA links only defined
 * :hover, so keyboard users previously got either no ring or the suppressed
 * UA default. :focus-visible shows the ring for keyboard/AT users without
 * adding an outline on mouse click.
 * ------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
    border-radius: inherit;
}

/* Honour reduced-motion globally for any CSS transition/animation. Individual
 * templates may still opt specific elements out; this is the safety net. */
@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;
    }
}

/* ---------------------------------------------------------------------------
 * Project card - shared component (_project_card.html). Used on the projects
 * index, the stage board, and the "projects in this goal" strip on per-SDG
 * list pages, so the styling lives here rather than in any one template.
 * ------------------------------------------------------------------------- */
.proj-card {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s;
}
.proj-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.proj-card .pc-img {
    height: 150px;
    background: var(--sand-light) center / cover no-repeat;
    flex: none;
}
.proj-card .pc-body {
    padding: 15px 17px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.proj-card h2 {
    margin: 0;
    font-size: 1.12rem;
    color: var(--crater-blue);
}
.proj-card .pc-summary {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.proj-card .stage-chip {
    align-self: flex-start;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 999px;
    background: #fff;
    color: var(--terracotta-dark);
    border: 1px solid var(--terracotta);
}
.proj-card .pc-sdgs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: auto;
}
.proj-card .pc-sdgs .s {
    font-size: 0.7rem;
    font-weight: 700;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}