/* =============================================================
   Kilimo Trust — public-facing brand skin

   Palette sampled from uploads/logo.png:
     green #008B43   lime #D3DC33   maroon #6E4239

   Loaded by partials/public_header.php only, so the admin keeps
   the stock Paces palette.

   Anything carrying text uses --kt-green-600 rather than the raw
   logo green: #008B43 on white is 4.40:1, just under the 4.5:1
   AA floor. The logo green stays on borders, icons and fills.
   ============================================================= */

:root {
    --kt-green:     #008B43;
    --kt-green-600: #00753A;  /* 5.82:1 on white */
    --kt-green-700: #006133;  /* 7.62:1 on white */
    --kt-green-800: #004A27;
    --kt-green-050: #E8F5ED;
    --kt-green-100: #CDE9D9;

    --kt-lime:      #D3DC33;
    --kt-lime-600:  #A8B01F;
    --kt-lime-050:  #FAFCE4;
    --kt-ink:       #1F2A12;  /* 10.05:1 on the lime */

    --kt-maroon:    #6E4239;  /* logo tagline */

    --kt-radius:    .75rem;
    --kt-nav-gap:   5.25rem;  /* sticky navbar height + breathing room */

    /* The Paces theme renames every Bootstrap custom property to --theme-*,
       so --bs-* resolves to nothing here. Components below use these aliases
       instead; the second fallback keeps the file usable on stock Bootstrap. */
    --kt-border:  var(--theme-border-color,  var(--bs-border-color,  #e7e9eb));
    --kt-surface: var(--theme-secondary-bg,  var(--bs-body-bg,       #ffffff));
    --kt-canvas:  var(--theme-body-bg,       var(--bs-body-bg,       #f6f7fb));
    --kt-text:    var(--theme-body-color,    var(--bs-body-color,    #4c4c5c));
    --kt-danger:  var(--theme-danger,        var(--bs-danger,        #dc3545));
}

/* ---------- Theme colour mapping ---------- */

:root,
html[data-bs-theme],
html[data-theme],
[data-bs-theme="light"] {
    --theme-primary:               var(--kt-green-600);
    --theme-primary-rgb:           0, 117, 58;
    --theme-primary-text-emphasis: var(--kt-green-700);
    --theme-primary-bg-subtle:     var(--kt-green-050);
    --theme-primary-border-subtle: var(--kt-green-100);
    --theme-link-color:            var(--kt-green-700);
    --theme-link-color-rgb:        0, 97, 51;
    --theme-link-hover-color:      var(--kt-green-800);
    --theme-focus-ring-color:      rgba(0, 139, 67, .3);
}

/* Button variants are compiled from Sass with the colour baked in, so the
   component vars have to be restated rather than inherited from the primary. */
.btn-primary {
    --theme-btn-bg:                  var(--kt-green-600);
    --theme-btn-border-color:        var(--kt-green-600);
    --theme-btn-hover-bg:            var(--kt-green-700);
    --theme-btn-hover-border-color:  var(--kt-green-700);
    --theme-btn-active-bg:           var(--kt-green-800);
    --theme-btn-active-border-color: var(--kt-green-800);
    --theme-btn-disabled-bg:         var(--kt-green-600);
    --theme-btn-disabled-border-color: var(--kt-green-600);
    --theme-btn-focus-shadow-rgb:    0, 139, 67;
}

.btn-outline-primary {
    --theme-btn-color:               var(--kt-green-700);
    --theme-btn-border-color:        var(--kt-green-600);
    --theme-btn-hover-bg:            var(--kt-green-600);
    --theme-btn-hover-border-color:  var(--kt-green-600);
    --theme-btn-hover-color:         #fff;
    --theme-btn-active-bg:           var(--kt-green-700);
    --theme-btn-active-border-color: var(--kt-green-700);
    --theme-btn-disabled-color:      var(--kt-green-600);
    --theme-btn-disabled-border-color: var(--kt-green-600);
    --theme-btn-focus-shadow-rgb:    0, 139, 67;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--kt-green);
    box-shadow: 0 0 0 .2rem rgba(0, 139, 67, .18);
}

.form-check-input:checked {
    background-color: var(--kt-green-600);
    border-color: var(--kt-green-600);
}

.form-check-input:focus {
    border-color: var(--kt-green);
    box-shadow: 0 0 0 .2rem rgba(0, 139, 67, .18);
}

/* The theme ships no rule for this, so required fields carried no marker. */
.form-label.required::after {
    content: " *";
    color: var(--kt-danger);
    font-weight: 700;
}

/* ---------- Illustrations ---------- */

.brand-illus {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin-inline: auto;
}

.brand-illus-lg { max-width: 380px; }

.kt-illus-band {
    background: linear-gradient(160deg, var(--kt-green-050) 0%, var(--kt-lime-050) 100%);
    padding: 1.75rem 1.5rem 1.5rem;
    border-bottom: 3px solid var(--kt-lime);
}

/* ---------- Full-bleed split screen ----------
   Tracking, programs and both logins run edge to edge: a brand panel carrying
   the illustration on the left, the form on the right. The panel carries no
   interactive content, so it is the first thing dropped on small screens. */

/* Inside <main class="d-flex"> this stretches to the full remaining viewport
   height; .kt-split-page wraps it on standalone pages that have no chrome. */
.kt-split {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
    width: 100%;
}

.kt-split-page {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

.kt-split-art,
.kt-split-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 100%;
    min-width: 0;
}

.kt-split-art {
    display: none;                /* phones and small tablets get the form only */
    padding: 2.5rem;
    color: #fff;
    background:
        radial-gradient(circle at 80% 12%, rgba(211, 220, 51, .22) 0%, transparent 45%),
        linear-gradient(155deg, var(--kt-green-800) 0%, var(--kt-green-600) 55%, var(--kt-green) 100%);
}

.kt-split-form {
    justify-content: center;
    padding: 2rem 1.25rem;
    background: var(--kt-surface);
}

@media (min-width: 992px) {
    .kt-split-art  { display: flex; flex: 1 1 50%; max-width: 50%; }
    .kt-split-form { flex: 1 1 50%; max-width: 50%; padding: 3rem; }
}

/* Keeps the form itself at a readable measure inside a half-viewport column */
.kt-split-inner {
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
}

/* Listing pages need more room for content than a sign-in form does */
.kt-split--wide .kt-split-inner { max-width: 64rem; }
.kt-split--wide .kt-split-form  { justify-content: flex-start; }

@media (min-width: 992px) {
    .kt-split--wide .kt-split-art  { flex: 1 1 36%; max-width: 36%; }
    .kt-split--wide .kt-split-form { flex: 1 1 64%; max-width: 64%; }
}

.kt-split-art .brand-illus {
    max-width: 22rem;
    margin-block: auto;
}

.kt-split-art h2 { color: #fff; }

.kt-split-art .kt-split-lead {
    color: rgba(255, 255, 255, .82);
}

.kt-split-art .kt-feature {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: .5rem 0;
}

.kt-split-art .kt-feature-ico {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .625rem;
    background: rgba(255, 255, 255, .12);
    color: var(--kt-lime);
    font-size: 1.125rem;
}

.kt-split-art .kt-feature-title { font-weight: 600; font-size: .9375rem; }
.kt-split-art .kt-feature-desc  { font-size: .8125rem; color: rgba(255, 255, 255, .72); }

.kt-split-art .kt-split-foot {
    margin-top: auto;
    padding-top: 1.5rem;
    font-size: .75rem;
    color: rgba(255, 255, 255, .6);
}

/* align-self stops the column's default stretch from distorting the logo */
.kt-split-art .kt-split-logo {
    align-self: flex-start;
    width: auto;
    background: #fff;
    border-radius: .5rem;
    padding: .5rem .625rem;
    margin-bottom: auto;
}

/* ---------- Apply page: sticky guide rail ---------- */

@media (min-width: 992px) {
    .apply-aside {
        position: sticky;
        top: var(--kt-nav-gap);
        max-height: calc(100vh - var(--kt-nav-gap) - 1.5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .apply-aside::-webkit-scrollbar { width: 6px; }
    .apply-aside::-webkit-scrollbar-thumb {
        background: var(--kt-green-100);
        border-radius: 3px;
    }

    /* The guide collapses behind a toggle on phones and is always open here,
       so one block of markup serves both layouts. */
    .kt-lg-open.collapse:not(.show) { display: block; }
    .kt-lg-open { height: auto !important; }
}

.kt-chev { transition: transform .2s ease; }
[aria-expanded="true"] .kt-chev { transform: rotate(180deg); }

/* ---------- Applicant type cards ---------- */

.type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 112px;
    padding: 1rem .75rem;
    border: 2px solid var(--kt-border);
    border-radius: var(--kt-radius);
    background: var(--kt-surface);
    color: var(--kt-text);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.type-card .type-ico {
    font-size: 1.75rem;
    line-height: 1;
    color: var(--kt-green);
}

.type-card .type-check {
    position: absolute;
    top: .5rem;
    right: .5rem;
    color: var(--kt-green-600);
    opacity: 0;
    transition: opacity .18s ease;
}

.type-card:hover {
    border-color: var(--kt-green);
    background: var(--kt-green-050);
}

.btn-check:checked + .type-card {
    border-color: var(--kt-green-600);
    background: var(--kt-green-050);
    box-shadow: inset 0 0 0 1px var(--kt-green-600);
}

.btn-check:checked + .type-card .type-check { opacity: 1; }

.btn-check:focus-visible + .type-card {
    outline: 3px solid var(--kt-lime);
    outline-offset: 2px;
}

/* ---------- Section headers ---------- */

.section-head {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding-bottom: .75rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--kt-border);
    color: var(--kt-green-700);
    font-weight: 700;
    font-size: .8125rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.section-head .section-ico {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    background: var(--kt-green-050);
    color: var(--kt-green-600);
    font-size: 1rem;
}

/* ---------- Requirement checklist ---------- */

.kt-req {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .625rem 0;
}

.kt-req + .kt-req { border-top: 1px solid var(--kt-border); }

.kt-req .kt-req-num {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: .125rem;
    border-radius: 50%;
    background: var(--kt-lime);
    color: var(--kt-ink);
    font-size: .75rem;
    font-weight: 700;
}

/* ---------- Misc ---------- */

.kt-accent-bar {
    height: 4px;
    background: linear-gradient(90deg, var(--kt-green) 0%, var(--kt-lime) 100%);
}

.kt-meta-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 0;
    font-size: .8125rem;
}

.kt-meta-row i { color: var(--kt-green-600); }

.letter-spacing-3 { letter-spacing: .3em; }

@media (prefers-reduced-motion: reduce) {
    .type-card,
    .type-card .type-check,
    .kt-chev { transition: none; }
}