/* Landscape Fire Governance Framework — self-assessment
   Custom layer on top of Bootstrap 5. Palette tells the story the framework
   does: from fire risk (ember reds) toward managed resilience (greens). */

:root {
    --lfgf-ink:      #16211f;   /* near-black forest */
    --lfgf-slate:    #2b3a38;
    --lfgf-paper:    #f5f4f0;   /* warm neutral, not cream */
    --lfgf-card:     #ffffff;
    --lfgf-line:     #e3e1da;
    --lfgf-muted:    #6b7370;
    --lfgf-ember:    #e2571e;   /* accent, used sparingly */
    --lfgf-amber:    #f4a024;
    --lfgf-green:    #2e7d4f;

    /* stage colours (shared with PHP stage_color) */
    --stage-no_data: #9aa0a6;
    --stage-no:      #8a8f94;
    --stage-plan:    #d7472b;
    --stage-act:     #e8761e;
    --stage-check:   #e0a52e;
    --stage-adjust:  #7fa650;
    --stage-ok:      #2e7d4f;

    --lfgf-radius: 14px;
}

body {
    background: var(--lfgf-paper);
    color: var(--lfgf-ink);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-feature-settings: "cv05", "ss01";
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .display-title {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    letter-spacing: -0.02em;
}

.code-font, .resume-code {
    font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

a { color: var(--lfgf-green); }
a:hover { color: var(--lfgf-ink); }

/* ---- top bar ---------------------------------------------------------- */
.lfgf-topbar {
    background: var(--lfgf-ink);
    color: #fff;
}
.lfgf-topbar .brand-mark {
    width: 30px; height: 30px; border-radius: 8px;
    background: linear-gradient(135deg, var(--lfgf-amber), var(--lfgf-ember) 60%, var(--lfgf-green));
    display: inline-block;
}
.lfgf-topbar a { color: #fff; }
.lfgf-topbar .form-select-sm {
    background-color: rgba(255,255,255,.08);
    color: #fff; border-color: rgba(255,255,255,.2);
}

/* ---- hero ------------------------------------------------------------- */
.lfgf-hero {
    position: relative;
    /* Conference title image, with a dark scrim that is strongest on the
       left (where the text sits) and fades to the right so the colourful
       mark still shows through. Image lives in /img (sibling of /assets). */
    background-color: var(--lfgf-ink);
    background-image:
        linear-gradient(90deg,
            rgba(18,27,25,.94) 0%,
            rgba(18,27,25,.88) 38%,
            rgba(18,27,25,.62) 72%,
            rgba(18,27,25,.45) 100%),
        url("../img/titlebg.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center center, right center;
    background-size: cover, cover;
    color: #fff;
    border-radius: var(--lfgf-radius);
    overflow: hidden;
}
/* keep every line of hero text crisp against the busy artwork */
.lfgf-hero .eyebrow,
.lfgf-hero h1,
.lfgf-hero p {
    text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
.lfgf-hero .eyebrow {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .72rem;
    color: var(--lfgf-amber);
    font-weight: 600;
}

/* ---- cards ------------------------------------------------------------ */
.card {
    border: 1px solid var(--lfgf-line);
    border-radius: var(--lfgf-radius);
    background: var(--lfgf-card);
}
.btn-ember {
    background: var(--lfgf-ember); border-color: var(--lfgf-ember); color: #fff;
}
.btn-ember:hover { background: #c8480f; border-color: #c8480f; color: #fff; }
.btn-ink { background: var(--lfgf-ink); border-color: var(--lfgf-ink); color:#fff; }
.btn-ink:hover { background: #0c1413; color:#fff; }

/* ---- checklist sections ---------------------------------------------- */
.group-eyebrow {
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .72rem;
    font-weight: 600;
    color: var(--lfgf-ember);
}
.section-title { font-size: 1.15rem; }

.item-row {
    border-top: 1px solid var(--lfgf-line);
    padding: 1rem 0;
}
.item-row:first-child { border-top: none; }
.item-row.is-na { opacity: .55; }

.item-text { font-size: .98rem; line-height: 1.45; }

.ref-pill {
    font-size: .7rem;
    background: #e9f3ff;
    color: #1a6dbd;
    border: 1px solid #cfe5fb;
    border-radius: 999px;
    padding: .05rem .5rem;
    cursor: pointer;
    white-space: nowrap;
}
.ref-pill:hover { background: #d7ebff; }

/* range slider */
.slider-wrap { min-width: 0; }
input[type="range"].lfgf-slider {
    width: 100%;
    accent-color: var(--lfgf-ember);
    height: 1.4rem;
}
.val-badge {
    font-variant-numeric: tabular-nums;
    min-width: 3.2rem;
    text-align: center;
}
.anchor-row {
    font-size: .72rem; color: var(--lfgf-muted);
    display: flex; justify-content: space-between;
}

.stage-chip {
    font-size: .7rem; font-weight: 600;
    border-radius: 999px; padding: .1rem .55rem; color:#fff;
    white-space: nowrap;
}

/* ---- sticky scoreboard ------------------------------------------------ */
.scoreboard {
    position: sticky; top: 0; z-index: 1020;
    background: rgba(245,244,240,.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--lfgf-line);
}
.score-bar {
    height: 8px; border-radius: 999px; background: var(--lfgf-line); overflow: hidden;
}
.score-bar > span { display:block; height:100%; border-radius:999px; transition: width .25s ease; }

/* ---- signature: maturity gauge --------------------------------------- */
.gauge { position: relative; width: 132px; height: 132px; }
.gauge svg { transform: rotate(-90deg); }
.gauge .gauge-num {
    position: absolute; inset: 0; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
}
.gauge .gauge-num .n {
    font-family: "Space Grotesk", sans-serif; font-size: 2rem; font-weight: 600;
    line-height: 1;
}
.gauge .gauge-num .l { font-size:.7rem; color: var(--lfgf-muted); text-transform: uppercase; letter-spacing:.1em;}

/* ---- report bars ------------------------------------------------------ */
.report-bar { height: 12px; border-radius: 999px; background: var(--lfgf-line); overflow:hidden; }
.report-bar > span { display:block; height:100%; border-radius:999px; }

.section-jump a { color: var(--lfgf-muted); text-decoration: none; font-size:.85rem;}
.section-jump a:hover { color: var(--lfgf-ink); }

@media (max-width: 575.98px) {
    .gauge { width: 108px; height: 108px; }
    .val-badge { min-width: 2.8rem; }
}